Add tests for menu page (#574)

Co-authored-by: Brendan Early <[email protected]>

package.json

@@ -31,6 +31,7 @@
     "@types/puppeteer": "^5.4.1",
     "@types/sinon": "^9.0.9",
     "@types/sinon-chai": "^3.2.5",
+    "@types/sinon-chrome": "^2.2.10",
     "@types/uuid": "^3.4.9",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
@@ -48,6 +49,7 @@
     "sass": "^1.26.11",
     "sinon": "^9.2.1",
     "sinon-chai": "^3.5.0",
+    "sinon-chrome": "^3.0.1",
     "ts-loader": "^6.2.2",
     "typescript": "^3.9.2",
     "url-loader": "^2.3.0",
@@ -60,6 +62,7 @@
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "@types/lodash": "^4.14.166",
     "argon2-browser": "^1.15.1",
     "crypto-js": "^4.0.0",
     "jsqr": "^1.3.1",

scripts/build.sh

@@ -55,7 +55,7 @@ if [[ $PLATFORM = "prod" ]]; then
     ./node_modules/webpack-cli/bin/cli.js --config webpack.prod.js
 elif [[ $PLATFORM = "test" ]]; then
     ./node_modules/webpack-cli/bin/cli.js --config webpack.dev.js
-    ./node_modules/.bin/tsc scripts/test-runner.ts
+    ./node_modules/.bin/tsc scripts/test-runner.ts --esModuleInterop
 else 
     ./node_modules/webpack-cli/bin/cli.js
 fi

scripts/test-runner.ts

@@ -1,10 +1,11 @@
 // Runs tests via puppeteer. Do not compile using webpack.
 
-import * as puppeteer from "puppeteer";
-import * as path from "path";
-import * as fs from "fs";
+import puppeteer from "puppeteer";
+import path from "path";
+import fs from "fs";
 import { execSync } from "child_process";
-import * as merge from "lodash/merge";
+import merge from "lodash/merge";
+
 interface MochaTestResults {
   total?: number;
   tests?: StrippedTestResults[];
@@ -35,15 +36,21 @@ const colors = {
 }
 
 async function runTests() {
+  const puppeteerArgs: string[] = [
+    `--load-extension=${path.resolve(__dirname, "../test/chrome")}`,
+    // for CI
+    "--no-sandbox",
+  ];
+
+  if (!process.env.CI) {
+    // run with --single-process to prevent zombie Chromium processes from not terminating during development testing
+    // do not use this in CI as it will not run properly
+    puppeteerArgs.push("--single-process");
+  }
+
   const browser = await puppeteer.launch({
     ignoreDefaultArgs: ["--disable-extensions"],
-    args: [
-      `--load-extension=${path.resolve(__dirname, "../test/chrome")}`,
-      // prevents zombie Chromium processes from not terminating during development testing
-      "--single-process",
-      // for CI
-      "--no-sandbox",
-    ],
+    args: puppeteerArgs,
     // chrome extensions don't work in headless
     headless: false,
     executablePath: process.env.PUPPETEER_EXEC_PATH,
@@ -52,12 +59,20 @@ async function runTests() {
   await mochaPage.goto(
     "chrome-extension://bhghoamapcdpbohphigoooaddinpkbai/view/test.html"
   );
-  // @ts-expect-error
+
+  // by setting this env var, console logging works for both components and testing
+  if (process.env.ENABLE_CONSOLE) {
+    mochaPage.on("console", consoleMessage => console.log(consoleMessage.text()));
+  }
+
   const results: {
-    coverage: {};
+    coverage: unknown;
     testResults: MochaTestResults;
   } = await mochaPage.evaluate(() => {
-    return new Promise((resolve) => {
+    return new Promise((resolve: (value: {
+    coverage: unknown;
+    testResults: MochaTestResults;
+  }) => void) => {
       window.addEventListener("testsComplete", () => {
         resolve({
           coverage: window.__coverage__,
@@ -76,14 +91,17 @@ async function runTests() {
 
   let failedTest = false;
   let display: TestDisplay = {};
-  for (const test of results.testResults.tests) {
-    let tmp: TestDisplay = {};
-    test.path.reduce((acc, current, index) => { 
-      return acc[current] = test.path.length - 1 === index ? test : {}  
-    }, tmp);
-    display = merge(display, tmp);
+  if (results?.testResults.tests) {
+    for (const test of results.testResults.tests) {
+      let tmp: TestDisplay = {};
+      test.path.reduce((acc, current, index) => {
+        return acc[current] = test.path.length - 1 === index ? test : {}
+      }, tmp);
+      display = merge(display, tmp);
+    }
   }
-  const printDisplayTests = (display: TestDisplay) => {
+
+  const printDisplayTests = (display: TestDisplay | StrippedTestResults) => {
     for (const key in display) {
       if (typeof display[key].status === "string") {
         const test = display[key];
@@ -105,7 +123,6 @@ async function runTests() {
       } else {
         console.log(key)
         console.group();
-        // @ts-expect-error
         printDisplayTests(display[key]);
       }
     }
@@ -115,4 +132,7 @@ async function runTests() {
   process.exit(failedTest ? 1 : 0);
 }
 
-runTests();
+runTests().catch(e => {
+  console.error(e);
+  process.exit(1);
+});

src/store/Menu.ts

@@ -4,7 +4,7 @@ export class Menu implements Module {
   async getModule() {
     const menuState = {
       state: {
-        version: chrome.runtime.getManifest().version,
+        version: chrome.runtime.getManifest()?.version || "0.0.0",
         zoom: Number(localStorage.zoom) || 100,
         useAutofill: localStorage.autofill === "true",
         smartFilter: localStorage.smartFilter !== "false",