功能测试

与加载和执行代码的单元测试不同，功能测试在浏览器中加载页面并测试用户如何与正在运行的应用程序交互。

在验证特定路由的应用程序输出时，应向相应的路由链接添加一个 id，以便于定位。

src/widgets/Menu.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import Link from '@dojo/framework/routing/ActiveLink';
import Toolbar from '@dojo/widgets/toolbar';

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

const factory = create();

const Menu = factory(function Menu() {
	return (
		<Toolbar heading="My Dojo App!" collapseWidth={600}>
			<Link id="home" to="home" classes={[css.link]} activeClasses={[css.selected]}>
				Home
			</Link>
			<Link id="about" to="about" classes={[css.link]} activeClasses={[css.selected]}>
				About
			</Link>
			<Link id="profile" to="profile" classes={[css.link]} activeClasses={[css.selected]}>
				Profile
			</Link>
		</Toolbar>
	);
});

export default Menu;

在应用程序使用过程中，用户希望点击 profile 链接并被引导到一个欢迎他们的页面。可以创建一个功能测试来验证此行为。

tests/functional/main.ts

const { describe, it } = intern.getInterface('bdd');
const { assert } = intern.getPlugin('chai');

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!');
				})
		);
	});
});

在运行功能测试时，Dojo 提供了一个 remote 对象，用于与页面交互。由于加载和与页面交互是异步操作，因此应从测试中返回 remote 交互对象。

功能测试可以通过命令行执行

dojo test --functional

这将把 html 页面加载到构建机器上的 Chrome 远程实例中以测试交互性。

功能测试非常有用，可以确保应用程序代码在实际浏览器中使用时按预期工作。

有关更多详细信息，请参阅 Intern 功能测试指南。