Browse Source

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.
pull/24725/head
Fahri Gedik 2 weeks ago
parent
commit
4d537d62ac
  1. 27
      templates/module/angular/angular.json
  2. 11
      templates/module/angular/package.json
  3. 44
      templates/module/angular/projects/dev-app/karma.conf.js
  4. 14
      templates/module/angular/projects/dev-app/src/test.ts
  5. 11
      templates/module/angular/projects/dev-app/tsconfig.app.json
  6. 12
      templates/module/angular/projects/dev-app/tsconfig.spec.json
  7. 44
      templates/module/angular/projects/my-project-name/karma.conf.js
  8. 18
      templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts
  9. 6
      templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts
  10. 15
      templates/module/angular/projects/my-project-name/src/test.ts
  11. 12
      templates/module/angular/projects/my-project-name/tsconfig.spec.json

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

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

44
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
});
};

14
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()
);

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

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

44
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
});
};

18
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', {
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);

6
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: [

15
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()
);

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

Loading…
Cancel
Save