在本教程中，如何对Angular应用程序中UI表单的输入文本控件进行单元测试。
我已经使用ng new cli 命令创建了现有的应用程序。
让我们使用ng g c component 命令来创建Angular组件。这将创建一个Angular组件。
让我们把输入文本字段和按钮绑定到模板和typescript组件上。
在这个组件中，我们有一个输入类型的文本和按钮，点击按钮，显示输入的值。输入框的值是用双向绑定语法绑定的-[(ngModel)]
下面是一个Angular模板组件input-text.component.html
input-text works!
{{username}}
Clickme
在typescript组件中，声明双向绑定变量-input-text.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-input-text',
templateUrl: './input-text.component.html',
styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {
constructor() { }
username: string = '';
clickme() {
console.log('it does nothing', this.username);
}
ngOnInit(): void {
}
}
让我们为这个输入文本框写一个Angular组件单元测试
Angular单元测试输入文本组件
在默认情况下，angular cli会用以下几行代码生成默认的spec文件 以下是步骤
TestBed为测试组件提供一个angular环境。- 默认的TestBed被配置为带有组件、指令和服务的测试模块，最后使用
compileComponents方法编译组件。 - 使用createComponent方法创建一个组件，返回ComponentFixture。
- ComponentFixture是一个围绕用户组件的封装组件。
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { InputTextComponent } from './input-text.component';
describe('InputTextComponent', () => {
let component: InputTextComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [InputTextComponent]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(InputTextComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
如何测试Angular组件中输入文本的标签。
这是一个测试案例，用于检查
- 标签是否存在
- 标签名称包含的文本是
Enter username值
以下是步骤
-
首先，使用debugElement.query对标签进行查询。
-
从一个给定的ComponentFixture，我们有一个debugElement来访问DOM元素。
-
query方法使用css选择器返回子元素。
-
它返回标签元素
-
断言标签存在，并且outerText包含给定的文本。
下面是一个测试案例
it('should check input label name', () => {
let queryByLabel = fixture.debugElement.query(By.css("label[for=username]"));
expect(queryByLabel).toBeTruthy();
expect(queryByLabel.nativeElement).toBeTruthy();
expect(queryByLabel.nativeElement.outerText).toContain("Enter username");
})
设置和读取输入文本值的Angular单元测试
让我们写一个设置输入文本值的单元测试案例。
- 首先使用
By.css与id选择器检索输入元素 - 使用nativeElement方法设置输入框的值
- 一旦值被设置，使用
dispatchEvent方法调度一个输入事件 - 最后使用Angular中的手动检测来更新DOM对象。
it('Set Input type text value', async () => {
const username = fixture.debugElement.query(By.css('#username'));
username.nativeElement.value = 'john';
username.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
console.log('sendInput : ', username.nativeElement.value);
expect(username.nativeElement.value).toContain('john');
});
});
提交按钮，读取输入文本并验证值
这个测试案例包括设置输入值，点击按钮并验证输入文本的值
- 使用测试查询元素获取按钮和输入
- 改变输入值并发出输入事件
- 手动触发按钮的点击事件
- 使用 detectChanges 手动重新加载组件
- 最后将输入值与显示值进行对比
下面是一个示例代码
it('Form submit click ', async () => {
const submitButton = fixture.debugElement.query(By.css('#submit'));
const username = fixture.debugElement.query(By.css('#username'));
username.nativeElement.value = 'asdf';
username.nativeElement.dispatchEvent(new Event('input'));
submitButton.triggerEventHandler('click', null);
const displayText = fixture.debugElement.query(
By.css('h1')
);
// manual detection
fixture.detectChanges();
expect(displayText.nativeElement.textContent).toBe('asdf');
});
总结
你学到了angular组件测试的以下内容
- 改变和读取输入文本值
- 表格上的输入标签测试
- 输入文本表单的按钮提交
