test(query-devtools/Devtools): add tests for sort dropdown, hide disabled queries, and sort order toggle

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

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { QueryClient, onlineManager } from '@tanstack/query-core'
+import { QueryClient, QueryObserver, onlineManager } from '@tanstack/query-core'
 import { fireEvent, render } from '@solidjs/testing-library'
 import { createLocalStorage } from '@solid-primitives/storage'
 import { Devtools } from '../Devtools'
@@ -732,4 +732,76 @@ describe('Devtools', () => {
       )
     })
   })
+
+  describe('sort by', () => {
+    it('should change sort key when the sort dropdown is changed in queries view', () => {
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      fireEvent.change(rendered.getByLabelText('Sort queries by'), {
+        target: { value: 'last updated' },
+      })
+
+      expect(localStorage.getItem('TanstackQueryDevtools.sort')).toBe(
+        'last updated',
+      )
+    })
+
+    it('should change sort key when the sort dropdown is changed in mutations view', () => {
+      const rendered = renderDevtools({ initialIsOpen: true })
+      fireEvent.click(rendered.getByText('Mutations'))
+
+      fireEvent.change(rendered.getByLabelText('Sort mutations by'), {
+        target: { value: 'last updated' },
+      })
+
+      expect(localStorage.getItem('TanstackQueryDevtools.mutationSort')).toBe(
+        'last updated',
+      )
+    })
+
+    it('should hide disabled queries when "hideDisabledQueries" is enabled in localStorage', () => {
+      const disabled = new QueryObserver(queryClient, {
+        queryKey: ['hide-test-disabled'],
+        queryFn: () => 'x',
+        enabled: false,
+      })
+      const unsubscribe = disabled.subscribe(() => {})
+      queryClient.setQueryData(['hide-test-disabled'], 'x')
+      queryClient.setQueryData(['hide-test-active'], 'y')
+
+      try {
+        const rendered = renderDevtools(
+          { initialIsOpen: true },
+          { 'TanstackQueryDevtools.hideDisabledQueries': 'true' },
+        )
+
+        expect(
+          rendered.queryByLabelText(/Query key \["hide-test-disabled"\]/),
+        ).not.toBeInTheDocument()
+        expect(
+          rendered.getByLabelText(/Query key \["hide-test-active"\]/),
+        ).toBeInTheDocument()
+      } finally {
+        unsubscribe()
+      }
+    })
+  })
+
+  describe('sort order', () => {
+    it('should toggle the sort order when the sort order button is clicked', () => {
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      fireEvent.click(rendered.getByLabelText(/Sort order/))
+      const afterFirstToggle = localStorage.getItem(
+        'TanstackQueryDevtools.sortOrder',
+      )
+      expect(['1', '-1']).toContain(afterFirstToggle)
+
+      fireEvent.click(rendered.getByLabelText(/Sort order/))
+      const afterSecondToggle = localStorage.getItem(
+        'TanstackQueryDevtools.sortOrder',
+      )
+      expect(afterSecondToggle).toBe(afterFirstToggle === '1' ? '-1' : '1')
+    })
+  })
 })