Merge branch 'master' into feature/store-tests

Author: dphaener

.babelrc

@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}

.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,
@@ -27,7 +32,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,

.gitignore

@@ -1,2 +1,9 @@
 node_modules
 lib
+/legit-tests.js
+/dom.js
+/middleware.js
+/middleware
+/no-dom.js
+/tests.js
+npm-debug.log

README.md

@@ -2,10 +2,6 @@
 
 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.
 
-###0.4.0
-
-In 0.4.0 there is a breaking change where `this.component` is now the component itself and the rendered instance is `this.instance`. This makes much more sense but sadly means tests need to be changed in order to update to the latest version.
-
 ###Install
 
 `npm install legit-tests --save`
@@ -14,6 +10,9 @@ In 0.4.0 there is a breaking change where `this.component` is now the component
 
 ~~~js
 import Test from 'legit-tests'
+//or
+import Test from 'legit-tests/no-dom' //don't include jsdom
+
 import { expect } from 'chai'
 import sinon from 'sinon'
 import TestComponent from './TestComponent'
@@ -51,6 +50,9 @@ You can write middleware to do anything you repeatedly use. You can pass `.use`
 - `helpers` - an array you can add on to with data for the end function
 
 **Example**:
+
+- See `mixin` below, this syntax may soon be deprecated
+
 This is the setState function used above.
 ~~~js
 
@@ -69,12 +71,53 @@ export default function setState(state){
 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:
 
 ~~~js
-.test(({helpers, component}) => { ... })
+.test(({helpers, instance}) => { ... })
 .test(function() {
   //this.instance, this.helpers
 })
 ~~~
 
+##element
+
+Use `.element` if you're just testing an element you found with the `.find` method. The syntax is a little smaller:
+
+~~~js
+Test(<TestComponent/>)
+.find('.box')
+.element(box => {
+  expect(box.props.children).to.be.equal('found me!')
+})
+//or specify the element
+
+.find('.box')
+.find('div')
+.element('box', box => {
+  expect(box.props.children).to.be.equal('found me!')
+})
+
+~~~
+
+##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(<TestComponent />)
+.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.
 
 ##Testing Alt Stores

package.json

@@ -1,12 +1,14 @@
 {
   "name": "legit-tests",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "a chainable testing library for React",
-  "main": "lib/legit-tests.js",
+  "main": "legit-tests.js",
   "scripts": {
-    "compile": "babel src --stage 0 --out-dir lib;",
-    "prepublish": "babel src --stage 0 --out-dir lib;",
-    "test": "mocha --opts ./mocha.opts; eslint ./src/ --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",
@@ -31,6 +33,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",
@@ -39,7 +42,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",

src/dom.js

@@ -8,12 +8,12 @@ function propagateToGlobal (window) {
   }
 }
 
-var jsdom = require('jsdom');
+var jsdom = require('jsdom')
 
-var doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
-var win = doc.defaultView;
+var doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
+var win = doc.defaultView
 
-global.document = doc;
-global.window = win;
+global.document = doc
+global.window = win
 
-propagateToGlobal(win);
+propagateToGlobal(win)

src/legit-tests.js

@@ -1,95 +1,2 @@
-/* globals global */
 import './dom'
-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'
-
-class Test {
-
-  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
-  }
-
-  use(callback, data){
-    callback.call(this, data)
-    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 = 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
-  }
-
-}
-
-export default function TestWrapper(component, config){
-  return new Test(component, config)
-}
+export default from './tests'

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
+  }
 }

src/middleware/simulate.js

@@ -1,11 +1,16 @@
 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
-  );
+  )
 }

src/no-dom.js

@@ -0,0 +1 @@
+export default from './tests'