fix: styles of initialization errors

aeternity · May 17, 2023 · aca40e6 · aca40e6
1 parent 07492a4
commit aca40e6
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 26 deletions.
diff --git a/cypress.config.js b/cypress.config.js
@@ -4,8 +4,6 @@ const { defineConfig } = require('cypress');
 const { initPlugin } = require('@frsource/cypress-plugin-visual-regression-diff/plugins');
 
 module.exports = defineConfig({
-  userAgent:
-    'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1',
   video: false,
   fixturesFolder: 'tests/e2e/fixtures',
   screenshotsFolder: 'tests/e2e/screenshots',

diff --git a/public/index.html b/public/index.html
@@ -13,10 +13,22 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+      body > noscript > p.fullscreen-error-message,
+      body > p.fullscreen-error-message {
+        margin: 0 auto;
+        padding-top: 30vh;
+        padding-left: 20px;
+        padding-right: 20px;
+        max-width: 400px;
+        font: 23px/28px 'Inter', sans-serif;
+        text-align: center;
+      }
+    </style>
   </head>
   <body>
     <noscript>
-      <p class="fullscreen-message">
+      <p class="fullscreen-error-message">
         Base æpp doesn't work without JavaScript enabled.
         Please enable it to continue.
       </p>
@@ -32,7 +44,7 @@
           return;
         }
 
-        document.body.innerHTML = '<p class="fullscreen-message">'
+        document.body.innerHTML = '<p class="fullscreen-error-message">'
           + 'Base app has failed to run in this browser.'
           + '</p>';
       }

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,4 @@
+import 'normalize.css';
 import Vue from 'vue';
 import './lib/setGlobalPolyfills';
 import store from './store';

diff --git a/src/styles/fullscreen-message.scss b/src/styles/fullscreen-message.scss
diff --git a/src/ui-common.js b/src/ui-common.js
@@ -1,7 +1,5 @@
 import Vue from 'vue';
-import 'normalize.css';
 import 'focus-visible';
-import './styles/fullscreen-message.scss';
 import './components/icon.scss';
 import { IS_IOS, DISABLED_BROWSER, ROUTE_MOBILE_LOGGED_IN } from './lib/constants';
 

diff --git a/tests/e2e/specs/__image_snapshots__/Load error fails to load state desktop #0.png b/tests/e2e/specs/__image_snapshots__/Load error fails to load state desktop #0.png
diff --git a/tests/e2e/specs/__image_snapshots__/Load error fails to load state mobile #0.png b/tests/e2e/specs/__image_snapshots__/Load error fails to load state mobile #0.png
diff --git a/tests/e2e/specs/__image_snapshots__/Load error load error desktop #0.png b/tests/e2e/specs/__image_snapshots__/Load error load error desktop #0.png
diff --git a/tests/e2e/specs/__image_snapshots__/Load error load error mobile #0.png b/tests/e2e/specs/__image_snapshots__/Load error load error mobile #0.png
diff --git a/tests/e2e/specs/load-error.cy.js b/tests/e2e/specs/load-error.cy.js
@@ -0,0 +1,42 @@
+function ensureThrownError(message) {
+  cy.wrap(new Promise((resolve) => {
+    cy.on('uncaught:exception', (err) => {
+      expect(err.message).to.include(message);
+      resolve();
+      return false;
+    });
+  }));
+}
+
+describe('Load error', () => {
+  [false, true].forEach((isDesktop) => {
+    it(`load error ${isDesktop ? 'desktop' : 'mobile'}`, () => {
+      if (!isDesktop) cy.viewport('iphone-se2');
+      cy.visit('/', {
+        isDesktop,
+        onBeforeLoad(contentWindow) {
+          contentWindow.Array = {}; // eslint-disable-line no-param-reassign
+        },
+      });
+      ensureThrownError('Array.isArray is not a function');
+      cy.matchImage();
+    });
+  });
+
+  [false, true].forEach((isDesktop) => {
+    it(`fails to load state ${isDesktop ? 'desktop' : 'mobile'}`, () => {
+      if (!isDesktop) cy.viewport('iphone-se2');
+      cy.visit('/', {
+        isDesktop,
+        onBeforeLoad(contentWindow) {
+          contentWindow.localStorage.setItem('vuex', '!');
+        },
+      });
+      ensureThrownError('Unexpected token \'!\', "!" is not valid JSON');
+      const button = cy.get('.ae-button').should('be.visible');
+      cy.matchImage();
+      button.click();
+      cy.get('.note').should('be.visible'); // reloaded to desktop
+    });
+  });
+});
diff --git a/tests/e2e/specs/settings/index.cy.js b/tests/e2e/specs/settings/index.cy.js
@@ -20,7 +20,7 @@ describe('Settings', () => {
     cy.get('.overlay').should('not.exist');
     cy.get('[data-cy="reset"]').click();
     cy.get('.ae-button.primary').click();
-    cy.location('pathname').should('eq', '/add-to-home-screen');
+    cy.get('.note').should('be.visible'); // reloaded to desktop
   });
 
   [

diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
@@ -24,12 +24,13 @@
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => originalFn(
+Cypress.Commands.overwrite('visit', (originalFn, url, {
+  isDesktop, login, state, ...options
+} = {}) => originalFn(
   url,
   {
     ...options,
     onBeforeLoad(contentWindow) {
-      const { login, state } = options;
       /* eslint-disable no-param-reassign */
       contentWindow.localStorage.vuex = login || state ? JSON.stringify(Cypress._.merge(
         login && {
@@ -70,6 +71,11 @@ Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => originalF
       )) : null;
       const promise = new Promise(() => {});
       contentWindow.navigator.serviceWorker.register = () => promise;
+      if (!isDesktop) {
+        Object.defineProperty(contentWindow.navigator, 'userAgent', {
+          value: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1',
+        });
+      }
       /* eslint-enable no-param-reassign */
       if (options.onBeforeLoad) options.onBeforeLoad(contentWindow);
     },