Add react-mixin-tests

Author: jordangarcia

NEXT.md

@@ -1,10 +1,15 @@
 # TODO for 0.6.0
 
-- [ ] Flux chat example written in NuclearJS (only need README)
+## Essential for 0.6.0
+- [x] Flux chat example written in NuclearJS (only need README)
 - [x] Implement `flux.ReactMixin` as part of NuclearJS
-- [ ] Test `flux.ReactMixin`
-- [ ] Document util methods such as `toImmutable`
-- [ ] Implement code coverage and put badge on README
-- [ ] Explain `getters` with diagram as functional lenses
+- [x] Test `flux.ReactMixin`
+- [ ] Create release documentation with API breaking changes and migration guide
+- [ ] Dedupe docs and make sure they are organized
+
+## Planned for 0.6.1
 - [ ] Document module pattern and prescribed way of testing NuclearJS modules
+- [ ] Explain `getters` with diagram as functional lenses
 - [ ] Polyfill all lodash methods in `utils` taken from 0.5.0 (only need `deepClone` and `isObject`)
+- [ ] Document util methods such as `toImmutable`
+- [ ] Implement code coverage and put badge on README

dist/nuclear.min.js

@@ -42,6 +42,7 @@
     "karma-chrome-launcher": "^0.1.5",
     "webpack-dev-server": "^1.6.6",
     "karma-webpack": "^1.3.1",
-    "karma-jasmine-html-reporter": "^0.1.5"
+    "karma-jasmine-html-reporter": "^0.1.5",
+    "react": "^0.13.2"
   }
 }

examples/flux-chat/bundle.js

@@ -0,0 +1,196 @@
+var React = require('react')
+var Nuclear = require('../src/main')
+var toImmutable = require('../src/main').toImmutable
+
+var testStore = new Nuclear.Store({
+  getInitialState() {
+    return toImmutable({
+      count: 0,
+
+      map: {
+        key1: 'value1',
+        multi: 2,
+      }
+    })
+  },
+
+  initialize() {
+    this.on('increment', state => {
+      var nextCount = state.get('count')
+      return state.set('count', ++nextCount)
+    })
+
+    this.on('set', (state, payload) => {
+      return state.setIn(['map', payload.key], toImmutable(payload.value))
+    })
+  }
+})
+
+describe('reactor.ReactMixin', () => {
+  var mountNode
+  var reactor
+  var countGetter = ['test', 'count']
+  var key1Getter = ['test', 'map', 'key1']
+  var key2Getter = ['test', 'map', 'key2']
+  var multipliedGetter = [
+    countGetter,
+    ['test', 'map', 'multi'],
+    (count, multi) => count * multi
+  ]
+
+  beforeEach(() => {
+    reactor = new Nuclear.Reactor({
+      debug: true,
+    })
+    reactor.registerStores({
+      test: testStore
+    })
+  })
+
+
+  describe("when rendering a component with the flux.ReactMixin", () => {
+    var component
+    beforeEach(() => {
+      mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+      //var componentWillMountSpy = jasmine.createSpy()
+      var Component = React.createClass({
+        mixins: [reactor.ReactMixin],
+
+        getDataBindings() {
+          return {
+            count: countGetter,
+            multiplied: multipliedGetter,
+            key1: key1Getter,
+            key2: key2Getter,
+          }
+        },
+
+        render() {
+          return React.DOM.div(null, '')
+        },
+      })
+
+      component = React.render(React.createElement(Component, null), mountNode)
+    })
+
+    afterEach(() => {
+      React.unmountComponentAtNode(mountNode)
+      document.body.removeChild(mountNode)
+    })
+
+    it("should set the component initialState from `getDataBindings()`", () => {
+      expect(component.state.count).toBe(0)
+      expect(component.state.multiplied).toBe(0)
+      expect(component.state.key1).toBe('value1')
+      expect(component.state.key2).toBe(undefined)
+    })
+
+    it("should update the state automatically when the underyling getters change", () => {
+      reactor.dispatch('increment')
+
+      expect(component.state.count).toBe(1)
+      expect(component.state.multiplied).toBe(2)
+      expect(component.state.key1).toBe('value1')
+      expect(component.state.key2).toBe(undefined)
+
+      reactor.dispatch('set', {
+        key: 'key2',
+        value: 'value2',
+      })
+
+      expect(component.state.count).toBe(1)
+      expect(component.state.multiplied).toBe(2)
+      expect(component.state.key1).toBe('value1')
+      expect(component.state.key2).toBe('value2')
+    })
+  })
+
+  describe("when rendering a component with a getInitialState() method", () => {
+    var component
+    beforeEach(() => {
+      mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+      //var componentWillMountSpy = jasmine.createSpy()
+      var Component = React.createClass({
+        mixins: [reactor.ReactMixin],
+
+        getInitialState() {
+          return {
+            foo: 'bar',
+          }
+        },
+
+        getDataBindings() {
+          return {
+            count: countGetter,
+            multiplied: multipliedGetter,
+            key1: key1Getter,
+            key2: key2Getter,
+          }
+        },
+
+        render() {
+          return React.DOM.div(null, '')
+        },
+      })
+
+      component = React.render(React.createElement(Component, null), mountNode)
+    })
+
+    afterEach(() => {
+      React.unmountComponentAtNode(mountNode)
+      document.body.removeChild(mountNode)
+    })
+
+    it("should set the component initialState from `getDataBindings()` and getInitialState", () => {
+      expect(component.state.foo).toBe('bar')
+      expect(component.state.count).toBe(0)
+      expect(component.state.multiplied).toBe(0)
+      expect(component.state.key1).toBe('value1')
+      expect(component.state.key2).toBe(undefined)
+    })
+  })
+
+  describe("after unmounting the component", () => {
+    var component
+    beforeEach(() => {
+      mountNode = document.createElement('div')
+      document.body.appendChild(mountNode)
+      //var componentWillMountSpy = jasmine.createSpy()
+      var Component = React.createClass({
+        mixins: [reactor.ReactMixin],
+
+        getInitialState() {
+          return {
+            foo: 'bar',
+          }
+        },
+
+        getDataBindings() {
+          return {
+            count: countGetter,
+            multiplied: multipliedGetter,
+            key1: key1Getter,
+            key2: key2Getter,
+          }
+        },
+
+        render() {
+          return React.DOM.div(null, '')
+        },
+      })
+
+      component = React.render(React.createElement(Component, null), mountNode)
+    })
+
+    afterEach(() => {
+      document.body.removeChild(mountNode)
+    })
+
+    it("should unobserve all getters", () => {
+      React.unmountComponentAtNode(mountNode)
+      expect(reactor.__changeObserver.__observers.length).toBe(0)
+    })
+  })
+})