chore: upgrade material-ui to v5 (#551)

* feat: add mui version 5 packages * chore: upgrade material-ui to v5 * fix: node tests * fix: prettier * chore: update e2e browser * fix: use escape to close modal in tests * fix: add small delay for percy snapshots * fix: better theme support, wait for backdrop disappearing in e2e tests * fix: flaky test * fix: reload for theme selection visual test * fix: no reload before percySnapshot * fix: default to dark theme for e2e tests * chore: remove unused @mui/core * fix: style regression
marudor · Dec 20, 2021 · 0a0c864 · 0a0c864
1 parent 6661136
commit 0a0c864
Show file tree

Hide file tree

Showing 115 changed files with 4,903 additions and 3,247 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -46,7 +46,7 @@ jobs:
   e2e:
     runs-on: ubuntu-latest
     container:
-      image: cypress/browsers:node14.17.0-chrome91-ff89
+      image: cypress/browsers:node16.5.0-chrome94-ff93
       options: --user 1001
     strategy:
       matrix:

diff --git a/@types/global.d.ts b/@types/global.d.ts
@@ -23,6 +23,11 @@ declare global {
   interface Navigator {
     standalone?: boolean;
   }
-
-  type ExcludesFalse = <T>(x: T | undefined | void | null | false) => x is T;
+  type Falsy = false | 0 | '' | null | undefined | void;
+  interface Array<T> {
+    filter<S extends T>(
+      predicate: BooleanConstructor,
+      thisArg?: any,
+    ): Exclude<S, Falsy>[];
+  }
 }
diff --git a/@types/maru.d.ts b/@types/maru.d.ts
@@ -1,6 +1,15 @@
 declare module 'maru' {
   // eslint-disable-next-line import/no-extraneous-dependencies
-  import { CSSProperties } from '@material-ui/styles';
+  import { SerializedStyles } from '@mui/material';
+
+  interface Mixins {
+    cancelled: SerializedStyles;
+    delayed: SerializedStyles;
+    changed: SerializedStyles;
+    additional: SerializedStyles;
+    early: SerializedStyles;
+    singleLineText: SerializedStyles;
+  }
   interface Theme {
     colors: {
       green: string;
@@ -11,13 +20,6 @@ declare module 'maru' {
       shadedBackground: string;
       transparentBackground: string;
     };
-    mixins: {
-      cancelled: CSSProperties;
-      delayed: CSSProperties;
-      changed: CSSProperties;
-      additional: CSSProperties;
-      early: CSSProperties;
-      singleLineText: CSSProperties;
-    };
+    mixins: Mixins;
   }
 }
diff --git a/charts/bahnhofsabfahrten/templates/ingress.yaml b/charts/bahnhofsabfahrten/templates/ingress.yaml
@@ -19,13 +19,17 @@ spec:
     - hosts:
       {{ if .Values.hostName }}
         - {{ .Values.hostName }}
+        - www.{{ .Values.hostName }}
         {{ if .Values.docs }}
         - docs.{{ .Values.hostName }}
+        - www.docs.{{ .Values.hostName }}
         {{ end }}
       {{ else }}
         - {{ .Release.Name }}.marudor.de
+        - www.{{ .Release.Name }}.marudor.de
         {{ if .Values.docs }}
         - docs.{{ .Release.Name }}.marudor.de
+        - www.docs.{{ .Release.Name }}.marudor.de
         {{ end }}
       {{ end }}
       secretName: {{ $fullName }}
@@ -34,6 +38,20 @@ spec:
     - host: {{ .Values.hostName }}
     {{ else }}
     - host: {{ .Release.Name }}.marudor.de
+    {{ end }}
+      http:
+        paths:
+          - path: /
+            pathType: ImplementationSpecific
+            backend:
+              service:
+                name: {{ $fullName }}
+                port:
+                  name: http
+    {{ if .Values.hostName }}
+    - host: www.{{ .Values.hostName }}
+    {{ else }}
+    - host: www.{{ .Release.Name }}.marudor.de
     {{ end }}
       http:
         paths:
@@ -67,4 +85,27 @@ spec:
                 port:
                   name: http
     {{ end }}
+    {{ if .Values.docs }}
+    {{ if .Values.hostName }}
+    - host: www.docs.{{ .Values.hostName }}
+    {{ else }}
+    - host: www.docs.{{ .Release.Name }}.marudor.de
+    {{ end }}
+      http:
+        paths:
+          - path: /
+            pathType: ImplementationSpecific
+            backend:
+              service:
+                name: docs-{{ $fullName }}
+                port:
+                  number: 80
+          - path: /swagger.json
+            pathType: ImplementationSpecific
+            backend:
+              service:
+                name: {{ $fullName }}
+                port:
+                  name: http
+    {{ end }}
 {{- end }}
diff --git a/cypress/integration/abfahrten.test.ts b/cypress/integration/abfahrten.test.ts
@@ -69,14 +69,14 @@ describe('Abfahrten', () => {
         'text-decoration-line',
         'line-through',
       );
-      ['destination', 'platform', 'times'].forEach((id) => {
+      ['destination', 'platform', 'timeContainer'].forEach((id) => {
         cy.findByTestId(id).should(
           'have.css',
           'text-decoration-line',
           'line-through',
         );
       });
     });
-    cy.percy('Abfahrten');
+    cy.percySnapshot('Abfahrten');
   });
 });
diff --git a/cypress/integration/abfahrtenSettings.test.ts b/cypress/integration/abfahrtenSettings.test.ts
@@ -16,7 +16,7 @@ describe('Abfahrten Settings', () => {
       cy.findByTestId('abfahrtS35744').within(() => {
         cy.findByTestId('abfahrtStart').should('have.text', 'S 7S 35744');
       });
-      cy.percy('Zugnummer & Linie');
+      cy.percySnapshot('Zugnummer & Linie');
     });
 
     it('Show fahrzeuggruppe', () => {
@@ -37,7 +37,7 @@ describe('Abfahrten Settings', () => {
       cy.findByTestId('fahrzeugGruppeConfig').click();
       cy.closeModal();
       cy.findByTestId('reihungFahrzeugGruppe').should('exist');
-      cy.percy('Fahrzeuggruppe');
+      cy.percySnapshot('Fahrzeuggruppe');
     });
 
     it('Show uic', () => {
@@ -58,7 +58,12 @@ describe('Abfahrten Settings', () => {
       cy.findByTestId('showUIC').click();
       cy.closeModal();
       cy.findAllByTestId('uic').should('exist');
-      cy.percy('UIC');
+      cy.findByTestId('via-Berlin Ostbahnhof').should(
+        'have.css',
+        'text-decoration-line',
+        'line-through',
+      );
+      cy.percySnapshot('UIC');
     });
   });
 

diff --git a/cypress/integration/details.test.ts b/cypress/integration/details.test.ts
@@ -15,6 +15,6 @@ describe('Details', () => {
     cy.visit('/details/S30665');
     cy.wait('@details');
     cy.findByTestId('header').should('have.css', 'height', '54px');
-    cy.percy('details');
+    cy.percySnapshot('details');
   });
 });
diff --git a/cypress/integration/regional.test.ts b/cypress/integration/regional.test.ts
@@ -13,7 +13,7 @@ describe('Regional', () => {
         url: '/api/hafas/experimental/irisCompatibleAbfahrten/0723869?*',
         query: {
           lookahead: '150',
-          lookbehind: '0',
+          lookbehind: '10',
         },
       },
       { fixture: 'regional/departurePostStrasse' },
@@ -55,7 +55,7 @@ describe('Regional', () => {
         url: '/api/hafas/experimental/irisCompatibleAbfahrten/0369218?*',
         query: {
           lookahead: '150',
-          lookbehind: '0',
+          lookbehind: '10',
         },
       },
       { fixture: 'regional/departureArndtSpittastrasse' },

diff --git a/cypress/integration/routing/routing.test.ts b/cypress/integration/routing/routing.test.ts
@@ -85,29 +85,26 @@ describe('Routing', () => {
       searchInput('routingStartSearch', 'Frankfurt(Main)Hbf');
       searchInput('routingDestinationSearch', '');
       searchInput('addVia', '');
-      cy.findByTestId('routingDatePicker')
-        .find('input')
-        .should('contain.value', 'Jetzt');
+      cy.findByTestId('routingDatePicker').should('contain.value', 'Jetzt');
     });
 
     it('with start & destination', () => {
       cy.visit('/routing/8000105/8002549');
       searchInput('routingStartSearch', 'Frankfurt(Main)Hbf');
       searchInput('routingDestinationSearch', 'Hamburg Hbf');
       searchInput('addVia', '');
-      cy.findByTestId('routingDatePicker')
-        .find('input')
-        .should('contain.value', 'Jetzt');
+      cy.findByTestId('routingDatePicker').should('contain.value', 'Jetzt');
     });
 
     it('with start, destination & time', () => {
       cy.visit('/routing/8000105/8002549/2020-11-17T10:00:15.589Z');
       searchInput('routingStartSearch', 'Frankfurt(Main)Hbf');
       searchInput('routingDestinationSearch', 'Hamburg Hbf');
       searchInput('addVia', '');
-      cy.findByTestId('routingDatePicker')
-        .find('input')
-        .should('contain.value', 'Dienstag 17.11.2020 10:00');
+      cy.findByTestId('routingDatePicker').should(
+        'contain.value',
+        'Dienstag 17.11.2020 10:00',
+      );
     });
 
     it('with start, destination, time & 1 via', () => {
@@ -116,9 +113,10 @@ describe('Routing', () => {
       searchInput('routingDestinationSearch', 'Hamburg Hbf');
       searchInput('via0', 'Mannheim Hbf');
       searchInput('addVia', '');
-      cy.findByTestId('routingDatePicker')
-        .find('input')
-        .should('contain.value', 'Dienstag 17.11.2020 10:00');
+      cy.findByTestId('routingDatePicker').should(
+        'contain.value',
+        'Dienstag 17.11.2020 10:00',
+      );
     });
 
     it('with start, destination, time & 2 via', () => {
@@ -130,9 +128,10 @@ describe('Routing', () => {
       searchInput('via0', 'Mannheim Hbf');
       searchInput('via1', 'Frankfurt(Main)Hbf');
       cy.findByTestId('addVia').should('not.exist');
-      cy.findByTestId('routingDatePicker')
-        .find('input')
-        .should('contain.value', 'Dienstag 17.11.2020 10:00');
+      cy.findByTestId('routingDatePicker').should(
+        'contain.value',
+        'Dienstag 17.11.2020 10:00',
+      );
     });
   });
 });
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -26,15 +26,12 @@ Cypress.Commands.add('theme', (type: 'dark' | 'light' | 'black') => {
   cy.findByTestId('navToggle').click();
   cy.findByTestId('themes').click();
   cy.findByTestId('themeList').find(`[data-value="${type}"]`).click();
+  cy.reload();
 });
 
 Cypress.Commands.add('closeModal', () => {
-  cy.get('.MuiBackdrop-root').click({ force: true });
-});
-
-Cypress.Commands.add('percy', (name: string) => {
-  cy.theme('dark');
-  cy.percySnapshot(name);
+  cy.get('body').type('{esc}');
+  cy.get('.MuiBackdrop-root').should('not.exist');
 });
 
 function mockStopPlace({
@@ -76,7 +73,7 @@ function mockStopPlace({
 
 Cypress.Commands.add(
   'mockFrankfurt',
-  ({ lookbehind = 0, lookahead = 150, delay = 0 } = {}) => {
+  ({ lookbehind = 10, lookahead = 150, delay = 0 } = {}) => {
     mockStopPlace({
       lookahead,
       lookbehind,
@@ -90,7 +87,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'mockHamburg',
-  ({ lookbehind = 0, lookahead = 150, delay = 0 } = {}) => {
+  ({ lookbehind = 10, lookahead = 150, delay = 0 } = {}) => {
     mockStopPlace({
       lookahead,
       lookbehind,
@@ -104,7 +101,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   'mockHannover',
-  ({ lookbehind = 0, lookahead = 150, delay = 0 } = {}) => {
+  ({ lookbehind = 10, lookahead = 150, delay = 0 } = {}) => {
     mockStopPlace({
       lookahead,
       lookbehind,

diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
@@ -25,7 +25,6 @@ declare global {
       mockHannover(options?: MockOptions): void;
       openSettings(): void;
       force404(): void;
-      percy(name: string): void;
       theme(type: 'dark' | 'light' | 'black'): void;
     }
   }

diff --git a/cypress/support/index.ts b/cypress/support/index.ts
@@ -3,6 +3,7 @@ import '@percy/cypress';
 
 beforeEach(() => {
   cy.force404();
+  cy.setCookie('theme', 'dark');
 });
 
 Cypress.Server.defaults({

diff --git a/package.json b/package.json
@@ -84,6 +84,8 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@cypress/webpack-preprocessor": "^5.10.0",
+    "@emotion/babel-plugin": "^11.3.0",
+    "@emotion/jest": "^11.7.1",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/webpack-plugin": "^5.15.1",
     "@percy/cli": "^1.0.0-beta.71",
@@ -126,6 +128,7 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.2.5",
     "typescript": "4.5.3",
+    "typescript-styled-plugin": "^0.18.2",
     "url-loader": "^4.1.1",
     "wait-for": "^2.1.1",
     "webpack": "^5.65.0",