【翻译】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 testDojo 支持两种类型的测试方法：单元测试和功能测试。单元测试是运行在 node 和本地 Selenium 通道上的测试，用于测试独立的代码块。功能测试通过 Selenium 运行在浏览器中，模拟用户与软件的交互来测试整体功能。在 Selenium 上运行单元测试和功能测试时，必须先使用 @dojo/cli-build-app 进行适当的构建。
以下命令仅执行单元测试。
命令行
dojo test --unit --config local以下命令使用 Selenium 在本地的 headless Chrome 实例中运行功能测试。
命令行
dojo test --functional --config localDojo 自带用于测试部件的 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 的结构，然后返回更新的断言模板，你可以基于新的断言模板测试部件的输出。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
