功能测试

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

当要校验某个路由对应的应用程序输出内容，需要为对应的路由链接添加 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
                // 在本地的 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!');
                })
        );
    });
});

当运行功能测试时，Dojo 会提供一个 remote 对象，它用于与页面交互。因为加载页面和与页面交互是异步操作，所以必须在测试中返回 remote 交互对象。

在命令行中执行功能测试：

dojo test --functional

这将会在构建机器中，将 HTML 页面加载到 Chrome 的 remote 实例中，，以测试交互功能。

功能测试是非常有用的，它能确保应用程序代码能在浏览器中按预期工作。

您可以阅读更多关于 Intern 功能测试 的内容。