feat(testing): add serviceWorker tests

Author: jsjoeio

ci/dev/lint.sh

@@ -6,7 +6,7 @@ main() {
 
   eslint --max-warnings=0 --fix $(git ls-files "*.ts" "*.tsx" "*.js" | grep -v "lib/vscode")
   stylelint $(git ls-files "*.css" | grep -v "lib/vscode")
-  tsc --noEmit
+  tsc --noEmit --skipLibCheck
   shellcheck -e SC2046,SC2164,SC2154,SC1091,SC1090,SC2002 $(git ls-files "*.sh" | grep -v "lib/vscode")
   if command -v helm && helm kubeval --help > /dev/null; then
     helm kubeval ci/helm-chart

test/package.json

@@ -1,5 +1,8 @@
 {
   "#": "We must put jest in a sub-directory otherwise VS Code somehow picks up the types and generates conflicts with mocha.",
+  "scripts": {
+    "postinstall": "./scripts/patch.sh"
+  },
   "devDependencies": {
     "@types/jest": "^26.0.20",
     "@types/jsdom": "^16.2.6",

test/patches/service-worker-mock-fetch.patch

@@ -0,0 +1,15 @@
+--- node_modules/service-worker-mock/fetch.js	2021-02-18 13:47:55.000000000 -0700
++++ patches/service-worker-mock-fixed.js	2021-02-18 15:49:47.000000000 -0700
+@@ -1,8 +1,11 @@
+ module.exports = async (request) => {
++  const Response = require('./models/Response');
+   const response = new Response('Response from service-worker-mock/fetch.js', {
+     status: 200,
+     statusText: 'ok.'
+   });
+-  response.url = request.url;
++  if (request && request.url) {
++    response.url = request.url;
++  }
+   return response;
+ };

test/patches/service-worker-mock-response.patch

@@ -0,0 +1,9 @@
+--- node_modules/service-worker-mock/models/Response.js	2021-02-18 13:47:55.000000000 -0700
++++ patches/service-worker-mock-response.js	2021-02-18 15:57:12.000000000 -0700
+@@ -1,5 +1,6 @@
+ // stubs https://developer.mozilla.org/en-US/docs/Web/API/Response
+ const Body = require('./Body');
++const Blob = require('./Blob');
+ const Headers = require('./Headers');
+
+ const isSupportedBodyType = (body) =>

test/patches/service-worker-types.patch

@@ -0,0 +1,14 @@
+--- node_modules/@types/service-worker-mock/index.d.ts	2021-02-18 13:51:50.000000000 -0700
++++ patches/service-workertypes.d.ts	2021-02-18 16:30:01.000000000 -0700
+@@ -3,6 +3,11 @@
+ // Definitions by: Remco Haszing <https://github.com/remcohaszing>
+ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ // TypeScript Version: 2.8
++// https://gist.github.com/shqld/32df51a4a4ed429f2c76e4e2cfdf6f96#gistcomment-2793376
++// excludes default libs such as 'dom' conflicting with 'webworker'
++/// <reference no-default-lib="true"/>
++/// <reference lib="esnext" />
++/// <reference lib="webworker" />
+ 
+ export = makeServiceWorkerEnv;
+ declare function makeServiceWorkerEnv(): WorkerGlobalScope;

test/scripts/patch.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+apply_service_worker_mock_patches() {
+  # The `service-worker-mock` package is no longer maintained
+  # so we have to apply patches ourselves
+
+  # This patch fixes an undefined error in fetch.js and adds a missing import
+  patch --forward node_modules/service-worker-mock/fetch.js < patches/service-worker-mock-fetch.patch
+
+  # This patch adds a missing import
+  patch --forward node_modules/service-worker-mock/models/Response.js < patches/service-worker-mock-response.patch
+
+  # This patch fixes the types declaration file
+  # See discussion:
+  patch --forward node_modules/@types/service-worker-mock/index.d.ts < patches/service-worker-types.patch
+}
+
+main() {
+  echo -e "🔨 Applying patches..."
+  apply_service_worker_mock_patches
+
+  echo -e "✅ Patches applied successfully."
+}
+
+main "$@"

test/serviceWorker.test.ts

@@ -1,9 +1,44 @@
+import makeServiceWorkerEnv = require("service-worker-mock")
+const makeFetchMock = require("service-worker-mock/fetch")
+
 describe("serviceWorker", () => {
-  it("should add the proper eventListeners", () => {
-    // make sure install, active and fetch were added as event listeners
+  let spy: jest.SpyInstance
+  beforeEach(() => {
+    Object.assign(
+      global,
+      makeServiceWorkerEnv(),
+      makeFetchMock(),
+      // If you're using sinon ur similar you'd probably use below instead of makeFetchMock
+      // fetch: sinon.stub().returns(Promise.resolve())
+    )
+    jest.resetModules()
+
+    spy = jest.spyOn(console, "log")
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+    spy.mockRestore()
+  })
+
+  it("should add listeners", () => {
+    require("../src/browser/serviceWorker.ts")
+    const _self = (self as unknown) as WorkerGlobalScope
+    expect(_self.listeners.get("install")).toBeDefined()
+    expect(_self.listeners.get("activate")).toBeDefined()
+    expect(_self.listeners.get("fetch")).toBeDefined()
+  })
+
+  it("should call the proper callbacks for 'install'", async () => {
+    require("../src/browser/serviceWorker.ts")
+    await self.trigger("install")
+    expect(spy).toHaveBeenCalledWith("[Service Worker] installed")
   })
+  it("should call the proper callbacks for 'activate'", async () => {
+    require("../src/browser/serviceWorker.ts")
+    await self.trigger("activate")
 
-  it("should call the proper callbacks", () => {
-    // somehow test Line 8 with the events waitUntil..
+    // Activate serviceWorker
+    expect(spy).toHaveBeenCalledWith("[Service Worker] activated")
   })
-})
+})