refactor: change opening hours handling

fix: opening hours not updating
feat: lazy-load opening hours module
feat: add e2e tests for opening hours
refactor: migrate opening hours to on-push change detection
feat: show exact minutes in opening hours starting one hour before next change

frontend/app/cypress/integration/opening-hours.spec.ts

@@ -0,0 +1,141 @@
+describe('opening hours', () => {
+  beforeEach(function () {
+    cy.intercept('POST', 'https://mobile.server.uni-frankfurt.de/search', {
+      fixture: 'search/types/canteen/canteen-search-result.json',
+    }).as('search');
+  });
+
+  it('should specify relative closing time', () => {
+    cy.clock(new Date(2023, 9, 16, 15, 29), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt heute um 22:00');
+  });
+
+  it('should specify relative opening time', () => {
+    cy.clock(new Date(2023, 9, 16, 6, 29), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet heute um 08:30');
+  });
+
+  it('should specify soon opening time', () => {
+    cy.clock(new Date(2023, 9, 16, 8, 0), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet in 30 Minuten');
+  });
+
+  it('should specify soon closing time', () => {
+    cy.clock(new Date(2023, 9, 16, 21, 30), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 30 Minuten');
+  });
+
+  it('should update the soon closing time every minute', () => {
+    cy.clock(new Date(2023, 9, 16, 21, 30));
+    cy.visit('/canteen');
+    cy.tick(500);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 30 Minuten');
+
+    cy.tick(60_000);
+    cy.tick(50);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 29 Minuten');
+  });
+
+  it('should update the status when it changes', () => {
+    cy.clock(new Date(2023, 9, 16, 21, 59));
+    cy.visit('/canteen');
+    cy.tick(500);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 1 Minute');
+
+    cy.tick(60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet morgen um 08:30');
+  });
+
+  // This one takes long to execute!
+  it('should update as expected', () => {
+    cy.clock(new Date(2023, 9, 16, 20, 59));
+    cy.visit('/canteen');
+    cy.tick(500);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt heute um 22:00');
+
+    cy.tick(60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 60 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 30 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet morgen um 08:30');
+
+    cy.tick(9.5 * 60 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet in 60 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet in 30 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt heute um 22:00');
+
+    // Long tick warps will cause network requests to time out
+    cy.get('@consoleError').invoke('resetHistory');
+  });
+});

frontend/app/cypress/support/index.ts

@@ -31,36 +31,24 @@
 // When a command from ./commands is ready to use, import with `import './commands'` syntax
 // import './commands';
 
-beforeEach(async function () {
-  let databases: string[];
-  if (window.indexedDB.databases) {
-    databases = (await window.indexedDB.databases()).map(it => it.name);
-    console.log('Trying to clear all databases');
-  } else {
-    console.log("Browser doesn't support database enumeration, deleting just ionic storage");
-    databases = ['_ionicstorage'];
-  }
-  for (const database of databases) {
-    if (database) {
-      console.log(`Deleting database ${database}`);
-      await new Promise(resolve => (window.indexedDB.deleteDatabase(database).onsuccess = resolve));
-      console.log(`Deleted database ${database}`);
-    }
-  }
+beforeEach(function () {
+  cy.wrap(
+    new Promise(resolve => {
+      window.indexedDB.deleteDatabase('_ionicstorage').onsuccess = resolve;
+    }),
+  );
 });
 
 Cypress.on('window:before:load', window => {
-  // Fake that user is using its browser in german language
+  // Fake that user is using its browser in German
   Object.defineProperty(window.navigator, 'language', {value: 'de-DE'});
   Object.defineProperty(window.navigator, 'languages', [{value: 'de-DE'}]);
 
-  // Fail tests on console error
-  cy.stub(window.console, 'error').callsFake(message => {
-    // log out to the terminal
-    cy.now('task', 'error', message);
-    // log to Command Log and fail the test
-    throw new Error(message);
-  });
+  cy.spy(window.console, 'error').as('consoleError');
+});
+
+afterEach(function () {
+  cy.get('@consoleError').should('not.have.been.called');
 });
 
 Cypress.on('uncaught:exception', error => {