The basic usage of Dojo test

【翻译】https://github.com/dojo/framework/blob/master/docs/en/testing/basic-usage.md

The Dojo @dojo/cli-test-internprovides a robust testing framework. It can test small parts efficiently output and confirm that you want.

Features	description
Minimalist API	Dojo components for testing and assertions and behaviors expected of virtual DOM streamlined API.
unit test	It refers to the test unit tests run on the node, and browser for testing separate code blocks.
function test	Selenium functional test by running in a browser, the user's interaction with the simulation software to test the overall functionality.
Assertion Template	Templates can be constructed assertion render a desired function to verify the output member.

Testing Dojo application

Use Dojo @dojo/cli-test-internrun testsfolder unit testing and functional testing.

You can quickly run the test node.

Command Line

dojo test

Run the test

Dojo supports two types of test methods: unit testing and functional testing. Unit tests are run on the local node and Selenium test on the channel used to test the independence of the code block. Selenium functional test by running in a browser, the user's interaction with the simulation software to test the overall functionality. When running unit and functional tests on Selenium, must first @dojo/cli-build-appbe properly constructed.

The following command execution unit testing only.

Command Line

dojo test --unit --config local

The following command uses Selenium to run functional tests on the headless local instances of Chrome in.

Command Line

dojo test --functional --config local

unit test

Dojo carrying member for testing harnessAPI.

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('h1', { classes: [css.root] }, ['Home Page']));

describe('Home', () => {
    it('default renders correctly', () => {
        const h = harness(() => w(Home, {}));
        h.expect(baseTemplate);
    });
});

harness API allows you to verify whether the rendering component output as you wish.

• Does it render as expected?
• Whether the event handler work as expected?

function test

Functional test allows you to load a page and execute the code in your browser in order to better test component behavior.

When writing test cases, you can control the interactions of the test page, and click the button to verify the contents of the page.

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()
                // 找到 h1 标签
                .findByTagName('h1')
                // 获取 h1 标签中的文本
                .getVisibleText()
                .then((text) => {
                    // 核实 profile 页面中 h1 标签中的内容
                    assert.equal(text, 'Welcome Dojo User!');
                })
        );
    });
});

Assertion Template

Assertion template provides a method for creating a basic assertions, which allows you to modify part of the desired output in each test.

A member may render different content according to the attribute value.

src/widgets/Profile.ts

export interface ProfileProperties {
    username?: string;
}

export default class Profile extends WidgetBase<ProfileProperties> {
    protected render() {
        const { username } = this.properties;
        return v('h1', { classes: [css.root] }, [`Welcome ${username || 'Stranger'}!`]);
    }
}

You can use @dojo/framework/testing/assertionTemplateto create a template assertion.

tests/unit/widgets/Profile.ts

// 创建一个断言
const profileAssertion = assertionTemplate(() =>
    v('h1', { classes: [css.root], '~key': 'welcome' }, ['Welcome Stranger!'])
);

describe('Profile', () => {
    it('default renders correctly', () => {
        const h = harness(() => w(Profile, {}));
        // 基于基本断言测试
        h.expect(profileAssertion);
    });
});

Use assertions defined in the template ~keyattribute, you can provide a value for any virtual DOM to be tested. In the .tsxequivalent of this assertion-keyproperty.

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);
    });
});

Use assertion template setChildrenmethod, passing designated ~keyto locate a virtual DOM, and modify the virtual DOM structure, then return to the updated assertion template, you can output the assertions based on the new template test components.