devtools tests (#295)

tests/devtools.test.tsx

@@ -0,0 +1,277 @@
+import { Suspense } from 'react'
+import { act, fireEvent, render } from '@testing-library/react'
+import { proxy, useSnapshot } from 'valtio'
+import { devtools } from 'valtio/utils'
+
+let extensionSubscriber: ((message: any) => void) | undefined
+
+const extension = {
+  subscribe: jest.fn((f) => {
+    extensionSubscriber = f
+    return () => {}
+  }),
+  unsubscribe: jest.fn(),
+  send: jest.fn(),
+  init: jest.fn(),
+  error: jest.fn(),
+}
+const extensionConnector = { connect: jest.fn(() => extension) }
+;(window as any).__REDUX_DEVTOOLS_EXTENSION__ = extensionConnector
+
+beforeEach(() => {
+  extensionConnector.connect.mockClear()
+  extension.subscribe.mockClear()
+  extension.unsubscribe.mockClear()
+  extension.send.mockClear()
+  extension.init.mockClear()
+  extension.error.mockClear()
+  extensionSubscriber = undefined
+})
+
+it('connects to the extension by initialiing', () => {
+  const obj = proxy({ count: 0 })
+  devtools(obj)
+
+  const Counter = () => {
+    const snap = useSnapshot(obj)
+    return (
+      <>
+        <div>count: {snap.count}</div>
+        <button onClick={() => ++obj.count}>button</button>
+      </>
+    )
+  }
+
+  render(<Counter />)
+
+  expect(extension.init).toHaveBeenLastCalledWith({ count: 0 })
+})
+
+describe('If there is no extension installed...', () => {
+  beforeAll(() => {
+    ;(window as any).__REDUX_DEVTOOLS_EXTENSION__ = undefined
+  })
+  afterAll(() => {
+    ;(window as any).__REDUX_DEVTOOLS_EXTENSION__ = extensionConnector
+  })
+
+  const obj = proxy({ count: 0 })
+  devtools(obj)
+
+  const Counter = () => {
+    const snap = useSnapshot(obj)
+    return (
+      <>
+        <div>count: {snap.count}</div>
+        <button onClick={() => ++obj.count}>button</button>
+      </>
+    )
+  }
+
+  it('does not throw', () => {
+    devtools(obj)
+    expect(() => {
+      render(<Counter />)
+    }).not.toThrow()
+  })
+
+  it('warns in dev env', () => {
+    const originalNodeEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+    const originalConsoleWarn = console.warn
+    console.warn = jest.fn()
+    devtools(obj)
+
+    render(<Counter />)
+    expect(console.warn).toHaveBeenLastCalledWith(
+      '[Warning] Please install/enable Redux devtools extension'
+    )
+
+    process.env.NODE_ENV = originalNodeEnv
+    console.warn = originalConsoleWarn
+  })
+
+  it('does not warn if not in dev env', () => {
+    const consoleWarn = jest.spyOn(console, 'warn')
+
+    render(<Counter />)
+    expect(consoleWarn).not.toBeCalled()
+
+    consoleWarn.mockRestore()
+  })
+})
+
+it('updating state should call devtools.send', async () => {
+  const obj = proxy({ count: 0 })
+  devtools(obj)
+
+  const Counter = () => {
+    const snap = useSnapshot(obj)
+    return (
+      <>
+        <div>count: {snap.count}</div>
+        <button onClick={() => ++obj.count}>button</button>
+      </>
+    )
+  }
+
+  extension.send.mockClear()
+  const { getByText, findByText } = render(<Counter />)
+
+  expect(extension.send).toBeCalledTimes(0)
+  fireEvent.click(getByText('button'))
+  await findByText('count: 1')
+  expect(extension.send).toBeCalledTimes(1)
+  fireEvent.click(getByText('button'))
+  await findByText('count: 2')
+  expect(extension.send).toBeCalledTimes(2)
+})
+
+describe('when it receives an message of type...', () => {
+  it('updating state with ACTION', async () => {
+    const obj = proxy({ count: 0 })
+    devtools(obj)
+
+    const Counter = () => {
+      const snap = useSnapshot(obj)
+      return (
+        <>
+          <div>count: {snap.count}</div>
+          <button onClick={() => ++obj.count}>button</button>
+        </>
+      )
+    }
+
+    extension.send.mockClear()
+    const { getByText, findByText } = render(
+      <Suspense fallback={'loading'}>
+        <Counter />
+      </Suspense>
+    )
+
+    expect(extension.send).toBeCalledTimes(0)
+    fireEvent.click(getByText('button'))
+    await findByText('count: 1')
+    expect(extension.send).toBeCalledTimes(1)
+    act(() =>
+      (extensionSubscriber as (message: any) => void)({
+        type: 'ACTION',
+        payload: JSON.stringify({ count: 0 }),
+      })
+    )
+    await findByText('count: 0')
+    expect(extension.send).toBeCalledTimes(2)
+  })
+
+  describe('DISPATCH and payload of type...', () => {
+    it('dispatch & COMMIT', async () => {
+      const obj = proxy({ count: 0 })
+      devtools(obj)
+
+      const Counter = () => {
+        const snap = useSnapshot(obj)
+        return (
+          <>
+            <div>count: {snap.count}</div>
+            <button onClick={() => ++obj.count}>button</button>
+          </>
+        )
+      }
+
+      extension.send.mockClear()
+      const { getByText, findByText } = render(<Counter />)
+
+      expect(extension.send).toBeCalledTimes(0)
+      fireEvent.click(getByText('button'))
+      await findByText('count: 1')
+      expect(extension.send).toBeCalledTimes(1)
+      fireEvent.click(getByText('button'))
+      await findByText('count: 2')
+      act(() =>
+        (extensionSubscriber as (message: any) => void)({
+          type: 'DISPATCH',
+          payload: { type: 'COMMIT' },
+        })
+      )
+      await findByText('count: 2')
+      expect(extension.init).toBeCalledWith({ count: 2 })
+    })
+
+    it('dispatch & IMPORT_STATE', async () => {
+      const obj = proxy({ count: 0 })
+      devtools(obj)
+
+      const Counter = () => {
+        const snap = useSnapshot(obj)
+        return (
+          <>
+            <div>count: {snap.count}</div>
+            <button onClick={() => ++obj.count}>button</button>
+          </>
+        )
+      }
+
+      extension.send.mockClear()
+      const { getByText, findByText } = render(<Counter />)
+
+      const nextLiftedState = {
+        actionsById: ['5', '6'],
+        computedStates: [{ state: { count: 5 } }, { state: { count: 6 } }],
+      }
+
+      expect(extension.send).toBeCalledTimes(0)
+      fireEvent.click(getByText('button'))
+      await findByText('count: 1')
+      expect(extension.send).toBeCalledTimes(1)
+      fireEvent.click(getByText('button'))
+      await findByText('count: 2')
+      act(() =>
+        (extensionSubscriber as (message: any) => void)({
+          type: 'DISPATCH',
+          payload: { type: 'IMPORT_STATE', nextLiftedState },
+        })
+      )
+      expect(extension.init).toBeCalledWith({ count: 5 })
+      await findByText('count: 6')
+    })
+
+    describe('JUMP_TO_STATE | JUMP_TO_ACTION...', () => {
+      it('time travelling', async () => {
+        const obj = proxy({ count: 0 })
+        devtools(obj)
+
+        const Counter = () => {
+          const snap = useSnapshot(obj)
+          return (
+            <>
+              <div>count: {snap.count}</div>
+              <button onClick={() => ++obj.count}>button</button>
+            </>
+          )
+        }
+
+        extension.send.mockClear()
+        const { getByText, findByText } = render(<Counter />)
+
+        expect(extension.send).toBeCalledTimes(0)
+        fireEvent.click(getByText('button'))
+        await findByText('count: 1')
+        expect(extension.send).toBeCalledTimes(1)
+        act(() =>
+          (extensionSubscriber as (message: any) => void)({
+            type: 'DISPATCH',
+            payload: { type: 'JUMP_TO_ACTION' },
+            state: JSON.stringify({ count: 0 }),
+          })
+        )
+        await findByText('count: 0')
+        expect(extension.send).toBeCalledTimes(1)
+        fireEvent.click(getByText('button'))
+        await findByText('count: 1')
+        fireEvent.click(getByText('button'))
+        await findByText('count: 2')
+        expect(extension.send).toBeCalledTimes(3)
+      })
+    })
+  })
+})