我們也可以針對自行定義的元件撰寫一 Harness 類別，來讓其他使用的對象撰寫單元程式。

實作 ComponentHarness 類別

首先，會建立一個類別，並繼承 ComponentHarness 類別。如下面程式，其中會定義 hostSelect 的靜態屬性，此屬性就是我們目標對象的選擇器，可以是標籤名或是樣式類別。

import { ComponentHarness } from '@angular/cdk/testing';

export class TaskCardHarness extends ComponentHarness {
  static hostSelect = 'app-task-card';
}

在此類別中，要取得目標內的 HTML 或元件，會使用 locatorFor() 方法，如下面程式，此方法內除了可以指定另一個 Harness 類別，也可以指定 CSS 選擇器。若希望取得全部元件，則可以使用 locatorForAll 方法，而 locatorForOptional 方法則可以取得可能不存在的元件。

private card = this.locatorFor(MatCardHarness);
private editButton = this.locatorFor(MatButtonHarness.with({ text: 'edit' }))

然後，我們就可以利用這個屬性，來封裝測試實作需要的 Harness 類別屬性。

async getTaskText(): Promise<string> {
  return (await this.card()).getTitleText();
}

async edit(): Promise<void> {
  return await this.editButton().click();
}

使用自定的 Harness 類別

如此一來，我們就可以在有用 TaskCardComponent 的元件，利用此類別來撰寫單元測試。

it('工作事項應為 "工作 A"', async () => {
  const taskCard = await loader.getHarness(TaskCardHarness);
  expect(await taskCard.getTaskText()).toBe('工作 A');
});

接下來

明天開始我們來調整 Material 的樣式，讓整個應用程式可以使用不同的風格。