結束 HTML, Typescript 範例測試，講師也分享幾個快速寫單元測試的方法，還有他習慣的開發方式，筆者覺得真的蠻方便的，我們一起來看看

Tip 1 - 先建立大綱，與善用 IDE

• 建立空元件，先從 Spec 開始寫，但不是馬上寫測試內容，而是先建立空的 it 區塊清單，且先暫時寫上大概的測試內容
  
• IDE 視窗分成兩塊，左邊是 component.ts 或是 HTML，右邊是 spec
• 只測試三大方向
  (1) 哪些 function 最重要，且應該會被呼叫
  (2) 哪些變數應該被更新
  (3) 哪些 function 和 變數有被用在 HTML

Tip 2 - 不用run 每個測試案例，每寫一個元件就「專注」測該元件的Spec檔案

• 只想測試「某個大項」，只要在 describe 前面加 f, 如: line 2

// ******************* 在 describe 前面加 f *******************
fdescribe('Testing Functions Are Called xxxx測試大綱', () => {
  let component: XXXComponent;
  let componentFixture: ComponentFixture<XXXComponent>;
}); 

• 如附圖，只會跑 9 個測試案例
  

• 只想測試「某個案例」，在 it 前面加 f

describe('Testing Functions Are Called xxxx測試大綱', () => {
  let component: XXXComponent;
  let componentFixture: ComponentFixture<XXXComponent>;
  
  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            XXXComponent,
          ]
      }).compileComponents();
  }));

  beforeEach(() => {
      componentFixture = TestBed.createComponent(XXXComponent);
      component = componentFixture.componentInstance;
      componentFixture.detectChanges();
  });

  // ******************* 在 it 前面加 f *******************
  fit('這裡應該要....', () => {
    //Assign
    
    //Act

    //Assert
    expect(component).toBeTruthy();
  });
});

Tip 3 - 如果遇到像 hotfix ，可以先 disable 測試案例

• 只想略過「某個大項」，只要在 describe 前面加 x, 如: line 2

// ******************* 在 describe 前面加 x *******************
xdescribe('Testing Functions Are Called xxxx測試大綱', () => {
  let component: XXXComponent;
  let componentFixture: ComponentFixture<XXXComponent>;
}); 

• 全部測試案例共 110 個，disable line 6 xdescribe，只會跑101個
  

• 只想測試「某個案例」，在 it 前面加 x

describe('Testing Functions Are Called xxxx測試大綱', () => {
  let component: XXXComponent;
  let componentFixture: ComponentFixture<XXXComponent>;
  
  beforeEach(waitForAsync(() => {
      configureTestingModule({
          declarations: [
            XXXComponent,
          ]
      }).compileComponents();
  }));

  beforeEach(() => {
      componentFixture = TestBed.createComponent(XXXComponent);
      component = componentFixture.componentInstance;
      componentFixture.detectChanges();
  });

  // ******************* 在 it 前面加 x *******************
  xit('這裡應該要....', () => {
    //Assign
    
    //Act

    //Assert
    expect(component).toBeTruthy();
  });
});

• 全部測試案例共 110 個，disable line 6 xit，只會跑109個