fix(react-query-devtools): inform onlineManager when offline mode is simulated (#5210)

TkDodo · web-flow · commit 8fa59154aa36 · 2023-04-01T08:32:33.000+02:00
diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/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,
@@ -478,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()
 
diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
@@ -689,6 +689,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                       } else {
                         onlineManager.setOnline(false)
                         setMockOffline(true)
+                        window.dispatchEvent(new Event('offline'))
                       }
                     }}
                     aria-label={

Original file line number	Diff line number	Diff line change
`@@ -689,6 +689,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<`
`689`	`689`	`} else {`
`690`	`690`	`onlineManager.setOnline(false)`
`691`	`691`	`setMockOffline(true)`
	`692`	`+ window.dispatchEvent(new Event('offline'))`
`692`	`693`	`}`
`693`	`694`	`}}`
`694`	`695`	`aria-label={`