昨天描述在單元測試中使用 Angular CDK 的 Harness 來操控介面上的控制項，今天來看其他元件的 Harness 類別

Table

首先，在資料表元件的方面，我們可以透過 MatTableHarness 的 getRows() 與 getCells()來取得資料的列或欄。如此一來，就可以繼承利用 getHarness() 方法取得特定欄位下的元件，或是 getColumnName() 與 getText() 方法來取得欄位名稱與內容文字。

const table = await loader.getAllHarnesses(MatTableHarness);
const rows = await table.getRows();
const cells = await rows[0].getCells();

另外，當資料表顯示的欄位是動態時，我們會希望去驗證特定情境下的欄位是否符合預期，就可以如下程式程式，利用 getCellTextByColumnName() 來取得特定列的所有欄位資訊。

it('應顯示 "專案名稱", "主旨" 欄位', async () => {
  const table = await loader.getAllHarnesses(MatTableHarness);
  const headerRow = (await control.getHeaderRows())[0];
  const columns = await headerRow.getCellTextByColumnName();
  expect(columns).toEqual({
    project: '專案名稱',
    subject: '主旨',
  });
});

Pagination

分頁元件所對應的是 MatPaginatorHarness 類別，透過這個類別 goToPreviousPage() 與 goToNextPage() 兩個方法來操入分頁元件的上下頁。

const paginator = await loader.getHarness(MatPaginatorHarness);
await paginator.goToNextPage();

Dialog

由於彈跳視窗在瀏覽器最終的 DOM 結構相較於其他元件比較不同，所以使用 MatDialogHarness 上也不太一樣。首先，在實務上我會建立一個 TestCompoent，並利用此測試元件開啟彈跳視窗。

loader = TestbedHarnessEnvironment.documentRootLoader(fixture);

其次，在 HarnessLoader 實體的取得變更成使用 documentRootLoader 方法，這是因為彈跳視窗的 DOM 不會放在 <app-root> 內的位置，使用 loader 方法會取得不到實體。

dialog = await loader.getHarness(MatDialogHarness);

最後，就可以利用 getHarness 方法來取得彈跳視窗的 Harness 實體，進一步同樣使用 getHarness 方法來取得彈跳視窗內的元件。需注意的是，此時彈跳視窗是需要被開啟的。

順帶一提，我們可以利用 MatDialogHarness 的 getTitleText 方法來取得使用 mat-dialog-title 指令元件的內容。

接下來

今天說明了 Table、Pagination 與 Dialog 的單元測試，接下來就針對表單的元件進行描述。