[EC-194] Migrate browser to jest (#2646)

* Move browser to jest

* Remove karma from package.json

* Remove karma from eslintignore

.eslintignore

@@ -5,7 +5,7 @@
 **/node_modules
 
 **/webpack.*.js
-**/karma.conf.js
+**/jest.config.js
 **/gulpfile.js
 
 apps/browser/src/content/autofill.js

apps/browser/jest.config.js

@@ -0,0 +1,14 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+
+const { compilerOptions } = require("./tsconfig");
+
+module.exports = {
+  collectCoverage: true,
+  coverageReporters: ["html", "lcov"],
+  coverageDirectory: "coverage",
+  preset: "jest-preset-angular",
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
+    prefix: "<rootDir>/",
+  }),
+  modulePathIgnorePatterns: ["jslib"],
+};

apps/browser/karma.conf.js

@@ -1,71 +0,0 @@
-const path = require("path");
-
-module.exports = function (config) {
-  config.set({
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: "",
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ["jasmine", "webpack"],
-
-    // list of files / patterns to load in the browser
-    files: [{ pattern: "src/**/*.spec.ts", watch: false }],
-
-    exclude: [],
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-      "src/**/*.ts": "webpack",
-    },
-
-    // test results reporter to use
-    // possible values: 'dots', 'progress'
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ["progress", "kjhtml"],
-
-    // web server port
-    port: 9876,
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ["Chrome"],
-
-    // Concurrency level
-    // how many browser should be started simultaneous
-    concurrency: Infinity,
-
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-
-    webpack: {
-      mode: "production",
-      resolve: {
-        extensions: [".js", ".ts", ".tsx"],
-        alias: {
-          "jslib-common": path.join(__dirname, "jslib/common/src"),
-          "jslib-angular": path.join(__dirname, "jslib/angular/src"),
-        },
-      },
-      module: {
-        rules: [{ test: /\.tsx?$/, loader: "ts-loader" }],
-      },
-      stats: {
-        colors: true,
-        modules: true,
-        reasons: true,
-        errorDetails: true,
-      },
-      devtool: "inline-source-map",
-    },
-  });
-};

apps/browser/package.json

@@ -17,8 +17,9 @@
     "dist:safari:mas": "npm run build:prod && gulp dist:safari:mas",
     "dist:safari:masdev": "npm run build:prod && gulp dist:safari:masdev",
     "dist:safari:dmg": "npm run build:prod && gulp dist:safari:dmg",
-    "test": "karma start --single-run",
-    "test:watch": "karma start"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:watch:all": "jest --watchAll"
   },
   "devDependencies": {
     "@angular/compiler-cli": "^12.2.13",
@@ -26,6 +27,7 @@
     "@types/chrome": "^0.0.139",
     "@types/firefox-webext-browser": "^82.0.0",
     "@types/jasmine": "^3.7.6",
+    "@types/jest": "^27.5.0",
     "@types/mousetrap": "^1.6.8",
     "@types/node": "^16.11.12",
     "buffer": "^6.0.3",
@@ -44,12 +46,7 @@
     "html-webpack-plugin": "^5.5.0",
     "jasmine-core": "^3.7.1",
     "jasmine-spec-reporter": "^7.0.0",
-    "karma": "^6.3.2",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-cli": "^2.0.0",
-    "karma-jasmine": "^4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "karma-webpack": "^5.0.0",
+    "jest-preset-angular": "^10.1.0",
     "mini-css-extract-plugin": "^2.4.5",
     "prettier": "^2.5.1",
     "process": "^0.11.10",

apps/browser/src/services/browserPlatformUtils.service.spec.ts

@@ -2,25 +2,26 @@ import { DeviceType } from "jslib-common/enums/deviceType";
 
 import BrowserPlatformUtilsService from "./browserPlatformUtils.service";
 
-const platformUtilsFactory = () => new BrowserPlatformUtilsService(null, null, null, null);
-
 describe("Browser Utils Service", () => {
   describe("getBrowser", () => {
     const originalUserAgent = navigator.userAgent;
-    const originalSafariAppExtension = (window as any).safariAppExtension;
-    const originalOpr = (window as any).opr;
 
     // Reset the userAgent.
     afterAll(() => {
       Object.defineProperty(navigator, "userAgent", {
         value: originalUserAgent,
       });
-      Object.defineProperty(window, "safari", {
-        value: originalSafariAppExtension,
-      });
-      Object.defineProperty(window, "opr", {
-        value: originalOpr,
-      });
+    });
+
+    let browserPlatformUtilsService: BrowserPlatformUtilsService;
+    beforeEach(() => {
+      (window as any).matchMedia = jest.fn().mockReturnValueOnce({});
+      browserPlatformUtilsService = new BrowserPlatformUtilsService(null, null, null, null);
+    });
+
+    afterEach(() => {
+      window.matchMedia = undefined;
+      (window as any).chrome = undefined;
     });
 
     it("should detect chrome", () => {
@@ -30,7 +31,8 @@ describe("Browser Utils Service", () => {
           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36",
       });
 
-      const browserPlatformUtilsService = platformUtilsFactory();
+      (window as any).chrome = {};
+
       expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.ChromeExtension);
     });
 
@@ -40,7 +42,6 @@ describe("Browser Utils Service", () => {
         value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0",
       });
 
-      const browserPlatformUtilsService = platformUtilsFactory();
       expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.FirefoxExtension);
     });
 
@@ -51,12 +52,6 @@ describe("Browser Utils Service", () => {
           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3175.3 Safari/537.36 OPR/49.0.2695.0 (Edition developer)",
       });
 
-      Object.defineProperty(window, "opr", {
-        configurable: true,
-        value: {},
-      });
-
-      const browserPlatformUtilsService = platformUtilsFactory();
       expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.OperaExtension);
     });
 
@@ -67,7 +62,6 @@ describe("Browser Utils Service", () => {
           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.74 Safari/537.36 Edg/79.0.309.43",
       });
 
-      const browserPlatformUtilsService = platformUtilsFactory();
       expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.EdgeExtension);
     });
 
@@ -78,18 +72,7 @@ describe("Browser Utils Service", () => {
           "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8",
       });
 
-      Object.defineProperty(window, "safariAppExtension", {
-        configurable: true,
-        value: true,
-      });
-
-      const browserPlatformUtilsService = platformUtilsFactory();
       expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.SafariExtension);
-
-      Object.defineProperty(window, "safariAppExtension", {
-        configurable: true,
-        value: false,
-      });
     });
 
     it("should detect vivaldi", () => {
@@ -99,7 +82,6 @@ describe("Browser Utils Service", () => {
           "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.97 Safari/537.36 Vivaldi/1.94.1008.40",
       });
 
-      const browserPlatformUtilsService = platformUtilsFactory();
       expect(browserPlatformUtilsService.getDevice()).toBe(DeviceType.VivaldiExtension);
     });
   });

apps/browser/tsconfig.spec.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}