From 306292f5114e039478add8628618c3f3ba623de0 Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Sat, 26 Sep 2015 12:10:43 +0530 Subject: [PATCH 1/7] Fix npm@3 peer dependency errors --- package.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 23c15fe..3905092 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "compile": "babel src --stage 0 --out-dir .;", "prepublish": "babel src --stage 0 --out-dir .;", - "test": "mocha --opts ./mocha.opts; eslint ./src/ --ext .jsx,.js --global require,exports:true" + "test": "mocha --opts ./mocha.opts; eslint ./src/ ./tests/ --ext .jsx,.js --global require,exports:true" }, "repository": { "type": "git", @@ -30,6 +30,7 @@ "babel-core": "^5.8.25", "babel-eslint": "^4.1.3", "babel-loader": "^5.3.2", + "babel-runtime": "^5.8.25", "chai": "^3.3.0", "eslint": "^1.5.1", "eslint-plugin-react": "^3.4.2", @@ -37,7 +38,8 @@ "mocha": "^2.3.3", "mocha-babel": "^3.0.0", "react-hot-loader": "^1.3.0", - "sinon": "^1.17.0" + "sinon": "^1.17.0", + "webpack": "^1.12.2" }, "dependencies": { "jsdom": "^6.5.1", From 474c1b15f0d7d99398276500cabab39a711a1ea4 Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Sat, 26 Sep 2015 12:16:46 +0530 Subject: [PATCH 2/7] Fix lint failures for test directory --- .eslintrc | 2 +- tests/component.jsx | 40 +++++++++++++++++++++------------------- tests/element.jsx | 2 ++ tests/find.jsx | 2 ++ tests/no-dom.jsx | 2 ++ tests/renderToString.jsx | 2 ++ tests/setState.jsx | 2 ++ tests/shallowRender.jsx | 2 ++ tests/simulate.jsx | 2 ++ tests/tiny-component.jsx | 6 +++--- 10 files changed, 39 insertions(+), 23 deletions(-) diff --git a/.eslintrc b/.eslintrc index fa2e1f3..9c01793 100644 --- a/.eslintrc +++ b/.eslintrc @@ -27,7 +27,7 @@ "react/no-did-update-set-state": 1, "react/no-multi-comp": 1, "react/no-unknown-property": 1, - "react/prop-types": 1, + "react/prop-types": 0, "react/react-in-jsx-scope": 1, "react/self-closing-comp": 1, "react/sort-comp": 1, diff --git a/tests/component.jsx b/tests/component.jsx index ade8f35..6f65695 100644 --- a/tests/component.jsx +++ b/tests/component.jsx @@ -1,27 +1,29 @@ -import React from 'react' +import React, { Component, PropTypes } from 'react' import TinyComponent from './tiny-component'; -export default class TestComponent extends React.Component { - constructor(){ - super() +export default class TestComponent extends Component { + constructor(props, context){ + super(props, context) this.state = {} } render(){ - return -
{this.state.test}
-

found me!

- - - - + return ( + +
{this.state.test}
+

found me!

+ + + + + ) } } diff --git a/tests/element.jsx b/tests/element.jsx index d21d4d1..3139f96 100644 --- a/tests/element.jsx +++ b/tests/element.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/legit-tests' import {Find} from '../src/middleware' import { expect } from 'chai'; diff --git a/tests/find.jsx b/tests/find.jsx index 6fe5095..740bbe4 100644 --- a/tests/find.jsx +++ b/tests/find.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/legit-tests' import {Find} from '../src/middleware' import { expect } from 'chai'; diff --git a/tests/no-dom.jsx b/tests/no-dom.jsx index 05fd551..f8fe20a 100644 --- a/tests/no-dom.jsx +++ b/tests/no-dom.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/no-dom' import {Find} from '../src/middleware' import { expect } from 'chai'; diff --git a/tests/renderToString.jsx b/tests/renderToString.jsx index ecf0b3a..ea8ac03 100644 --- a/tests/renderToString.jsx +++ b/tests/renderToString.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/legit-tests' import {Find} from '../src/middleware' import { expect } from 'chai'; diff --git a/tests/setState.jsx b/tests/setState.jsx index 7e4538d..ddb72dc 100644 --- a/tests/setState.jsx +++ b/tests/setState.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/legit-tests' import { expect } from 'chai'; import TestComponent from './component' diff --git a/tests/shallowRender.jsx b/tests/shallowRender.jsx index 07cbfca..3398578 100644 --- a/tests/shallowRender.jsx +++ b/tests/shallowRender.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/legit-tests' import {Find} from '../src/middleware' import { expect } from 'chai'; diff --git a/tests/simulate.jsx b/tests/simulate.jsx index 9f69c79..21b4a79 100644 --- a/tests/simulate.jsx +++ b/tests/simulate.jsx @@ -1,3 +1,5 @@ +/* globals React */ + import Test from '../src/legit-tests' import {Find, Simulate} from '../src/middleware' import { expect } from 'chai'; diff --git a/tests/tiny-component.jsx b/tests/tiny-component.jsx index ab7895e..e31ad78 100644 --- a/tests/tiny-component.jsx +++ b/tests/tiny-component.jsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React, { Component } from 'react'; -export default class TinyComponent extends React.Component { +export default class TinyComponent extends Component { render() { - return
+ return
} } From 4c48f7c753493a702d36070cb4ccb757758ddc33 Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Sun, 27 Sep 2015 07:05:38 +0530 Subject: [PATCH 3/7] Implemented mixin for Test - Refactored Test Class into function - Removed React from being a global variable --- .gitignore | 13 ++-- src/legit-tests.js | 4 +- src/no-dom.js | 4 +- src/tests.js | 142 ++++++++++++++++++--------------------- tests/element.jsx | 2 +- tests/find.jsx | 2 +- tests/no-dom.jsx | 4 +- tests/renderToString.jsx | 2 +- tests/setState.jsx | 2 +- tests/shallowRender.jsx | 2 +- tests/simulate.jsx | 2 +- 11 files changed, 83 insertions(+), 96 deletions(-) diff --git a/.gitignore b/.gitignore index 4c48861..807816e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,8 @@ node_modules -legit-tests.js -dom.js -middleware.js -middleware -no-dom.js -tests.js +lib +/legit-tests.js +/dom.js +/middleware.js +/middleware +/no-dom.js +/tests.js diff --git a/src/legit-tests.js b/src/legit-tests.js index 8c6dac3..5bbd715 100644 --- a/src/legit-tests.js +++ b/src/legit-tests.js @@ -2,6 +2,4 @@ import './dom' import Test from './tests' -export default function TestWrapper(component, config){ - return new Test(component, config) -} +export default Test diff --git a/src/no-dom.js b/src/no-dom.js index 646b307..344186a 100644 --- a/src/no-dom.js +++ b/src/no-dom.js @@ -1,5 +1,3 @@ import Test from './tests' -export default function TestWrapper(component, config){ - return new Test(component, config) -} +export default Test diff --git a/src/tests.js b/src/tests.js index c22701e..2a8b37f 100644 --- a/src/tests.js +++ b/src/tests.js @@ -1,89 +1,79 @@ -import React from 'react/addons'; +import React from 'react/addons' let { TestUtils } = React.addons -global.React = React //expose React to tests so they can use jsx syntax when passing in components to the class require('react/lib/ExecutionEnvironment').canUseDOM = true -import {Find, SetState, Simulate} from './middleware' +import { Find, SetState, Simulate } from './middleware' -export default class Test { +function Test(component, config) { - constructor(component, config){ - this.component = component - - if(config && config.shallow === true){ - let shallowRenderer = TestUtils.createRenderer(); - shallowRenderer.render(component); - this.instance = shallowRenderer.getRenderOutput(); - } - else{ - this.instance = TestUtils.renderIntoDocument(component) - } - - this.helpers = {} - return this + let instance + if (config && config.shallow === true) { + const shallowRenderer = TestUtils.createRenderer() + shallowRenderer.render(component) + instance = shallowRenderer.getRenderOutput() + } else { + instance = TestUtils.renderIntoDocument(component) } - use(callback, data){ - callback.call(this, data) - return this + function getFirst(object) { + for (let element in object) + return object[element] } - element(select, callback) { - if(!this.helpers) return - - let element - if(typeof select === 'string') { - element = this.helpers.elements[select] - callback.call(this, element) + const testComponent = { + instance, + helpers: {}, + params() { + const length = Object.keys(this.helpers).length + if(this.helpers.elements && length === 1) { + return Object.assign({}, this, this.helpers.elements) + } + return this + }, + element(select, callback) { + if(!this.helpers) return + + let element + if(typeof select === 'string') { + element = this.helpers.elements[select] + callback.call(this, element) + return this + } + + element = getFirst(this.helpers.elements) + select.call(this, element) + return this + }, + use(callback, data) { + callback.call(this, data) + return this + }, + mixin(spec) { + Object.keys(spec).forEach(key => { + this[key] = (...args) => { + spec[key].call(this, ...args) + return this + } + }) + return this; + }, + test(callback) { + const param = this.params() + callback.call(param, param) + return this + }, + renderToString(callback) { + const componentString = React.renderToStaticMarkup(component) + callback.call(null, componentString) return this } + }; - element = this.getFirst(this.helpers.elements) - select.call(this, element) - return this - } - - test(callback) { - var params = this.params() - callback.call(params, params) - return this - } - - params(){ - var length = Object.keys(this.helpers).length - if(this.helpers.elements && length === 1) { - return Object.assign({}, this, this.helpers.elements) - } - return this - } - - //private - - getFirst(object){ - for (let element in object) return object[element] - } - - //Built in middleware - - find(data){ - Find.call(this, data) - return this - } - - setState(data){ - SetState.call(this, data) - return this - } - - simulate(data){ - Simulate.call(this, data) - return this - } - - renderToString(callback){ - var component = React.renderToStaticMarkup(this.component) - callback.call(null, component) - return this - } - + return testComponent.mixin({ + find: Find, + setState: SetState, + simulate: Simulate + }) } + +export default Test diff --git a/tests/element.jsx b/tests/element.jsx index 3139f96..505dab5 100644 --- a/tests/element.jsx +++ b/tests/element.jsx @@ -1,4 +1,4 @@ -/* globals React */ +import React from 'react' import Test from '../src/legit-tests' import {Find} from '../src/middleware' diff --git a/tests/find.jsx b/tests/find.jsx index 740bbe4..0e37b22 100644 --- a/tests/find.jsx +++ b/tests/find.jsx @@ -1,4 +1,4 @@ -/* globals React */ +import React from 'react' import Test from '../src/legit-tests' import {Find} from '../src/middleware' diff --git a/tests/no-dom.jsx b/tests/no-dom.jsx index f8fe20a..803dc94 100644 --- a/tests/no-dom.jsx +++ b/tests/no-dom.jsx @@ -1,7 +1,7 @@ -/* globals React */ +import React from 'react' import Test from '../src/no-dom' -import {Find} from '../src/middleware' +import { Find } from '../src/middleware' import { expect } from 'chai'; import TestComponent from './component' diff --git a/tests/renderToString.jsx b/tests/renderToString.jsx index ea8ac03..2aef14a 100644 --- a/tests/renderToString.jsx +++ b/tests/renderToString.jsx @@ -1,4 +1,4 @@ -/* globals React */ +import React from 'react' import Test from '../src/legit-tests' import {Find} from '../src/middleware' diff --git a/tests/setState.jsx b/tests/setState.jsx index ddb72dc..02ef9ea 100644 --- a/tests/setState.jsx +++ b/tests/setState.jsx @@ -1,4 +1,4 @@ -/* globals React */ +import React from 'react' import Test from '../src/legit-tests' import { expect } from 'chai'; diff --git a/tests/shallowRender.jsx b/tests/shallowRender.jsx index 3398578..6d5bcf2 100644 --- a/tests/shallowRender.jsx +++ b/tests/shallowRender.jsx @@ -1,4 +1,4 @@ -/* globals React */ +import React from 'react' import Test from '../src/legit-tests' import {Find} from '../src/middleware' diff --git a/tests/simulate.jsx b/tests/simulate.jsx index 21b4a79..db7ee69 100644 --- a/tests/simulate.jsx +++ b/tests/simulate.jsx @@ -1,4 +1,4 @@ -/* globals React */ +import React from 'react' import Test from '../src/legit-tests' import {Find, Simulate} from '../src/middleware' From 8f1aff8bf08f2bea82a4e2a775c477f8fd837a90 Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Sun, 27 Sep 2015 07:23:08 +0530 Subject: [PATCH 4/7] Reorganize components --- tests/{ => components}/component.jsx | 0 tests/components/index.js | 2 ++ tests/{ => components}/tiny-component.jsx | 0 tests/element.jsx | 5 ++--- tests/find.jsx | 5 ++--- tests/no-dom.jsx | 2 +- tests/renderToString.jsx | 4 ++-- tests/setState.jsx | 4 ++-- tests/shallowRender.jsx | 4 ++-- tests/simulate.jsx | 4 ++-- 10 files changed, 15 insertions(+), 15 deletions(-) rename tests/{ => components}/component.jsx (100%) create mode 100644 tests/components/index.js rename tests/{ => components}/tiny-component.jsx (100%) diff --git a/tests/component.jsx b/tests/components/component.jsx similarity index 100% rename from tests/component.jsx rename to tests/components/component.jsx diff --git a/tests/components/index.js b/tests/components/index.js new file mode 100644 index 0000000..39cd25d --- /dev/null +++ b/tests/components/index.js @@ -0,0 +1,2 @@ +export TestComponent from './component' +export TinyComponent from './tiny-component' diff --git a/tests/tiny-component.jsx b/tests/components/tiny-component.jsx similarity index 100% rename from tests/tiny-component.jsx rename to tests/components/tiny-component.jsx diff --git a/tests/element.jsx b/tests/element.jsx index 505dab5..6df2e16 100644 --- a/tests/element.jsx +++ b/tests/element.jsx @@ -1,11 +1,10 @@ import React from 'react' import Test from '../src/legit-tests' -import {Find} from '../src/middleware' +import { Find } from '../src/middleware' import { expect } from 'chai'; -import TestComponent from './component' -import TinyComponent from './tiny-component' +import { TestComponent, TinyComponent } from './components' describe('.element', () => { diff --git a/tests/find.jsx b/tests/find.jsx index 0e37b22..5b57af0 100644 --- a/tests/find.jsx +++ b/tests/find.jsx @@ -1,11 +1,10 @@ import React from 'react' import Test from '../src/legit-tests' -import {Find} from '../src/middleware' +import { Find } from '../src/middleware' import { expect } from 'chai'; -import TestComponent from './component' -import TinyComponent from './tiny-component' +import { TestComponent, TinyComponent } from './components' describe('Find middleware', () => { diff --git a/tests/no-dom.jsx b/tests/no-dom.jsx index 803dc94..8d750a1 100644 --- a/tests/no-dom.jsx +++ b/tests/no-dom.jsx @@ -4,7 +4,7 @@ import Test from '../src/no-dom' import { Find } from '../src/middleware' import { expect } from 'chai'; -import TestComponent from './component' +import { TestComponent } from './components' describe('no dom', () => { diff --git a/tests/renderToString.jsx b/tests/renderToString.jsx index 2aef14a..e53cef7 100644 --- a/tests/renderToString.jsx +++ b/tests/renderToString.jsx @@ -1,10 +1,10 @@ import React from 'react' import Test from '../src/legit-tests' -import {Find} from '../src/middleware' +import { Find } from '../src/middleware' import { expect } from 'chai'; -import TestComponent from './component' +import { TestComponent } from './components' describe('Render To String', () => { diff --git a/tests/setState.jsx b/tests/setState.jsx index 02ef9ea..fcf208b 100644 --- a/tests/setState.jsx +++ b/tests/setState.jsx @@ -2,9 +2,9 @@ import React from 'react' import Test from '../src/legit-tests' import { expect } from 'chai'; -import TestComponent from './component' -import {SetState, Find} from '../src/middleware' +import { SetState, Find } from '../src/middleware' +import { TestComponent } from './components' describe('setState middleware', () => { diff --git a/tests/shallowRender.jsx b/tests/shallowRender.jsx index 6d5bcf2..7a6c5bf 100644 --- a/tests/shallowRender.jsx +++ b/tests/shallowRender.jsx @@ -1,10 +1,10 @@ import React from 'react' import Test from '../src/legit-tests' -import {Find} from '../src/middleware' +import { Find } from '../src/middleware' import { expect } from 'chai'; -import TestComponent from './component' +import { TestComponent } from './components' describe('Shallow Render', () => { diff --git a/tests/simulate.jsx b/tests/simulate.jsx index db7ee69..8fad1d8 100644 --- a/tests/simulate.jsx +++ b/tests/simulate.jsx @@ -1,11 +1,11 @@ import React from 'react' import Test from '../src/legit-tests' -import {Find, Simulate} from '../src/middleware' +import { Find, Simulate } from '../src/middleware' import { expect } from 'chai'; import sinon from 'sinon'; -import TestComponent from './component' +import { TestComponent } from './components' describe('simulate middleware', () => { From cd1f1e30aed107707b7aa4e13e1f68d220532ea6 Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Sun, 27 Sep 2015 08:19:50 +0530 Subject: [PATCH 5/7] Enforce no semicolon and fix lint errors - Added babelrc - Split npm test into npm run mocha and npm run lint --- .babelrc | 3 +++ .eslintrc | 7 ++++++- .gitignore | 1 + package.json | 8 +++++--- src/dom.js | 12 ++++++------ src/legit-tests.js | 5 +---- src/middleware/simulate.js | 6 +++--- src/no-dom.js | 4 +--- src/tests.js | 10 +++++----- tests/components/component.jsx | 4 ++-- tests/components/tiny-component.jsx | 2 +- tests/element.jsx | 14 ++++++++------ tests/find.jsx | 14 +++++++------- tests/no-dom.jsx | 7 +++---- tests/renderToString.jsx | 7 +++---- tests/setState.jsx | 6 +++--- tests/shallowRender.jsx | 7 +++---- tests/simulate.jsx | 18 +++++++++--------- 18 files changed, 70 insertions(+), 65 deletions(-) create mode 100644 .babelrc diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..b0b9a96 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "stage": 0 +} diff --git a/.eslintrc b/.eslintrc index 9c01793..450346f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,7 +1,9 @@ { "parser": "babel-eslint", "env": { - "es6": true + "es6": true, + "mocha": true, + "node": true }, "ecmaFeatures": { "blockBindings": true, @@ -14,6 +16,9 @@ "max-len": 0, "semi": 0, "quotes": 0, + "semi": [2, "never"], + "no-unused-vars": 2, + "no-undef": 2, "no-console": 0, "no-trailing-spaces": 0, "curly": 0, diff --git a/.gitignore b/.gitignore index 807816e..6f738ad 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ lib /middleware /no-dom.js /tests.js +npm-debug.log diff --git a/package.json b/package.json index 3905092..35d1784 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,11 @@ "description": "a chainable testing library for React", "main": "legit-tests.js", "scripts": { - "compile": "babel src --stage 0 --out-dir .;", - "prepublish": "babel src --stage 0 --out-dir .;", - "test": "mocha --opts ./mocha.opts; eslint ./src/ ./tests/ --ext .jsx,.js --global require,exports:true" + "compile": "babel src --out-dir .", + "prepublish": "babel src --out-dir .", + "lint": "eslint ./src/ ./tests/ --ext .jsx,.js --global require,exports:true", + "mocha": "mocha --opts ./mocha.opts", + "test": "npm run mocha; npm run lint" }, "repository": { "type": "git", diff --git a/src/dom.js b/src/dom.js index 6d6cfd5..7cc1030 100644 --- a/src/dom.js +++ b/src/dom.js @@ -8,12 +8,12 @@ function propagateToGlobal (window) { } } -var jsdom = require('jsdom'); +var jsdom = require('jsdom') -var doc = jsdom.jsdom(''); -var win = doc.defaultView; +var doc = jsdom.jsdom('') +var win = doc.defaultView -global.document = doc; -global.window = win; +global.document = doc +global.window = win -propagateToGlobal(win); +propagateToGlobal(win) diff --git a/src/legit-tests.js b/src/legit-tests.js index 5bbd715..3da155e 100644 --- a/src/legit-tests.js +++ b/src/legit-tests.js @@ -1,5 +1,2 @@ -/* globals global */ import './dom' -import Test from './tests' - -export default Test +export default from './tests' diff --git a/src/middleware/simulate.js b/src/middleware/simulate.js index a1da20c..9f9e4ff 100644 --- a/src/middleware/simulate.js +++ b/src/middleware/simulate.js @@ -2,10 +2,10 @@ import React from 'react' let { TestUtils } = React.addons export default function simulate(data){ - let element = data.element ? this.helpers.elements[data.element] : this; - element = Array.isArray(element) ? element[0] : element; + let element = data.element ? this.helpers.elements[data.element] : this + element = Array.isArray(element) ? element[0] : element TestUtils.Simulate[data.method].call(this, element, data.options || null - ); + ) } diff --git a/src/no-dom.js b/src/no-dom.js index 344186a..bf18cdb 100644 --- a/src/no-dom.js +++ b/src/no-dom.js @@ -1,3 +1 @@ -import Test from './tests' - -export default Test +export default from './tests' diff --git a/src/tests.js b/src/tests.js index 2a8b37f..261a813 100644 --- a/src/tests.js +++ b/src/tests.js @@ -25,16 +25,16 @@ function Test(component, config) { helpers: {}, params() { const length = Object.keys(this.helpers).length - if(this.helpers.elements && length === 1) { + if (this.helpers.elements && length === 1) { return Object.assign({}, this, this.helpers.elements) } return this }, element(select, callback) { - if(!this.helpers) return + if (!this.helpers) return let element - if(typeof select === 'string') { + if (typeof select === 'string') { element = this.helpers.elements[select] callback.call(this, element) return this @@ -55,7 +55,7 @@ function Test(component, config) { return this } }) - return this; + return this }, test(callback) { const param = this.params() @@ -67,7 +67,7 @@ function Test(component, config) { callback.call(null, componentString) return this } - }; + } return testComponent.mixin({ find: Find, diff --git a/tests/components/component.jsx b/tests/components/component.jsx index 6f65695..c83185d 100644 --- a/tests/components/component.jsx +++ b/tests/components/component.jsx @@ -1,5 +1,5 @@ -import React, { Component, PropTypes } from 'react' -import TinyComponent from './tiny-component'; +import React, { Component } from 'react' +import TinyComponent from './tiny-component' export default class TestComponent extends Component { constructor(props, context){ diff --git a/tests/components/tiny-component.jsx b/tests/components/tiny-component.jsx index e31ad78..fce3c7c 100644 --- a/tests/components/tiny-component.jsx +++ b/tests/components/tiny-component.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component } from 'react' export default class TinyComponent extends Component { render() { diff --git a/tests/element.jsx b/tests/element.jsx index 6df2e16..f790bf6 100644 --- a/tests/element.jsx +++ b/tests/element.jsx @@ -1,10 +1,9 @@ import React from 'react' import Test from '../src/legit-tests' -import { Find } from '../src/middleware' -import { expect } from 'chai'; +import { expect } from 'chai' -import { TestComponent, TinyComponent } from './components' +import { TestComponent } from './components' describe('.element', () => { @@ -14,7 +13,7 @@ describe('.element', () => { .element(box => { expect(box.props.children).to.be.equal('found me!') }) - }); + }) it('should find box, not div', () => { Test() @@ -23,5 +22,8 @@ describe('.element', () => { .element('box', box => { expect(box.props.children).to.be.equal('found me!') }) - }); -}); + .element('div', div => { + expect(div.length).to.be.equal(2) + }) + }) +}) diff --git a/tests/find.jsx b/tests/find.jsx index 5b57af0..9073532 100644 --- a/tests/find.jsx +++ b/tests/find.jsx @@ -2,7 +2,7 @@ import React from 'react' import Test from '../src/legit-tests' import { Find } from '../src/middleware' -import { expect } from 'chai'; +import { expect } from 'chai' import { TestComponent, TinyComponent } from './components' @@ -14,7 +14,7 @@ describe('Find middleware', () => { .test(function() { expect(this.helpers.elements.div[0].props.children).to.be.equal(undefined) }) - }); + }) it('should find p tag with class', () => { Test() @@ -29,13 +29,13 @@ describe('Find middleware', () => { expect(box.props.children).to.be.equal('found me!') }) - }); + }) it('should find a rendered component', () => { Test() .find(TinyComponent) .test(({tinycomponent}) => { - expect(tinycomponent.props.test).to.be.equal('true'); - }); - }); -}); + expect(tinycomponent.props.test).to.be.equal('true') + }) + }) +}) diff --git a/tests/no-dom.jsx b/tests/no-dom.jsx index 8d750a1..0fec907 100644 --- a/tests/no-dom.jsx +++ b/tests/no-dom.jsx @@ -1,8 +1,7 @@ import React from 'react' import Test from '../src/no-dom' -import { Find } from '../src/middleware' -import { expect } from 'chai'; +import { expect } from 'chai' import { TestComponent } from './components' @@ -13,5 +12,5 @@ describe('no dom', () => { .test(function() { expect(this.instance).to.be.ok }) - }); -}); + }) +}) diff --git a/tests/renderToString.jsx b/tests/renderToString.jsx index e53cef7..fa1ffcd 100644 --- a/tests/renderToString.jsx +++ b/tests/renderToString.jsx @@ -1,8 +1,7 @@ import React from 'react' import Test from '../src/legit-tests' -import { Find } from '../src/middleware' -import { expect } from 'chai'; +import { expect } from 'chai' import { TestComponent } from './components' @@ -16,5 +15,5 @@ describe('Render To String', () => { .test(({instance}) => { expect(instance).to.be.ok }) - }); -}); + }) +}) diff --git a/tests/setState.jsx b/tests/setState.jsx index fcf208b..5811350 100644 --- a/tests/setState.jsx +++ b/tests/setState.jsx @@ -1,7 +1,7 @@ import React from 'react' import Test from '../src/legit-tests' -import { expect } from 'chai'; +import { expect } from 'chai' import { SetState, Find } from '../src/middleware' import { TestComponent } from './components' @@ -19,6 +19,6 @@ describe('setState middleware', () => { .test(function() { expect(this.instance.state.test).to.be.equal('changed!') }) - }); + }) -}); +}) diff --git a/tests/shallowRender.jsx b/tests/shallowRender.jsx index 7a6c5bf..d46b6b4 100644 --- a/tests/shallowRender.jsx +++ b/tests/shallowRender.jsx @@ -1,8 +1,7 @@ import React from 'react' import Test from '../src/legit-tests' -import { Find } from '../src/middleware' -import { expect } from 'chai'; +import { expect } from 'chai' import { TestComponent } from './components' @@ -13,6 +12,6 @@ describe('Shallow Render', () => { .test(function() { expect(this.instance).to.be.ok }) - }); + }) -}); +}) diff --git a/tests/simulate.jsx b/tests/simulate.jsx index 8fad1d8..cfd6c93 100644 --- a/tests/simulate.jsx +++ b/tests/simulate.jsx @@ -2,35 +2,35 @@ import React from 'react' import Test from '../src/legit-tests' import { Find, Simulate } from '../src/middleware' -import { expect } from 'chai'; -import sinon from 'sinon'; +import { expect } from 'chai' +import sinon from 'sinon' import { TestComponent } from './components' describe('simulate middleware', () => { it('should click a single element', () => { - let spy = sinon.spy(); + let spy = sinon.spy() Test() .use(Find, 'div') .use(Simulate, {method: 'click', element: 'div'}) .test(() => { - expect(spy.called).to.be.true; + expect(spy.called).to.be.true }) - }); + }) it('should click the first element in an array', () => { - let spy = sinon.spy(); + let spy = sinon.spy() Test() .find('button') .simulate({method: 'click', element: 'button'}) .test(function() { - expect(spy.called).to.be.true; + expect(spy.called).to.be.true }) - }); + }) -}); +}) From 97abec6224494a91d6cc27e5b14f7fae4845acd4 Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Sun, 27 Sep 2015 14:26:51 +0530 Subject: [PATCH 6/7] Removed params, helpers and getFirst elements can be accesed by this.elements --- src/middleware/find.js | 8 +++++--- src/middleware/simulate.js | 11 ++++++++--- src/tests.js | 33 ++++++++++++++------------------- tests/element.jsx | 10 ++++++++++ tests/find.jsx | 4 ++-- tests/setState.jsx | 4 ++-- tests/simulate.jsx | 10 ++++------ 7 files changed, 45 insertions(+), 35 deletions(-) diff --git a/src/middleware/find.js b/src/middleware/find.js index 199c1ab..a50c9b5 100644 --- a/src/middleware/find.js +++ b/src/middleware/find.js @@ -12,7 +12,9 @@ export default function find(selector){ } else elements = TestUtils.scryRenderedDOMComponentsWithTag(this.instance, selector) - if(elements.length === 1) elements = elements[0] - if(!this.helpers.elements) this.helpers.elements = [] - this.helpers.elements[name || selector] = elements + if (Array.isArray(elements) && elements.length === 1) { + this.elements[name || selector] = elements[0] + } else { + this.elements[name || selector] = elements + } } diff --git a/src/middleware/simulate.js b/src/middleware/simulate.js index 9f9e4ff..c6eacb6 100644 --- a/src/middleware/simulate.js +++ b/src/middleware/simulate.js @@ -1,9 +1,14 @@ import React from 'react' let { TestUtils } = React.addons -export default function simulate(data){ - let element = data.element ? this.helpers.elements[data.element] : this - element = Array.isArray(element) ? element[0] : element +export default function simulate(data) { + let element + if (data.element !== undefined ) { + element = Array.isArray(this.elements[data.element]) ? + this.elements[data.element][0] : this.elements[data.element] + } else { + throw new Error(`No element "${data.element}" is in elements`) + } TestUtils.Simulate[data.method].call(this, element, data.options || null diff --git a/src/tests.js b/src/tests.js index 261a813..994800c 100644 --- a/src/tests.js +++ b/src/tests.js @@ -15,33 +15,28 @@ function Test(component, config) { instance = TestUtils.renderIntoDocument(component) } - function getFirst(object) { - for (let element in object) - return object[element] - } - const testComponent = { instance, - helpers: {}, - params() { - const length = Object.keys(this.helpers).length - if (this.helpers.elements && length === 1) { - return Object.assign({}, this, this.helpers.elements) - } - return this - }, + elements: {}, element(select, callback) { - if (!this.helpers) return - let element if (typeof select === 'string') { - element = this.helpers.elements[select] + element = this.elements[select] callback.call(this, element) return this } - element = getFirst(this.helpers.elements) - select.call(this, element) + if (Array.isArray(select)) { + const args = select.map(elem => this.elements[elem]) + callback.call(this, ...args) + return this + } + + if (Object.keys(this.elements).length === 1) { + select.call(this, this.elements[Object.keys(this.elements)[0]]) + } else { + throw new Error("There are multiple elements select one") + } return this }, use(callback, data) { @@ -58,7 +53,7 @@ function Test(component, config) { return this }, test(callback) { - const param = this.params() + const param = {...this, ...this.elements} callback.call(param, param) return this }, diff --git a/tests/element.jsx b/tests/element.jsx index f790bf6..c037704 100644 --- a/tests/element.jsx +++ b/tests/element.jsx @@ -26,4 +26,14 @@ describe('.element', () => { expect(div.length).to.be.equal(2) }) }) + + it('should select multiple elements', () => { + Test() + .find('.box') + .find('div') + .element(['box', 'div'], (box, div) => { + expect(div.length).to.be.equal(2) + expect(box.props.children).to.be.equal('found me!') + }) + }) }) diff --git a/tests/find.jsx b/tests/find.jsx index 9073532..2cd2d66 100644 --- a/tests/find.jsx +++ b/tests/find.jsx @@ -12,7 +12,7 @@ describe('Find middleware', () => { Test() .find('div') .test(function() { - expect(this.helpers.elements.div[0].props.children).to.be.equal(undefined) + expect(this.elements.div[0].props.children).to.be.equal(undefined) }) }) @@ -20,7 +20,7 @@ describe('Find middleware', () => { Test() .use(Find, '.box') .test(function() { - expect(this.helpers.elements.box.props.children).to.be.equal('found me!') + expect(this.elements.box.props.children).to.be.equal('found me!') }) Test() diff --git a/tests/setState.jsx b/tests/setState.jsx index 5811350..5d2a234 100644 --- a/tests/setState.jsx +++ b/tests/setState.jsx @@ -12,8 +12,8 @@ describe('setState middleware', () => { Test() .use(SetState, {test: 'test'}) .use(Find, 'div') - .test(({helpers}) => { - expect(helpers.elements.div[0].props.children).to.be.equal('test') + .test(({elements}) => { + expect(elements.div[0].props.children).to.be.equal('test') }) .setState({test: 'changed!'}) .test(function() { diff --git a/tests/simulate.jsx b/tests/simulate.jsx index cfd6c93..113b9b5 100644 --- a/tests/simulate.jsx +++ b/tests/simulate.jsx @@ -15,9 +15,8 @@ describe('simulate middleware', () => { Test() .use(Find, 'div') .use(Simulate, {method: 'click', element: 'div'}) - .test(() => { - expect(spy.called).to.be.true - }) + + expect(spy.called).to.be.true }) @@ -27,9 +26,8 @@ describe('simulate middleware', () => { Test() .find('button') .simulate({method: 'click', element: 'button'}) - .test(function() { - expect(spy.called).to.be.true - }) + + expect(spy.called).to.be.true }) From 288413b345ccfdd51ad2d4212fa87b0d7e71b1fb Mon Sep 17 00:00:00 2001 From: Ramana Venkata Date: Wed, 30 Sep 2015 13:24:51 +0530 Subject: [PATCH 7/7] Added test for mixin method & Updated README.md --- README.md | 21 +++++++++++++++++++++ tests/mixin.jsx | 22 ++++++++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 tests/mixin.jsx diff --git a/README.md b/README.md index 832fa76..e2e4817 100644 --- a/README.md +++ b/README.md @@ -94,4 +94,25 @@ Test() ~~~ +##mixin + +Use `.mixin` if you want to add new middleware as methods to `Test`. This gives a more natural way of using middleware: + +~~~js +// In this example, CustomFind middleware was added to Test by mixin +// and used if as it was a method on Test itself. + +Test() +.mixin({ + customFind: CustomFind +}) +.customFind('cells', 'table td') +.element('cells', cells => { + expect(cells.length).to.be.equal(10) +}) + +~~~ + + + You can see more examples in the tests directory. diff --git a/tests/mixin.jsx b/tests/mixin.jsx new file mode 100644 index 0000000..bb3cc3b --- /dev/null +++ b/tests/mixin.jsx @@ -0,0 +1,22 @@ +import React from 'react' + +import Test from '../src/legit-tests' +import { Find } from '../src/middleware' +import { expect } from 'chai' + +import { TestComponent } from './components' + +describe('Mixin method', () => { + + it('should add Find as method to Test', () => { + Test() + .mixin({ + customFind: Find + }) + .customFind('div') + .element('div', div => { + expect(div.length).to.equal(2) + }) + }) + +})