Migrate ABP Angular templates to Vitest as the default testing framework - Issue 24714

templates/app-nolayers/angular/angular.json

@@ -163,17 +163,7 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "browser": "src/test.ts",
-            "polyfills": ["src/polyfills.ts"],
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
+          "builder": "@angular/build:unit-test"
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

templates/app-nolayers/angular/package.json

@@ -47,17 +47,12 @@
     "@angular/cli": "~21.0.0",
     "@angular/compiler-cli": "~21.0.0",
     "@angular/language-service": "~21.0.0",
-    "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "7.16.0",
     "@typescript-eslint/parser": "7.16.0",
     "eslint": "^8.0.0",
-    "jasmine-core": "~4.0.0",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "typescript": "~5.9.0"
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.0",
+    "vitest": "^4.0.0"
   }
 }

templates/app-nolayers/angular/src/app/home/home.component.spec.ts

@@ -1,54 +1,52 @@
 import { CoreTestingModule } from '@abp/ng.core/testing';
 import { ThemeSharedTestingModule } from '@abp/ng.theme.shared/testing';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { HomeComponent } from './home.component';
-import { OAuthService } from 'angular-oauth2-oidc';
 import { AuthService } from '@abp/ng.core';
+import { vi } from 'vitest';
 
 describe('HomeComponent', () => {
   let fixture: ComponentFixture<HomeComponent>;
-  const mockOAuthService = jasmine.createSpyObj('OAuthService', ['hasValidAccessToken']);
-  const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin']);
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [HomeComponent],
+  let mockAuthService: { isAuthenticated: boolean; navigateToLogin: ReturnType<typeof vi.fn> };
+
+  beforeEach(async () => {
+    mockAuthService = {
+      isAuthenticated: false,
+      navigateToLogin: vi.fn(),
+    };
+
+    await TestBed.configureTestingModule({
       imports: [
         CoreTestingModule.withConfig(),
         ThemeSharedTestingModule.withConfig(),
         NgxValidateCoreModule,
+        HomeComponent,
       ],
       providers: [
-        /* mock providers here */
-        {
-          provide: OAuthService,
-          useValue: mockOAuthService,
-        },
         {
           provide: AuthService,
           useValue: mockAuthService,
         },
       ],
     }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomeComponent);
-    fixture.detectChanges();
   });
 
   it('should be initiated', () => {
+    fixture = TestBed.createComponent(HomeComponent);
+    fixture.detectChanges();
     expect(fixture.componentInstance).toBeTruthy();
   });
 
   describe('when login state is true', () => {
-    beforeAll(() => {
-      mockOAuthService.hasValidAccessToken.and.returnValue(true);
+    beforeEach(() => {
+      mockAuthService.isAuthenticated = true;
+      fixture = TestBed.createComponent(HomeComponent);
+      fixture.detectChanges();
     });
 
     it('hasLoggedIn should be true', () => {
-      expect(fixture.componentInstance.hasLoggedIn).toBeTrue();
-      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled();
+      expect(fixture.componentInstance.hasLoggedIn).toBe(true);
     });
 
     it('button should not be exists', () => {

templates/app-nolayers/angular/tsconfig.app.json

@@ -1,15 +1,15 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
   ]
 }

templates/app-nolayers/angular/tsconfig.spec.json

@@ -1,18 +1,15 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
   ]
 }

templates/app/angular/angular.json

@@ -163,17 +163,7 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
-          "options": {
-            "browser": "src/test.ts",
-            "polyfills": ["src/polyfills.ts"],
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
+          "builder": "@angular/build:unit-test"
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

templates/app/angular/package.json

@@ -47,17 +47,12 @@
     "@angular/cli": "~21.0.0",
     "@angular/compiler-cli": "~21.0.0",
     "@angular/language-service": "~21.0.0",
-    "@types/jasmine": "~3.6.0",
     "@types/node": "~20.11.0",
     "@typescript-eslint/eslint-plugin": "7.16.0",
     "@typescript-eslint/parser": "7.16.0",
     "eslint": "^8.0.0",
-    "jasmine-core": "~4.0.0",
-    "karma": "~6.4.4",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "typescript": "~5.9.3"
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.0"
   }
-}
+} 

templates/app/angular/src/app/home/home.component.html

@@ -1,5 +1,4 @@
 <div class="row mb-3">
-  <abp-dynamic-form [fields]="formFields" />
   <div class="col-xl-6 col-12 d-flex">
     <div class="card h-lg-100 w-100 overflow-hidden">
       <div class="card-body">