Merge pull request #16 from umbrellio/fix-class-components

Fix observer and multiple observer for class components

Author: tysky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbrellio/observable",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Observable library",
   "repository": "git@github.com:umbrellio/observable.git",
   "author": "Aleksei Bespalov <nulldefiner@gmail.com>",

src/multipleObserver.js

@@ -33,7 +33,7 @@ const multipleObserver = stores => WrappedComponent => {
         }
       }, {})
 
-      return WrappedComponent({ ...this.props, ...state })
+      return <WrappedComponent {...this.props} {...state} />
     }
   }
 }

src/observer.js

@@ -23,7 +23,7 @@ const observer = (store, { key, map }) => WrappedComponent => {
 
     render () {
       const state = { [key]: map ? map(this.state) : this.state }
-      return WrappedComponent({ ...this.props, ...state })
+      return <WrappedComponent {...this.props} {...state} />
     }
   }
 }

tests/multipleObserver.test.js

@@ -8,31 +8,61 @@ const TestComponent = props => {
   return <pre dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }} />
 }
 
-const shallowComponent = observer => {
-  const ObservedComponent = observer(TestComponent)
+class ClassTestComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      count: 0,
+    }
+  }
+
+  handleClick = () => {
+    this.setState(prev => {
+      const next = prev === this.props.maxCount ? prev : prev + 1
+      return { count: next }
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.handleClick}>+</button>
+        <span>{`Count: ${this.state.count}`}</span>
+        <span>{`Max: ${this.props.count.max}`}</span>
+        <span>{`Value: ${this.props.info.key}`}</span>
+      </div>
+    )
+  }
+}
+
+const shallowComponent = (observer, component) => {
+  const ObservedComponent = observer(component)
   return Enzyme.shallow(<ObservedComponent />)
 }
 
 let store = null
 let anotherStore = null
+let countStore = null
 
 beforeAll(() => {
   Enzyme.configure({ adapter: new Adapter() })
   store = observable({ key: "initial value" })
   anotherStore = observable({ anotherKey: "another initial value" })
+  countStore = observable({ max: 10 })
 })
 
 beforeEach(() => {
   store.reset()
   anotherStore.reset()
+  countStore.reset()
 })
 
 it("wraps a component with the multiple observable", () => {
   const observer = multipleObserver([
     { store, key: "value" },
     { store: anotherStore, key: "anotherValue" },
   ])
-  const component = shallowComponent(observer)
+  const component = shallowComponent(observer, TestComponent)
   expect(component.html()).toEqual(
     "<pre>" +
     "{\"value\":{\"key\":\"initial value\"}," +
@@ -56,7 +86,7 @@ it("wraps a component with the multiple observable (mapped)", () => {
     { store, key: "value", map: state => state.key },
     { store: anotherStore, key: "anotherValue", map: state => state.anotherKey },
   ])
-  const component = shallowComponent(observer)
+  const component = shallowComponent(observer, TestComponent)
   expect(component.html()).toEqual(
     "<pre>" +
     "{\"value\":\"initial value\"," +
@@ -74,3 +104,31 @@ it("wraps a component with the multiple observable (mapped)", () => {
   )
   component.unmount()
 })
+
+it("wraps a class component with the multiple observable", () => {
+  const observer = multipleObserver([
+    { store, key: "info" },
+    { store: countStore, key: "count" },
+  ])
+  const component = shallowComponent(observer, ClassTestComponent)
+  expect(component.html()).toEqual(
+    "<div>" +
+    "<button>+</button>" +
+    "<span>Count: 0</span>" +
+    "<span>Max: 10</span>" +
+    "<span>Value: initial value</span>" +
+    "</div>",
+  )
+
+  store.set({ key: "new value" })
+  countStore.set({ max: 20 })
+  expect(component.html()).toEqual(
+    "<div>" +
+    "<button>+</button>" +
+    "<span>Count: 0</span>" +
+    "<span>Max: 20</span>" +
+    "<span>Value: new value</span>" +
+    "</div>",
+  )
+  component.unmount()
+})

tests/observer.test.js

@@ -8,28 +8,57 @@ const TestComponent = props => {
   return <pre dangerouslySetInnerHTML={{ __html: JSON.stringify(props) }} />
 }
 
-const shallowComponent = observer => {
-  const ObservedComponent = observer(TestComponent)
+class ClassTestComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      count: 0,
+    }
+  }
+
+  handleClick = () => {
+    this.setState(prev => {
+      const next = prev === this.props.maxCount ? prev : prev + 1
+      return { count: next }
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <button onClick={this.handleClick}>+</button>
+        <span>{`Count: ${this.state.count}`}</span>
+        <span>{`Max: ${this.props.count.max}`}</span>
+      </div>
+    )
+  }
+}
+
+const shallowComponent = (observer, component) => {
+  const ObservedComponent = observer(component)
   return Enzyme.shallow(<ObservedComponent />)
 }
 
 let store = null
 let anotherStore = null
+let countStore = null
 
 beforeAll(() => {
   Enzyme.configure({ adapter: new Adapter() })
   store = observable({ key: "initial value" })
   anotherStore = observable({ anotherKey: "another initial value" })
+  countStore = observable({ max: 10 })
 })
 
 beforeEach(() => {
   store.reset()
   anotherStore.reset()
+  countStore.reset()
 })
 
 it("wraps a component with the observable", () => {
   const observer = store.observer({ key: "value" })
-  const component = shallowComponent(observer)
+  const component = shallowComponent(observer, TestComponent)
   expect(component.html()).toEqual("<pre>{\"value\":{\"key\":\"initial value\"}}</pre>")
 
   store.set({ key: "new value" })
@@ -39,10 +68,22 @@ it("wraps a component with the observable", () => {
 
 it("wraps a component with the observable (mapped)", () => {
   const observer = store.observer({ key: "value", map: state => state.key })
-  const component = shallowComponent(observer)
+  const component = shallowComponent(observer, TestComponent)
   expect(component.html()).toEqual("<pre>{\"value\":\"initial value\"}</pre>")
 
   store.set({ key: "new value" })
   expect(component.html()).toEqual("<pre>{\"value\":\"new value\"}</pre>")
   component.unmount()
 })
+
+it("wraps a class component with the observable", () => {
+  const observer = countStore.observer({ key: "count" })
+  const component = shallowComponent(observer, ClassTestComponent)
+  expect(component.html())
+    .toEqual("<div><button>+</button><span>Count: 0</span><span>Max: 10</span></div>")
+
+  countStore.set({ max: 20 })
+  expect(component.html())
+    .toEqual("<div><button>+</button><span>Count: 0</span><span>Max: 20</span></div>")
+  component.unmount()
+})