Migrate components to use jest (#793)

* Migrate components to use jest (tests fail)

* Fix failing tests

* Fix linting errors
This commit is contained in:
Oscar Hinton 2022-05-12 17:33:49 +02:00 committed by GitHub
parent 1370006f6e
commit de2eb0359b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 10867 additions and 240 deletions

View File

@ -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": []
}
}
}
}

17
components/jest.config.js Normal file
View 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>/",
}),
};

View File

@ -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,
});
};

File diff suppressed because it is too large Load Diff

View File

@ -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",

1
components/spec/test.ts Normal file
View File

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

View File

@ -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();

View File

@ -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", () => {

View File

@ -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();
});

View File

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

View File

@ -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"
}