From 1a2dee7129a4c75eebb8a66f2fbc24017913d799 Mon Sep 17 00:00:00 2001 From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com> Date: Fri, 23 Jan 2026 11:03:05 +0300 Subject: [PATCH 1/4] Migrate Angular tests from Karma/Jasmine to Vitest Replaces Karma and Jasmine with Vitest for unit testing in the Angular template. --- templates/app/angular/angular.json | 12 +- templates/app/angular/karma.conf.js | 44 ------- templates/app/angular/package.json | 11 +- .../angular/src/app/home/home.component.html | 1 - .../src/app/home/home.component.spec.ts | 114 +++++++++--------- .../angular/src/app/home/home.component.ts | 79 +----------- templates/app/angular/src/test.ts | 13 -- templates/app/angular/tsconfig.spec.json | 13 +- 8 files changed, 68 insertions(+), 219 deletions(-) delete mode 100644 templates/app/angular/karma.conf.js delete mode 100644 templates/app/angular/src/test.ts diff --git a/templates/app/angular/angular.json b/templates/app/angular/angular.json index 0a99a4c08a..81d536178a 100644 --- a/templates/app/angular/angular.json +++ b/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", diff --git a/templates/app/angular/karma.conf.js b/templates/app/angular/karma.conf.js deleted file mode 100644 index b06ddef227..0000000000 --- a/templates/app/angular/karma.conf.js +++ /dev/null @@ -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 - }); -}; diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index 9b318eb19b..9695146bd7 100644 --- a/templates/app/angular/package.json +++ b/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.8" } } \ No newline at end of file diff --git a/templates/app/angular/src/app/home/home.component.html b/templates/app/angular/src/app/home/home.component.html index edcdc66bc0..e3e73e48ae 100644 --- a/templates/app/angular/src/app/home/home.component.html +++ b/templates/app/angular/src/app/home/home.component.html @@ -1,5 +1,4 @@
-
diff --git a/templates/app/angular/src/app/home/home.component.spec.ts b/templates/app/angular/src/app/home/home.component.spec.ts index 2243bfca92..7d0ddb0952 100644 --- a/templates/app/angular/src/app/home/home.component.spec.ts +++ b/templates/app/angular/src/app/home/home.component.spec.ts @@ -1,39 +1,43 @@ 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; - const mockOAuthService = jasmine.createSpyObj('OAuthService', ['hasValidAccessToken']) - const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin']) - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [], - imports: [ - CoreTestingModule.withConfig(), - ThemeSharedTestingModule.withConfig(), - NgxValidateCoreModule, - HomeComponent - ], - providers: [ - /* mock providers here */ - { - provide: OAuthService, - useValue: mockOAuthService - }, - { - provide: AuthService, - useValue: mockAuthService - } - ], - }).compileComponents(); - }) - ); + const mockOAuthService = { + hasValidAccessToken: vi.fn() + }; + const mockAuthService = { + navigateToLogin: vi.fn() + }; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [], + 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); @@ -44,55 +48,49 @@ describe("HomeComponent", () => { expect(fixture.componentInstance).toBeTruthy(); }); - - 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(mockOAuthService.hasValidAccessToken).toHaveBeenCalled() - }) + expect(fixture.componentInstance.hasLoggedIn).toBe(true); + expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled(); + }); it("button should not be exists", () => { - const element = fixture.nativeElement - const button = element.querySelector('[role="button"]') - expect(button).toBeNull() - }) - - }) + const element = fixture.nativeElement; + const button = element.querySelector('[role="button"]'); + expect(button).toBeNull(); + }); + }); describe('when login state is false', () => { beforeAll(() => { - mockOAuthService.hasValidAccessToken.and.returnValue(false) + mockOAuthService.hasValidAccessToken.mockReturnValue(false); }); it("hasLoggedIn should be false", () => { - - expect(fixture.componentInstance.hasLoggedIn).toBeFalse(); - expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled() - }) + expect(fixture.componentInstance.hasLoggedIn).toBe(false); + expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled(); + }); it("button should be exists", () => { - const element = fixture.nativeElement - const button = element.querySelector('[role="button"]') - expect(button).toBeDefined() - }) - describe('when button clicked', () => { + const element = fixture.nativeElement; + const button = element.querySelector('[role="button"]'); + expect(button).toBeDefined(); + }); + describe('when button clicked', () => { beforeEach(() => { - const element = fixture.nativeElement - const button = element.querySelector('[role="button"]') - button.click() + const element = fixture.nativeElement; + const button = element.querySelector('[role="button"]'); + button.click(); }); it("navigateToLogin have been called", () => { - expect(mockAuthService.navigateToLogin).toHaveBeenCalled() - }) - }) - }) - + expect(mockAuthService.navigateToLogin).toHaveBeenCalled(); + }); + }); + }); }); diff --git a/templates/app/angular/src/app/home/home.component.ts b/templates/app/angular/src/app/home/home.component.ts index ee6bd838c9..7d65148a11 100644 --- a/templates/app/angular/src/app/home/home.component.ts +++ b/templates/app/angular/src/app/home/home.component.ts @@ -1,89 +1,16 @@ -import {AuthService, LocalizationPipe} from '@abp/ng.core'; +import { AuthService, LocalizationPipe } from '@abp/ng.core'; import { Component, inject } from '@angular/core'; -import {NgTemplateOutlet} from "@angular/common"; -import {DynamicFormComponent, FormFieldConfig} from "@abp/ng.components/dynamic-form"; +import { NgTemplateOutlet } from "@angular/common"; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], - imports: [NgTemplateOutlet, LocalizationPipe, DynamicFormComponent] + imports: [NgTemplateOutlet, LocalizationPipe] }) export class HomeComponent { private authService = inject(AuthService); - formFields: FormFieldConfig[] = [ - { - key: 'firstName', - type: 'text', - label: 'First Name', - placeholder: 'Enter first name', - value: 'erdemc', - required: true, - validators: [ - { type: 'required', message: 'First name is required' }, - { type: 'minLength', value: 2, message: 'Minimum 2 characters required' } - ], - gridSize: 6, - order: 1 - }, - { - key: 'lastName', - type: 'text', - label: 'Last Name', - placeholder: 'Enter last name', - required: true, - validators: [ - { type: 'required', message: 'Last name is required' } - ], - gridSize: 12, - order: 3 - }, - { - key: 'email', - type: 'email', - label: 'Email Address', - placeholder: 'Enter email', - required: true, - validators: [ - { type: 'required', message: 'Email is required' }, - { type: 'email', message: 'Please enter a valid email' } - ], - gridSize: 6, - order: 2 - }, - { - key: 'userType', - type: 'select', - label: 'User Type', - required: true, - options: [ - { key: 'admin', value: 'Administrator' }, - { key: 'user', value: 'Regular User' }, - { key: 'guest', value: 'Guest User' } - ], - validators: [ - { type: 'required', message: 'Please select user type' } - ], - order: 4 - }, - { - key: 'adminNotes', - type: 'textarea', - label: 'Admin Notes', - placeholder: 'Enter admin-specific notes', - conditionalLogic: [ - { - dependsOn: 'userType', - condition: 'equals', - value: 'admin', - action: 'show' - } - ], - order: 5 - } - ]; - get hasLoggedIn(): boolean { return this.authService.isAuthenticated; } diff --git a/templates/app/angular/src/test.ts b/templates/app/angular/src/test.ts deleted file mode 100644 index 3b701bbfa0..0000000000 --- a/templates/app/angular/src/test.ts +++ /dev/null @@ -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() -); diff --git a/templates/app/angular/tsconfig.spec.json b/templates/app/angular/tsconfig.spec.json index 092345b02e..d38370633f 100644 --- a/templates/app/angular/tsconfig.spec.json +++ b/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" ] } From 36435bd6e1227cb6be51e204ffeb8c63df84c43b Mon Sep 17 00:00:00 2001 From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com> Date: Fri, 23 Jan 2026 11:21:05 +0300 Subject: [PATCH 2/4] 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 | 12 +---- templates/app-nolayers/angular/karma.conf.js | 44 ------------------- templates/app-nolayers/angular/package.json | 11 ++--- .../src/app/home/home.component.spec.ts | 24 ++++++---- templates/app-nolayers/angular/src/test.ts | 13 ------ .../app-nolayers/angular/tsconfig.app.json | 12 ++--- .../app-nolayers/angular/tsconfig.spec.json | 13 +++--- .../src/app/home/home.component.spec.ts | 1 - templates/app/angular/tsconfig.app.json | 12 ++--- 9 files changed, 36 insertions(+), 106 deletions(-) delete mode 100644 templates/app-nolayers/angular/karma.conf.js delete mode 100644 templates/app-nolayers/angular/src/test.ts diff --git a/templates/app-nolayers/angular/angular.json b/templates/app-nolayers/angular/angular.json index 0a99a4c08a..81d536178a 100644 --- a/templates/app-nolayers/angular/angular.json +++ b/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", diff --git a/templates/app-nolayers/angular/karma.conf.js b/templates/app-nolayers/angular/karma.conf.js deleted file mode 100644 index b06ddef227..0000000000 --- a/templates/app-nolayers/angular/karma.conf.js +++ /dev/null @@ -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 - }); -}; diff --git a/templates/app-nolayers/angular/package.json b/templates/app-nolayers/angular/package.json index 2aadf0e576..2ec6ed3912 100644 --- a/templates/app-nolayers/angular/package.json +++ b/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.8" } } \ No newline at end of file diff --git a/templates/app-nolayers/angular/src/app/home/home.component.spec.ts b/templates/app-nolayers/angular/src/app/home/home.component.spec.ts index 9fb41df29a..0514873406 100644 --- a/templates/app-nolayers/angular/src/app/home/home.component.spec.ts +++ b/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; - const mockOAuthService = jasmine.createSpyObj('OAuthService', ['hasValidAccessToken']); - const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin']); - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [HomeComponent], + const mockOAuthService = { + hasValidAccessToken: vi.fn(), + }; + const mockAuthService = { + 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(); }); diff --git a/templates/app-nolayers/angular/src/test.ts b/templates/app-nolayers/angular/src/test.ts deleted file mode 100644 index 3b701bbfa0..0000000000 --- a/templates/app-nolayers/angular/src/test.ts +++ /dev/null @@ -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() -); diff --git a/templates/app-nolayers/angular/tsconfig.app.json b/templates/app-nolayers/angular/tsconfig.app.json index 82d91dc4a4..264f459bf8 100644 --- a/templates/app-nolayers/angular/tsconfig.app.json +++ b/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" ] } diff --git a/templates/app-nolayers/angular/tsconfig.spec.json b/templates/app-nolayers/angular/tsconfig.spec.json index 092345b02e..d38370633f 100644 --- a/templates/app-nolayers/angular/tsconfig.spec.json +++ b/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" ] } diff --git a/templates/app/angular/src/app/home/home.component.spec.ts b/templates/app/angular/src/app/home/home.component.spec.ts index 7d0ddb0952..49ee6cea57 100644 --- a/templates/app/angular/src/app/home/home.component.spec.ts +++ b/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(), diff --git a/templates/app/angular/tsconfig.app.json b/templates/app/angular/tsconfig.app.json index 82d91dc4a4..264f459bf8 100644 --- a/templates/app/angular/tsconfig.app.json +++ b/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" ] } From 4d537d62ac80f5f076ab066d3f93544f57eb7c31 Mon Sep 17 00:00:00 2001 From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com> Date: Fri, 23 Jan 2026 11:38:34 +0300 Subject: [PATCH 3/4] Migrate Angular template from Karma/Jasmine to Vitest Replaces Karma and Jasmine with Vitest for unit testing in the Angular module template. Removes Karma configuration files and test entry points, updates test builder in angular.json, adjusts TypeScript configs for Vitest, and updates dependencies in package.json. Test files are refactored to use Vitest mocking utilities. --- templates/module/angular/angular.json | 27 +----------- templates/module/angular/package.json | 11 ++--- .../angular/projects/dev-app/karma.conf.js | 44 ------------------- .../angular/projects/dev-app/src/test.ts | 14 ------ .../projects/dev-app/tsconfig.app.json | 11 ++--- .../projects/dev-app/tsconfig.spec.json | 12 +++-- .../projects/my-project-name/karma.conf.js | 44 ------------------- .../src/lib/my-project-name.component.spec.ts | 18 ++++---- .../src/lib/my-project-name.service.spec.ts | 6 ++- .../projects/my-project-name/src/test.ts | 15 ------- .../my-project-name/tsconfig.spec.json | 12 +++-- 11 files changed, 36 insertions(+), 178 deletions(-) delete mode 100644 templates/module/angular/projects/dev-app/karma.conf.js delete mode 100644 templates/module/angular/projects/dev-app/src/test.ts delete mode 100644 templates/module/angular/projects/my-project-name/karma.conf.js delete mode 100644 templates/module/angular/projects/my-project-name/src/test.ts diff --git a/templates/module/angular/angular.json b/templates/module/angular/angular.json index 8c1b576257..62b319d275 100644 --- a/templates/module/angular/angular.json +++ b/templates/module/angular/angular.json @@ -28,12 +28,7 @@ "defaultConfiguration": "production" }, "test": { - "builder": "@angular/build:karma", - "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" - } + "builder": "@angular/build:unit-test" }, "lint": { "builder": "@angular-eslint/builder:lint", @@ -157,25 +152,7 @@ } }, "test": { - "builder": "@angular/build:karma", - "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": [] - } + "builder": "@angular/build:unit-test" }, "lint": { "builder": "@angular-eslint/builder:lint", diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index 61e301fad5..6b341274b0 100644 --- a/templates/module/angular/package.json +++ b/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", - "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", + "jsdom": "^27.1.0", "ng-packagr": "~21.0.0", "symlink": "^2.0.0", - "typescript": "~5.9.0" + "typescript": "~5.9.0", + "vitest": "^4.0.8" } } \ No newline at end of file diff --git a/templates/module/angular/projects/dev-app/karma.conf.js b/templates/module/angular/projects/dev-app/karma.conf.js deleted file mode 100644 index eee6000f3a..0000000000 --- a/templates/module/angular/projects/dev-app/karma.conf.js +++ /dev/null @@ -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 - }); -}; diff --git a/templates/module/angular/projects/dev-app/src/test.ts b/templates/module/angular/projects/dev-app/src/test.ts deleted file mode 100644 index 7632e27a11..0000000000 --- a/templates/module/angular/projects/dev-app/src/test.ts +++ /dev/null @@ -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() -); diff --git a/templates/module/angular/projects/dev-app/tsconfig.app.json b/templates/module/angular/projects/dev-app/tsconfig.app.json index 809c09ca71..742c48812c 100644 --- a/templates/module/angular/projects/dev-app/tsconfig.app.json +++ b/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" ] } diff --git a/templates/module/angular/projects/dev-app/tsconfig.spec.json b/templates/module/angular/projects/dev-app/tsconfig.spec.json index a8ce1d396b..ff7db766ac 100644 --- a/templates/module/angular/projects/dev-app/tsconfig.spec.json +++ b/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" ] } diff --git a/templates/module/angular/projects/my-project-name/karma.conf.js b/templates/module/angular/projects/my-project-name/karma.conf.js deleted file mode 100644 index 4fa9d617e5..0000000000 --- a/templates/module/angular/projects/my-project-name/karma.conf.js +++ /dev/null @@ -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 - }); -}; diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts index 4d6aae3ac8..6176f4d6c6 100644 --- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts +++ b/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; - const mockMyProjectNameService = jasmine.createSpyObj('MyProjectNameService', { - sample: of([]), - }); - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [MyProjectNameComponent], + const mockMyProjectNameService = { + sample: vi.fn().mockReturnValue(of([])), + }; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MyProjectNameComponent], providers: [ { provide: MyProjectNameService, @@ -19,7 +21,7 @@ describe('MyProjectNameComponent', () => { }, ], }).compileComponents(); - })); + }); beforeEach(() => { fixture = TestBed.createComponent(MyProjectNameComponent); diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts index ec7aeb6c68..0782f6c0b6 100644 --- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts +++ b/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: [ diff --git a/templates/module/angular/projects/my-project-name/src/test.ts b/templates/module/angular/projects/my-project-name/src/test.ts deleted file mode 100644 index e63a876062..0000000000 --- a/templates/module/angular/projects/my-project-name/src/test.ts +++ /dev/null @@ -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() -); diff --git a/templates/module/angular/projects/my-project-name/tsconfig.spec.json b/templates/module/angular/projects/my-project-name/tsconfig.spec.json index 715dd0a5d2..d63beb540b 100644 --- a/templates/module/angular/projects/my-project-name/tsconfig.spec.json +++ b/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" ] } From b2cbc15234240985df2194894117826dd415eac2 Mon Sep 17 00:00:00 2001 From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com> Date: Thu, 29 Jan 2026 15:18:15 +0300 Subject: [PATCH 4/4] Refactor HomeComponent tests and update vitest version Removed OAuthService mocking from HomeComponent tests and switched to using AuthService's isAuthenticated property for login state checks. Also updated vitest devDependency version constraint from ^4.0.8 to ^4.0.0 in Angular template package.json files. --- templates/app-nolayers/angular/package.json | 2 +- .../src/app/home/home.component.spec.ts | 30 ++++++--------- templates/app/angular/package.json | 4 +- .../src/app/home/home.component.spec.ts | 37 ++++++++----------- templates/module/angular/package.json | 2 +- 5 files changed, 30 insertions(+), 45 deletions(-) diff --git a/templates/app-nolayers/angular/package.json b/templates/app-nolayers/angular/package.json index 2ec6ed3912..faccdf181d 100644 --- a/templates/app-nolayers/angular/package.json +++ b/templates/app-nolayers/angular/package.json @@ -53,6 +53,6 @@ "eslint": "^8.0.0", "jsdom": "^27.1.0", "typescript": "~5.9.0", - "vitest": "^4.0.8" + "vitest": "^4.0.0" } } \ No newline at end of file diff --git a/templates/app-nolayers/angular/src/app/home/home.component.spec.ts b/templates/app-nolayers/angular/src/app/home/home.component.spec.ts index 0514873406..ea07d9ad36 100644 --- a/templates/app-nolayers/angular/src/app/home/home.component.spec.ts +++ b/templates/app-nolayers/angular/src/app/home/home.component.spec.ts @@ -3,20 +3,19 @@ import { ThemeSharedTestingModule } from '@abp/ng.theme.shared/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; - const mockOAuthService = { - hasValidAccessToken: vi.fn(), - }; - const mockAuthService = { - navigateToLogin: vi.fn(), - }; + let mockAuthService: { isAuthenticated: boolean; navigateToLogin: ReturnType }; beforeEach(async () => { + mockAuthService = { + isAuthenticated: false, + navigateToLogin: vi.fn(), + }; + await TestBed.configureTestingModule({ imports: [ CoreTestingModule.withConfig(), @@ -25,11 +24,6 @@ describe('HomeComponent', () => { HomeComponent, ], providers: [ - /* mock providers here */ - { - provide: OAuthService, - useValue: mockOAuthService, - }, { provide: AuthService, useValue: mockAuthService, @@ -38,23 +32,21 @@ describe('HomeComponent', () => { }).compileComponents(); }); - beforeEach(() => { + it('should be initiated', () => { fixture = TestBed.createComponent(HomeComponent); fixture.detectChanges(); - }); - - it('should be initiated', () => { expect(fixture.componentInstance).toBeTruthy(); }); describe('when login state is true', () => { - beforeAll(() => { - mockOAuthService.hasValidAccessToken.mockReturnValue(true); + beforeEach(() => { + mockAuthService.isAuthenticated = true; + fixture = TestBed.createComponent(HomeComponent); + fixture.detectChanges(); }); it('hasLoggedIn should be true', () => { expect(fixture.componentInstance.hasLoggedIn).toBe(true); - expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled(); }); it('button should not be exists', () => { diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index 9695146bd7..5d1824c650 100644 --- a/templates/app/angular/package.json +++ b/templates/app/angular/package.json @@ -53,6 +53,6 @@ "eslint": "^8.0.0", "jsdom": "^27.1.0", "typescript": "~5.9.3", - "vitest": "^4.0.8" + "vitest": "^4.0.0" } -} \ No newline at end of file +} \ No newline at end of file diff --git a/templates/app/angular/src/app/home/home.component.spec.ts b/templates/app/angular/src/app/home/home.component.spec.ts index 49ee6cea57..4efbb17f0d 100644 --- a/templates/app/angular/src/app/home/home.component.spec.ts +++ b/templates/app/angular/src/app/home/home.component.spec.ts @@ -3,20 +3,19 @@ import { ThemeSharedTestingModule } from "@abp/ng.theme.shared/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; - const mockOAuthService = { - hasValidAccessToken: vi.fn() - }; - const mockAuthService = { - navigateToLogin: vi.fn() - }; + let mockAuthService: { isAuthenticated: boolean; navigateToLogin: ReturnType }; beforeEach(async () => { + mockAuthService = { + isAuthenticated: false, + navigateToLogin: vi.fn() + }; + await TestBed.configureTestingModule({ imports: [ CoreTestingModule.withConfig(), @@ -25,11 +24,6 @@ describe("HomeComponent", () => { HomeComponent ], providers: [ - /* mock providers here */ - { - provide: OAuthService, - useValue: mockOAuthService - }, { provide: AuthService, useValue: mockAuthService @@ -38,23 +32,21 @@ describe("HomeComponent", () => { }).compileComponents(); }); - beforeEach(() => { + it("should be initiated", () => { fixture = TestBed.createComponent(HomeComponent); fixture.detectChanges(); - }); - - it("should be initiated", () => { expect(fixture.componentInstance).toBeTruthy(); }); describe('when login state is true', () => { - beforeAll(() => { - mockOAuthService.hasValidAccessToken.mockReturnValue(true); + beforeEach(() => { + mockAuthService.isAuthenticated = true; + fixture = TestBed.createComponent(HomeComponent); + fixture.detectChanges(); }); it("hasLoggedIn should be true", () => { expect(fixture.componentInstance.hasLoggedIn).toBe(true); - expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled(); }); it("button should not be exists", () => { @@ -65,13 +57,14 @@ describe("HomeComponent", () => { }); describe('when login state is false', () => { - beforeAll(() => { - mockOAuthService.hasValidAccessToken.mockReturnValue(false); + beforeEach(() => { + mockAuthService.isAuthenticated = false; + fixture = TestBed.createComponent(HomeComponent); + fixture.detectChanges(); }); it("hasLoggedIn should be false", () => { expect(fixture.componentInstance.hasLoggedIn).toBe(false); - expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled(); }); it("button should be exists", () => { diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index 6b341274b0..ffd08c8eec 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -55,6 +55,6 @@ "ng-packagr": "~21.0.0", "symlink": "^2.0.0", "typescript": "~5.9.0", - "vitest": "^4.0.8" + "vitest": "^4.0.0" } } \ No newline at end of file