功能测试

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

当要校验某个路由对应的应用程序输出内容，需要为对应的路由链接添加 id 属性，以便快速定位链接。

src/widgets/Menu.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import Link from '@dojo/framework/routing/ActiveLink';
  3. import Toolbar from '@dojo/widgets/toolbar';
  5. import * as css from './Menu.m.css';
  7. const factory = create();
  9. const Menu = factory(function Menu() {
  10.     return (
  11.         <Toolbar heading="My Dojo App!" collapseWidth={600}>
  12.             <Link id="home" to="home" classes={[css.link]} activeClasses={[css.selected]}>
  13.                 Home
  14.             </Link>
  15.             <Link id="about" to="about" classes={[css.link]} activeClasses={[css.selected]}>
  16.                 About
  17.             </Link>
  18.             <Link id="profile" to="profile" classes={[css.link]} activeClasses={[css.selected]}>
  19.                 Profile
  20.             </Link>
  21.         </Toolbar>
  22.     );
  23. });
  25. export default Menu;

在使用应用程序时，用户会单击 profile 链接，然后被导航到欢迎用户页面。可编写一个功能测试来验证此行为。

tests/functional/main.ts

  1. const { describe, it } = intern.getInterface('bdd');
  2. const { assert } = intern.getPlugin('chai');
  4. describe('routing', () => {
  5.     it('profile page correctly loads', ({ remote }) => {
  6.         return (
  7.             remote
  8.                 // 在本地的 node 服务器中加载 HTML 文件
  9.                 .get('../../output/dev/index.html')
  10.                 // 根据 id 找到超链接标签
  11.                 .findById('profile')
  12.                 // 单击链接
  13.                 .click()
  14.                 // 结束此操作
  15.                 .end()
  16.                 // 找到 h1 标签
  17.                 .findByTagName('h1')
  18.                 // 获取 h1 标签中的文本
  19.                 .getVisibleText()
  20.                 .then((text) => {
  21.                     // 核实 profile 页面中 h1 标签中的内容
  22.                     assert.equal(text, 'Welcome Dojo User!');
  23.                 })
  24.         );
  25.     });
  26. });

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

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

  1. dojo test --functional

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

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

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