|
1 | 1 | ##Legit Tests |
2 | 2 |
|
3 | | -This is a super friendly testing library for React, inspired by express middleware, it's easily extendable. Why did I make this when you can use [React's Test Utils](https://facebook.github.io/react/docs/test-utils.html)? Because who likes typing out `scryRenderedDOMComponentsWithTag` and the other method names on there. Not only that, but setting up the render process is also a hassle. |
| 3 | +Legit Tests version 2.0 is completely rebuilt and much simpler. It has been influenced by [enzyme](https://github.com/airbnb/enzyme) and some code from [react-shallow-testutils](https://github.com/sheepsteak/react-shallow-testutils). It is meant to be a complete testing solution for shallow rendering. The syntax is as short as possible for testing your components! |
4 | 4 |
|
5 | | -###Install |
| 5 | +``` |
| 6 | +npm install legit-tests@@2.0.0-alpha-1 |
6 | 7 |
|
7 | | -`npm install legit-tests --save` |
| 8 | +``` |
8 | 9 |
|
9 | | -##Example |
| 10 | +###Example |
10 | 11 |
|
11 | | -~~~js |
12 | | -import Test from 'legit-tests' |
13 | | -//or |
14 | | -import Test from 'legit-tests/no-dom' //don't include jsdom |
| 12 | +Find |
15 | 13 |
|
16 | | -import { expect } from 'chai' |
17 | | -import sinon from 'sinon' |
18 | | -import TestComponent from './TestComponent' |
19 | | - |
20 | | -let spy = sinon.spy() |
21 | | - |
22 | | - |
23 | | -//Calling a prop |
24 | | -Test(<TestComponent onClick={spy}/>) |
25 | | -.find('button') |
26 | | -.simulate({method: 'click', element: 'button'}) |
27 | | -.test(() => { |
28 | | - expect(spy.called).to.be.true |
29 | | -}) |
30 | | - |
31 | | -//finding an element |
32 | | -Test(<TestComponent/>) |
33 | | -.find('.box') |
34 | | -.elements('.box', (box) => { |
35 | | - expect(box.props.children).to.be.equal('found me!') |
| 14 | +```js |
| 15 | +it('should find id', () => { |
| 16 | + const legit = test(<Test />) |
| 17 | + expect(legit.find('#sick').id).to.equal('sick') |
36 | 18 | }) |
37 | | -~~~ |
38 | | - |
39 | | -##Middleware |
40 | | - |
41 | | -[Current list of Middleware](https://github.com/Legitcode/tests/wiki/Bundled-Middleware) |
42 | | - |
43 | | -You can write middleware to do anything you repeatedly use. You can pass `.use` a function, along with an object that it will take in. Each function will be injected with the current instance which includes: |
44 | | -- `component` - the actual component itself |
45 | | -- `instance` - the rendered component instance |
46 | | -- `helpers` - an array you can add on to with data for the end function |
47 | | - |
48 | | -**Example**: |
49 | | - |
50 | | -- See `mixin` below, this syntax may soon be deprecated |
51 | 19 |
|
52 | | -This is the setState function used above. |
53 | | -~~~js |
| 20 | +``` |
54 | 21 |
|
55 | | -Test(<TestComponent onClick={spy}/>) |
56 | | -.use(SetState, {}) |
| 22 | +That is it. You can find multiple nodes and access them like so: |
57 | 23 |
|
58 | | -... |
| 24 | +```js |
| 25 | +legit.find('.awesome').first().children |
| 26 | +legit.find('.awesome').last().children |
| 27 | +legit.find('.awesome').get(3).children |
| 28 | +``` |
59 | 29 |
|
60 | | -export default function setState(state){ |
61 | | - this.instance.setState(state) |
62 | | -} |
63 | | -~~~ |
64 | 30 |
|
65 | | -##test |
66 | | - |
67 | | -The `.test` function will be given the component instance and the helpers array. You can use a regular function to reference `this` or an arrow function: |
68 | | - |
69 | | -~~~js |
70 | | -.test(({helpers, instance}) => { ... }) |
71 | | -.test(function() { |
72 | | - //this.instance, this.helpers |
73 | | -}) |
74 | | -~~~ |
75 | | - |
76 | | -##element |
77 | | - |
78 | | -Use `.element` if you're just testing an element you found with the `.find` method. The syntax is a little smaller: |
79 | | - |
80 | | -~~~js |
81 | | -Test(<TestComponent/>) |
82 | | -.find('.box') |
83 | | -.element(box => { |
84 | | - expect(box.props.children).to.be.equal('found me!') |
85 | | -}) |
86 | | -//or specify the element |
87 | | - |
88 | | -.find('.box') |
89 | | -.find('div') |
90 | | -.element('.box', box => { |
91 | | - expect(box.props.children).to.be.equal('found me!') |
92 | | -}) |
| 31 | +##Supported methods |
93 | 32 |
|
94 | | -~~~ |
| 33 | +- Find |
95 | 34 |
|
96 | | -##mixin |
97 | | - |
98 | | -Use `.mixin` if you want to add new middleware as methods to `Test`. This gives a more natural way of using middleware: |
99 | | - |
100 | | -~~~js |
101 | | -// In this example, CustomFind middleware was added to Test by mixin |
102 | | -// and used if as it was a method on Test itself. |
103 | | - |
104 | | -Test(<TestComponent />) |
105 | | -.mixin({ |
106 | | - customFind: CustomFind |
107 | | -}) |
108 | | -.customFind('cells', 'table td') |
109 | | -.element('cells', cells => { |
110 | | - expect(cells.length).to.be.equal(10) |
111 | | -}) |
112 | | - |
113 | | -~~~ |
114 | | - |
115 | | -##DOM rendering |
116 | | -__Shallow__ -- uses React shallow rendering (no DOM) |
117 | | -~~~js |
118 | | -Test(<TestComponent onClick={spy}/>, {shallow: true}) |
119 | | -.find('button') |
120 | | -.simulate({method: 'click', element: 'button'}) |
121 | | -.test(() => { |
122 | | - expect(spy.called).to.be.true |
123 | | -}) |
124 | | -~~~ |
125 | | - |
126 | | -__Normal__ -- React render into document fragment |
127 | | -~~~js |
128 | | -Test(<TestComponent onClick={spy}/>) |
129 | | -.find('button') |
130 | | -.simulate({method: 'click', element: 'button'}) |
131 | | -.test(() => { |
132 | | - expect(spy.called).to.be.true |
133 | | -}) |
134 | | -~~~ |
135 | | - |
136 | | -__fullDOM__ -- ReactDOM render into document.body.div of jsdom |
137 | | -~~~js |
138 | | -Test(<section />, {fullDOM: true}) |
139 | | -.test(function() { |
140 | | - expect(global.window.document.querySelector('section')) |
141 | | - .to.be.okay |
142 | | -}) |
143 | | -.clean() // restores the document.body to empty |
144 | | -~~~ |
145 | | - |
146 | | -You can see more examples in the tests directory. |
147 | | - |
148 | | -##Testing Alt Stores |
149 | | - |
150 | | -You can now test [Alt](http://alt.js.org/) stores using the same API. |
151 | | - |
152 | | -~~~js |
153 | | -import TestStore from 'legit-tests/alt/store' |
154 | | - |
155 | | -TestStore(MyStore, MyActions) |
156 | | -.setInitialState({ todos: todos }) |
157 | | -.addTodo({ title: "Get Beer", complete: false }) |
158 | | -.test(({ state }) => { |
159 | | - expect(state.todos).to.eql(expected); |
160 | | -}) |
161 | | -~~~ |
| 35 | +Coming soon |
162 | 36 |
|
163 | | -You can see the [full documentation on the Wiki](https://github.com/Legitcode/tests/wiki/Alt-Stores) |
| 37 | +- Simulate |
0 commit comments