feat: migrated packages/components from jasmine/karma to jest (#DS-2694) (koobiq#196)

Author: artembelik

.eslintrc.js

@@ -1,5 +1,7 @@
 // @ts-check
 
+const isCI = !!process.env.CI;
+
 /** @type {import('eslint').Linter.Config} */
 const config = {
     root: true,
@@ -16,7 +18,7 @@ const config = {
     ],
     rules: {
         // plugin:file-progress
-        'file-progress/activate': process.env.GITHUB_ACTION ? 0 : 1,
+        'file-progress/activate': isCI ? 0 : 1,
         // plugin:eslint-comments
         'eslint-comments/no-unused-disable': 1
     },
@@ -62,6 +64,7 @@ const config = {
                 ],
                 '@typescript-eslint/no-duplicate-enum-values': 0,
                 '@typescript-eslint/ban-tslint-comment': 1,
+
                 // plugin:@angular-eslint
                 '@angular-eslint/component-class-suffix': 0,
                 '@angular-eslint/no-host-metadata-property': 0,

angular.json

@@ -230,12 +230,22 @@
                     }
                 },
                 "test": {
+                    "builder": "@angular-builders/jest:run",
+                    "options": {
+                        "roots": ["packages/components"],
+                        "configPath": "../../jest.config.js",
+                        "tsConfig": "../../tsconfig.spec.json"
+                    }
+                },
+                "karma-test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
                         "karmaConfig": "packages/components/karma.conf.js",
-                        "main": "packages/components/test.ts",
-                        "tsConfig": "packages/components/tsconfig.spec.json",
-                        "codeCoverage": true
+                        "main": "packages/components/karma-test.ts",
+                        "tsConfig": "packages/components/tsconfig.karma-spec.json",
+                        "include": [
+                            "**/*.karma-spec.ts"
+                        ]
                     }
                 }
             }

docs/guides/06-testing.md

@@ -2,16 +2,22 @@
 
 ## Unit tests
 
--   write unit test for component using **Jasmine test framework**.
+We are using [Jest](https://github.com/jestjs/jest).
 
-## Browser tests
+Runs tests for package
 
--   in progress
+```bash
+ng test components
+```
 
-## Browser Webdriver/Integration tests
+Runs specific spec file
 
--   in progress
+```bash
+yarn jest packages/components/alert/alert.component.spec.ts
+```
 
-## Visual regression tests
+Runs specific test closure (`it`)
 
--   in progress
+```bash
+yarn jest packages/components/alert/alert.component.spec.ts --testNamePattern='should add class'
+```

jest.config.js

@@ -3,18 +3,24 @@
 const { pathsToModuleNameMapper } = require('ts-jest');
 const { compilerOptions } = require('./tsconfig.json');
 
+const isCI = !!process.env.CI;
+
 /** @type {import('jest').Config} */
 const config = {
     rootDir: __dirname,
     bail: 1,
-    verbose: true,
+    verbose: !isCI,
+    silent: isCI,
     resetModules: true,
     clearMocks: true,
     cacheDirectory: '<rootDir>/node_modules/.cache/jest',
     preset: 'jest-preset-angular',
-    setupFilesAfterEnv: ['<rootDir>/tools/jest/setup.js'],
-    moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
-    testMatch: ['<rootDir>/**/*.spec.ts']
+    setupFilesAfterEnv: ['<rootDir>/tools/jest/setup.ts'],
+    moduleNameMapper: {
+        ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' })
+    },
+    testMatch: ['<rootDir>/**/*.spec.ts'],
+    testTimeout: 2000
 };
 
 module.exports = config;

karma.conf.js

@@ -30,8 +30,6 @@ module.exports = () => {
             'junit'
         ],
 
-        files: [{ pattern: '../../dist/components/prebuilt-themes/light-theme.css', included: true, watched: true }],
-
         port: 9876,
         colors: true,
         logLevel: constants.LOG_INFO,

package.json

@@ -173,11 +173,6 @@
         "build:package-docs-content": "ts-node --project ./tools/package-docs-content/tsconfig.json ./tools/package-docs-content/package-docs-content.ts",
         "styles:built-all": "ts-node --project tools/scss-compiler/tsconfig.json tools/scss-compiler/scss-bundle.ts",
         "build:schematics": "rimraf packages/schematics/dist && rollup --failAfterWarnings -c packages/schematics/rollup.config.js && node ./packages/schematics/scripts/copy-meta-to-dist.mjs",
-        "unit:cdk": "ng test cdk",
-        "unit:components": "ng test components",
-        "unit:angular-moment-adapter": "ng test angular-moment-adapter",
-        "unit:angular-luxon-adapter": "ng test angular-luxon-adapter",
-        "unit:schematics": "jest --roots packages/schematics",
         "docs": "pnpm run build:cdk && pnpm run build:components && pnpm run styles:built-all && pnpm run build:angular-luxon-adapter && pnpm run build:angular-moment-adapter && pnpm run build:docs-content && pnpm run build:package-docs-content && pnpm run build:docs-examples-module && pnpm run build:docs-examples && pnpm run docs:start:dev",
         "docs:start:dev": "ng serve --configuration=development koobiq-docs",
         "docs:start:prod": "ng serve --configuration=production koobiq-docs",
@@ -260,7 +255,13 @@
         "dev:timezone": "ng serve dev-timezone --port 3003",
         "dev:title": "ng serve dev-title --port 3003",
         "dev:validation": "ng serve dev-validation --port 3003",
-        "dev:z-index": "ng serve dev-z-index --port 3003"
+        "dev:z-index": "ng serve dev-z-index --port 3003",
+        "-----Unit Tests-----": "-------------------------------------------------------------------------------------",
+        "unit:cdk": "ng test cdk",
+        "unit:components": "ng test components && ng run components:karma-test",
+        "unit:angular-moment-adapter": "ng test angular-moment-adapter",
+        "unit:angular-luxon-adapter": "ng test angular-luxon-adapter",
+        "unit:schematics": "jest --roots packages/schematics"
     },
     "release": {
         "packages": [

packages/angular-luxon-adapter/adapter/date-adapter.spec.ts

@@ -1,21 +1,21 @@
 import { LOCALE_ID } from '@angular/core';
-import { inject, TestBed, waitForAsync } from '@angular/core/testing';
+import { inject, TestBed } from '@angular/core/testing';
 import { DateAdapter, KBQ_DATE_LOCALE, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
 import { KBQ_LUXON_DATE_ADAPTER_OPTIONS, LuxonDateAdapter } from './date-adapter';
 import { LuxonDateModule } from './index';
 
 describe('LuxonDateAdapter with KBQ_DATE_LOCALE override', () => {
     let adapter: LuxonDateAdapter;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [LuxonDateModule],
             providers: [
                 { provide: KBQ_DATE_LOCALE, useValue: 'es-LA' },
                 { provide: KBQ_LOCALE_SERVICE, useValue: null }
             ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(inject([DateAdapter], (d: LuxonDateAdapter) => {
         adapter = d;
@@ -29,15 +29,15 @@ describe('LuxonDateAdapter with KBQ_DATE_LOCALE override', () => {
 describe('LuxonDateAdapter with LOCALE_ID override', () => {
     let adapter: LuxonDateAdapter;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [LuxonDateModule],
             providers: [
                 { provide: LOCALE_ID, useValue: 'es-LA' },
                 { provide: KBQ_LOCALE_SERVICE, useValue: null }
             ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(inject([DateAdapter], (d: LuxonDateAdapter) => {
         adapter = d;
@@ -51,7 +51,7 @@ describe('LuxonDateAdapter with LOCALE_ID override', () => {
 describe('LuxonDateAdapter with KBQ_LUXON_DATE_ADAPTER_OPTIONS override', () => {
     let adapter: LuxonDateAdapter;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [LuxonDateModule],
             providers: [
@@ -62,7 +62,7 @@ describe('LuxonDateAdapter with KBQ_LUXON_DATE_ADAPTER_OPTIONS override', () =>
                 { provide: KBQ_LOCALE_SERVICE, useValue: null }
             ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(inject([DateAdapter], (d: LuxonDateAdapter) => {
         adapter = d;

packages/angular-moment-adapter/adapter/moment-date-adapter.spec.ts

@@ -1,5 +1,5 @@
 import { LOCALE_ID } from '@angular/core';
-import { inject, TestBed, waitForAsync } from '@angular/core/testing';
+import { inject, TestBed } from '@angular/core/testing';
 import { DateAdapter, KBQ_DATE_LOCALE, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
 import moment from 'moment';
 
@@ -11,15 +11,15 @@ const JAN = 0;
 describe('MomentDateAdapter with KBQ_DATE_LOCALE override', () => {
     let adapter: MomentDateAdapter;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [MomentDateModule],
             providers: [
                 { provide: KBQ_DATE_LOCALE, useValue: 'en-US' },
                 { provide: KBQ_LOCALE_SERVICE, useValue: null }
             ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(inject([DateAdapter], (d: MomentDateAdapter) => {
         adapter = d;
@@ -33,15 +33,15 @@ describe('MomentDateAdapter with KBQ_DATE_LOCALE override', () => {
 describe('MomentDateAdapter with LOCALE_ID override', () => {
     let adapter: MomentDateAdapter;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [MomentDateModule],
             providers: [
                 { provide: LOCALE_ID, useValue: 'en-US' },
                 { provide: KBQ_LOCALE_SERVICE, useValue: null }
             ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(inject([DateAdapter], (d: MomentDateAdapter) => {
         adapter = d;
@@ -55,7 +55,7 @@ describe('MomentDateAdapter with LOCALE_ID override', () => {
 describe('MomentDateAdapter with KBQ_MOMENT_DATE_ADAPTER_OPTIONS override', () => {
     let adapter: MomentDateAdapter;
 
-    beforeEach(waitForAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [MomentDateModule],
             providers: [
@@ -66,7 +66,7 @@ describe('MomentDateAdapter with KBQ_MOMENT_DATE_ADAPTER_OPTIONS override', () =
                 { provide: KBQ_LOCALE_SERVICE, useValue: null }
             ]
         }).compileComponents();
-    }));
+    });
 
     beforeEach(inject([DateAdapter], (d: MomentDateAdapter) => {
         adapter = d;

packages/components/alert/alert.component.spec.ts

@@ -1,29 +1,25 @@
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { KbqAlert, KbqAlertModule } from './index';
 
 describe('MсAlert', () => {
     let fixture: ComponentFixture<TestApp>;
     let alertDebugElement: DebugElement;
     let alertNativeElement: HTMLElement;
-    // let testComponent: TestApp;
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [KbqAlertModule],
             declarations: [TestApp]
-        });
-
-        TestBed.compileComponents();
+        }).compileComponents();
 
         fixture = TestBed.createComponent(TestApp);
         fixture.detectChanges();
 
         alertDebugElement = fixture.debugElement.query(By.directive(KbqAlert));
         alertNativeElement = alertDebugElement.nativeElement;
-        // testComponent = fixture.debugElement.componentInstance;
-    }));
+    });
 
     it('should add class', () => {
         expect(alertNativeElement.classList.contains('kbq-alert')).toBe(true);