test(query-devtools/Devtools): add tests for in-page panel visibility while a PiP window is open

Author: sukvvon

packages/query-devtools/src/__tests__/Devtools.test.tsx

@@ -456,6 +456,43 @@ describe('Devtools', () => {
         consoleError.mockRestore()
       }
     })
+
+    it('should hide the in-page panel while a PiP window is open', () => {
+      stubPipWindow()
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      fireEvent.click(
+        rendered.getByLabelText('Open in picture-in-picture mode'),
+      )
+
+      expect(
+        rendered.container.querySelector('.tsqd-main-panel-container'),
+      ).toBeNull()
+    })
+
+    it('should restore the in-page panel and reset "pip_open" when the PiP window is closed', () => {
+      const { fakeWindow } = stubPipWindow()
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      fireEvent.click(
+        rendered.getByLabelText('Open in picture-in-picture mode'),
+      )
+
+      const addEventListener = fakeWindow.addEventListener as ReturnType<
+        typeof vi.fn
+      >
+      const pagehideHandler = addEventListener.mock.calls.find(
+        ([event]) => event === 'pagehide',
+      )?.[1] as () => void
+      pagehideHandler()
+
+      expect(localStorage.getItem('TanstackQueryDevtools.pip_open')).toBe(
+        'false',
+      )
+      expect(
+        rendered.getByLabelText('Open in picture-in-picture mode'),
+      ).toBeInTheDocument()
+    })
   })
 
   describe('status counts', () => {