From 3d04c7f1d2b25c7d79834aa3260aff7145100ab0 Mon Sep 17 00:00:00 2001 From: tysky Date: Tue, 16 May 2023 14:36:41 +0300 Subject: [PATCH] fix observer and multiple observer for class components --- package.json | 2 +- src/multipleObserver.js | 2 +- src/observer.js | 2 +- tests/multipleObserver.test.js | 66 +++++++++++++++++++++++++++++++--- tests/observer.test.js | 49 ++++++++++++++++++++++--- 5 files changed, 110 insertions(+), 11 deletions(-) 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()
+})