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

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

測試 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 的結構，然後返回更新的斷言模板，你可以基於新的斷言模板測