在 Angular 專案中撰寫與介面操作有關的單元測試時，常會使用 Page 物件來封裝頁面元素。而 Angualr CDK 裡也有提出 Component Harness 的封裝方式，且 Material 各項元件也都有提供對應的 Harness 類別。

利用 Harness 撰寫單元測試

在取得頁面元件之前，會利用 TestbedHarnessEnvironment 來依 ComponentFixture 取得 HarnessLoader 類別的實體。

describe('TestComponent', () => {
  let loader: HarnessLoader;

  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({});

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });
});

如上面程式，就可以利用 loader 的 getAllHarnesses() 來取得頁面上所有特定元件的 Harness 類別，或是 getHarness() 與 getHarnessOrNull() 來取得單一的特定元件。

ButtonHarness

const button = await loader.getAllHarnesses(MatButtonHarness);

首先，我們可以利用上面的程式來取得當下元件所有使用 MatButton 的按鈕元件，在 getAllHarnesses 方法中會傳入要取得的 Harness 對象，如果希望取得更為明確的按鈕，在此對象中使用 with 來指定特定條件。例如，在下面程式中，直接指定了文字為「表格」的按鈕。順帶一提，整個 Component Harness 的機制都是非同步的，所以都需要加上 async / await 語法。

const button = await loader.getHarness(MatButtonHarness.with({ text: '表格' }));

在取得按鈕的 Harness 之後，就可以使用如 click() 方法來點選按鈕。

await button.click();

或是使用 getText() 或isDisabled() 方法來取得按鈕的現狀，以便來驗證程式結果。

const actual = await button.isDisabled();
expect(actula).toBeTrue();

接下來

今天簡單的描述 Angular CDK 提到的 Harness ，接下來，會描述每一個 UI 元件在測試程式中的使用。