added more tests for useSnapshot

pmndrs · Oct 26, 2024 · 07e883c · 07e883c
1 parent 77a982c
commit 07e883c
Show file tree

Hide file tree

Showing 2 changed files with 208 additions and 0 deletions.
diff --git a/tests/proxyMap.test.tsx b/tests/proxyMap.test.tsx
@@ -466,6 +466,110 @@ describe('ui updates - useSnapshot', async () => {
     })
   })
 
+  it('should update ui when calling has before and after settiing multile keys and deleting a single one (first item)', async () => {
+    const state = proxyMap()
+    const TestComponent = () => {
+      const snap = useSnapshot(state)
+
+      return (
+        <>
+          <p>has key: {`${snap.has('key')}`}</p>
+          <p>has key2: {`${snap.has('key2')}`}</p>
+          <button
+            onClick={() => {
+              state.set('key', 'value')
+              state.set('key2', 'value')
+            }}
+          >
+            set keys
+          </button>
+          <button
+            onClick={() => {
+              state.delete('key')
+            }}
+          >
+            delete keys
+          </button>
+        </>
+      )
+    }
+
+    const { getByText } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>,
+    )
+
+    await waitFor(() => {
+      getByText('has key: false')
+      getByText('has key2: false')
+    })
+
+    fireEvent.click(getByText('set keys'))
+    await waitFor(() => {
+      getByText('has key: true')
+      getByText('has key2: true')
+    })
+
+    fireEvent.click(getByText('delete keys'))
+    await waitFor(() => {
+      getByText('has key: false')
+      getByText('has key2: true')
+    })
+  })
+
+  it('should update ui when calling has before and after settiing multile keys and deleting a single one (first item)', async () => {
+    const state = proxyMap()
+    const TestComponent = () => {
+      const snap = useSnapshot(state)
+
+      return (
+        <>
+          <p>has key: {`${snap.has('key')}`}</p>
+          <p>has key2: {`${snap.has('key2')}`}</p>
+          <button
+            onClick={() => {
+              state.set('key', 'value')
+              state.set('key2', 'value')
+            }}
+          >
+            set keys
+          </button>
+          <button
+            onClick={() => {
+              state.delete('key2')
+            }}
+          >
+            delete keys
+          </button>
+        </>
+      )
+    }
+
+    const { getByText } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>,
+    )
+
+    await waitFor(() => {
+      getByText('has key: false')
+      getByText('has key2: false')
+    })
+
+    fireEvent.click(getByText('set keys'))
+    await waitFor(() => {
+      getByText('has key: true')
+      getByText('has key2: true')
+    })
+
+    fireEvent.click(getByText('delete keys'))
+    await waitFor(() => {
+      getByText('has key: true')
+      getByText('has key2: false')
+    })
+  })
+
   it('should update ui when clearing the map', async () => {
     const state = proxyMap()
     const TestComponent = () => {

diff --git a/tests/proxySet.test.tsx b/tests/proxySet.test.tsx
@@ -462,6 +462,110 @@ describe('ui updates - useSnapshot', async () => {
     })
   })
 
+  it('should update ui when calling has before and after settiing multiple values and deleting a single one (first item)', async () => {
+    const state = proxySet()
+    const TestComponent = () => {
+      const snap = useSnapshot(state)
+
+      return (
+        <>
+          <p>has value: {`${snap.has('value')}`}</p>
+          <p>has value2: {`${snap.has('value2')}`}</p>
+          <button
+            onClick={() => {
+              state.add('value')
+              state.add('value2')
+            }}
+          >
+            add values
+          </button>
+          <button
+            onClick={() => {
+              state.delete('value')
+            }}
+          >
+            delete values
+          </button>
+        </>
+      )
+    }
+
+    const { getByText } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>,
+    )
+
+    await waitFor(() => {
+      getByText('has value: false')
+      getByText('has value2: false')
+    })
+
+    fireEvent.click(getByText('add values'))
+    await waitFor(() => {
+      getByText('has value: true')
+      getByText('has value2: true')
+    })
+
+    fireEvent.click(getByText('delete values'))
+    await waitFor(() => {
+      getByText('has value: false')
+      getByText('has value2: true')
+    })
+  })
+
+  it('should update ui when calling has before and after settiing multiple values and deleting a single one (second item)', async () => {
+    const state = proxySet()
+    const TestComponent = () => {
+      const snap = useSnapshot(state)
+
+      return (
+        <>
+          <p>has value: {`${snap.has('value')}`}</p>
+          <p>has value2: {`${snap.has('value2')}`}</p>
+          <button
+            onClick={() => {
+              state.add('value')
+              state.add('value2')
+            }}
+          >
+            add values
+          </button>
+          <button
+            onClick={() => {
+              state.delete('value2')
+            }}
+          >
+            delete values
+          </button>
+        </>
+      )
+    }
+
+    const { getByText } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>,
+    )
+
+    await waitFor(() => {
+      getByText('has value: false')
+      getByText('has value2: false')
+    })
+
+    fireEvent.click(getByText('add values'))
+    await waitFor(() => {
+      getByText('has value: true')
+      getByText('has value2: true')
+    })
+
+    fireEvent.click(getByText('delete values'))
+    await waitFor(() => {
+      getByText('has value: true')
+      getByText('has value2: false')
+    })
+  })
+
   it('should update ui when clearing the set', async () => {
     const state = proxySet()
     const TestComponent = () => {