Migrate components to use jest (#793)

* Migrate components to use jest (tests fail)

* Fix failing tests

* Fix linting errors

components/angular.json

@@ -73,18 +73,6 @@
           "options": {
             "browserTarget": "components:build"
           }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
-            "scripts": []
-          }
         }
       }
     }

components/jest.config.js

@@ -0,0 +1,17 @@
+const { pathsToModuleNameMapper } = require("ts-jest");
+
+const { compilerOptions } = require("./tsconfig");
+
+module.exports = {
+  name: "angular",
+  displayName: "component library tests",
+  preset: "jest-preset-angular",
+  testMatch: ["**/+(*.)+(spec).+(ts)"],
+  setupFilesAfterEnv: ["<rootDir>/spec/test.ts"],
+  collectCoverage: true,
+  coverageReporters: ["html", "lcov"],
+  coverageDirectory: "coverage",
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
+    prefix: "<rootDir>/",
+  }),
+};

components/karma.conf.js

@@ -1,42 +0,0 @@
-/* eslint-disable */
-// 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"),
-      require("@angular-devkit/build-angular/plugins/karma"),
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true, // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require("path").join(__dirname, "./coverage/components"),
-      subdir: ".",
-      reporters: [{ type: "html" }, { type: "text-summary" }],
-    },
-    reporters: ["progress", "kjhtml"],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ["Chrome"],
-    singleRun: false,
-    restartOnFileChange: true,
-  });
-};

components/package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "storybook": "npm run docs:json && start-storybook -p 6006",
     "build-storybook": "npm run docs:json && build-storybook",
@@ -24,8 +25,8 @@
     "@angular/platform-browser-dynamic": "^12.2.13",
     "@bitwarden/jslib-angular": "file:../angular",
     "bootstrap": "4.6.0",
-    "tslib": "^2.3.0",
-    "rxjs": "^7.4.0"
+    "rxjs": "^7.4.0",
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^12.2.13",
@@ -41,18 +42,12 @@
     "@storybook/angular": "^6.4.18",
     "@storybook/builder-webpack5": "^6.4.18",
     "@storybook/manager-webpack5": "^6.4.18",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^16.11.33",
     "@webcomponents/custom-elements": "^1.5.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.5.2",
-    "jasmine-core": "~3.10.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
+    "jest-preset-angular": "^11.1.2",
     "postcss": "^8.4.6",
     "storybook-addon-designs": "^6.2.1",
     "tailwindcss": "^3.0.18",

components/spec/test.ts

@@ -0,0 +1 @@
+import "jest-preset-angular/setup-jest";

components/src/banner/banner.component.spec.ts

@@ -17,7 +17,7 @@ describe("BannerComponent", () => {
   });
 
   it("should create with alert", () => {
-    expect(component.useAlertRole).toBeTrue();
+    expect(component.useAlertRole).toBe(true);
     const el = fixture.nativeElement.children[0];
     expect(el.getAttribute("role")).toEqual("status");
     expect(el.getAttribute("aria-live")).toEqual("polite");
@@ -27,7 +27,7 @@ describe("BannerComponent", () => {
     component.useAlertRole = false;
     fixture.autoDetectChanges();
 
-    expect(component.useAlertRole).toBeFalse();
+    expect(component.useAlertRole).toBe(false);
     const el = fixture.nativeElement.children[0];
     expect(el.getAttribute("role")).toBeNull();
     expect(el.getAttribute("aria-live")).toBeNull();

components/src/callout/callout.component.spec.ts

@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { I18nMockService } from "src/utils/i18n-mock.service";
 
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 
+import { I18nMockService } from "../utils/i18n-mock.service";
+
 import { CalloutComponent } from ".";
 
 describe("Callout", () => {

components/src/menu/menu.component.spec.ts

@@ -14,7 +14,7 @@ describe("Menu", () => {
   };
 
   // The overlay is created outside the root debugElement, so we need to query its parent
-  const getBitMenuPanel = () => fixture.debugElement.parent.query(By.css(".bit-menu-panel"));
+  const getBitMenuPanel = () => document.querySelector(".bit-menu-panel");
 
   beforeEach(
     waitForAsync(() => {
@@ -30,7 +30,7 @@ describe("Menu", () => {
     })
   );
 
-  it("should open when the trigger is clicked", () => {
+  it("should open when the trigger is clicked", async () => {
     const buttonDebugElement = fixture.debugElement.query(By.directive(MenuTriggerForDirective));
     (buttonDebugElement.nativeElement as HTMLButtonElement).click();
 
@@ -49,7 +49,7 @@ describe("Menu", () => {
   it("should close when a menu item is clicked", () => {
     getMenuTriggerDirective().toggleMenu();
 
-    fixture.debugElement.parent.query(By.css("#item1")).nativeElement.click();
+    (document.querySelector("#item1") as HTMLAnchorElement).click();
 
     expect(getBitMenuPanel()).toBeFalsy();
   });
@@ -57,7 +57,7 @@ describe("Menu", () => {
   it("should close when the backdrop is clicked", () => {
     getMenuTriggerDirective().toggleMenu();
 
-    fixture.debugElement.parent.query(By.css(".cdk-overlay-backdrop")).nativeElement.click();
+    (document.querySelector(".cdk-overlay-backdrop") as HTMLAnchorElement).click();
 
     expect(getBitMenuPanel()).toBeFalsy();
   });

components/tsconfig.json

@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {

components/tsconfig.spec.json

@@ -1,10 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": ["jasmine"]
-  },
-  "files": ["src/test.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  "extends": "./tsconfig.json"
 }