【翻译】https://github.com/dojo/framework/blob/master/docs/en/testing/basic-usage.md
目前创新互联已为上千多家的企业提供了网站建设、域名、雅安服务器托管、成都网站托管、企业网站设计、拉萨网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
Dojo 的 @dojo/cli-test-intern
提供了一个健壮的测试框架。它能高效地测试小部件的输出并确认是否如你所愿。
功能 | 描述 |
---|---|
极简 API | 用于测试和断言 Dojo 部件预期的虚拟 DOM 和行为的精简 API。 |
单元测试 | 单元测试是指运行在 node 和浏览器上的测试,用于测试独立的代码块。 |
功能测试 | 功能测试通过 Selenium 运行在浏览器中,模拟用户与软件的交互来测试整体功能。 |
断言模板 | 断言模板能构建期望的渲染函数,以验证部件的输出。 |
Dojo 使用 @dojo/cli-test-intern
运行 tests
文件夹下的单元测试和功能测试。
你可在 node 中快速运行测试。
命令行
dojo test
Dojo 支持两种类型的测试方法:单元测试和功能测试。单元测试是运行在 node 和本地 Selenium 通道上的测试,用于测试独立的代码块。功能测试通过 Selenium 运行在浏览器中,模拟用户与软件的交互来测试整体功能。在 Selenium 上运行单元测试和功能测试时,必须先使用 @dojo/cli-build-app
进行适当的构建。
以下命令仅执行单元测试。
命令行
dojo test --unit --config local
以下命令使用 Selenium 在本地的 headless Chrome 实例中运行功能测试。
命令行
dojo test --functional --config local
Dojo 自带用于测试部件的 harness
API。
src/tests/unit/widgets/Home.ts
const { describe, it } = intern.getInterface('bdd');
import harness from '@dojo/framework/testing/harness';
import assertionTemplate from '@dojo/framework/testing/assertionTemplate';
import { w, v } from '@dojo/framework/widget-core/d';
import Home from '../../../src/widgets/Home';
import * as css from '../../../src/widgets/styles/Home.m.css';
const baseTemplate = assertionTemplate(() => v('h2', { classes: [css.root] }, ['Home Page']));
describe('Home', () => {
it('default renders correctly', () => {
const h = harness(() => w(Home, {}));
h.expect(baseTemplate);
});
});
harness
API 能让你核实渲染部件的输出是否如你所愿。
功能测试允许你加载一个页面并在浏览器中执行你的代码,以更好的测试部件的行为。
当编写测试用例时,你可以控制页面中测试的交互行为,来单击按钮并验证页面的内容。
tests/functional/main.ts
describe('routing', () => {
it('profile page correctly loads', ({ remote }) => {
return (
remote
// 在本地的 node 服务器中加载 HTML 文件
.get('../../output/dev/index.html')
// 根据 id 找到超链接标签的
.findById('profile')
// 单击链接
.click()
// 结束此操作
.end()
// 找到 h2 标签
.findByTagName('h2')
// 获取 h2 标签中的文本
.getVisibleText()
.then((text) => {
// 核实 profile 页面中 h2 标签中的内容
assert.equal(text, 'Welcome Dojo User!');
})
);
});
});
断言模板提供了一种创建基本断言的方法,该方法允许你在每个测试中修改期望输出中的部分内容。
一个部件可根据属性值渲染不同的内容。
src/widgets/Profile.ts
export interface ProfileProperties {
username?: string;
}
export default class Profile extends WidgetBase {
protected render() {
const { username } = this.properties;
return v('h2', { classes: [css.root] }, [`Welcome ${username || 'Stranger'}!`]);
}
}
你可以使用 @dojo/framework/testing/assertionTemplate
创建一个断言模板。
tests/unit/widgets/Profile.ts
// 创建一个断言
const profileAssertion = assertionTemplate(() =>
v('h2', { classes: [css.root], '~key': 'welcome' }, ['Welcome Stranger!'])
);
describe('Profile', () => {
it('default renders correctly', () => {
const h = harness(() => w(Profile, {}));
// 基于基本断言测试
h.expect(profileAssertion);
});
});
使用在断言模板中定义的 ~key
属性,你可以为任何要测试的虚拟 DOM 提供一个值。在 .tsx
中对应的是 assertion-key
属性。
tests/unit/widgets/Profile.ts
describe('Profile', () => {
it('default renders correctly', () => {
const h = harness(() => w(Profile, {}));
h.expect(profileAssertion);
});
it('renders given username correctly', () => {
// 使用给定的用户名更新期望的结果
const namedAssertion = profileAssertion.setChildren('~welcome', () => ['Welcome Kel Varnsen!']);
const h = harness(() => w(Profile, { username: 'Kel Varnsen' }));
h.expect(namedAssertion);
});
});
使用断言模板的 setChildren
方法,传入指定的 ~key
来定位一个虚拟 DOM,并修改该虚拟 DOM 的结构,然后返回更新的断言模板,你可以基于新的断言模板测试部件的输出。