Migrate ABP Angular templates to Vitest as the default testing framework - Issue 24714#24725
Migrate ABP Angular templates to Vitest as the default testing framework - Issue 24714#24725fahrigedik wants to merge 4 commits intodevfrom
Conversation
Replaces Karma and Jasmine with Vitest for unit testing in the Angular template.
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.
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.
There was a problem hiding this comment.
Pull request overview
This PR migrates the ABP Angular templates from Karma/Jasmine to Vitest as the default testing framework, aligning with Angular 21's official testing recommendations and modern frontend ecosystem trends.
Changes:
- Removed Karma configuration files and Jasmine-related dependencies from all three Angular template directories (app, app-nolayers, module)
- Added Vitest and jsdom as testing dependencies
- Updated Angular build configuration to use
@angular/build:unit-testbuilder instead of@angular/build:karma - Migrated test files from Jasmine APIs (
jasmine.createSpyObj,.toBeTrue(),waitForAsync) to Vitest equivalents (vi.fn(),.toBe(true),async/await) - Updated TypeScript configurations to remove explicit test file references and use Vitest globals
Reviewed changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| templates/app/angular/package.json | Removed Karma/Jasmine dependencies, added vitest and jsdom |
| templates/app/angular/angular.json | Replaced @angular/build:karma with @angular/build:unit-test |
| templates/app/angular/tsconfig.spec.json | Updated types from jasmine to vitest/globals, removed explicit file references |
| templates/app/angular/tsconfig.app.json | Modernized configuration with include/exclude patterns |
| templates/app/angular/karma.conf.js | Removed Karma configuration file |
| templates/app/angular/src/test.ts | Removed manual Angular test environment setup (handled by builder) |
| templates/app/angular/src/app/home/home.component.ts | Contains unrelated changes - removed DynamicFormComponent import and formFields property |
| templates/app/angular/src/app/home/home.component.html | Contains unrelated changes - removed abp-dynamic-form element |
| templates/app/angular/src/app/home/home.component.spec.ts | Migrated from Jasmine to Vitest APIs |
| templates/app-nolayers/angular/* | Same pattern of changes as app template |
| templates/module/angular/* | Same pattern of changes with additional project structure |
| templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts | Bug introduced - non-standalone component incorrectly added to imports instead of declarations |
| 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] |
There was a problem hiding this comment.
This PR contains unrelated changes to the home component that are not part of the Vitest migration. The removal of DynamicFormComponent import and the entire formFields property (lines 14-86 in the original file) appear to be unrelated to the testing framework migration. According to the PR description, this PR should be "intentionally scoped only to the Vitest migration."
These changes should be removed from this PR or moved to a separate PR.
| @@ -1,5 +1,4 @@ | |||
| <div class="row mb-3"> | |||
There was a problem hiding this comment.
This PR contains unrelated changes to the home component HTML template that are not part of the Vitest migration. The removal of the abp-dynamic-form element is unrelated to the testing framework migration. According to the PR description, this PR should be "intentionally scoped only to the Vitest migration."
This change should be removed from this PR or moved to a separate PR.
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [MyProjectNameComponent], |
There was a problem hiding this comment.
The test is importing MyProjectNameComponent in the imports array, but the component is not defined as a standalone component. Non-standalone components should be declared in the declarations array, not imports.
The original code used declarations: [MyProjectNameComponent] which was correct. This change introduces a bug and should be reverted to use declarations instead of imports.
| imports: [MyProjectNameComponent], | |
| declarations: [MyProjectNameComponent], |
There was a problem hiding this comment.
Hello @fahrigedik thanks for migrating the test environment for the templates. Here is my comment that applies for all changes
-
It is better to normalize the vitest version to
^4.0.0instead as we did the same here in dev-appLine 148 in bdd621b
-
The test file should also be updated as the tests fail when we run
yarn testcommand
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.
2 participants
Description
Resolves #24714 (write the related issue number if available)
This PR updates the ABP Angular templates to use Vitest as the default testing framework instead of the existing setup
How to test it?
Run
yarn install(or simplyyarn) inabp/templates/app/angularRun yarn test in
abp/templates/app/angularRepeat the same steps for the other Angular template folders as well
Note: Any existing or newly discovered test issues will be handled separately. This PR is intentionally scoped only to the Vitest migration.