來到 HTML 測試第二篇，今日課程如下：

• Updating The UI Using The Change Detector
• Testing Components Are displayed in the UI
• Testing Text Is Displayed In The UI

Change Detector

通常在應用程式中，當元件有任何變動時，UI 也會相應的自動更新，這是透過「detector change」來達成，但是我們在測試元件時，change detector 不會自動更新測試資料，需要透過「手動」trigger 來告訴元件的 fixture。

使用 change detector 手動更新幾點要注意

(1) 如果使用 detach 會將元件從偵測對象中移除，所以當偵測到變更的時候，元件不會再收到更新的狀態，所以要用 typescript class 來使用 chagne detector

component['changeDetector'].detectChange()

測試 UI

測試案例會從query, queryAll, querySelector, querySelectorAll 一路測下來

<app-child-component id="title" class="title"></app-child-component>

describe('query', () => {
it('should get the element by selector', () => {
  //Assign

  //Act

  //Assert
  const element = componentFixture.debugElement.query(By.css('app-child-component'));
  expect(element).toBeTruthy();
});

it('should get the element by class', () => {
   //Assign

   //Act

   //Assert
   const element = componentFixture.debugElement.query(By.css('.title'));
   expect(element).toBeTruthy();
});
  
it('should get the element by id', () => {
   //Assign
      
   //Act

   //Assert
   const element = componentFixture.debugElement.query(By.css('#title'));
   expect(element).toBeTruthy();
  });
})

Displayed in the UI

前一個範例測試元件上的 class, id, selector，除此之外可以測試元件上的文案是不是有如預期出現，一樣也是從 query, queryAll ,querySelector, querySelectorAll,

<div id="title">
    Welcome Back!
</div>

• Spec 檔案

describe('query', () => {
    it('should display the welcome back text', () => {
      //Assign

      //Act

      //Assert
      const element = componentFixture.debugElement.query(By.css('#title'));
      expect(element.nativeElement.innerText.trim()).toEqual('Welcome Back!');
    });
  })
  
  describe('querySelector', () => {
    it('should display the welcome back text', () => {
      //Assign

      //Act
      
      //Assert
      const element = componentFixture.debugElement.nativeElement.querySelector('#title');
      expect(element.innerText.trim()).toEqual('Welcome Back!');
    });
  })

  describe('querySelectorAll', () => {
    it('should display the welcome back text', () => {
      //Assign

      //Act

      //Assert
      const elements = componentFixture.debugElement.nativeElement.querySelectorAll('#title');
      expect(elements[0].innerText.trim()).toEqual('Welcome Back!');
    });
  })

今日心得

剛好加班比較晚，第一節的 change detecor 沒有深入研究太多，有學到 change detecor 有基本的兩種方法可以用，一個是 detach, 另一個是 reattach ，兩者使用時機和情境也不同，看到大神有寫好幾篇關於這方面的研究，深覺宇宙之大，要再找時間 take 起來這方面的知識，但是後面二、三節的 UI 測試很熟悉，只要會操作 DOM，理解4種查詢方式不同的地方，測試案例不會卡關太久。

參考資料來源：

• Mike 大神 - [Angular 大師之路] Day 26 - 認識元件的變更偵測策略
• Mike 大神 - [Angular 大師之路] Day 25 - 效能調校之認識 ChangeDetectorRef