Migrate Angular template from Karma/Jasmine to Vitest on app-no-layers

Replaces Karma and Jasmine with Vitest and jsdom for unit testing in the app-nolayers Angular template. Removes Karma configuration files and related dependencies, updates test configuration in angular.json, and adapts test files and tsconfig for Vitest. Also updates tsconfig.app.json and tsconfig.spec.json to reflect new test setup. Minor cleanup in app template test files.

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.8"
-    "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,22 +1,28 @@
 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 mockOAuthService = {
-  const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin']);
+    hasValidAccessToken: vi.fn(),
-  beforeEach(waitForAsync(() => {
+  };
-    TestBed.configureTestingModule({
+  const mockAuthService = {
-      declarations: [HomeComponent],
+    navigateToLogin: vi.fn(),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         CoreTestingModule.withConfig(),
         ThemeSharedTestingModule.withConfig(),
         NgxValidateCoreModule,
+        HomeComponent,
       ],
       providers: [
         /* mock providers here */
@@ -30,7 +36,7 @@ describe('HomeComponent', () => {
         },
       ],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
@@ -43,11 +49,11 @@ describe('HomeComponent', () => {
 
   describe('when login state is true', () => {
     beforeAll(() => {
-      mockOAuthService.hasValidAccessToken.and.returnValue(true);
+      mockOAuthService.hasValidAccessToken.mockReturnValue(true);
     });
 
     it('hasLoggedIn should be true', () => {
-      expect(fixture.componentInstance.hasLoggedIn).toBeTrue();
+      expect(fixture.componentInstance.hasLoggedIn).toBe(true);
       expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled();
     });
 

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/src/app/home/home.component.spec.ts

@@ -18,7 +18,6 @@ describe("HomeComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [],
       imports: [
         CoreTestingModule.withConfig(),
         ThemeSharedTestingModule.withConfig(),

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