Angular Testing 筆記 --- 4 測試 pipes 元件。

在 Angular 裡面提供了 Pipes 的功能可以讓你在 HTML 讓上面可以方便我們做一些Data與頁面上的文字顯示的方便處理。例如：下方提供一個把英文字串的開頭第一字母轉成大寫。

建立 Pipes：

首先我們先建立一個 Pipe 叫做 my。
# ng g p my

然後我們會看到在 src/app 下面產生兩個 Pipe 的檔案～ my.pipe.ts 與 my.pipe.spec.ts 。

撰寫 Pipe 功能：

首先我們在 my.pipe.ts 改寫如下。

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'my'
})
export class MyPipe implements PipeTransform {


transform(value: string): string {
    return value.length === 0 ? '' :
    value.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() ));
  }
}

撰寫 MyPipe 測試內容：

在angular 幫我們產生的 my.pipe.spec.ts 內會已經事先幫你寫 expect().toBeTruthy() 的測試內容。但是這個不足我們的需求因此我們加上兩個測試

1. 當空字串時回傳值也為空字串。

2. 有給字串時，回傳值必須為開頭大寫字母的字串。

以上的兩個測試原本就是我們 Pipe 提供的功能，想當然就是要測試這兩個功能了！

import { MyPipe } from './my.pipe';
describe('MyPipe', () => {
  let pipe: MyPipe;
  beforeEach(() => {
    pipe = new MyPipe();
  });


it('create an instance', () => {
    expect(pipe).toBeTruthy();
  });
  // 回傳空字串
  it('should no value returns with empty word.', () => {
    expect(pipe.transform('')).toBe('');
  });
  // 回傳開頭為大寫的字串。
  it('should return A word with UpperCase in first letter', () => {
    expect(pipe.transform('clover')).toBe('Clover');
  });
});

測試結果畫面：

Pipes 的單元測試其實滿簡單的，大致上就是把 Pipe 當作一個 function 在做測試的概念。

PS: 圖上的灰色圈圈是我把其他的單元測試用 'x' 加到 describe()前面叫 Jasmine 忽略這些測試產生的提示。

REF :

CloverHsc的Blog

搜尋此網誌