Mocking

A common type of test is validating a widget’s user interface renders as expected without necessarily being concerned with the widget’s underlying business logic. These tests may want to assert scenarios such as button clicks calling widget property methods, without concern as to what the property method implementations are, only that the interface is called as expected. A mocking library such as Sinon can be used to help in these cases.

src/widgets/Action.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import Button from '@dojo/widgets/button';
  4. import * as css from './Action.m.css';
  6. const factory = create().properties<{ fetchItems: () => void }>();
  8. const Action = factory(function Action({ properties }) {
  9.     return (
  10.         <div classes={[css.root]}>
  11.             <Button key="button" onClick={() => properties().fetchItems()}>
  12.                 Fetch
  13.             </Button>
  14.         </div>
  15.     );
  16. });
  18. export default Action;

To test that the properties().fetchItems method is called when the button is clicked:

tests/unit/widgets/Action.tsx

  1. const { describe, it } = intern.getInterface('bdd');
  2. import { tsx } from '@dojo/framework/core/vdom';
  3. import assertionTemplate from '@dojo/framework/testing/assertionTemplate';
  4. import harness from '@dojo/framework/testing/harness';
  6. import Action from '../../../src/widgets/Action';
  7. import * as css from '../../../src/widgets/Action.m.css';
  9. import Button from '@dojo/widgets/button';
  11. import { stub } from 'sinon';
  12. import { assert } from 'chai';
  14. describe('Action', () => {
  15.     const fetchItems = stub();
  16.     it('can fetch data on button click', () => {
  17.         const h = harness(() => <Action fetchItems={fetchItems} />);
  18.         h.expect(() => (
  19.             <div classes={[css.root]}>
  20.                 <Button key="button" onClick={() => {}}>
  21.                     Fetch
  22.                 </Button>
  23.             </div>
  24.         ));
  25.         h.trigger('@button', 'onClick');
  26.         assert.isTrue(fetchItems.calledOnce);
  27.     });
  28. });

In this case, a mock of the fetchItems method is provided to the Action widget that requires items to be fetched. The @button key is then targeted to trigger the button’s onClick, after which an assertion is validated that the fetchItems mock was called only once.

See the Sinon documentation for more details on mocking.