From 0384944550d11d835a2b192e65bdda952b5a4877 Mon Sep 17 00:00:00 2001 From: zorzysty Date: Sun, 12 Jun 2022 19:21:04 +0200 Subject: [PATCH 1/3] fix(devtools): make sure that sort function is properly read from localStorage --- .../src/__tests__/devtools.test.tsx | 103 ++++++++++++++++++ .../react-query-devtools/src/devtools.tsx | 8 +- 2 files changed, 104 insertions(+), 7 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx index 3a0d502cc2..2ed0efd682 100644 --- a/packages/react-query-devtools/src/__tests__/devtools.test.tsx +++ b/packages/react-query-devtools/src/__tests__/devtools.test.tsx @@ -3,6 +3,7 @@ import { fireEvent, screen, waitFor, act } from '@testing-library/react' import { ErrorBoundary } from 'react-error-boundary' import '@testing-library/jest-dom' import { useQuery, QueryClient } from '@tanstack/react-query' +import { sortFns } from '../devtools' import { getByTextContent, renderWithClient, @@ -552,6 +553,108 @@ describe('ReactQueryDevtools', () => { expect(queries[2]?.textContent).toEqual(query3Hash) }) + it('should initialize filtering and sorting values with defaults when they are not stored in localstorage', () => { + localStorage.removeItem('reactQueryDevtoolsSortDesc') + localStorage.removeItem('reactQueryDevtoolsSortFn') + localStorage.removeItem('reactQueryDevtoolsFilter') + + const { queryClient } = createQueryClient() + + function Page() { + const { data = 'default' } = useQuery(['check'], async () => { + await sleep(10) + return 'test' + }) + + return ( +
+

{data}

+
+ ) + } + + renderWithClient(queryClient, , { + initialIsOpen: true, + }) + + const filterInput: HTMLInputElement = screen.getByLabelText( + /Filter by queryhash/i + ) + expect(filterInput.value).toEqual('') + + const sortCombobox: HTMLSelectElement = screen.getByLabelText( + /Sort queries/i + ) + expect(sortCombobox.value).toEqual(Object.keys(sortFns)[0]) + + screen.getByRole('button', { name: /Asc/i }) + + const detailsPanel = screen.queryByText(/Query Details/i) + expect(detailsPanel).not.toBeInTheDocument() + }) + + it('should initialize sorting values with ones stored in localstorage', async () => { + localStorage.setItem('reactQueryDevtoolsSortDesc', 'true') + localStorage.setItem( + 'reactQueryDevtoolsSortFn', + JSON.stringify(Object.keys(sortFns)[1]) + ) + + const { queryClient } = createQueryClient() + + function Page() { + const { data = 'default' } = useQuery(['check'], async () => { + await sleep(10) + return 'test' + }) + + return ( +
+

{data}

+
+ ) + } + + renderWithClient(queryClient, , { + initialIsOpen: true, + }) + + const sortCombobox: HTMLSelectElement = screen.getByLabelText( + /Sort queries/i + ) + expect(sortCombobox.value).toEqual(Object.keys(sortFns)[1]) + + screen.getByRole('button', { name: /Desc/i }) + }) + + it('should initialize filter value with one stored in localstorage', () => { + localStorage.setItem('reactQueryDevtoolsFilter', JSON.stringify('posts')) + + const { queryClient } = createQueryClient() + + function Page() { + const { data = 'default' } = useQuery(['check'], async () => { + await sleep(10) + return 'test' + }) + + return ( +
+

{data}

+
+ ) + } + + renderWithClient(queryClient, , { + initialIsOpen: true, + }) + + const filterInput: HTMLInputElement = screen.getByLabelText( + /Filter by queryhash/i + ) + expect(filterInput.value).toEqual('posts') + }) + it('style should have a nonce', async () => { const { queryClient } = createQueryClient() diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx index 1590c7a87b..623b5c2d89 100644 --- a/packages/react-query-devtools/src/devtools.tsx +++ b/packages/react-query-devtools/src/devtools.tsx @@ -384,7 +384,7 @@ const getStatusRank = (q: Query) => ? 2 : 1 -const sortFns: Record number> = { +export const sortFns: Record number> = { 'Status > Last Updated': (a, b) => getStatusRank(a) === getStatusRank(b) ? (sortFns['Last Updated']?.(a, b) as number) @@ -441,12 +441,6 @@ export const ReactQueryDevtoolsPanel = React.forwardRef< const sortFn = React.useMemo(() => sortFns[sort as string], [sort]) - React[isServer ? 'useEffect' : 'useLayoutEffect'](() => { - if (!sortFn) { - setSort(Object.keys(sortFns)[0] as string) - } - }, [setSort, sortFn]) - const queriesCount = useSubscribeToQueryCache( queryCache, () => queryCache.getAll().length, From f6d93cc33a267ebd4eefd13128d9827864eb0da3 Mon Sep 17 00:00:00 2001 From: zorzysty Date: Mon, 13 Jun 2022 15:51:22 +0200 Subject: [PATCH 2/3] test(devtools): wrap getByRole queries with explicit expect statements when the returned element is not used for assertions --- packages/react-query-devtools/src/__tests__/devtools.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx index 2ed0efd682..4d80dc9aae 100644 --- a/packages/react-query-devtools/src/__tests__/devtools.test.tsx +++ b/packages/react-query-devtools/src/__tests__/devtools.test.tsx @@ -587,7 +587,7 @@ describe('ReactQueryDevtools', () => { ) expect(sortCombobox.value).toEqual(Object.keys(sortFns)[0]) - screen.getByRole('button', { name: /Asc/i }) + expect(screen.getByRole('button', { name: /Asc/i })).toBeInTheDocument() const detailsPanel = screen.queryByText(/Query Details/i) expect(detailsPanel).not.toBeInTheDocument() @@ -624,7 +624,7 @@ describe('ReactQueryDevtools', () => { ) expect(sortCombobox.value).toEqual(Object.keys(sortFns)[1]) - screen.getByRole('button', { name: /Desc/i }) + expect(screen.getByRole('button', { name: /Desc/i })).toBeInTheDocument() }) it('should initialize filter value with one stored in localstorage', () => { From f50c04c414e66320dc1fcab0cb3475d66f45115e Mon Sep 17 00:00:00 2001 From: zorzysty Date: Sun, 17 Jul 2022 15:10:43 +0200 Subject: [PATCH 3/3] chore(devtools): apply prettier formatting --- .../src/__tests__/devtools.test.tsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx index 4d80dc9aae..d02b4a14c3 100644 --- a/packages/react-query-devtools/src/__tests__/devtools.test.tsx +++ b/packages/react-query-devtools/src/__tests__/devtools.test.tsx @@ -577,14 +577,12 @@ describe('ReactQueryDevtools', () => { initialIsOpen: true, }) - const filterInput: HTMLInputElement = screen.getByLabelText( - /Filter by queryhash/i - ) + const filterInput: HTMLInputElement = + screen.getByLabelText(/Filter by queryhash/i) expect(filterInput.value).toEqual('') - const sortCombobox: HTMLSelectElement = screen.getByLabelText( - /Sort queries/i - ) + const sortCombobox: HTMLSelectElement = + screen.getByLabelText(/Sort queries/i) expect(sortCombobox.value).toEqual(Object.keys(sortFns)[0]) expect(screen.getByRole('button', { name: /Asc/i })).toBeInTheDocument() @@ -597,7 +595,7 @@ describe('ReactQueryDevtools', () => { localStorage.setItem('reactQueryDevtoolsSortDesc', 'true') localStorage.setItem( 'reactQueryDevtoolsSortFn', - JSON.stringify(Object.keys(sortFns)[1]) + JSON.stringify(Object.keys(sortFns)[1]), ) const { queryClient } = createQueryClient() @@ -619,9 +617,8 @@ describe('ReactQueryDevtools', () => { initialIsOpen: true, }) - const sortCombobox: HTMLSelectElement = screen.getByLabelText( - /Sort queries/i - ) + const sortCombobox: HTMLSelectElement = + screen.getByLabelText(/Sort queries/i) expect(sortCombobox.value).toEqual(Object.keys(sortFns)[1]) expect(screen.getByRole('button', { name: /Desc/i })).toBeInTheDocument() @@ -649,9 +646,8 @@ describe('ReactQueryDevtools', () => { initialIsOpen: true, }) - const filterInput: HTMLInputElement = screen.getByLabelText( - /Filter by queryhash/i - ) + const filterInput: HTMLInputElement = + screen.getByLabelText(/Filter by queryhash/i) expect(filterInput.value).toEqual('posts') })