Merge pull request #24725 from abpframework/issue-24714

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",
+          "builder": "@angular/build:unit-test"
-          "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": []
-          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

templates/app-nolayers/angular/karma.conf.js

@@ -1,44 +0,0 @@
-// 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'),
-      
-    ],
-    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/MyProjectName'),
-      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
-  });
-};

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",
+    "jsdom": "^27.1.0",
-    "karma": "~6.4.4",
+    "typescript": "~5.9.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "vitest": "^4.0.0"
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "typescript": "~5.9.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']);
+  let mockAuthService: { isAuthenticated: boolean; navigateToLogin: ReturnType<typeof vi.fn> };
-  const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin']);
+
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    mockAuthService = {
-      declarations: [HomeComponent],
+      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(() => {
+    beforeEach(() => {
-      mockOAuthService.hasValidAccessToken.and.returnValue(true);
+      mockAuthService.isAuthenticated = true;
+      fixture = TestBed.createComponent(HomeComponent);
+      fixture.detectChanges();
     });
 
     it('hasLoggedIn should be true', () => {
-      expect(fixture.componentInstance.hasLoggedIn).toBeTrue();
+      expect(fixture.componentInstance.hasLoggedIn).toBe(true);
-      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled();
     });
 
     it('button should not be exists', () => {

templates/app-nolayers/angular/src/test.ts

@@ -1,13 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

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",
+          "builder": "@angular/build:unit-test"
-          "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": []
-          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

templates/app/angular/karma.conf.js

@@ -1,44 +0,0 @@
-// 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'),
-      
-    ],
-    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/MyProjectName'),
-      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
-  });
-};

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",
+    "jsdom": "^27.1.0",
-    "karma": "~6.4.4",
+    "typescript": "~5.9.3",
-    "karma-chrome-launcher": "~3.1.0",
+    "vitest": "^4.0.0"
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "typescript": "~5.9.3"
   }
-}
+} 

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

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

@@ -1,98 +1,88 @@
 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'])
+  let mockAuthService: { isAuthenticated: boolean; navigateToLogin: ReturnType<typeof vi.fn> };
-  const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin'])
+
-  beforeEach(
+  beforeEach(async () => {
-    waitForAsync(() => {
+    mockAuthService = {
-      TestBed.configureTestingModule({
+      isAuthenticated: false,
-        declarations: [],
+      navigateToLogin: vi.fn()
-        imports: [
+    };
-          CoreTestingModule.withConfig(),
+
-          ThemeSharedTestingModule.withConfig(),
+    await TestBed.configureTestingModule({
-          NgxValidateCoreModule,
+      imports: [
-          HomeComponent
+        CoreTestingModule.withConfig(),
-        ],
+        ThemeSharedTestingModule.withConfig(),
-        providers: [
+        NgxValidateCoreModule,
-          /* mock providers here */
+        HomeComponent
-          {
+      ],
-            provide: OAuthService,
+      providers: [
-            useValue: mockOAuthService
+        {
-          },
+          provide: AuthService,
-          {
+          useValue: mockAuthService
-            provide: AuthService,
+        }
-            useValue: mockAuthService
+      ],
-          }
+    }).compileComponents();
-        ],
-      }).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(() => {
+    beforeEach(() => {
-      mockOAuthService.hasValidAccessToken.and.returnValue(true)
+      mockAuthService.isAuthenticated = true;
+      fixture = TestBed.createComponent(HomeComponent);
+      fixture.detectChanges();
     });
 
     it("hasLoggedIn should be true", () => {
-
+      expect(fixture.componentInstance.hasLoggedIn).toBe(true);
-      expect(fixture.componentInstance.hasLoggedIn).toBeTrue();
+    });
-      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled()
-    })
 
     it("button should not be exists", () => {
-      const element = fixture.nativeElement
+      const element = fixture.nativeElement;
-      const button = element.querySelector('[role="button"]')
+      const button = element.querySelector('[role="button"]');
-      expect(button).toBeNull()
+      expect(button).toBeNull();
-    })
+    });
-
+  });
-  })
 
   describe('when login state is false', () => {
-    beforeAll(() => {
+    beforeEach(() => {
-      mockOAuthService.hasValidAccessToken.and.returnValue(false)
+      mockAuthService.isAuthenticated = false;
+      fixture = TestBed.createComponent(HomeComponent);
+      fixture.detectChanges();
     });
 
     it("hasLoggedIn should be false", () => {
-
+      expect(fixture.componentInstance.hasLoggedIn).toBe(false);
-      expect(fixture.componentInstance.hasLoggedIn).toBeFalse();
+    });
-      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled()
-    })
 
     it("button should be exists", () => {
-      const element = fixture.nativeElement
+      const element = fixture.nativeElement;
-      const button = element.querySelector('[role="button"]')
+      const button = element.querySelector('[role="button"]');
-      expect(button).toBeDefined()
+      expect(button).toBeDefined();
-    })
+    });
-    describe('when button clicked', () => {
 
+    describe('when button clicked', () => {
       beforeEach(() => {
-        const element = fixture.nativeElement
+        const element = fixture.nativeElement;
-        const button = element.querySelector('[role="button"]')
+        const button = element.querySelector('[role="button"]');
-        button.click()
+        button.click();
       });
 
       it("navigateToLogin have been called", () => {
-        expect(mockAuthService.navigateToLogin).toHaveBeenCalled()
+        expect(mockAuthService.navigateToLogin).toHaveBeenCalled();
-      })
+      });
-    })
+    });
-  })
+  });
-
 });

templates/app/angular/src/test.ts

@@ -1,13 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

templates/app/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/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/module/angular/angular.json

@@ -28,12 +28,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test"
-          "options": {
-            "main": "projects/my-project-name/src/test.ts",
-            "tsConfig": "projects/my-project-name/tsconfig.spec.json",
-            "karmaConfig": "projects/my-project-name/karma.conf.js"
-          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
@@ -157,25 +152,7 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test"
-          "options": {
-            "browser": "projects/dev-app/src/test.ts",
-            "polyfills": ["projects/dev-app/src/polyfills.ts"],
-            "tsConfig": "projects/dev-app/tsconfig.spec.json",
-            "karmaConfig": "projects/dev-app/karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "assets": ["projects/dev-app/src/favicon.ico", "projects/dev-app/src/assets"],
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
-              "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
-              "node_modules/@swimlane/ngx-datatable/index.css",
-              "node_modules/@swimlane/ngx-datatable/assets/icons.css",
-              "node_modules/@swimlane/ngx-datatable/themes/material.css",
-              "projects/dev-app/src/styles.scss"
-            ],
-            "scripts": []
-          }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",

templates/module/angular/package.json

@@ -47,19 +47,14 @@
     "@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",
+    "jsdom": "^27.1.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",
     "ng-packagr": "~21.0.0",
     "symlink": "^2.0.0",
-    "typescript": "~5.9.0"
+    "typescript": "~5.9.0",
+    "vitest": "^4.0.0"
   }
 }

templates/module/angular/projects/dev-app/karma.conf.js

@@ -1,44 +0,0 @@
-// 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'),
-      
-    ],
-    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/dev-app'),
-      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
-  });
-};

templates/module/angular/projects/dev-app/src/test.ts

@@ -1,14 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

templates/module/angular/projects/dev-app/tsconfig.app.json

@@ -1,14 +1,15 @@
+/* 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/module/angular/projects/dev-app/tsconfig.spec.json

@@ -1,18 +1,16 @@
+/* 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",
       "node"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.spec.ts",
+    "src/**/*.d.ts",
-    "src/**/*.d.ts"
+    "src/**/*.spec.ts"
   ]
 }

templates/module/angular/projects/my-project-name/karma.conf.js

@@ -1,44 +0,0 @@
-// 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'),
-      
-    ],
-    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/my-project-name'),
-      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
-  });
-};

templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts

@@ -1,17 +1,19 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MyProjectNameComponent } from './components/my-project-name.component';
 import { MyProjectNameService } from '@my-company-name/my-project-name';
 import { of } from 'rxjs';
+import { vi } from 'vitest';
 
 describe('MyProjectNameComponent', () => {
   let component: MyProjectNameComponent;
   let fixture: ComponentFixture<MyProjectNameComponent>;
-  const mockMyProjectNameService = jasmine.createSpyObj('MyProjectNameService', {
+  const mockMyProjectNameService = {
-    sample: of([]),
+    sample: vi.fn().mockReturnValue(of([])),
-  });
+  };
-  beforeEach(waitForAsync(() => {
+
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
-      declarations: [MyProjectNameComponent],
+    await TestBed.configureTestingModule({
+      imports: [MyProjectNameComponent],
       providers: [
         {
           provide: MyProjectNameService,
@@ -19,7 +21,7 @@ describe('MyProjectNameComponent', () => {
         },
       ],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(MyProjectNameComponent);

templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts

@@ -1,10 +1,14 @@
 import { TestBed } from '@angular/core/testing';
 import { MyProjectNameService } from './services/my-project-name.service';
 import { RestService } from '@abp/ng.core';
+import { vi } from 'vitest';
 
 describe('MyProjectNameService', () => {
   let service: MyProjectNameService;
-  const mockRestService = jasmine.createSpyObj('RestService', ['request']);
+  const mockRestService = {
+    request: vi.fn(),
+  };
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [

templates/module/angular/projects/my-project-name/src/test.ts

@@ -1,15 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

templates/module/angular/projects/my-project-name/tsconfig.spec.json

@@ -1,17 +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"
-  ],
   "include": [
-    "**/*.spec.ts",
+    "**/*.d.ts",
-    "**/*.d.ts"
+    "**/*.spec.ts"
   ]
 }