介绍

Dojo 的 @dojo/cli-test-intern 提供了一个健壮的测试框架。它能高效地测试小部件的输出并确认是否如你所愿。

功能描述
极简 API用于测试和断言 Dojo 部件预期的虚拟 DOM 和行为的精简 API。
单元测试单元测试是指运行在 node 和浏览器上的测试，用于测试独立的代码块。
功能测试功能测试通过 Selenium 运行在浏览器中，模拟用户与软件的交互来测试整体功能。
断言断言能构建期望的渲染函数，以验证部件的输出。

基本用法

测试 Dojo 应用程序

  • 运行项目的测试套件
  1. dojo test

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

运行特定的测试套件

Dojo 支持两种类型的测试方法：单元测试和功能测试。单元测试是运行在 node 和本地 Selenium 通道上的测试，用于测试独立的代码块。功能测试通过 Selenium 运行在浏览器中，模拟用户与软件的交互来测试整体功能。在 Selenium 上运行单元测试和功能测试时，必须先使用 @dojo/cli-build-app 进行适当的构建。

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

命令行

  1. dojo test --unit --config local
  • 使用 Selenium 在本地的 headless Chrome 实例中运行功能测试。
  1. dojo test --functional --config local

编写单元测试

src/widgets/Home.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import * as css from './Home.m.css';
  4. const factory = create();
  6. const Home = factory(function Home() {
  7.     return <h1 classes={[css.root]}>Home Page</h1>;
  8. });
  10. export default Home;

tests/unit/widgets/Home.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer, { assertion } from '@dojo/framework/testing/renderer';
  5. import Home from '../../../src/widgets/Home';
  6. import * as css from '../../../src/widgets/Home.m.css';
  8. const baseAssertion = assertion(() => <h1 classes={[css.root]}>Home Page</h1>);
  10. describe('Home', () => {
  11.     it('default renders correctly', () => {
  12.         const r = renderer(() => <Home />);
  13.         r.expect(baseAssertion);
  14.     });
  15. });

renderer API 能让你核实渲染部件的输出是否如你所愿。

  • 它是否按预期渲染?
  • 事件处理器是否按预期工作?

编写功能测试

功能测试允许你在真正的浏览器上加载一个 UI 页面并执行其中的代码，以更好的测试部件的行为。

编写功能测试就是详细描述用户在页面中的交互，如点击元素，然后验证生成的页面内容。

tests/functional/main.ts

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

使用断言

断言提供了一种创建基本断言的方法，该方法允许你在每个测试间修改期望输出中的部分内容。

  • 一个部件可根据属性值的不同渲染不同的内容:

src/widgets/Profile.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  3. import * as css from './Profile.m.css';
  5. export interface ProfileProperties {
  6.     username?: string;
  7. }
  9. const factory = create().properties<ProfileProperties>();
  11. const Profile = factory(function Profile({ properties }) {
  12.     const { username } = properties();
  13.     return <h1 classes={[css.root]}>{`Welcome ${username || 'Stranger'}!`}</h1>;
  14. });
  16. export default Profile;
  • 使用 @dojo/framework/testing/renderer#assertion 创建一个断言

tests/unit/widgets/Profile.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer, { assertion } from '@dojo/framework/testing/renderer';
  5. import Profile from '../../../src/widgets/Profile';
  6. import * as css from '../../../src/widgets/Profile.m.css';
  8. // 创建一个断言
  9. const profileAssertion = assertion(() => <h1 classes={[css.root]}>Welcome Stranger!</h1>);
  11. describe('Profile', () => {
  12.     it('default renders correctly', () => {
  13.         const r = renderer(() => <Profile />);
  14.         // 基于基本断言测试
  15.         r.expect(profileAssertion);
  16.     });
  17. });

包装后的测试节点，是使用 @dojo/framework/testing/renderer#wrap 创建的，然后将其传给断言方法，作为期望输出，以代替与断言 API 交互的标准部件。注意：当在 v() 中使用包装的 VNode 时，需要使用包装节点的 .tag 属性，如 v(WrappedDiv.tag, {} [])。

tests/unit/widgets/Profile.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import renderer { wrap, assertion } from '@dojo/framework/testing/renderer';
  5. import Profile from '../../../src/widgets/Profile';
  6. import * as css from '../../../src/widgets/Profile.m.css';
  8. // Create a wrapped test node
  9. const WrappedHeader = wrap('h1');
  11. // Create an assertion
  12. const profileAssertion = assertion(() => (
  13.     // Use the wrapped node in place of the normal node
  14.     <WrappedHeader classes={[css.root]}>Welcome Stranger!</WrappedHeader>
  15. ));
  17. describe('Profile', () => {
  18.     it('default renders correctly', () => {
  19.         const r = renderer(() => <Profile />);
  20.         // Test against my base assertion
  21.         r.expect(profileAssertion);
  22.     });
  24.     it('renders given username correctly', () => {
  25.         // update the expected result with a given username
  26.         const namedAssertion = profileAssertion.setChildren(WrappedHeader, () => ['Welcome Kel Varnsen!']);
  27.         const r = renderer(() => <Profile username="Kel Varnsen" />);
  28.         r.expect(namedAssertion);
  29.     });
  30. });

使用断言的 setChildren 方法，传入包装的测试节点，此示例中为 WrappedHeader，将返回一个更新了虚拟 DOM 结构的断言（assertion）对象。就可以使用返回的断言测试部件的输出。