feat(jest): jest added

.github/workflows/main.yml

@@ -30,7 +30,7 @@ jobs:
         run: yarn lint
 
       - name: 🧪 Run tests
-        run: yarn test --code-coverage --configuration=ci
+        run: yarn test:jest
 
       - name: ⬆️ Upload coverage reports
         uses: codecov/codecov-action@v4

.github/workflows/pull-request.yml

@@ -26,7 +26,24 @@ jobs:
         run: yarn lint
 
       - name: 🧪 Run tests
-        run: yarn test --code-coverage --configuration=ci
+        run: npx jest --ci --json --coverage --testLocationInResults --outputFile=coverage/report.json
+
+      - name: 🧪 Create coverage report markdown
+        uses: ArtiomTr/jest-coverage-report-action@v2
+        id: coverage
+        with:
+          prnumber: ${{ steps.findPr.outputs.number }}
+          coverage-file: coverage/report.json
+          package-manager: yarn
+          custom-title: 🧪 Unit tests
+          threshold: 80
+          skip-step: all
+          output: report-markdown
+
+      - name: 💬 Create coverage report comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          message: ${{ steps.coverage.outputs.report }}
 
       - name: ⬆️ Upload coverage reports
         uses: codecov/codecov-action@v4

.gitignore

@@ -43,3 +43,4 @@ Thumbs.db
 
 # Temporary files
 version.ts
+.swc

angular.json

@@ -31,21 +31,13 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-devkit/build-angular:jest",
           "options": {
-            "tsConfig": "projects/ngx-update-app/tsconfig.spec.json",
             "polyfills": [
               "zone.js",
               "zone.js/testing"
             ],
-            "karmaConfig": "projects/ngx-update-app/karma.conf.js"
-          },
-          "configurations": {
-            "ci": {
-              "watch": false,
-              "progress": false,
-              "browsers": "ChromeHeadlessCI"
-            }
+            "tsConfig": "tsconfig.spec.json"
           }
         },
         "lint": {
@@ -77,7 +69,6 @@
             "index": "projects/demo/src/index.html",
             "browser": "projects/demo/src/main.ts",
             "polyfills": [
-              "zone.js"
             ],
             "tsConfig": "projects/demo/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -135,31 +126,13 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-devkit/build-angular:jest",
           "options": {
             "polyfills": [
               "zone.js",
               "zone.js/testing"
             ],
-            "tsConfig": "projects/demo/tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "projects/demo/src/favicon.ico",
-              "projects/demo/src/assets",
-              "projects/demo/src/manifest.webmanifest"
-            ],
-            "styles": [
-              "projects/demo/src/styles.scss"
-            ],
-            "scripts": [],
-            "karmaConfig": "projects/demo/karma.conf.js"
-          },
-          "configurations": {
-            "ci": {
-              "watch": false,
-              "progress": false,
-              "browsers": "ChromeHeadlessCI"
-            }
+            "tsConfig": "tsconfig.spec.json"
           }
         },
         "lint": {

jest.config.ts

@@ -0,0 +1,33 @@
+import { swcAngularJestTransformer } from '@jscutlery/swc-angular-preset';
+import type { Config } from 'jest';
+
+const config: Config = {
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/projects/demo/src/app/**/*.spec.ts', '<rootDir>/projects/ngx-update-app/src/lib/**/*.spec.ts'],
+  collectCoverageFrom: [
+    '<rootDir>/projects/ngx-update-app/src/lib/**/*.ts',
+    '!<rootDir>/projects/ngx-update-app/src/lib/**/index.ts'
+  ],
+  moduleNameMapper: {
+    'projects/ngx-update-app/src/public-api': '<rootDir>/projects/ngx-update-app/src/public-api'
+  },
+  transform: {
+    '^.+\\.(ts|mjs|js)$': swcAngularJestTransformer(),
+    '^.+\\.(html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$'
+      }
+    ]
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)']
+};
+
+export default config;

package.json

@@ -16,6 +16,7 @@
     "build:demo": "ng build demo --configuration production",
     "build": "ng build ngx-update-app --configuration production",
     "test": "ng test",
+    "test:jest": "jest",
     "lint": "ng lint",
     "script:create-version": "yarn tsx ./scripts/create-version.ts",
     "script:sync-projects": "yarn tsx ./scripts/sync-projects.ts",
@@ -56,23 +57,25 @@
     "@angular/compiler-cli": "^18.0.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-angular": "^19.3.0",
+    "@jscutlery/swc-angular-preset": "^0.3.0",
+    "@jscutlery/swc-plugin-angular": "^0.11.0",
+    "@swc/core": "~1.4.0",
+    "@swc/jest": "^0.2.36",
     "@types/fs-extra": "^11.0.4",
-    "@types/jasmine": "^5.1.4",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.13.0",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
     "auto-changelog": "^2.4.0",
     "eslint": "^8.57.0",
     "fs-extra": "^11.2.0",
     "husky": "^9.0.11",
-    "jasmine-core": "^5.1.2",
-    "karma": "^6.4.3",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "^2.2.1",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "^14.1.0",
     "lint-staged": "^15.2.5",
     "ng-packagr": "^18.0.0",
     "prettier": "^3.2.5",
+    "ts-node": "^10.9.2",
     "tsx": "^4.11.0",
     "typescript": "^5.4.5"
   },

projects/demo/src/app/app.config.ts

@@ -1,9 +1,10 @@
-import { ApplicationConfig, isDevMode } from '@angular/core';
+import { ApplicationConfig, isDevMode, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideServiceWorker } from '@angular/service-worker';
 import { provideUpdateApp } from '../../../ngx-update-app/src/public-api';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideExperimentalZonelessChangeDetection(),
     provideUpdateApp({
       interval: 1000 * 60,
       dryRun: false,

projects/demo/tsconfig.spec.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": [
-      "jasmine"
+      "jest"
     ]
   },
   "include": [

projects/ngx-update-app/src/lib/ngx-update-app.directive.spec.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { of } from 'rxjs';
 import { NgxUpdateAppDirective } from './ngx-update-app.directive';
 import { provideUpdateApp } from './ngx-update-app.provider';
 import { NgxUpdateAppService } from './ngx-update-app.service';
 
 describe('NgxUpdateAppDirective', () => {
   let fixture: ComponentFixture<TestHostComponent>;
-  let mockUpdateService: jasmine.SpyObj<NgxUpdateAppService>;
+  let mockUpdateService: { checkForUpdates: jest.Mock<unknown> };
 
   @Component({
     template: `<div>test</div>`,
@@ -16,7 +17,9 @@ describe('NgxUpdateAppDirective', () => {
   class TestHostComponent {}
 
   beforeEach(() => {
-    mockUpdateService = jasmine.createSpyObj('NgxUpdateAppService', ['checkForUpdates']);
+    mockUpdateService = {
+      checkForUpdates: jest.fn().mockReturnValue(of(null))
+    };
 
     TestBed.configureTestingModule({
       imports: [TestHostComponent],
@@ -36,9 +39,8 @@ describe('NgxUpdateAppDirective', () => {
 
   it('should create the directive', fakeAsync(() => {
     fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      const directiveInstance = fixture.debugElement.injector.get(NgxUpdateAppDirective);
-      expect(directiveInstance).toBeTruthy();
-    });
+    tick(); // Simulate passage of time for fakeAsync
+    const directiveInstance = fixture.debugElement.injector.get(NgxUpdateAppDirective);
+    expect(directiveInstance).toBeTruthy();
   }));
 });

projects/ngx-update-app/src/lib/ngx-update-app.service.spec.ts

@@ -1,22 +1,25 @@
-import { TestBed } from '@angular/core/testing';
-
 import { ApplicationRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 import { SwUpdate } from '@angular/service-worker';
-import { Subject } from 'rxjs';
+import { Subject, of } from 'rxjs';
 import { provideUpdateApp } from './ngx-update-app.provider';
 import { NgxUpdateAppService } from './ngx-update-app.service';
 
 describe('NgxUpdateAppService', () => {
   let service: NgxUpdateAppService;
-  let updateSpy: jasmine.SpyObj<SwUpdate>;
-  let appRefSpy: jasmine.SpyObj<ApplicationRef> & { afterTick: Subject<void> };
+  let updateSpy: jest.Mocked<Partial<SwUpdate>>;
+  let appRefSpy: jest.Mocked<Partial<ApplicationRef>> & { afterTick: Subject<void> };
 
   beforeEach(() => {
-    updateSpy = jasmine.createSpyObj('SwUpdate', ['checkForUpdate', 'activateUpdate']);
-    appRefSpy = jasmine.createSpyObj('ApplicationRef', ['isStable']) as jasmine.SpyObj<ApplicationRef> & {
-      afterTick: Subject<void>;
+    updateSpy = {
+      checkForUpdate: jest.fn(),
+      activateUpdate: jest.fn()
+    };
+
+    appRefSpy = {
+      isStable: of(true),
+      afterTick: new Subject()
     };
-    appRefSpy.afterTick = new Subject();
 
     TestBed.configureTestingModule({
       providers: [

projects/ngx-update-app/src/lib/ngx-update-app.service.ts

@@ -25,15 +25,13 @@ export class NgxUpdateAppService {
   public checkForUpdates(): void {
     if (this.dryRun) {
       this.onUpdate();
-    } else {
-      if (this.isEnabled) {
-        const appIsStable$ = this.appRef.isStable.pipe(first((isStable) => isStable === true));
-        const pollInterval$ = concat(appIsStable$, interval(this.interval));
-        pollInterval$.subscribe(() => this.updates.checkForUpdate());
-        this.updates.versionUpdates.pipe(filter((e) => e.type === 'VERSION_READY')).subscribe(() => {
-          this.onUpdate();
-        });
-      }
+    } else if (this.isEnabled) {
+      const appIsStable$ = this.appRef.isStable.pipe(first((isStable) => isStable === true));
+      const pollInterval$ = concat(appIsStable$, interval(this.interval));
+      pollInterval$.subscribe(() => this.updates.checkForUpdate());
+      this.updates.versionUpdates.pipe(filter((e) => e.type === 'VERSION_READY')).subscribe(() => {
+        this.onUpdate();
+      });
     }
   }
 

projects/ngx-update-app/tsconfig.spec.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": [
-      "jasmine"
+      "jest"
     ]
   },
   "include": [

setup-jest.ts

@@ -0,0 +1,2 @@
+import 'jest-preset-angular/setup-jest';
+import 'reflect-metadata';

tsconfig.spec.json

@@ -0,0 +1,16 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jest"
+    ],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}