要进行Angular 9表单模块的单元测试,可以使用Jasmine和Karma进行测试。下面是一个包含代码示例的解决方案:
npm install --save-dev @angular-devkit/build-angular karma karma-chrome-launcher karma-cli karma-jasmine karma-jasmine-html-reporter
karma.conf.js
文件,并添加以下配置:// karma.conf.js
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('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/angular-app'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
app-form.component.ts
:// app-form.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`
})
export class AppFormComponent {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
name: ['', Validators.required]
});
}
onSubmit() {
if (this.form.valid) {
console.log('Form submitted');
}
}
}
app-form.component.spec.ts
,在其中编写测试用例:// app-form.component.spec.ts
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { AppFormComponent } from './app-form.component';
describe('AppFormComponent', () => {
let component: AppFormComponent;
let fixture: ComponentFixture;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [AppFormComponent]
}).compileComponents();
fixture = TestBed.createComponent(AppFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create a form with a name control', () => {
expect(component.form.controls['name']).toBeTruthy();
});
it('should make the form invalid when empty', () => {
expect(component.form.valid).toBeFalsy();
});
it('should make the form valid when a name is entered', () => {
const nameControl = component.form.controls['name'];
nameControl.setValue('John Doe');
expect(component.form.valid).toBeTruthy();
});
it('should call onSubmit method when form is submitted', () => {
spyOn(component, 'onSubmit');
const formEl = fixture.nativeElement.querySelector('form');
formEl.dispatchEvent(new Event('submit'));
fixture.detectChanges();
expect(component.onSubmit).toHaveBeenCalled();
});
});
ng test
这样就可以运行你的Angular 9表单模块的单元测试了。