Skip to content

Commit b00488d

Browse files
committed
new readme
1 parent 291e3e8 commit b00488d

3 files changed

Lines changed: 24 additions & 156 deletions

File tree

.gitignore

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
11
node_modules
2-
lib
3-
alt
4-
/legit-tests.js
5-
/dom.js
6-
/middleware.js
7-
/middleware
8-
/no-dom.js
9-
/tests.js
2+
legit-tests.js
3+
find-all.js
104
npm-debug.log

README.md

Lines changed: 21 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,37 @@
11
##Legit Tests
22

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!
44

5-
###Install
5+
```
6+
npm install legit-tests@@2.0.0-alpha-1
67
7-
`npm install legit-tests --save`
8+
```
89

9-
##Example
10+
###Example
1011

11-
~~~js
12-
import Test from 'legit-tests'
13-
//or
14-
import Test from 'legit-tests/no-dom' //don't include jsdom
12+
Find
1513

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')
3618
})
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
5119

52-
This is the setState function used above.
53-
~~~js
20+
```
5421

55-
Test(<TestComponent onClick={spy}/>)
56-
.use(SetState, {})
22+
That is it. You can find multiple nodes and access them like so:
5723

58-
...
24+
```js
25+
legit.find('.awesome').first().children
26+
legit.find('.awesome').last().children
27+
legit.find('.awesome').get(3).children
28+
```
5929

60-
export default function setState(state){
61-
this.instance.setState(state)
62-
}
63-
~~~
6430

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
9332

94-
~~~
33+
- Find
9534

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
16236

163-
You can see the [full documentation on the Wiki](https://github.com/Legitcode/tests/wiki/Alt-Stores)
37+
- Simulate

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "legit-tests",
3-
"version": "1.1.1",
3+
"version": "2.0.0alpha-1",
44
"description": "a chainable testing library for React",
55
"main": "legit-tests.js",
66
"scripts": {

0 commit comments

Comments
 (0)