测试管道
你可以在没有 Angular 测试工具的情况下测试管道。
测试 TitleCasePipe
这个管道类有一个方法 transform
,它把输入值变成一个转换后的输出值。transform
的实现很少会与 DOM 交互。除了 @Pipe
元数据和一个接口之外,大多数管道都不依赖于 Angular。
考虑一个 TitleCasePipe
,它会把每个单词的第一个字母大写。这里是通过正则表达式实现的。
import { Pipe, PipeTransform } from @angular/core;
@Pipe({name: titlecase, pure: true})
/** Transform to Title Case: uppercase the first letter of the words in a string. */
export class TitleCasePipe implements PipeTransform {
transform(input: string): string {
return input.length === 0 ? :
input.replace(/wS*/g, (txt => txt[0].toUpperCase() + txt.slice(1).toLowerCase() ));
}
}
任何使用正则表达式的东西都值得彻底测试。使用简单的 Jasmine 来探索预期的案例和边缘情况。
describe(TitleCasePipe, () => {
// This pipe is a pure, stateless function so no need for BeforeEach
const pipe = new TitleCasePipe();
it(transforms "abc" to "Abc", () => {
expect(pipe.transform(abc)).toBe(Abc);
});
it(transforms "abc def" to "Abc Def", () => {
expect(pipe.transform(abc def)).toBe(Abc Def);
});
// ... more tests ...
});
编写 DOM 测试来支持管道测试
这些都是对管道进行隔离测试的。他们无法判断当 TitleCasePipe
应用于组件中时是否能正常运行。
考虑添加这样的组件测试:
it(should convert hero name to Title Case, () => {
// get the names input and display elements from the DOM
const hostElement: HTMLElement = fixture.nativeElement;
const nameInput: HTMLInputElement = hostElement.querySelector(input)!;
const nameDisplay: HTMLElement = hostElement.querySelector(span)!;
// simulate user entering a new name into the input box
nameInput.value = quick BROWN fOx;
// Dispatch a DOM event so that Angular learns of input value change.
nameInput.dispatchEvent(new Event(input));
// Tell Angular to update the display binding through the title pipe
fixture.detectChanges();
expect(nameDisplay.textContent).toBe(Quick Brown Fox);
});
作者:andy,如若转载,请注明出处:https://www.web176.com/angular13/24109.html