测试管道

你可以在没有 Angular 测试工具的情况下测试管道。

如果你要试验本指南中所讲的应用，请在浏览器中运行它在浏览器中运行它或下载并在本地运行它下载并在本地运行它。

测试 TitleCasePipe

这个管道类有一个方法 transform，它把输入值变成一个转换后的输出值。transform的实现很少会与 DOM 交互。除了 @Pipe 元数据和一个接口之外，大多数管道都不依赖于 Angular。

考虑一个 TitleCasePipe，它会把每个单词的第一个字母大写。这里是通过正则表达式实现的。

app/shared/title-case.pipe.ts

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(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.slice(1).toLowerCase() ));
  }
}

任何使用正则表达式的东西都值得彻底测试。使用简单的 Jasmine 来探索预期的案例和边缘情况。

app/shared/title-case.pipe.spec.ts

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应用于组件中时是否能正常运行。

考虑添加这样的组件测试：

app/hero/hero-detail.component.spec.ts (pipe test)

it('should convert hero name to Title Case', () => {
  // get the name's 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');
});