mirror of
https://github.com/bitwarden/browser.git
synced 2024-10-06 05:28:51 +02:00
Migrate components to use jest (#793)
* Migrate components to use jest (tests fail) * Fix failing tests * Fix linting errors
This commit is contained in:
parent
1370006f6e
commit
de2eb0359b
@ -73,18 +73,6 @@
|
|||||||
"options": {
|
"options": {
|
||||||
"browserTarget": "components:build"
|
"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": []
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
17
components/jest.config.js
Normal file
17
components/jest.config.js
Normal file
@ -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>/",
|
||||||
|
}),
|
||||||
|
};
|
@ -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,
|
|
||||||
});
|
|
||||||
};
|
|
10989
components/package-lock.json
generated
10989
components/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,8 @@
|
|||||||
"start": "ng serve",
|
"start": "ng serve",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"watch": "ng build --watch --configuration development",
|
"watch": "ng build --watch --configuration development",
|
||||||
"test": "ng test",
|
"test": "jest",
|
||||||
|
"test:watch": "jest --watch",
|
||||||
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
|
||||||
"storybook": "npm run docs:json && start-storybook -p 6006",
|
"storybook": "npm run docs:json && start-storybook -p 6006",
|
||||||
"build-storybook": "npm run docs:json && build-storybook",
|
"build-storybook": "npm run docs:json && build-storybook",
|
||||||
@ -24,8 +25,8 @@
|
|||||||
"@angular/platform-browser-dynamic": "^12.2.13",
|
"@angular/platform-browser-dynamic": "^12.2.13",
|
||||||
"@bitwarden/jslib-angular": "file:../angular",
|
"@bitwarden/jslib-angular": "file:../angular",
|
||||||
"bootstrap": "4.6.0",
|
"bootstrap": "4.6.0",
|
||||||
"tslib": "^2.3.0",
|
"rxjs": "^7.4.0",
|
||||||
"rxjs": "^7.4.0"
|
"tslib": "^2.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^12.2.13",
|
"@angular-devkit/build-angular": "^12.2.13",
|
||||||
@ -41,18 +42,12 @@
|
|||||||
"@storybook/angular": "^6.4.18",
|
"@storybook/angular": "^6.4.18",
|
||||||
"@storybook/builder-webpack5": "^6.4.18",
|
"@storybook/builder-webpack5": "^6.4.18",
|
||||||
"@storybook/manager-webpack5": "^6.4.18",
|
"@storybook/manager-webpack5": "^6.4.18",
|
||||||
"@types/jasmine": "~3.10.0",
|
"@types/node": "^16.11.33",
|
||||||
"@types/node": "^12.11.1",
|
|
||||||
"@webcomponents/custom-elements": "^1.5.0",
|
"@webcomponents/custom-elements": "^1.5.0",
|
||||||
"autoprefixer": "^10.4.2",
|
"autoprefixer": "^10.4.2",
|
||||||
"babel-loader": "^8.2.3",
|
"babel-loader": "^8.2.3",
|
||||||
"chromatic": "^6.5.2",
|
"chromatic": "^6.5.2",
|
||||||
"jasmine-core": "~3.10.0",
|
"jest-preset-angular": "^11.1.2",
|
||||||
"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",
|
|
||||||
"postcss": "^8.4.6",
|
"postcss": "^8.4.6",
|
||||||
"storybook-addon-designs": "^6.2.1",
|
"storybook-addon-designs": "^6.2.1",
|
||||||
"tailwindcss": "^3.0.18",
|
"tailwindcss": "^3.0.18",
|
||||||
|
1
components/spec/test.ts
Normal file
1
components/spec/test.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
import "jest-preset-angular/setup-jest";
|
@ -17,7 +17,7 @@ describe("BannerComponent", () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it("should create with alert", () => {
|
it("should create with alert", () => {
|
||||||
expect(component.useAlertRole).toBeTrue();
|
expect(component.useAlertRole).toBe(true);
|
||||||
const el = fixture.nativeElement.children[0];
|
const el = fixture.nativeElement.children[0];
|
||||||
expect(el.getAttribute("role")).toEqual("status");
|
expect(el.getAttribute("role")).toEqual("status");
|
||||||
expect(el.getAttribute("aria-live")).toEqual("polite");
|
expect(el.getAttribute("aria-live")).toEqual("polite");
|
||||||
@ -27,7 +27,7 @@ describe("BannerComponent", () => {
|
|||||||
component.useAlertRole = false;
|
component.useAlertRole = false;
|
||||||
fixture.autoDetectChanges();
|
fixture.autoDetectChanges();
|
||||||
|
|
||||||
expect(component.useAlertRole).toBeFalse();
|
expect(component.useAlertRole).toBe(false);
|
||||||
const el = fixture.nativeElement.children[0];
|
const el = fixture.nativeElement.children[0];
|
||||||
expect(el.getAttribute("role")).toBeNull();
|
expect(el.getAttribute("role")).toBeNull();
|
||||||
expect(el.getAttribute("aria-live")).toBeNull();
|
expect(el.getAttribute("aria-live")).toBeNull();
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
||||||
import { I18nMockService } from "src/utils/i18n-mock.service";
|
|
||||||
|
|
||||||
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
import { I18nService } from "jslib-common/abstractions/i18n.service";
|
||||||
|
|
||||||
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
||||||
|
|
||||||
import { CalloutComponent } from ".";
|
import { CalloutComponent } from ".";
|
||||||
|
|
||||||
describe("Callout", () => {
|
describe("Callout", () => {
|
||||||
|
@ -14,7 +14,7 @@ describe("Menu", () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// The overlay is created outside the root debugElement, so we need to query its parent
|
// 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(
|
beforeEach(
|
||||||
waitForAsync(() => {
|
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));
|
const buttonDebugElement = fixture.debugElement.query(By.directive(MenuTriggerForDirective));
|
||||||
(buttonDebugElement.nativeElement as HTMLButtonElement).click();
|
(buttonDebugElement.nativeElement as HTMLButtonElement).click();
|
||||||
|
|
||||||
@ -49,7 +49,7 @@ describe("Menu", () => {
|
|||||||
it("should close when a menu item is clicked", () => {
|
it("should close when a menu item is clicked", () => {
|
||||||
getMenuTriggerDirective().toggleMenu();
|
getMenuTriggerDirective().toggleMenu();
|
||||||
|
|
||||||
fixture.debugElement.parent.query(By.css("#item1")).nativeElement.click();
|
(document.querySelector("#item1") as HTMLAnchorElement).click();
|
||||||
|
|
||||||
expect(getBitMenuPanel()).toBeFalsy();
|
expect(getBitMenuPanel()).toBeFalsy();
|
||||||
});
|
});
|
||||||
@ -57,7 +57,7 @@ describe("Menu", () => {
|
|||||||
it("should close when the backdrop is clicked", () => {
|
it("should close when the backdrop is clicked", () => {
|
||||||
getMenuTriggerDirective().toggleMenu();
|
getMenuTriggerDirective().toggleMenu();
|
||||||
|
|
||||||
fixture.debugElement.parent.query(By.css(".cdk-overlay-backdrop")).nativeElement.click();
|
(document.querySelector(".cdk-overlay-backdrop") as HTMLAnchorElement).click();
|
||||||
|
|
||||||
expect(getBitMenuPanel()).toBeFalsy();
|
expect(getBitMenuPanel()).toBeFalsy();
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
{
|
||||||
"compileOnSave": false,
|
"compileOnSave": false,
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
@ -1,10 +1,3 @@
|
|||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
{
|
||||||
"extends": "./tsconfig.json",
|
"extends": "./tsconfig.json"
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "./out-tsc/spec",
|
|
||||||
"types": ["jasmine"]
|
|
||||||
},
|
|
||||||
"files": ["src/test.ts", "src/polyfills.ts"],
|
|
||||||
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user