Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added tests for adding and removing data in proxySet and proxyMap to …
Browse files Browse the repository at this point in the history
…make sure it updates with useSnapshot
overthemike committed Oct 24, 2024
1 parent 0f3512c commit e9d75ad
Showing 2 changed files with 75 additions and 0 deletions.
38 changes: 38 additions & 0 deletions tests/proxyMap.test.tsx
Original file line number Diff line number Diff line change
@@ -319,6 +319,7 @@ describe('proxyMap internal', () => {
).toBe(false)
})
})

describe('snapshot', () => {
it('should error when trying to mutate a snapshot', () => {
const state = proxyMap()
@@ -375,3 +376,40 @@ describe('snapshot', () => {
expect(snap2.get('key1')).toBe('val1modified')
})
})

describe('ui updates - useSnapshot', async () => {
it('should update ui when calling has before and after deleting a key', async () => {
const state = proxyMap()
const TestComponent = () => {
const snap = useSnapshot(state)

return (
<>
<p>has key1: {`${snap.has('key')}`}</p>
<button onClick={() => state.set('key', 'value')}>set key</button>
<button onClick={() => state.delete('key')}>delete key</button>
</>
)
}

const { getByText } = render(
<StrictMode>
<TestComponent />
</StrictMode>,
)

await waitFor(() => {
getByText('has key1: false')
})

fireEvent.click(getByText('set key'))
await waitFor(() => {

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (cjs, development)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (esm, development)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (18.0.0)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (18.1.0)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (18.2.0)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (18.3.1)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (19.0.0-rc.0)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (19.0.0-rc-83825814-20241015)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11

Check failure on line 406 in tests/proxyMap.test.tsx

GitHub Actions / test_matrix (0.0.0-experimental-83825814-20241015)

tests/proxyMap.test.tsx > ui updates - useSnapshot > should update ui when calling has before and after deleting a key

TestingLibraryElementError: Unable to find an element with the text: has key: true. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, script, style <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> Ignored nodes: comments, script, style <html> <head /> <body> <div> <p> has key1: true </p> <button> set key </button> <button> delete key </button> </div> </body> </html> ❯ Proxy.waitForWrapper node_modules/.pnpm/@testing-library+dom@10.4.0/node_modules/@testing-library/dom/dist/wait-for.js:163:27 ❯ tests/proxyMap.test.tsx:406:11
getByText('has key: true')
})

fireEvent.click(getByText('delete key'))
await waitFor(() => {
getByText('has key: false')
})
})
})
37 changes: 37 additions & 0 deletions tests/proxySet.test.tsx
Original file line number Diff line number Diff line change
@@ -365,3 +365,40 @@ describe('snapshot behavior', () => {
expect(snap2.has('val2')).toBe(true)
})
})

describe('ui updates - useSnapshot', async () => {
it('should update ui when calling has before and after deleting a value', async () => {
const state = proxySet()
const TestComponent = () => {
const snap = useSnapshot(state)

return (
<>
<p>has value: {`${snap.has('value')}`}</p>
<button onClick={() => state.add('value')}>add value</button>
<button onClick={() => state.delete('value')}>delete value</button>
</>
)
}

const { getByText } = render(
<StrictMode>
<TestComponent />
</StrictMode>,
)

await waitFor(() => {
getByText('has value: false')
})

fireEvent.click(getByText('add value'))
await waitFor(() => {
getByText('has value: true')
})

fireEvent.click(getByText('delete value'))
await waitFor(() => {
getByText('has value: false')
})
})
})

0 comments on commit e9d75ad

Please sign in to comment.