介绍

测试 Dojo 应用程序

• 运行项目的测试套件

dojo test

Dojo 使用 @dojo/cli-test-intern 在您的 tests 文件夹中运行单元测试和功能测试。

运行特定的测试套件

Dojo 支持两种类型的测试方法：单元测试和功能测试。单元测试是通过节点和本地 Selenium 隧道运行的测试，用于测试隔离的代码块。功能测试是使用 Selenium 在浏览器中运行的测试，测试软件的整体功能，就像用户与之交互一样。针对 Selenium 运行单元测试和功能测试需要使用 @dojo/cli-build-app 运行适当的构建。

• 运行项目的单元测试套件

dojo test --unit --config local

• 使用 Selenium 在无头 Chrome 实例中本地运行项目的函数测试套件。

dojo test --functional --config local

编写单元测试

• 使用 Dojo 的 测试 renderer API 来单元测试小部件。

src/widgets/Home.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import * as css from './Home.m.css';

const factory = create();

const Home = factory(function Home() {
	return <h1 classes={[css.root]}>Home Page</h1>;
});

export default Home;

tests/unit/widgets/Home.tsx

const { describe, it } = intern.getInterface('bdd');
import { tsx } from '@dojo/framework/core/vdom';
import renderer, { assertion } from '@dojo/framework/testing/renderer';

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

const baseAssertion = assertion(() => <h1 classes={[css.root]}>Home Page</h1>);

describe('Home', () => {
	it('default renders correctly', () => {
		const r = renderer(() => <Home />);
		r.expect(baseAssertion);
	});
});

renderer API 允许您验证渲染的小部件的输出是否符合您的预期。

• 它是否按预期渲染？
• 事件处理程序是否按预期工作？

编写功能测试

功能测试允许在真实浏览器中加载 UI 页面并执行其代码，以便更好地测试小部件的行为。

编写功能测试意味着指定用户与页面的交互，包括点击元素，然后验证生成的页面内容。

tests/functional/main.ts

describe('routing', () => {
	it('profile page correctly loads', ({ remote }) => {
		return (
			remote
				// loads the HTML file in local node server
				.get('../../output/dev/index.html')
				// find the id of the anchor tag
				.findById('profile')
				// click on the link
				.click()
				// end this action
				.end()
				// find the h1 tag
				.findByTagName('h1')
				// get the text in the h1 tag
				.getVisibleText()
				.then((text) => {
					// verify the content of the h1 tag on the profile page
					assert.equal(text, 'Welcome Dojo User!');
				})
		);
	});
});

使用断言

断言提供了一种创建基本断言的方法，允许预期输出的某些部分在测试之间有所不同。

• 假设一个小部件根据属性值渲染不同的输出

src/widgets/Profile.tsx

import { create, tsx } from '@dojo/framework/core/vdom';

import * as css from './Profile.m.css';

export interface ProfileProperties {
	username?: string;
}

const factory = create().properties<ProfileProperties>();

const Profile = factory(function Profile({ properties }) {
	const { username } = properties();
	return <h1 classes={[css.root]}>{`Welcome ${username || 'Stranger'}!`}</h1>;
});

export default Profile;

• 使用 @dojo/framework/testing/renderer#assertion 创建断言

tests/unit/widgets/Profile.tsx

const { describe, it } = intern.getInterface('bdd');
import { tsx } from '@dojo/framework/core/vdom';
import renderer, { assertion } from '@dojo/framework/testing/renderer';

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

// Create an assertion
const profileAssertion = assertion(() => <h1 classes={[css.root]}>Welcome Stranger!</h1>);

describe('Profile', () => {
	it('default renders correctly', () => {
		const r = renderer(() => <Profile />);
		// Test against my base assertion
		r.expect(profileAssertion);
	});
});

使用 @dojo/framework/testing/renderer#wrap 创建的包装测试节点（在本例中为 WrappedHeader）需要在断言的预期输出中指定，以代替标准小部件来与断言的 API 交互。注意：当使用包装的 VNode 与 v() 时，需要使用 .tag 属性，例如 v(WrappedDiv.tag, {} [])。

tests/unit/widgets/Profile.tsx

const { describe, it } = intern.getInterface('bdd');
import { tsx } from '@dojo/framework/core/vdom';
import renderer { wrap, assertion } from '@dojo/framework/testing/renderer';

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

// Create a wrapped test node
const WrappedHeader = wrap('h1');

// Create an assertion
const profileAssertion = assertion(() => (
	// Use the wrapped node in place of the normal node
	<WrappedHeader classes={[css.root]}>Welcome Stranger!</WrappedHeader>
));

describe('Profile', () => {
	it('default renders correctly', () => {
		const r = renderer(() => <Profile />);
		// Test against my base assertion
		r.expect(profileAssertion);
	});

	it('renders given username correctly', () => {
		// update the expected result with a given username
		const namedAssertion = profileAssertion.setChildren(WrappedHeader, () => ['Welcome Kel Varnsen!']);
		const r = renderer(() => <Profile username="Kel Varnsen" />);
		r.expect(namedAssertion);
	});
});

使用包装测试节点（在本例中为 WrappedHeader）的断言的 setChildren 方法将返回一个具有更新的虚拟 DOM 结构的断言。然后可以使用此生成的断言来测试小部件输出。