chore: replace karma with jest

src-ui/angular.json

@@ -51,7 +51,8 @@
               "src/favicon.ico",
               "src/apple-touch-icon.png",
               "src/assets",
-							"src/manifest.webmanifest", {
+              "src/manifest.webmanifest",
+              {
                 "glob": "pdf.worker.min.js",
                 "input": "node_modules/pdfjs-dist/build/",
                 "output": "/assets/js/"
@@ -101,7 +102,9 @@
               ]
             },
             "en-US": {
-							"localize": ["en-US"]
+              "localize": [
+                "en-US"
+              ]
             }
           },
           "defaultConfiguration": ""
@@ -124,12 +127,9 @@
           }
         },
         "test": {
-					"builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/jest:run",
           "options": {
-						"main": "src/test.ts",
-						"polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
-						"karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
               "src/apple-touch-icon.png",
@@ -143,9 +143,21 @@
           }
         },
         "e2e": {
-					"builder": "@angular-devkit/build-angular:protractor",
+          "builder": "@cypress/schematic:cypress",
+          "options": {
+            "devServerTarget": "paperless-ui:serve",
+            "watch": true,
+            "headless": false
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "paperless-ui:serve:production"
+            }
+          }
+        },
+        "cypress-run": {
+          "builder": "@cypress/schematic:cypress",
           "options": {
-						"protractorConfig": "e2e/protractor.conf.js",
             "devServerTarget": "paperless-ui:serve"
           },
           "configurations": {
@@ -153,6 +165,13 @@
               "devServerTarget": "paperless-ui:serve:production"
             }
           }
+        },
+        "cypress-open": {
+          "builder": "@cypress/schematic:cypress",
+          "options": {
+            "watch": true,
+            "headless": false
+          }
         }
       }
     }

src-ui/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  moduleNameMapper: {
+    "@core/(.*)": "<rootDir>/src/app/core/$1",
+  },
+  preset: "jest-preset-angular",
+  setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"],
+  testPathIgnorePatterns: ["/node_modules/", "/cypress/"],
+};

src-ui/karma.conf.js

@@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
-    ],
-    client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/paperless-ui'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true,
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true,
-  })
-}

src-ui/package.json

@@ -7,7 +7,9 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "private": true,
   "dependencies": {
@@ -37,21 +39,15 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.0",
-    "@angular/cli": "~13.3.0",
+    "@angular-builders/jest": "latest",
+    "@angular-devkit/build-angular": "~13.2.5",
+    "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.4",
-    "@types/jasmine": "~4.0.0",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/node": "^17.0.22",
+    "@types/jest": "latest",
+    "@types/node": "^17.0.21",
     "codelyzer": "^6.0.2",
-    "jasmine-core": "~4.0.1",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.16",
-    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "protractor": "~7.0.0",
+    "cypress": "~9.5.2",
+    "jest": "latest",
     "ts-node": "~10.7.0",
     "tslint": "~6.1.3",
     "typescript": "~4.5.5"

src-ui/setup-jest.ts

@@ -0,0 +1,30 @@
+import 'jest-preset-angular/setup-jest';
+
+/* global mocks for jsdom */
+const mock = () => {
+  let storage: { [key: string]: string } = {};
+  return {
+    getItem: (key: string) => (key in storage ? storage[key] : null),
+    setItem: (key: string, value: string) => (storage[key] = value || ''),
+    removeItem: (key: string) => delete storage[key],
+    clear: () => (storage = {}),
+  };
+};
+
+Object.defineProperty(window, 'localStorage', { value: mock() });
+Object.defineProperty(window, 'sessionStorage', { value: mock() });
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => ['-webkit-appearance'],
+});
+
+Object.defineProperty(document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    };
+  },
+});
+
+/* output shorter and more meaningful Zone error stack traces */
+// Error.stackTraceLimit = 2;

src-ui/src/test.ts

@@ -1,32 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing'
-import { getTestBed } from '@angular/core/testing'
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
-
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    keys(): string[]
-    <T>(id: string): T
-  }
-}
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-  {
-    teardown: { destroyAfterEach: false },
-  }
-)
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/)
-// And load the modules.
-context.keys().map(context)

src-ui/test-config.helper.ts

@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing';
+
+type CompilerOptions = Partial<{
+  providers: any[];
+  useJit: boolean;
+  preserveWhitespaces: boolean;
+}>;
+export type ConfigureFn = (testBed: typeof TestBed) => void;
+
+export const configureTests = (configure: ConfigureFn, compilerOptions: CompilerOptions = {}) => {
+  const compilerConfig: CompilerOptions = {
+    preserveWhitespaces: false,
+    ...compilerOptions,
+  };
+
+  const configuredTestBed = TestBed.configureCompiler(compilerConfig);
+
+  configure(configuredTestBed);
+
+  return configuredTestBed.compileComponents().then(() => configuredTestBed);
+};

src-ui/tsconfig.spec.json

@@ -1,14 +1,15 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
-    ]
+      "jest"
+    ],
+    "module": "commonjs",
+    "emitDecoratorMetadata": true,
+    "allowJs": true
   },
   "files": [
-    "src/test.ts",
     "src/polyfills.ts"
   ],
   "include": [