Dojo 測試之基本用法

【翻譯】https://github.com/dojo/framework/blob/master/docs/en/testing/basic-usage.md

Dojo 的 @dojo/cli-test-intern 提供了一個健壯的測試框架。它能高效地測試小部件的輸出並確認是否如你所願。

功能	描述
極簡 API	用於測試和斷言 Dojo 部件預期的虛擬 DOM 和行爲的精簡 API。
單元測試	單元測試是指運行在 node 和瀏覽器上的測試，用於測試獨立的代碼塊。
功能測試	功能測試通過 Selenium 運行在瀏覽器中，模擬用戶與軟件的交互來測試整體功能。
斷言模板	斷言模板能構建期望的渲染函數，以驗證部件的輸出。

測試 Dojo 應用程序

Dojo 使用 @dojo/cli-test-intern 運行 tests 文件夾下的單元測試和功能測試。

你可在 node 中快速運行測試。

命令行

dojo test

運行測試

Dojo 支持兩種類型的測試方法：單元測試和功能測試。單元測試是運行在 node 和本地 Selenium 通道上的測試，用於測試獨立的代碼塊。功能測試通過 Selenium 運行在瀏覽器中，模擬用戶與軟件的交互來測試整體功能。在 Selenium 上運行單元測試和功能測試時，必須先使用 @dojo/cli-build-app 進行適當的構建。

以下命令僅執行單元測試。

命令行

dojo test --unit --config local

以下命令使用 Selenium 在本地的 headless Chrome 實例中運行功能測試。

命令行

dojo test --functional --config local

單元測試

Dojo 自帶用於測試部件的 harness API。

src/tests/unit/widgets/Home.ts

const { describe, it } = intern.getInterface('bdd');
import harness from '@dojo/framework/testing/harness';
import assertionTemplate from '@dojo/framework/testing/assertionTemplate';
import { w, v } from '@dojo/framework/widget-core/d';

import Home from '../../../src/widgets/Home';
import * as css from '../../../src/widgets/styles/Home.m.css';

const baseTemplate = assertionTemplate(() => v('h1', { classes: [css.root] }, ['Home Page']));

describe('Home', () => {
    it('default renders correctly', () => {
        const h = harness(() => w(Home, {}));
        h.expect(baseTemplate);
    });
});

harness API 能讓你覈實渲染部件的輸出是否如你所願。

• 它是否按預期渲染?
• 事件處理器是否按預期工作?

功能測試

功能測試允許你加載一個頁面並在瀏覽器中執行你的代碼，以更好的測試部件的行爲。

當編寫測試用例時，你可以控制頁面中測試的交互行爲，來單擊按鈕並驗證頁面的內容。

tests/functional/main.ts

describe('routing', () => {
    it('profile page correctly loads', ({ remote }) => {
        return (
            remote
                // 在本地的 node 服務器中加載 HTML 文件
                .get('../../output/dev/index.html')
                // 根據 id 找到超鏈接標籤的
                .findById('profile')
                // 單擊鏈接
                .click()
                // 結束此操作
                .end()
                // 找到 h1 標籤
                .findByTagName('h1')
                // 獲取 h1 標籤中的文本
                .getVisibleText()
                .then((text) => {
                    // 覈實 profile 頁面中 h1 標籤中的內容
                    assert.equal(text, 'Welcome Dojo User!');
                })
        );
    });
});

斷言模板

斷言模板提供了一種創建基本斷言的方法，該方法允許你在每個測試中修改期望輸出中的部分內容。

一個部件可根據屬性值渲染不同的內容。

src/widgets/Profile.ts

export interface ProfileProperties {
    username?: string;
}

export default class Profile extends WidgetBase<ProfileProperties> {
    protected render() {
        const { username } = this.properties;
        return v('h1', { classes: [css.root] }, [`Welcome ${username || 'Stranger'}!`]);
    }
}

你可以使用 @dojo/framework/testing/assertionTemplate 創建一個斷言模板。

tests/unit/widgets/Profile.ts

// 創建一個斷言
const profileAssertion = assertionTemplate(() =>
    v('h1', { classes: [css.root], '~key': 'welcome' }, ['Welcome Stranger!'])
);

describe('Profile', () => {
    it('default renders correctly', () => {
        const h = harness(() => w(Profile, {}));
        // 基於基本斷言測試
        h.expect(profileAssertion);
    });
});

使用在斷言模板中定義的 ~key 屬性，你可以爲任何要測試的虛擬 DOM 提供一個值。在 .tsx 中對應的是 assertion-key 屬性。

tests/unit/widgets/Profile.ts

describe('Profile', () => {
    it('default renders correctly', () => {
        const h = harness(() => w(Profile, {}));
        h.expect(profileAssertion);
    });

    it('renders given username correctly', () => {
        // 使用給定的用戶名更新期望的結果
        const namedAssertion = profileAssertion.setChildren('~welcome', () => ['Welcome Kel Varnsen!']);
        const h = harness(() => w(Profile, { username: 'Kel Varnsen' }));
        h.expect(namedAssertion);
    });
});

使用斷言模板的 setChildren 方法，傳入指定的 ~key 來定位一個虛擬 DOM，並修改該虛擬 DOM 的結構，然後返回更新的斷言模板，你可以基於新的斷言模板測試部件的輸出。