├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── README.md ├── circle.yml ├── mocha.opts ├── package.json ├── src ├── alt │ ├── alt.js │ └── store.js ├── dom.js ├── legit-tests.js ├── middleware.js ├── middleware │ ├── clean.js │ ├── find.js │ ├── setState.js │ └── simulate.js ├── no-dom.js └── tests.js └── tests ├── components ├── component.jsx ├── index.js ├── other-component.jsx └── tiny-component.jsx ├── element.jsx ├── find.jsx ├── full-dom.jsx ├── mixin.jsx ├── no-dom.jsx ├── renderToString.jsx ├── setState.jsx ├── shallowRender.jsx └── simulate.jsx /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 0 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "es6": true, 5 | "mocha": true, 6 | "node": true 7 | }, 8 | "ecmaFeatures": { 9 | "blockBindings": true, 10 | "forOf": true, 11 | "jsx": true, 12 | "modules": true 13 | }, 14 | "rules": { 15 | "indent": [2, 2], 16 | "max-len": 0, 17 | "semi": 0, 18 | "quotes": 0, 19 | "semi": [2, "never"], 20 | "no-unused-vars": 2, 21 | "no-undef": 2, 22 | "no-console": 0, 23 | "no-trailing-spaces": 0, 24 | "curly": 0, 25 | "camelcase": 0, 26 | "react/jsx-boolean-value": 1, 27 | "jsx-quotes": 1, 28 | "react/jsx-no-undef": 1, 29 | "react/jsx-uses-react": 1, 30 | "react/jsx-uses-vars": 1, 31 | "react/no-did-mount-set-state": 1, 32 | "react/no-did-update-set-state": 1, 33 | "react/no-multi-comp": 1, 34 | "react/no-unknown-property": 1, 35 | "react/prop-types": 0, 36 | "react/react-in-jsx-scope": 0, 37 | "react/self-closing-comp": 1, 38 | "react/sort-comp": 1, 39 | "react/wrap-multilines": 1, 40 | "new-cap": [1, {newIsCap: true, capIsNew: false}], 41 | }, 42 | "plugins": [ 43 | "react" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 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 10 | npm-debug.log 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | tests 3 | .eslintrc 4 | mocha.opts 5 | circle.yml 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##Legit Tests 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. 4 | 5 | ###Install 6 | 7 | `npm install legit-tests --save` 8 | 9 | ##Example 10 | 11 | ~~~js 12 | import Test from 'legit-tests' 13 | //or 14 | import Test from 'legit-tests/no-dom' //don't include jsdom 15 | 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() 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() 33 | .find('.box') 34 | .elements('.box', (box) => { 35 | expect(box.props.children).to.be.equal('found me!') 36 | }) 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 | 52 | This is the setState function used above. 53 | ~~~js 54 | 55 | Test() 56 | .use(SetState, {}) 57 | 58 | ... 59 | 60 | export default function setState(state){ 61 | this.instance.setState(state) 62 | } 63 | ~~~ 64 | 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() 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 | }) 93 | 94 | ~~~ 95 | 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() 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(, {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() 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(
, {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 | ~~~ 162 | 163 | You can see the [full documentation on the Wiki](https://github.com/Legitcode/tests/wiki/Alt-Stores) 164 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 4.0.0 4 | -------------------------------------------------------------------------------- /mocha.opts: -------------------------------------------------------------------------------- 1 | --full-trace 2 | --compilers js:babel/register 3 | --harmony-proxies 4 | --recursive ./tests/**/*.jsx 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "legit-tests", 3 | "version": "1.1.2", 4 | "description": "a chainable testing library for React", 5 | "main": "legit-tests.js", 6 | "scripts": { 7 | "compile": "babel src --out-dir .", 8 | "prepublish": "babel src --out-dir .", 9 | "lint": "eslint ./src/ ./tests/ --ext .jsx,.js --global require,exports:true", 10 | "mocha": "mocha --opts ./mocha.opts", 11 | "test": "npm run mocha; npm run lint" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+ssh://git@github.com/legitcode/tests.git" 16 | }, 17 | "keywords": [ 18 | "react-component", 19 | "react", 20 | "tests", 21 | "react-test", 22 | "react-utils" 23 | ], 24 | "author": "Zach Silveira", 25 | "license": "ISC", 26 | "bugs": { 27 | "url": "https://github.com/legitcode/tests/issues" 28 | }, 29 | "homepage": "https://github.com/legitcode/tests#readme", 30 | "devDependencies": { 31 | "alt": "^0.17.4", 32 | "babel-core": "^5.8.25", 33 | "babel-eslint": "^4.1.3", 34 | "babel-loader": "^5.3.2", 35 | "babel-runtime": "^5.8.25", 36 | "chai": "^3.3.0", 37 | "eslint": "^1.6.0", 38 | "eslint-plugin-react": "^3.5.1", 39 | "expect": "^1.12.0", 40 | "mocha": "^2.3.3", 41 | "mocha-babel": "^3.0.0", 42 | "react-hot-loader": "^1.3.0", 43 | "sinon": "^1.17.1", 44 | "webpack": "^1.12.2" 45 | }, 46 | "dependencies": { 47 | "babel": "^5.8.29", 48 | "harmony-reflect": "^1.4.2", 49 | "jsdom": "^6.5.1", 50 | "lodash": "^3.10.1", 51 | "react": ">=0.14.0 || >15.0.0", 52 | "react-addons-test-utils": ">=0.14.0 || >=15.0.0", 53 | "react-dom": ">=0.14.0 || >=15.0.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/alt/alt.js: -------------------------------------------------------------------------------- 1 | import Alt from 'alt' 2 | 3 | export default new Alt() 4 | -------------------------------------------------------------------------------- /src/alt/store.js: -------------------------------------------------------------------------------- 1 | import 'harmony-reflect' 2 | 3 | class TestStore { 4 | constructor(store, actions) { 5 | this.store = store 6 | this.actions = actions 7 | } 8 | 9 | test(callback) { 10 | callback.call(this, this.store) 11 | return this 12 | } 13 | } 14 | 15 | export default function TestStoreWrapper(store, actions) { 16 | var proxy = new Proxy(new TestStore(store, actions), { 17 | get: function(target, name) { 18 | if (name in target) { 19 | return target[name] 20 | } 21 | else if (name in target.actions) { 22 | return (params) => { 23 | target.actions[name](params) 24 | return proxy 25 | } 26 | } 27 | } 28 | }) 29 | 30 | return proxy 31 | } 32 | -------------------------------------------------------------------------------- /src/dom.js: -------------------------------------------------------------------------------- 1 | /* globals global */ 2 | function propagateToGlobal (window) { 3 | for (let key in window) { 4 | if (!window.hasOwnProperty(key)) continue 5 | if (key in global) continue 6 | 7 | global[key] = window[key] 8 | } 9 | } 10 | 11 | var jsdom = require('jsdom') 12 | 13 | var doc = jsdom.jsdom('') 14 | var win = doc.defaultView 15 | 16 | global.document = doc 17 | global.window = win 18 | 19 | propagateToGlobal(win) 20 | -------------------------------------------------------------------------------- /src/legit-tests.js: -------------------------------------------------------------------------------- 1 | import './dom' 2 | export default from './tests' 3 | -------------------------------------------------------------------------------- /src/middleware.js: -------------------------------------------------------------------------------- 1 | import Find from './middleware/find' 2 | import SetState from './middleware/setState' 3 | import Simulate from './middleware/simulate' 4 | import Clean from './middleware/clean' 5 | 6 | export default { 7 | Find, 8 | SetState, 9 | Simulate, 10 | Clean 11 | } 12 | -------------------------------------------------------------------------------- /src/middleware/clean.js: -------------------------------------------------------------------------------- 1 | export default function Clean(){ 2 | this.instance = null 3 | this.elements = null 4 | if (global.window){ 5 | global.window.document.body.innerHTML = '' 6 | } 7 | } -------------------------------------------------------------------------------- /src/middleware/find.js: -------------------------------------------------------------------------------- 1 | import TestUtils from 'react-addons-test-utils' 2 | import _ from 'lodash' 3 | 4 | export default function find(selector){ 5 | 6 | var self = this 7 | var foundElements = [] 8 | var elements 9 | var selector 10 | 11 | if (_.isFunction(selector)){ 12 | elements = TestUtils.scryRenderedComponentsWithType(this.instance, selector) 13 | selector = (selector.name || selector.displayName).toLowerCase() 14 | } else { 15 | 16 | var tokens = selector.split(/(?=\.)|(?=#)|(?=\[)/) 17 | tokens 18 | .forEach(function(subselector){ 19 | var els 20 | switch (subselector[0]){ 21 | // class 22 | case '.': 23 | els = TestUtils.scryRenderedDOMComponentsWithClass(self.instance, subselector.slice(1)) 24 | foundElements.push( Array.isArray(els) ? els : [els] ) 25 | break 26 | 27 | // id 28 | case '#': 29 | els = TestUtils.findAllInRenderedTree(self.instance, function(component){ 30 | if (component.id === subselector.slice(1)){ 31 | return true 32 | } 33 | }) 34 | foundElements.push( Array.isArray(els) ? els : [els] ) 35 | break 36 | 37 | // data attribute 38 | case '[': 39 | var attributeName = _.first( subselector.slice(1,-1).split('=') ) 40 | var attributeValue = subselector.slice(1,-1).split('=').slice(1).join('=').replace(/^"(.*)"$/, '$1') 41 | 42 | els = TestUtils.findAllInRenderedTree(self.instance, function(component){ 43 | if (component.getAttribute) { 44 | var val = component.getAttribute(attributeName) 45 | if (val === attributeValue || (val === 'true' && attributeValue === '')){ 46 | return true 47 | } 48 | } 49 | }) 50 | 51 | foundElements.push( Array.isArray(els) ? els : [els] ) 52 | break 53 | 54 | // tag 55 | default: 56 | els = TestUtils.scryRenderedDOMComponentsWithTag(self.instance, subselector) 57 | foundElements.push( Array.isArray(els) ? els : [els] ) 58 | break 59 | } 60 | }) 61 | 62 | elements = _.intersection.apply(_, foundElements) 63 | } 64 | 65 | if (elements){ 66 | if (Array.isArray(elements) && elements.length === 1) { 67 | this.elements[selector] = elements[0] 68 | } else { 69 | this.elements[selector] = elements 70 | } 71 | } 72 | 73 | } 74 | -------------------------------------------------------------------------------- /src/middleware/setState.js: -------------------------------------------------------------------------------- 1 | export default function setState(state){ 2 | this.instance.setState(state) 3 | } 4 | -------------------------------------------------------------------------------- /src/middleware/simulate.js: -------------------------------------------------------------------------------- 1 | import TestUtils from 'react-addons-test-utils' 2 | 3 | export default function simulate(data) { 4 | let element 5 | if (data.element !== undefined ) { 6 | element = Array.isArray(this.elements[data.element]) ? 7 | this.elements[data.element][0] : this.elements[data.element] 8 | } else { 9 | throw new Error(`No element "${data.element}" is in elements`) 10 | } 11 | TestUtils.Simulate[data.method].call(this, 12 | element, 13 | data.options || null 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/no-dom.js: -------------------------------------------------------------------------------- 1 | export default from './tests' 2 | -------------------------------------------------------------------------------- /src/tests.js: -------------------------------------------------------------------------------- 1 | import TestUtils from 'react-addons-test-utils' 2 | import ReactDOMServer from 'react-dom/server' 3 | import ReactDOM from 'react-dom' 4 | import React from 'react' 5 | global.React = React 6 | 7 | import { Find, SetState, Simulate, Clean } from './middleware' 8 | 9 | function Test(component, config) { 10 | 11 | let instance 12 | if (config && config.shallow === true) { 13 | const shallowRenderer = TestUtils.createRenderer() 14 | shallowRenderer.render(component) 15 | instance = shallowRenderer.getRenderOutput() 16 | } else if (config && config.fullDOM && global.window) { 17 | var div = global.window.document.createElement('div') 18 | global.window.document.body.appendChild(div) 19 | instance = ReactDOM.render(component, div) 20 | } else { 21 | instance = TestUtils.renderIntoDocument(component) 22 | } 23 | 24 | const testComponent = { 25 | instance, 26 | component, 27 | elements: {}, 28 | element(select, callback) { 29 | let element 30 | if (typeof select === 'string') { 31 | element = this.elements[select] 32 | callback.call(this, element) 33 | return this 34 | } 35 | 36 | if (Array.isArray(select)) { 37 | const args = select.map(elem => this.elements[elem]) 38 | callback.call(this, ...args) 39 | return this 40 | } 41 | 42 | if (Object.keys(this.elements).length === 1) { 43 | select.call(this, this.elements[Object.keys(this.elements)[0]]) 44 | } else { 45 | throw new Error("There are multiple elements select one") 46 | } 47 | return this 48 | }, 49 | use(callback, data) { 50 | callback.call(this, data) 51 | return this 52 | }, 53 | mixin(spec) { 54 | Object.keys(spec).forEach(key => { 55 | this[key] = (...args) => { 56 | spec[key].call(this, ...args) 57 | return this 58 | } 59 | }) 60 | return this 61 | }, 62 | test(callback) { 63 | const param = {...this, ...this.elements} 64 | callback.call(param, param) 65 | return this 66 | }, 67 | renderToString(callback) { 68 | const componentString = ReactDOMServer.renderToStaticMarkup(component) 69 | callback.call(null, componentString) 70 | return this 71 | } 72 | } 73 | 74 | return testComponent.mixin({ 75 | find: Find, 76 | setState: SetState, 77 | simulate: Simulate, 78 | clean: Clean 79 | }) 80 | } 81 | 82 | export default Test 83 | -------------------------------------------------------------------------------- /tests/components/component.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import TinyComponent from './tiny-component' 3 | import OtherComponent from './other-component' 4 | 5 | export default class TestComponent extends Component { 6 | constructor(props, context){ 7 | super(props, context) 8 | this.state = {} 9 | } 10 | 11 | render(){ 12 | return ( 13 |
14 |
{this.state.test}
15 |

found me!

16 | 21 | 26 | 27 | 28 | 29 | 30 |
31 | ) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tests/components/index.js: -------------------------------------------------------------------------------- 1 | export TestComponent from './component' 2 | export TinyComponent from './tiny-component' 3 | -------------------------------------------------------------------------------- /tests/components/other-component.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default React.createClass({ 4 | render: function() { 5 | return 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /tests/components/tiny-component.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class TinyComponent extends Component { 4 | render() { 5 | return
6 | } 7 | } 8 | -------------------------------------------------------------------------------- /tests/element.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { expect } from 'chai' 3 | 4 | import { TestComponent } from './components' 5 | 6 | describe('.element', () => { 7 | 8 | it('should find box', () => { 9 | Test() 10 | .find('.box') 11 | .element(box => { 12 | expect(box.props.children).to.be.equal('found me!') 13 | }) 14 | }) 15 | 16 | it('should find box, not div', () => { 17 | Test() 18 | .find('.box') 19 | .find('div') 20 | .element('.box', box => { 21 | expect(box.props.children).to.be.equal('found me!') 22 | }) 23 | .element('div', div => { 24 | expect(div.length).to.be.equal(2) 25 | }) 26 | }) 27 | 28 | it('should select multiple elements', () => { 29 | Test() 30 | .find('.box') 31 | .find('div') 32 | .element(['.box', 'div'], (box, div) => { 33 | expect(div.length).to.be.equal(2) 34 | expect(box.props.children).to.be.equal('found me!') 35 | }) 36 | }) 37 | }) 38 | -------------------------------------------------------------------------------- /tests/find.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { Find } from '../src/middleware' 3 | import { expect } from 'chai' 4 | 5 | import { TestComponent, TinyComponent } from './components' 6 | import OtherComponent from './components/other-component' 7 | 8 | describe('Find middleware', () => { 9 | it('should find div', () => { 10 | Test() 11 | .find('div') 12 | .test(function() { 13 | expect(this.elements.div[0].props.children).to.be.equal(undefined) 14 | }) 15 | }) 16 | 17 | it('should find p tag with class', () => { 18 | Test() 19 | .use(Find, 'p.box') 20 | .test(function() { 21 | expect(this.elements['p.box'].props.children).to.be.equal('found me!') 22 | }) 23 | 24 | Test() 25 | .use(Find, 'p.box') 26 | .element('p.box',(box) => { 27 | expect(box.innerHTML).to.be.equal('found me!') 28 | }) 29 | 30 | }) 31 | 32 | it('should find p tag with data attribute', () => { 33 | Test() 34 | .use(Find, '[data-p-tag]') 35 | .test(function() { 36 | expect(this.elements['[data-p-tag]'].props.children).to.be.equal('found me!') 37 | }) 38 | 39 | }) 40 | 41 | it('should find an input with a name attribute that equals \'bob\'', ()=>{ 42 | Test() 43 | .find('input[name="bob"]') 44 | .find('input[name]') 45 | .test(function(){ 46 | expect(this.elements['input[name="bob"]'].className).equal('bob') 47 | expect(this.elements['input[name]'].className).equal('notbob') 48 | }) 49 | }) 50 | 51 | it('should find a rendered component', () => { 52 | Test() 53 | .find(TinyComponent) 54 | .test(({tinycomponent}) => { 55 | expect(tinycomponent.props.test).to.be.equal('true') 56 | }) 57 | }) 58 | 59 | it('should find a rendered component created with `createClass`', () => { 60 | Test() 61 | .find(OtherComponent) 62 | .test(function() { 63 | let otherComponent = this.elements['other-component'] 64 | expect(otherComponent.props.test).to.be.equal('true') 65 | }) 66 | }) 67 | }) 68 | -------------------------------------------------------------------------------- /tests/full-dom.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { expect } from 'chai' 3 | 4 | describe('Render into document.body', () => { 5 | 6 | it('should render and clean up component', () => { 7 | Test(
, {fullDOM: true}) 8 | .test(function() { 9 | expect(global.window.document.querySelector('section')) 10 | .to.not.equal(null) 11 | }) 12 | .clean() 13 | 14 | // clean should clean up the document.body 15 | expect(global.window.document.body.innerHTML).to.equal('') 16 | }) 17 | 18 | }) -------------------------------------------------------------------------------- /tests/mixin.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { Find } from '../src/middleware' 3 | import { expect } from 'chai' 4 | 5 | import { TestComponent } from './components' 6 | 7 | describe('Mixin method', () => { 8 | 9 | it('should add Find as method to Test', () => { 10 | Test() 11 | .mixin({ 12 | customFind: Find 13 | }) 14 | .customFind('div') 15 | .element('div', div => { 16 | expect(div.length).to.equal(2) 17 | }) 18 | }) 19 | 20 | }) 21 | -------------------------------------------------------------------------------- /tests/no-dom.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/no-dom' 2 | import { expect } from 'chai' 3 | 4 | import { TestComponent } from './components' 5 | 6 | describe('no dom', () => { 7 | 8 | it('should render the component', () => { 9 | Test(, {shallow: true}) 10 | .test(function() { 11 | expect(this.instance).to.be.ok 12 | }) 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /tests/renderToString.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { expect } from 'chai' 3 | 4 | import { TestComponent } from './components' 5 | 6 | describe('Render To String', () => { 7 | 8 | it('should return the html of the component', () => { 9 | Test() 10 | .renderToString(string => { 11 | expect(string).to.match(/Click Me/) 12 | }) 13 | .test(({instance}) => { 14 | expect(instance).to.be.ok 15 | }) 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /tests/setState.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { expect } from 'chai' 3 | import { SetState, Find } from '../src/middleware' 4 | 5 | import { TestComponent } from './components' 6 | 7 | describe('setState middleware', () => { 8 | 9 | it('should change state', () => { 10 | Test() 11 | .use(SetState, {test: 'test'}) 12 | .use(Find, 'div') 13 | .test(({elements}) => { 14 | expect(elements.div[0].props.children).to.be.equal('test') 15 | }) 16 | .setState({test: 'changed!'}) 17 | .test(function() { 18 | expect(this.instance.state.test).to.be.equal('changed!') 19 | }) 20 | }) 21 | 22 | }) 23 | -------------------------------------------------------------------------------- /tests/shallowRender.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { expect } from 'chai' 3 | 4 | import { TestComponent } from './components' 5 | 6 | describe('Shallow Render', () => { 7 | 8 | it('should render the component', () => { 9 | Test(, {shallow: true}) 10 | .test(function() { 11 | expect(this.instance).to.be.ok 12 | }) 13 | }) 14 | 15 | }) 16 | -------------------------------------------------------------------------------- /tests/simulate.jsx: -------------------------------------------------------------------------------- 1 | import Test from '../src/legit-tests' 2 | import { expect } from 'chai' 3 | import sinon from 'sinon' 4 | 5 | import { TestComponent } from './components' 6 | 7 | describe('simulate middleware', () => { 8 | 9 | it('should click a single element', () => { 10 | let spy = sinon.spy() 11 | 12 | Test() 13 | .find('div') 14 | .simulate({method: 'click', element: 'div'}) 15 | expect(spy.called).to.be.true 16 | 17 | }) 18 | 19 | it('should click the first element in an array', () => { 20 | let spy = sinon.spy() 21 | 22 | Test() 23 | .find('button') 24 | .simulate({method: 'click', element: 'button'}) 25 | 26 | expect(spy.called).to.be.true 27 | 28 | }) 29 | 30 | }) 31 | --------------------------------------------------------------------------------