diff --git a/package.json b/package.json index 82885d7..a935535 100644 --- a/package.json +++ b/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 ", diff --git a/src/multipleObserver.js b/src/multipleObserver.js index f76aedb..4d9475b 100644 --- a/src/multipleObserver.js +++ b/src/multipleObserver.js @@ -33,7 +33,7 @@ const multipleObserver = stores => WrappedComponent => { } }, {}) - return WrappedComponent({ ...this.props, ...state }) + return } } } diff --git a/src/observer.js b/src/observer.js index 4a50df6..4fdefc7 100644 --- a/src/observer.js +++ b/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 } } } diff --git a/tests/multipleObserver.test.js b/tests/multipleObserver.test.js index f79faf1..cdab982 100644 --- a/tests/multipleObserver.test.js +++ b/tests/multipleObserver.test.js @@ -8,23 +8,53 @@ const TestComponent = props => { return
 }
 
-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 (
+      
+ + {`Count: ${this.state.count}`} + {`Max: ${this.props.count.max}`} + {`Value: ${this.props.info.key}`} +
+ ) + } +} + +const shallowComponent = (observer, component) => { + const ObservedComponent = observer(component) return Enzyme.shallow() } 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", () => { @@ -32,7 +62,7 @@ it("wraps a component with the multiple observable", () => { { store, key: "value" }, { store: anotherStore, key: "anotherValue" }, ]) - const component = shallowComponent(observer) + const component = shallowComponent(observer, TestComponent) expect(component.html()).toEqual( "
" +
     "{\"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(
     "
" +
     "{\"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(
+    "
" + + "" + + "Count: 0" + + "Max: 10" + + "Value: initial value" + + "
", + ) + + store.set({ key: "new value" }) + countStore.set({ max: 20 }) + expect(component.html()).toEqual( + "
" + + "" + + "Count: 0" + + "Max: 20" + + "Value: new value" + + "
", + ) + component.unmount() +}) diff --git a/tests/observer.test.js b/tests/observer.test.js index 8847100..0bc9d12 100644 --- a/tests/observer.test.js +++ b/tests/observer.test.js @@ -8,28 +8,57 @@ const TestComponent = props => { return
 }
 
-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 (
+      
+ + {`Count: ${this.state.count}`} + {`Max: ${this.props.count.max}`} +
+ ) + } +} + +const shallowComponent = (observer, component) => { + const ObservedComponent = observer(component) return Enzyme.shallow() } 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("
{\"value\":{\"key\":\"initial value\"}}
") 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("
{\"value\":\"initial value\"}
") store.set({ key: "new value" }) expect(component.html()).toEqual("
{\"value\":\"new value\"}
") 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("
Count: 0Max: 10
") + + countStore.set({ max: 20 }) + expect(component.html()) + .toEqual("
Count: 0Max: 20
") + component.unmount() +})