feat(devtools): the react query logo can now close the devtools (#3577)

* feat(devtools): update react query logo to close devtools added button wrapper on react query logo which onClick closes devtools window closes #3067 * feat(devtools): update test case for open and close devtools
TanStack · May 8, 2022 · 5848fab · 5848fab · vercel · May 8, 2022
1 parent 09a375b
commit 5848fab
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 24 deletions.
diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx
@@ -278,7 +278,6 @@ export function ReactQueryDevtools({
         {isResolvedOpen ? (
           <Button
             type="button"
-            aria-label="Close React Query Devtools"
             aria-controls="ReactQueryDevtoolsPanel"
             aria-haspopup="true"
             aria-expanded="true"
@@ -540,12 +539,24 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
               alignItems: 'center',
             }}
           >
-            <Logo
-              aria-hidden
+            <button
+              type="button"
+              aria-label="Close React Query Devtools"
+              aria-controls="ReactQueryDevtoolsPanel"
+              aria-haspopup="true"
+              aria-expanded="true"
+              onClick={() => setIsOpen(false)}
               style={{
+                display: 'inline-flex',
+                background: 'none',
+                border: 0,
+                padding: 0,
                 marginRight: '.5em',
+                cursor: 'pointer',
               }}
-            />
+            >
+              <Logo aria-hidden />
+            </button>
             <div
               style={{
                 display: 'flex',
@@ -605,6 +616,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                   style={{
                     flex: '1',
                     marginRight: '.5em',
+                    width: '100%',
                   }}
                 />
                 {!filter ? (

diff --git a/src/devtools/tests/devtools.test.tsx b/src/devtools/tests/devtools.test.tsx
@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  fireEvent,
-  screen,
-  waitFor,
-  act,
-  waitForElementToBeRemoved,
-} from '@testing-library/react'
+import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { useQuery } from '../..'
 import {
@@ -34,22 +28,56 @@ describe('ReactQueryDevtools', () => {
 
     renderWithClient(queryClient, <Page />, { initialIsOpen: false })
 
-    const closeButton = screen.queryByRole('button', {
-      name: /close react query devtools/i,
-    })
-    expect(closeButton).toBeNull()
-    fireEvent.click(
-      screen.getByRole('button', { name: /open react query devtools/i })
-    )
+    const verifyDevtoolsIsOpen = () => {
+      expect(
+        screen.queryByRole('generic', { name: /react query devtools panel/i })
+      ).not.toBeNull()
+      expect(
+        screen.queryByRole('button', { name: /open react query devtools/i })
+      ).toBeNull()
+    }
+    const verifyDevtoolsIsClosed = () => {
+      expect(
+        screen.queryByRole('generic', { name: /react query devtools panel/i })
+      ).toBeNull()
+      expect(
+        screen.queryByRole('button', { name: /open react query devtools/i })
+      ).not.toBeNull()
+    }
 
-    await waitForElementToBeRemoved(() =>
-      screen.queryByRole('button', { name: /open react query devtools/i })
-    )
-    fireEvent.click(
+    const waitForDevtoolsToOpen = () =>
+      screen.findByRole('button', { name: /close react query devtools/i })
+    const waitForDevtoolsToClose = () =>
+      screen.findByRole('button', { name: /open react query devtools/i })
+
+    const getOpenLogoButton = () =>
+      screen.getByRole('button', { name: /open react query devtools/i })
+    const getCloseLogoButton = () =>
       screen.getByRole('button', { name: /close react query devtools/i })
-    )
+    const getCloseButton = () =>
+      screen.getByRole('button', { name: /^close$/i })
+
+    verifyDevtoolsIsClosed()
+
+    fireEvent.click(getOpenLogoButton())
+    await waitForDevtoolsToOpen()
+
+    verifyDevtoolsIsOpen()
+
+    fireEvent.click(getCloseLogoButton())
+    await waitForDevtoolsToClose()
+
+    verifyDevtoolsIsClosed()
+
+    fireEvent.click(getOpenLogoButton())
+    await waitForDevtoolsToOpen()
+
+    verifyDevtoolsIsOpen()
+
+    fireEvent.click(getCloseButton())
+    await waitForDevtoolsToClose()
 
-    await screen.findByRole('button', { name: /open react query devtools/i })
+    verifyDevtoolsIsClosed()
   })
 
   it('should display the correct query states', async () => {