Angular 測試管道

測試管道

你可以在沒有 Angular 測試工具的情況下測試管道。

如果你要試驗本指南中所講的應用，請在瀏覽器中運行它或下載并在本地運行它。

測試 TitleCasePipe

這個管道類有一個方法 ?transform?，它把輸入值變成一個轉(zhuǎn)換后的輸出值。?transform ?的實現(xiàn)很少會與 DOM 交互。除了 ?@Pipe? 元數(shù)據(jù)和一個接口之外，大多數(shù)管道都不依賴于 Angular。

考慮一個 ?TitleCasePipe?，它會把每個單詞的第一個字母大寫。這里是通過正則表達式實現(xiàn)的。

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 來探索預期的案例和邊緣情況。

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