接續 Typescript 測試，今天要來測試 function 裡的「變數」

課程名稱如下：

• Testing Fields Are Updated
• Testing Function Results
• Testing Getters And Setters

元件的 function 變數

我們先來看看，原始元件 typescript 檔案

1. fields are updated 元件，有個函式需要帶入變數，在將其變數賦值給全域的 count
   

2. function results 元件，有個函式需要帶入變數，再回傳乘二後的變數
   

3. getters and setters 元件，常在 typescript 中出現，當呼叫 get 函式 getData() 會返回一個值；當呼叫 set 函式 setData()，會帶入一個值，並將其值賦給全域變數
   

如何測試 function 變數

我們來看看，對應的 Spec 檔案，一開始都是 import configureTestingModule，在宣告對應的 TestingComponent 元件，那 it 測試的項目有哪些呢？我們個別來認識。

1. fields are updated 元件

  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            TestingFieldsAreUpdatedComponent
          ],
      }).compileComponents();
  }));

元件測試項目，一開始都是先檢查元件是否存在，才接續其他測試項目，所以第二項 it 測的內容就是，先準備好要用的變數，然後使用元件裡的 updateCount 函式，並將前面準備好的變數帶進去，最後預期元件的 count 要能 == 前面準備好的 newCount, 如: line 4。

line 7的地方是直接調用「元件內」的函式，所以在 line 10 的地方是直接使用帶入元件內的全域變數最檢核。

  it('should update the count field when calling updateCount', () => {
    //Assign
    component.count = 5;
    const newCount = 10;

    //Act
    component.updateCount(newCount);

    //Assert
    expect(component.count).toEqual(newCount);
  });

2. function results 元件

  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            TestingFunctionResultsComponent
          ],
      }).compileComponents();
  }));

那這邊一樣，一開始測試元件是否存在 toBeTruthy()，接續測試變數的內容，所以準備好會用到的變數 input 和 expectedResult，和前一個 fields are updated 元件測試方式不一樣的地方是，如果不想直接用元件的全域變數，可以將取到值，賦給 const result (line 7)，最後拿 result 檢核前面準備好的測試資料 expectedResult (line 4)

  it('should produce the correct output for the given input', () => {
    //Assign
    const input = 5;
    const expectedResult = 10;

    //Act
    const result = component.double(input);

    //Assert
    expect(result).toEqual(expectedResult);
  });

3. getters and setters 元件

  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            TestingGettersAndSettersComponent
          ],
      }).compileComponents();
  }));

同理第一個檢查元件是否存在，第二個測試 getter，第三個測試 setter，測試的方式與前述幾個測試案例雷同，從元件調用變數，將結果與準備好的 expectedResult 做檢核。

  it('should get the correct result when using the getter', () => {
    //Assign
    component.data = 5;
    const expectedResult = 5;

    //Act
    const result = component.getData;

    //Assert
    expect(result).toEqual(expectedResult);
  });

  it('should update the data when using the setter', () => {
    //Assign
    component.data = 5;
    const data = 3;

    //Act
    component.setData = data;

    //Assert
    expect(component.data).toEqual(data);
  });

今日心得

認識 function 中變數如何測試，以及常見的「getter, setter」如何撰寫測試項目，對於 manipulate 元件變數比較熟悉，之後若要操作「元件變數」也更有印象。

下一篇，繼續介紹其他的 Typescript 案例