test: migrate unit tests from karma/jasmine to vitest (#2571)

Switches the test target from `@angular/build:karma` to `@angular/build:unit-test`
with the vitest runner, running in headless Chromium via Playwright. Coverage
reporters, the `ui-toolkit-angular.xml` JUnit report and the CI artifact upload
are all preserved.

Author: madhavilosetty-intel

.github/dependabot.yml

@@ -11,11 +11,16 @@ updates:
           - '@angular/*'
           - '@angular-devkit/*'
           - 'rxjs'
-          - 'zone.js'
           - 'typescript'
         update-types:
           - patch
           - minor
+      # vitest and its plugins peer-depend on the same 4.x line; bump together.
+      vitest:
+        patterns:
+          - 'vitest'
+          - '@vitest/*'
+          - 'playwright'
     ignore:
       - dependency-name: '@angular/*'
         update-types:
@@ -26,9 +31,6 @@ updates:
       - dependency-name: 'rxjs'
         update-types:
           - version-update:semver-major
-      - dependency-name: 'zone.js'
-        update-types:
-          - version-update:semver-major
       - dependency-name: 'typescript'
         update-types:
           - version-update:semver-major

.github/workflows/ci.yml

@@ -47,17 +47,22 @@ jobs:
       - name: Run Prettier Check
         run: npm run ci-prettify
 
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
       - name: Run Test
         run: npm run test-ci
 
       - uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
         name: Upload Coverage Results
         with:
-          directory: ./coverage
+          directory: ./coverage/ui-toolkit-angular
       - name: Run Build
         run: npm run build
 
-      - name: Upload Karma Results
+      - name: Upload Test Results
+        # Run even when Test fails — that is exactly when the junit report matters.
+        if: always()
         uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: ui-toolkit-angular-unit

angular.json

@@ -25,18 +25,39 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "codeCoverage": true,
-            "main": "test.ts",
+            "buildTarget": "ui-toolkit-angular:build",
+            "runner": "vitest",
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js"
+            "browsers": [
+              "chromium"
+            ],
+            "headless": true,
+            "coverage": true,
+            "coverageReporters": [
+              "html",
+              "text-summary",
+              "lcov"
+            ],
+            "reporters": [
+              "default",
+              [
+                "junit",
+                {
+                  "outputFile": "ui-toolkit-angular.xml"
+                }
+              ]
+            ]
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["**/*.ts", "**/*.html"]
+            "lintFilePatterns": [
+              "**/*.ts",
+              "**/*.html"
+            ]
           }
         }
       }

eslint.config.js

@@ -8,6 +8,14 @@ const angular = require('angular-eslint')
 const eslintConfigPrettier = require('eslint-config-prettier')
 // Export our config array, which is composed together thanks to the typed utility function from typescript-eslint
 module.exports = tseslint.config(
+  {
+    // Flat config does not honour .gitignore; without this the generated
+    // coverage HTML report fails to parse under the lint globs.
+    ignores: [
+      'coverage/',
+      'dist/'
+    ]
+  },
   {
     // Everything in this config object targets our TypeScript files (Components, Directives, Pipes etc)
     files: ['**/*.ts'],

ider/src/ider.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { IDERComponent } from './ider.component'
 import { AMTRedirector, AMTIDER } from '@device-management-toolkit/ui-toolkit/core'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 describe('IderComponent', () => {
   let component: IDERComponent
@@ -24,6 +25,13 @@ describe('IderComponent', () => {
     // Initialize with deviceConnection = false to avoid triggering effect during setup
     fixture.componentRef.setInput('deviceConnection', false)
     fixture.detectChanges()
+
+    // Never let a spec open a real WebSocket to the MPS server.
+    vi.spyOn(AMTRedirector.prototype, 'start').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
   })
 
   it('should create', () => {
@@ -49,45 +57,49 @@ describe('IderComponent', () => {
   })
 
   it('should emit device status', () => {
-    spyOn(component.deviceStatus, 'emit')
+    const emitSpy = vi.spyOn(component.deviceStatus, 'emit').mockImplementation(() => {})
     component.onConnectionStateChange(component.redirector, 1)
-    expect(component.deviceStatus.emit).toHaveBeenCalledWith(1)
+    expect(emitSpy).toHaveBeenCalledWith(1)
   })
 
   it('should call init when deviceConnection is true', () => {
-    spyOn(component, 'init')
+    const initSpy = vi.spyOn(component, 'init').mockImplementation(() => {})
     fixture.componentRef.setInput('deviceConnection', true)
     fixture.detectChanges()
-    expect(component.init).toHaveBeenCalled()
+    expect(initSpy).toHaveBeenCalled()
   })
 
   it('should call stopIder when deviceConnection is false', () => {
-    spyOn(component, 'stopIder')
+    // Stub init so it only instantiates: the real init() schedules a 4s setTimeout
+    // that would call startIder() long after this spec has finished.
+    vi.spyOn(component, 'init').mockImplementation(() => {
+      component.instantiate()
+    })
+    const stopIderSpy = vi.spyOn(component, 'stopIder').mockImplementation(() => {})
 
     // First set deviceConnection to true to initialize
     fixture.componentRef.setInput('deviceConnection', true)
     fixture.detectChanges()
 
-    // Set up a mock redirector so the effect will call stopIder
-    component.redirector = {} as any
+    expect(component.redirector).toBeInstanceOf(AMTRedirector)
 
     // Then set deviceConnection to false
     fixture.componentRef.setInput('deviceConnection', false)
     fixture.detectChanges()
 
-    expect(component.stopIder).toHaveBeenCalled()
+    expect(stopIderSpy).toHaveBeenCalled()
   })
 
   it('should emit updated iderData', () => {
-    spyOn(component.iderData, 'emit')
+    const emitSpy = vi.spyOn(component.iderData, 'emit').mockImplementation(() => {})
     component.instantiate()
     component.iderSectorStats(1, 0, 0, 0, 2)
-    expect(component.iderData.emit).toHaveBeenCalled()
+    expect(emitSpy).toHaveBeenCalled()
   })
 
   it('should stop ider', () => {
-    const redirectorSpy = spyOn(AMTRedirector.prototype, 'stop')
-    const cleanupSpy = spyOn(component, 'cleanup')
+    const redirectorSpy = vi.spyOn(AMTRedirector.prototype, 'stop').mockImplementation(() => {})
+    const cleanupSpy = vi.spyOn(component, 'cleanup').mockImplementation(() => {})
     component.instantiate()
     component.stopIder()
 
@@ -98,7 +110,7 @@ describe('IderComponent', () => {
   })
 
   it('should stop ider on destroy', () => {
-    const stopSpy = spyOn(AMTIDER.prototype, 'stop')
+    const stopSpy = vi.spyOn(AMTIDER.prototype, 'stop').mockImplementation(() => {})
     component.instantiate()
     component.ngOnDestroy()
     expect(stopSpy).toHaveBeenCalled()