chore(deps): Update to cypress 4.11.0 (#19)

.github/workflows/e2e.yml

@@ -1,4 +1,4 @@
-name: Tests
+name: Browser Tests
 
 on:
   push:
@@ -93,36 +93,35 @@ jobs:
 
   ###
   # Cypress Firefox tests
-  # FIXME: Seems to stall/freeze under CI in notification tests?
   ###
-  # cypress-firefox:
-  #   runs-on: ubuntu-16.04
-  #   timeout-minutes: 15
-  #   needs: netlify
-  #   container:
-  #     image: cypress/browsers:node12.14.1-chrome83-ff77
-  #     options: --user 1001
-  #   steps:
-  #     - name: Checkout
-  #       uses: actions/checkout@v2
-
-  #     - uses: cypress-io/github-action@v2
-  #       with:
-  #         env: CI=true
-  #         config: baseUrl=${{ needs.netlify.outputs.url }}
-  #         browser: firefox
-  #         working-directory: e2e
-
-  #     - uses: actions/upload-artifact@v1
-  #       if: failure()
-  #       with:
-  #         name: cypress-screenshots
-  #         path: e2e/cypress/screenshots
-  #     - uses: actions/upload-artifact@v1
-  #       if: always()
-  #       with:
-  #         name: cypress-videos
-  #         path: e2e/cypress/videos
+  cypress-firefox:
+    runs-on: ubuntu-16.04
+    timeout-minutes: 15
+    needs: netlify
+    container:
+      image: cypress/browsers:node12.14.1-chrome83-ff77
+      options: --user 1001 --shm-size=2g
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: cypress-io/github-action@v2
+        with:
+          env: CI=true
+          config: baseUrl=${{ needs.netlify.outputs.url }}
+          browser: firefox
+          working-directory: e2e
+
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: e2e/cypress/screenshots
+      - uses: actions/upload-artifact@v1
+        if: always()
+        with:
+          name: cypress-videos
+          path: e2e/cypress/videos
 
   ###
   # WebdriverIO Chrome tests

.github/workflows/lighthouse.yml

@@ -1,4 +1,4 @@
-name: Lighthouse CI for Netlify sites
+name: Google Lighthouse
 on: pull_request
 jobs:
   audit:

e2e/cypress/integration/installability.spec.js

@@ -1,77 +1,77 @@
 //
 // Disable test suite in Firefox due to cross-origin restrictions
 //
-!Cypress.isBrowser("firefox") &&
-  describe("installability", () => {
-    beforeEach(() => {
-      cy.clearSessionStorage();
-      cy.visit("/");
-      cy.waitForAppReadiness();
-    });
 
-    it("should show toast when browser prompts for install", () => {
-      cy.window().triggerEvent("beforeinstallprompt");
-      cy.get("ion-toast[data-presented]")
-        .shadow()
-        .findByText("Install this app for faster access next time");
-    });
+describe("installability", () => {
+  beforeEach(() => {
+    cy.clearSessionStorage();
+    cy.visit("/");
+    cy.waitForAppReadiness();
+  });
 
-    it("should be able to dismiss toast", () => {
-      cy.window().triggerEvent("beforeinstallprompt");
-      cy.get("ion-toast[data-presented]")
-        .as("installToast")
-        .shadow()
-        .findByText("Maybe Later")
-        .click();
+  it("should show toast when browser prompts for install", () => {
+    cy.window().triggerEvent("beforeinstallprompt");
+    cy.get("ion-toast[data-presented]")
+      .shadow()
+      .findByText("Install this app for faster access next time");
+  });
 
-      cy.get("@installToast").should("not.exist");
-    });
+  it("should be able to dismiss toast", () => {
+    cy.window().triggerEvent("beforeinstallprompt");
+    cy.get("ion-toast[data-presented]")
+      .as("installToast")
+      .shadow()
+      .findByText("Maybe Later")
+      .click();
 
-    it("should not prompt again once dismissed", () => {
-      cy.window().triggerEvent("beforeinstallprompt");
+    cy.get("@installToast").should("not.exist");
+  });
 
-      cy.get("ion-toast[data-presented]")
-        .as("installToast")
-        .shadow()
-        .findByText("Maybe Later")
-        .click();
+  it("should not prompt again once dismissed", () => {
+    cy.window().triggerEvent("beforeinstallprompt");
 
-      cy.get("@installToast").should("not.exist");
-      cy.reload();
-      cy.window().triggerEvent("beforeinstallprompt");
-      cy.get("@installToast").should("not.exist");
-    });
+    cy.get("ion-toast[data-presented]")
+      .as("installToast")
+      .shadow()
+      .findByText("Maybe Later")
+      .click();
 
-    it("should not prompt when app is installed while launched", () => {
-      cy.window().triggerEvent("appinstalled").wait(100);
-      cy.window().triggerEvent("beforeinstallprompt");
-      cy.get("ion-toast").wait(100).should("not.have.attr", "data-presented");
-    });
+    cy.get("@installToast").should("not.exist");
+    cy.visit("/"); // cy.reload() hangs in FF
+    cy.window().triggerEvent("beforeinstallprompt");
+    cy.get("@installToast").should("not.exist");
+  });
 
-    describe("when launched from a home screen", () => {
-      beforeEach(() => {
-        cy.visit("/", {
-          onBeforeLoad(window) {
-            // Intercept (stub) window.matchMedia before the page loads
-            cy.stub(window, "matchMedia")
-              .withArgs("(display-mode: standalone)")
-              .callsFake(() => ({
-                matches: true,
-                addListener: () => false,
-                removeListener: () => false,
-              }));
+  it("should not prompt when app is installed while launched", () => {
+    cy.window().triggerEvent("appinstalled").wait(100);
+    cy.window().triggerEvent("beforeinstallprompt");
+    cy.get("ion-toast").wait(100).should("not.have.attr", "data-presented");
+  });
 
-            // If the media query doesn't match,
-            // call through to the original window.matchMedia
-            // so we don't break other aspects of the page
-            window.matchMedia.callThrough();
-          },
-        });
-      });
+  describe("when launched from a home screen", () => {
+    beforeEach(() => {
+      cy.visit("/", {
+        onBeforeLoad(window) {
+          // Intercept (stub) window.matchMedia before the page loads
+          cy.stub(window, "matchMedia")
+            .withArgs("(display-mode: standalone)")
+            .callsFake(() => ({
+              matches: true,
+              addListener: () => false,
+              removeListener: () => false,
+            }));
 
-      it("should not prompt", () => {
-        cy.window().triggerEvent("beforeinstallprompt");
-        cy.get("ion-toast").wait(100).should("not.have.attr", "data-presented");
+          // If the media query doesn't match,
+          // call through to the original window.matchMedia
+          // so we don't break other aspects of the page
+          window.matchMedia.callThrough();
+        },
       });
     });
+
+    it("should not prompt", () => {
+      cy.window().triggerEvent("beforeinstallprompt");
+      cy.get("ion-toast").wait(100).should("not.have.attr", "data-presented");
+    });
   });
+});

e2e/cypress/integration/service-worker.spec.js

@@ -4,51 +4,50 @@
 // in CI, you won't have issues but locally, double check the service worker activation
 // in the browser if you're seeing old code.
 //
-!Cypress.isBrowser("firefox") &&
-  describe("service workers", () => {
-    beforeEach(() => {
-      // Clear any session storage for the test run, such as cy_sw_bypass flags
-      cy.clearSessionStorage();
-    });
-
-    it("should wait for service worker to be registered", () => {
-      cy.visit("/", { useSw: true });
-      // We have a hook that adds an HTML classname when service worker is ready
-      cy.get("html", { timeout: 6000 }).should("have.class", "sw-ready");
-    });
-
-    it("should load orders without caching on initial load", () => {
-      // Control when we initialize the app
-      cy.visit("/", { useSw: true, qs: { cy_initialize: true } });
+describe("service workers", () => {
+  beforeEach(() => {
+    // Clear any session storage for the test run, such as cy_sw_bypass flags
+    cy.clearSessionStorage();
+  });
 
-      // Empty the orders cache
-      cy.clearCacheStorage("orders");
+  it("should wait for service worker to be registered", () => {
+    cy.visit("/", { useSw: true });
+    // We have a hook that adds an HTML classname when service worker is ready
+    cy.get("html", { timeout: 6000 }).should("have.class", "sw-ready");
+  });
 
-      // Ensure no order cache entries exist
-      cy.waitForCacheStorage("orders", {
-        maximumCacheEntries: 0,
-      });
+  it("should load orders without caching on initial load", () => {
+    // Control when we initialize the app
+    cy.visit("/", { useSw: true, qs: { cy_initialize: true } });
 
-      // Initialize the application
-      cy.window().invoke("__CY_INITIALIZE_APP");
+    // Empty the orders cache
+    cy.clearCacheStorage("orders");
 
-      // Orders should load from network
-      cy.findByTestId("orders-list").should("be.visible");
+    // Ensure no order cache entries exist
+    cy.waitForCacheStorage("orders", {
+      maximumCacheEntries: 0,
     });
 
-    it("should load orders immediately from cache on reload", () => {
-      // Control when we initialize the app
-      cy.visit("/", { useSw: true, qs: { cy_initialize: true } });
+    // Initialize the application
+    cy.window().invoke("__CY_INITIALIZE_APP");
 
-      // Ensure order cache entries exist
-      cy.waitForCacheStorage("orders", {
-        minimumCacheEntries: 1,
-      });
+    // Orders should load from network
+    cy.findByTestId("orders-list").should("be.visible");
+  });
 
-      // Initialize the application
-      cy.window().invoke("__CY_INITIALIZE_APP");
+  it("should load orders immediately from cache on reload", () => {
+    // Control when we initialize the app
+    cy.visit("/", { useSw: true, qs: { cy_initialize: true } });
 
-      // Orders will load from cache
-      cy.findByTestId("orders-list").should("be.visible");
+    // Ensure order cache entries exist
+    cy.waitForCacheStorage("orders", {
+      minimumCacheEntries: 1,
     });
+
+    // Initialize the application
+    cy.window().invoke("__CY_INITIALIZE_APP");
+
+    // Orders will load from cache
+    cy.findByTestId("orders-list").should("be.visible");
   });
+});

e2e/cypress/support/commands.js

@@ -27,10 +27,14 @@ import "@testing-library/cypress/add-commands";
 
 Cypress.Commands.overwrite("visit", (originalFn, path, options = {}) => {
   if (options.useSw) {
-    return originalFn(path, options);
+    // Bypass SW caching for ONLY document routes (i.e. API route will be cached)
+    return originalFn(path, {
+      ...options,
+      qs: { ...options.qs, cy_sw_page_only_bypass: true },
+    });
   }
 
-  // Bypass SW caching for index.html routes
+  // Bypass SW caching for all document and API route
   return originalFn(path, {
     ...options,
     qs: { ...options.qs, cy_sw_bypass: true },

e2e/package.json

@@ -10,7 +10,7 @@
     "@wdio/mocha-framework": "6.1.19",
     "@wdio/spec-reporter": "6.1.23",
     "@wdio/sync": "6.1.14",
-    "cypress": "4.10.0",
+    "cypress": "^4.11.0",
     "cypress-browser-permissions": "1.0.5",
     "cypress-plugin-retries": "1.5.2"
   },

src/sw-template.ts

@@ -16,8 +16,10 @@ const navigationRoute = new NavigationRoute(handler, {
   denylist: [
     // URLs starting with /_ such as Cypress/Gatsby URLs
     new RegExp("^/_"),
-    // Bypassing for Cypress tests due to window hooks
+    // Bypassing for Cypress tests for page AND API requests
     new RegExp("cy_sw_bypass"),
+    // Bypassing for Cypress tests for ONLY page requests
+    new RegExp("cy_sw_page_only_bypass"),
     new RegExp("/[^/?]+\\.[^/]+$"),
   ],
 });