FormField

透過 loader 取得 MatFormFieldHarness 實體，其中可以利用 with 指定 floatingLabelText、hasErrors 與 isValid 來依標籤文字、是否有錯誤訊息或驗證成功。

const formField = await loader.getHarness(MatFormFieldHarness.with({ floatingLabelText: '專案名稱' }))

如此一來，我們可以透過 getPrefixText 、getSuffixText 、getTextHints 與 getTextErrors 來取得表單欄位各部分的文字內容。

Input

搭配著 FormFiled 要取得 Input 元件，除了可以利用 loader 取得 MatInputHarness 實體外，也可以利用 MatFormFieldHarness 的 getControl 來取得。

const input = await loader.getHarness(MatInputdHarness);
await input.setValue('專案');
await input.blur();

如上面程式，透過 setValue 方法就可以在單元測試中在輸入框中輸入文字，且在執行時候會是以一個字一個字進行輸入，而不是整個字串放在輸入框內。

Select

在取得到 MatSelectHarness 後，利用 getOptions() 來取得此下拉選單的項目，就可以針對如地址選單的連動式下拉選單進行測試，

const select = await loader.getHarness(MatSelectHarness);
const options = await select.getOptions();
expect(options.length).toBe(expected.length);
expect(await Promise.all(options.map((o) => o.getText()))).toEqual(expected);

另外，如下面程式，在使用 checkOptions 方法以選項文字來選擇選單，需要先用 open() 開啓選單。

const select = await loader.getHarness(MatSelectHarness);
await select.open();
await select.clickOptions({ text });

接下來

今天描述了表單中常用的幾個元件所對應的 Harness 類別，接下來，來看看如何為我們寫得元件自訂一個 Harness 類別。