add a test, remove proptypes from prod

Author: ryanflorence

karma.conf.js

@@ -0,0 +1,123 @@
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = (config) => {
+  const customLaunchers = {
+    BS_Chrome: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'chrome',
+      browser_version: '47.0'
+    },
+    BS_Firefox: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'firefox',
+      browser_version: '43.0'
+    },
+    BS_Safari: {
+      base: 'BrowserStack',
+      os: 'OS X',
+      os_version: 'El Capitan',
+      browser: 'safari',
+      browser_version: '9.0'
+    },
+    BS_MobileSafari8: {
+      base: 'BrowserStack',
+      os: 'ios',
+      os_version: '8.3',
+      browser: 'iphone',
+      real_mobile: false
+    },
+    BS_MobileSafari9: {
+      base: 'BrowserStack',
+      os: 'ios',
+      os_version: '9.1',
+      browser: 'iphone',
+      real_mobile: false
+    },
+    BS_InternetExplorer10: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '8',
+      browser: 'ie',
+      browser_version: '10.0'
+    },
+    BS_InternetExplorer11: {
+      base: 'BrowserStack',
+      os: 'Windows',
+      os_version: '10',
+      browser: 'ie',
+      browser_version: '11.0'
+    }
+  }
+
+  config.set({
+    customLaunchers: customLaunchers,
+
+    browsers: [ 'Chrome' ],
+    frameworks: [ 'mocha' ],
+    reporters: [ 'mocha' ],
+
+    files: [
+      'tests.webpack.js'
+    ],
+
+    preprocessors: {
+      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
+    },
+
+    webpack: {
+      devtool: 'inline-source-map',
+      module: {
+        loaders: [
+          { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
+        ]
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': JSON.stringify('test')
+        })
+      ]
+    },
+
+    webpackServer: {
+      noInfo: true
+    }
+  })
+
+  if (process.env.USE_CLOUD) {
+    config.browsers = Object.keys(customLaunchers)
+    config.reporters = [ 'dots' ]
+    config.browserDisconnectTimeout = 10000
+    config.browserDisconnectTolerance = 3
+    config.browserNoActivityTimeout = 30000
+    config.captureTimeout = 120000
+
+    if (process.env.TRAVIS) {
+      const buildLabel = 'TRAVIS #' + process.env.TRAVIS_BUILD_NUMBER + ' (' + process.env.TRAVIS_BUILD_ID + ')'
+
+      config.browserStack = {
+        username: process.env.BROWSER_STACK_USERNAME,
+        accessKey: process.env.BROWSER_STACK_ACCESS_KEY,
+        pollingTimeout: 10000,
+        startTunnel: true,
+        project: 'react-router',
+        build: buildLabel,
+        name: process.env.TRAVIS_JOB_NUMBER
+      }
+
+      config.singleRun = true
+    } else {
+      config.browserStack = {
+        username: process.env.BROWSER_STACK_USERNAME,
+        accessKey: process.env.BROWSER_STACK_ACCESS_KEY,
+        pollingTimeout: 10000,
+        startTunnel: true
+      }
+    }
+  }
+}
+

modules/Broadcast.js

@@ -1,8 +1,5 @@
 import invariant from 'invariant'
 import React, { PropTypes } from 'react'
-import {
-  broadcasts as broadcastsType
-} from './PropTypes'
 
 const createBroadcast = (initialValue) => {
   let listeners = []
@@ -36,19 +33,15 @@ const createBroadcast = (initialValue) => {
  */
 class Broadcast extends React.Component {
   static contextTypes = {
-    broadcasts: broadcastsType
-  }
-
-  static propTypes = {
-    channel: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-    value: PropTypes.any
+    broadcasts: PropTypes.object
   }
 
   static childContextTypes = {
-    broadcasts: broadcastsType.isRequired
+    broadcasts: PropTypes.object.isRequired
   }
 
+  broadcast = createBroadcast(this.props.value)
+
   getBroadcastsContext() {
     const { channel } = this.props
     const { broadcasts } = this.context
@@ -65,10 +58,6 @@ class Broadcast extends React.Component {
     }
   }
 
-  componentWillMount() {
-    this.broadcast = createBroadcast(this.props.value)
-  }
-
   componentWillReceiveProps(nextProps) {
     invariant(
       this.props.channel === nextProps.channel,
@@ -84,4 +73,12 @@ class Broadcast extends React.Component {
   }
 }
 
+if (__DEV__) {
+  Broadcast.propTypes = {
+    channel: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+    value: PropTypes.any
+  }
+}
+
 export default Broadcast

modules/PropTypes.js

@@ -1,21 +1,13 @@
 import invariant from 'invariant'
 import React, { PropTypes } from 'react'
-import {
-  broadcasts as broadcastsType
-} from './PropTypes'
 
 /**
  * A <Subscriber> pulls the value for a channel off of context.broadcasts
  * and passes it to its children function.
  */
 class Subscriber extends React.Component {
   static contextTypes = {
-    broadcasts: broadcastsType.isRequired
-  }
-
-  static propTypes = {
-    channel: PropTypes.string.isRequired,
-    children: PropTypes.func.isRequired
+    broadcasts: React.PropTypes.object
   }
 
   state = {
@@ -48,4 +40,11 @@ class Subscriber extends React.Component {
   }
 }
 
+if (__DEV__) {
+  Subscriber.propTypes = {
+    channel: PropTypes.string.isRequired,
+    children: PropTypes.func.isRequired
+  }
+}
+
 export default Subscriber

modules/Subscriber.js

@@ -0,0 +1,76 @@
+/*eslint-env mocha*/
+/*eslint react/prop-types: 0*/
+import React from 'react'
+import { render } from 'react-dom'
+import expect from 'expect'
+import { EventEmitter } from 'events'
+import { Subscriber, Broadcast } from '../index'
+
+it('works', (done) => {
+
+  const steps = []
+  const execNextStep = () => steps.shift()()
+  const div = document.createElement('div')
+
+  // so we can trigger rerenders in ComponentWithStateForDescendants
+  const emitter = new EventEmitter()
+
+  // A component has some state it wants to make available to descendants
+  // 1. We create our Emitter and Subscriber components
+  const CheeseEmitter = ({ cheese, children }) =>
+    <Broadcast channel="cheese" value={cheese} children={children}/>
+  const CheeseSubscriber = ({ children }) =>
+    <Subscriber channel="cheese">{(value) => children(value)}</Subscriber>
+
+  class ComponentWithStateForDescendants extends React.Component {
+    constructor() {
+      super()
+      this.state = { cheese: 'cheddar' }
+      emitter.on('CHEESE', (cheese) => {
+        this.setState({ cheese })
+      })
+    }
+
+    componentDidMount = execNextStep
+
+    componentDidUpdate = execNextStep
+
+    render() {
+      // 2. render the Emitter in the component w/ state and pass
+      //    it the value we want accessible through context as a prop
+      //    by the same name as when the Emitter was created
+      return (
+        <CheeseEmitter cheese={this.state.cheese}>
+          {this.props.children}
+        </CheeseEmitter>
+      )
+    }
+  }
+
+  let actualCheese = null
+
+  steps.push(
+    () => {
+      expect(actualCheese).toBe('cheddar')
+      emitter.emit('CHEESE', 'gouda')
+    },
+    () => {
+      expect(actualCheese).toBe('gouda')
+      done()
+    }
+  )
+
+  // 3. Render a <Subscriber> that calls back when the Emitter
+  //    gets a new value in its prop
+  render((
+    <ComponentWithStateForDescendants>
+      <CheeseSubscriber>
+        {(cheese) => {
+          actualCheese = cheese
+          return null
+        }}
+      </CheeseSubscriber>
+    </ComponentWithStateForDescendants>
+  ), div)
+})
+

modules/__tests__/integration-test.js

@@ -1,4 +1,3 @@
 export Broadcast from './Broadcast'
 export Subscriber from './Subscriber'
 
-export * as PropTypes from './PropTypes'

modules/index.js

@@ -2,7 +2,10 @@
   "name": "react-broadcast",
   "version": "0.0.3",
   "description": "Broadcast state changes to React components deep in the hierarchy",
-  "author": "Michael Jackson",
+  "authors": [
+    "Michael Jackson",
+    "Ryan Florence"
+  ],
   "license": "MIT",
   "scripts": {
     "build": "node ./scripts/build.js",
@@ -11,7 +14,7 @@
     "build-min": "webpack -p modules/index.js umd/react-broadcast.min.js",
     "prepublish": "node ./scripts/build.js",
     "release": "node ./scripts/release.js",
-    "test": "npm run lint",
+    "test": "npm run lint && karma start",
     "lint": "eslint modules"
   },
   "dependencies": {
@@ -21,22 +24,32 @@
     "react": "15.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.16.0",
-    "babel-core": "^6.16.0",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-es2015-loose": "^8.0.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-1": "^6.16.0",
-    "eslint": "^3.7.0",
-    "eslint-plugin-import": "^2.0.0",
-    "eslint-plugin-react": "^6.3.0",
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.9.1",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.5.0",
+    "eslint": "^3.3.1",
+    "eslint-plugin-import": "^1.8.1",
+    "eslint-plugin-react": "^6.1.2",
+    "expect": "^1.20.1",
     "gzip-size": "^3.0.0",
     "in-publish": "^2.0.0",
-    "pretty-bytes": "^4.0.2",
+    "karma": "^1.2.0",
+    "karma-browserstack-launcher": "^1.0.1",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-mocha": "^1.0.1",
+    "karma-mocha-reporter": "^2.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^3.0.2",
+    "pretty-bytes": "^4.0.0",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
     "readline-sync": "^1.4.4",
-    "webpack": "^1.13.2"
+    "webpack": "1.13.1"
   }
 }

package.json

@@ -0,0 +1,3 @@
+const context = require.context('./modules', true, /-test\.js$/)
+context.keys().forEach(context)
+