@tanstack/react-query-devtools 5.0.0-alpha.2 → 5.0.0-alpha.21

package/src/__tests__/devtools.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, onlineManager } from '@tanstack/react-query'
 import { defaultPanelSize, sortFns } from '../utils'
 import {
   getByTextContent,
@@ -9,18 +9,27 @@ import {
   sleep,
   createQueryClient,
 } from './utils'
+import { vi } from 'vitest'
+import UserEvent from '@testing-library/user-event'
+
+class CustomError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'CustomError'
+  }
+}
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query: string) => ({
+  value: vi.fn().mockImplementation((query: string) => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
   })),
 })
 
@@ -31,8 +40,8 @@ describe('ReactQueryDevtools', () => {
   })
   it('should be able to open and close devtools', async () => {
     const { queryClient } = createQueryClient()
-    const onCloseClick = jest.fn()
-    const onToggleClick = jest.fn()
+    const onCloseClick = vi.fn()
+    const onToggleClick = vi.fn()
 
     function Page() {
       const { data = 'default' } = useQuery({
@@ -469,6 +478,31 @@ describe('ReactQueryDevtools', () => {
     expect(count).toBe(2)
   })
 
+  it('should inform onlineManager when offline mode is simulated', () => {
+    const { queryClient } = createQueryClient()
+    const online: Array<boolean> = []
+
+    const unsubscribe = onlineManager.subscribe(() => {
+      online.push(onlineManager.isOnline())
+    })
+
+    renderWithClient(queryClient, <div />, {
+      initialIsOpen: true,
+    })
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /mock offline behavior/i }),
+    )
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /restore offline mock/i }),
+    )
+
+    expect(online).toStrictEqual([false, true])
+
+    unsubscribe()
+  })
+
   it('should sort the queries according to the sorting filter', async () => {
     const { queryClient, queryCache } = createQueryClient()
 
@@ -683,6 +717,52 @@ describe('ReactQueryDevtools', () => {
     expect(filterInput.value).toEqual('posts')
   })
 
+  it('should not show queries after clear', async () => {
+    const { queryClient, queryCache } = createQueryClient()
+
+    function Page() {
+      const query1Result = useQuery({
+        queryKey: ['query-1'],
+        queryFn: async () => {
+          return 'query-1-result'
+        },
+      })
+      const query2Result = useQuery({
+        queryKey: ['query-2'],
+        queryFn: async () => {
+          return 'query-2-result'
+        },
+      })
+      const query3Result = useQuery({
+        queryKey: ['query-3'],
+        queryFn: async () => {
+          return 'query-3-result'
+        },
+      })
+
+      return (
+        <div>
+          <h1>
+            {query1Result.data} {query2Result.data} {query3Result.data}{' '}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /open react query devtools/i }),
+    )
+
+    expect(queryCache.getAll()).toHaveLength(3)
+
+    const clearButton = screen.getByLabelText(/clear/i)
+    fireEvent.click(clearButton)
+
+    expect(queryCache.getAll()).toHaveLength(0)
+  })
+
   it('style should have a nonce', async () => {
     const { queryClient } = createQueryClient()
 
@@ -861,4 +941,144 @@ describe('ReactQueryDevtools', () => {
     fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
     expect(parentElement).toHaveStyle(parentPaddings)
   })
+
+  it('should simulate loading state', async () => {
+    const { queryClient } = createQueryClient()
+    let count = 0
+    function App() {
+      const { data, fetchStatus } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          count++
+          return Promise.resolve('test')
+        },
+      })
+
+      return (
+        <div>
+          <h1>
+            {data ?? 'No data'}, {fetchStatus}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+    })
+
+    await screen.findByRole('heading', { name: /test/i })
+
+    const loadingButton = await screen.findByRole('button', {
+      name: 'Trigger loading',
+    })
+    fireEvent.click(loadingButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Restore loading')).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('No data, fetching')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /restore loading/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('test, idle')).toBeInTheDocument()
+    })
+
+    expect(count).toBe(2)
+  })
+
+  it('should simulate error state', async () => {
+    const { queryClient } = createQueryClient()
+    function App() {
+      const { status, error } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return Promise.resolve('test')
+        },
+      })
+
+      return (
+        <div>
+          <h1>
+            {!!error ? 'Some error' : 'No error'}, {status}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+    })
+
+    const errorButton = await screen.findByRole('button', {
+      name: 'Trigger error',
+    })
+    fireEvent.click(errorButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Restore error')).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Some error, error')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /Restore error/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('No error, success')).toBeInTheDocument()
+    })
+  })
+
+  it('should can simulate a specific error', async () => {
+    const { queryClient } = createQueryClient()
+
+    function App() {
+      const { status, error } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          return Promise.resolve('test')
+        },
+      })
+
+      return (
+        <div data-testid="test">
+          <h1>
+            {error instanceof CustomError
+              ? error.message.toString()
+              : 'No error'}
+            , {status}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+      errorTypes: [
+        {
+          name: 'error1',
+          initializer: () => new CustomError('error1'),
+        },
+      ],
+    })
+
+    const errorOption = await screen.findByLabelText('Trigger error:')
+
+    UserEvent.selectOptions(errorOption, 'error1')
+
+    await waitFor(() => {
+      expect(screen.getByText('error1, error')).toBeInTheDocument()
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: /Restore error/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('No error, success')).toBeInTheDocument()
+    })
+  })
 })