Mocking

一种常见的测试类型是验证部件的用户界面是否按预期渲染，而不必关心部件的底层业务逻辑。但这些测试可能希望断言一些场景，如单击按钮以调用部件的属性方法，并不关心属性方法的实现逻辑，只是希望按预期调用了接口。在这种情况下，可借助类似 Sinon 的 mock 库。

src/widgets/Action.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import Button from '@dojo/widgets/button';

import * as css from './Action.m.css';

const factory = create().properties<{ fetchItems: () => void }>();

const Action = factory(function Action({ properties }) {
    return (
        <div classes={[css.root]}>
            <Button key="button" onClick={() => properties().fetchItems()}>
                Fetch
            </Button>
        </div>
    );
});

export default Action;

测试当单击按钮后，会调用 properties().fetchItems 方法。

tests/unit/widgets/Action.tsx

const { describe, it } = intern.getInterface('bdd');
import { tsx } from '@dojo/framework/core/vdom';
import assertionTemplate from '@dojo/framework/testing/assertionTemplate';
import harness from '@dojo/framework/testing/harness';

import Action from '../../../src/widgets/Action';
import * as css from '../../../src/widgets/Action.m.css';

import Button from '@dojo/widgets/button';

import { stub } from 'sinon';
import { assert } from 'chai';

describe('Action', () => {
    const fetchItems = stub();
    it('can fetch data on button click', () => {
        const h = harness(() => <Action fetchItems={fetchItems} />);
        h.expect(() => (
            <div classes={[css.root]}>
                <Button key="button" onClick={() => {}}>
                    Fetch
                </Button>
            </div>
        ));
        h.trigger('@button', 'onClick');
        assert.isTrue(fetchItems.calledOnce);
    });
});

在这种情况下，mock 一个 Action 部件的 fetchItems 方法，该方法用于获取数据项。然后使用 @button 定位到按钮，并触发按钮的 onClick 事件，然后校验 fetchItems 方法仅被调用过一次。

要了解更多 mocking 信息，请阅读 Sinon 文档。