1 | ---
|
2 | category: packages
|
3 | ---
|
4 |
|
5 | ## @instructure/ui-testbed
|
6 |
|
7 | Creates a sandbox and provides utilities for testing UI code.
|
8 |
|
9 | [![npm][npm]][npm-url]
|
10 | [![build-status][build-status]][build-status-url]
|
11 | [![MIT License][license-badge]][LICENSE]
|
12 | [![Code of Conduct][coc-badge]][coc]
|
13 |
|
14 |
|
15 | ### Installation
|
16 |
|
17 | ```sh
|
18 | yarn add --dev @instructure/ui-testbed
|
19 | ```
|
20 |
|
21 | ### Usage
|
22 |
|
23 | Tests using the ui-testbed are written using the [mocha](https://mochajs.org/) testing framework and [chai](http://chaijs.com/api/bdd/) bdd style assertions.
|
24 |
|
25 | The `Testbed` handles all of the common setup and teardown for your test.
|
26 |
|
27 | It also provides some utilities for rendering components, updating props and stubbing out functions.
|
28 |
|
29 | #### To set up the test bed:
|
30 |
|
31 | ```javascript
|
32 | const testbed = new Testbed(<MyComponent prop="foo" />)
|
33 | ```
|
34 |
|
35 | #### To render the component under test:
|
36 |
|
37 | ```javascript
|
38 | const subject = testbed.render()
|
39 | ```
|
40 |
|
41 | The render function returns the component under test wrapped in a
|
42 | [enzyme](http://airbnb.io/enzyme/) object that you can use to query the DOM and/or the component tree rendered by your component. See the [enzyme](http://airbnb.io/enzyme/) and [chai](http://chaijs.com/api/bdd/) documentation for more details on how to write assertions.
|
43 |
|
44 | #### To update the props after render:
|
45 |
|
46 | ```javascript
|
47 | subject.setProps({
|
48 | someProp: 'someNewValue'
|
49 | }, () => {
|
50 | // assert something after props have been updated
|
51 | done()
|
52 | })
|
53 | ```
|
54 |
|
55 | #### To stub out a function:
|
56 |
|
57 | ```javascript
|
58 | const onClick = testbed.stub()
|
59 |
|
60 | const subject = testbed.render({
|
61 | onClick
|
62 | })
|
63 |
|
64 | subject.find('input').simulate('click')
|
65 |
|
66 | expect(onClick).to.have.been.called()
|
67 | ```
|
68 |
|
69 | The testbed provides a reference to a [sinon sandbox](http://sinonjs.org/docs/#sandbox) that you can use to stub out functions for your tests. See the [sinon documentation](http://sinonjs.org/docs/) for more details.
|
70 |
|
71 | #### To run a single test or a group of tests:
|
72 |
|
73 | ```javascript
|
74 | it.only('should do something', function () {
|
75 | ...
|
76 | })
|
77 | ```
|
78 | or
|
79 |
|
80 | ```javascript
|
81 | describe.only('with some context', function () {
|
82 | ...
|
83 | })
|
84 | ```
|
85 |
|
86 | ### Testing the Accessibility of Components
|
87 |
|
88 | ```javascript
|
89 | it('should be accessible', function (done) {
|
90 | const subject = testbed.render()
|
91 |
|
92 | subject.should.be.accessible(done)
|
93 | })
|
94 | ```
|
95 |
|
96 | A custom chai assertion is also provided that wraps the [axe-core](https://github.com/dequelabs/axe-core) library to test that your component meets the configured accessibility standards. Note that you have to provide a callback because this runs asynchronously. See the [mocha](https://mochajs.org/#asynchronous-code) and [axe-core](https://github.com/dequelabs/axe-core) documentation for more details.
|
97 |
|
98 |
|
99 | [npm]: https://img.shields.io/npm/v/@instructure/ui-testbed.svg
|
100 | [npm-url]: https://npmjs.com/package/@instructure/ui-testbed
|
101 |
|
102 | [build-status]: https://travis-ci.org/instructure/instructure-ui.svg?branch=master
|
103 | [build-status-url]: https://travis-ci.org/instructure/instructure-ui "Travis CI"
|
104 |
|
105 | [license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
|
106 | [license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
|
107 |
|
108 | [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
|
109 | [coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md
|