From b9ec780ea6d1897ac9b049129d8af84fc640646b Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 25 May 2026 03:34:02 +0900 Subject: [PATCH 1/6] ci(labeler): remove the labeler workflow and its configuration (#10766) --- .github/workflows/labeler.yml | 20 -------- labeler-config.yml | 87 ----------------------------------- 2 files changed, 107 deletions(-) delete mode 100644 .github/workflows/labeler.yml delete mode 100644 labeler-config.yml diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml deleted file mode 100644 index e92ce68ae59..00000000000 --- a/.github/workflows/labeler.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Labeler - -on: - pull_request: - -permissions: {} - -jobs: - labeler: - name: Labeler - runs-on: ubuntu-latest - permissions: - contents: read - pull-requests: write - steps: - - name: Labeler - uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - configuration-path: labeler-config.yml diff --git a/labeler-config.yml b/labeler-config.yml deleted file mode 100644 index 444b9210acf..00000000000 --- a/labeler-config.yml +++ /dev/null @@ -1,87 +0,0 @@ -'package: angular-query-devtools-experimental': - - changed-files: - - any-glob-to-any-file: 'packages/angular-query-devtools-experimental/**/*' -'package: angular-query-experimental': - - changed-files: - - any-glob-to-any-file: 'packages/angular-query-experimental/**/*' -'package: angular-query-persist-client': - - changed-files: - - any-glob-to-any-file: 'packages/angular-query-persist-client/**/*' -'package: eslint-plugin-query': - - changed-files: - - any-glob-to-any-file: 'packages/eslint-plugin-query/**/*' -'package: lit-query': - - changed-files: - - any-glob-to-any-file: 'packages/lit-query/**/*' -'package: preact-query': - - changed-files: - - any-glob-to-any-file: 'packages/preact-query/**/*' -'package: preact-query-devtools': - - changed-files: - - any-glob-to-any-file: 'packages/preact-query-devtools/**/*' -'package: preact-query-persist-client': - - changed-files: - - any-glob-to-any-file: 'packages/preact-query-persist-client/**/*' -'package: query-async-storage-persister': - - changed-files: - - any-glob-to-any-file: 'packages/query-async-storage-persister/**/*' -'package: query-broadcast-client-experimental': - - changed-files: - - any-glob-to-any-file: 'packages/query-broadcast-client-experimental/**/*' -'package: query-codemods': - - changed-files: - - any-glob-to-any-file: 'packages/query-codemods/**/*' -'package: query-core': - - changed-files: - - any-glob-to-any-file: 'packages/query-core/**/*' -'package: query-devtools': - - changed-files: - - any-glob-to-any-file: 'packages/query-devtools/**/*' -'package: query-persist-client-core': - - changed-files: - - any-glob-to-any-file: 'packages/query-persist-client-core/**/*' -'package: query-sync-storage-persister': - - changed-files: - - any-glob-to-any-file: 'packages/query-sync-storage-persister/**/*' -'package: query-test-utils': - - changed-files: - - any-glob-to-any-file: 'packages/query-test-utils/**/*' -'package: react-query': - - changed-files: - - any-glob-to-any-file: 'packages/react-query/**/*' -'package: react-query-devtools': - - changed-files: - - any-glob-to-any-file: 'packages/react-query-devtools/**/*' -'package: react-query-next-experimental': - - changed-files: - - any-glob-to-any-file: 'packages/react-query-next-experimental/**/*' -'package: react-query-persist-client': - - changed-files: - - any-glob-to-any-file: 'packages/react-query-persist-client/**/*' -'package: solid-query': - - changed-files: - - any-glob-to-any-file: 'packages/solid-query/**/*' -'package: solid-query-devtools': - - changed-files: - - any-glob-to-any-file: 'packages/solid-query-devtools/**/*' -'package: solid-query-persist-client': - - changed-files: - - any-glob-to-any-file: 'packages/solid-query-persist-client/**/*' -'package: svelte-query': - - changed-files: - - any-glob-to-any-file: 'packages/svelte-query/**/*' -'package: svelte-query-devtools': - - changed-files: - - any-glob-to-any-file: 'packages/svelte-query-devtools/**/*' -'package: svelte-query-persist-client': - - changed-files: - - any-glob-to-any-file: 'packages/svelte-query-persist-client/**/*' -'package: vue-query': - - changed-files: - - any-glob-to-any-file: 'packages/vue-query/**/*' -'package: vue-query-devtools': - - changed-files: - - any-glob-to-any-file: 'packages/vue-query-devtools/**/*' -'documentation': - - changed-files: - - any-glob-to-any-file: 'docs/**/*' From bde5a7f3bd224c21a56777fe36d400fae54c777a Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 25 May 2026 12:51:32 +0900 Subject: [PATCH 2/6] test(query-devtools/Explorer): add test for rendering with a 'shadowDOMTarget' (#10782) --- .../src/__tests__/Explorer.test.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/query-devtools/src/__tests__/Explorer.test.tsx b/packages/query-devtools/src/__tests__/Explorer.test.tsx index 9a4940b1c60..816f984b4ee 100644 --- a/packages/query-devtools/src/__tests__/Explorer.test.tsx +++ b/packages/query-devtools/src/__tests__/Explorer.test.tsx @@ -588,4 +588,46 @@ describe('Explorer', () => { ).not.toThrow() }) }) + + describe('"shadowDOMTarget"', () => { + it('should render without throwing when a "shadowDOMTarget" is provided', () => { + const host = document.createElement('div') + document.body.appendChild(host) + const shadowRoot = host.attachShadow({ mode: 'open' }) + const value = { items: ['a'], flag: true } + queryClient.setQueryData(['data'], value) + + try { + expect(() => + render(() => ( + + 'dark'}> + + + + )), + ).not.toThrow() + } finally { + host.remove() + } + }) + }) }) From 04fb3fb8a556f161668f201c5d94b7e33269962f Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 25 May 2026 14:14:01 +0900 Subject: [PATCH 3/6] test(query-devtools/Devtools): add test for PiP panel narrow layout below the second breakpoint (#10784) --- .../src/__tests__/Devtools.test.tsx | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index 864698429c1..ddaa730ec63 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -415,7 +415,11 @@ describe('Devtools', () => { | 'close' > - function stubPipWindow() { + function stubPipWindow( + overrides: Partial< + Pick + > = {}, + ) { const pipDocument = document.implementation.createHTMLDocument('PiP') const listeners = new Map() const fakeWindow: FakePipWindow = { @@ -429,6 +433,7 @@ describe('Devtools', () => { listeners.delete(event) }), close: vi.fn(), + ...overrides, } const open = vi.fn(() => fakeWindow) vi.stubGlobal('open', open) @@ -526,6 +531,27 @@ describe('Devtools', () => { rendered.getByLabelText('Open in picture-in-picture mode'), ).toBeInTheDocument() }) + + it('should render the PiP panel with the narrow layout when the PiP window is below the second breakpoint', () => { + // secondBreakpoint = 796; pick a width comfortably below it so the + // PiP panel evaluates its narrow (`flex-direction: column`) branch. + const { pipDocument } = stubPipWindow({ innerWidth: 500 }) + queryClient.setQueryData(['narrow-pip-query'], { hello: 'world' }) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click( + rendered.getByLabelText('Open in picture-in-picture mode'), + ) + + expect( + pipDocument.querySelector( + '[aria-label="Close Tanstack query devtools"]', + ), + ).not.toBeNull() + expect( + pipDocument.querySelector('[aria-label*="narrow-pip-query"]'), + ).not.toBeNull() + }) }) describe('status counts', () => { From 67e250bb1d1266afdfb7be5b8e57114acc6ddc6b Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 25 May 2026 14:41:18 +0900 Subject: [PATCH 4/6] test(query-devtools/Devtools): add test for rendering without a 'ThemeContext.Provider' (#10785) --- .../src/__tests__/Devtools.test.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index ddaa730ec63..5179c5be01c 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -1516,4 +1516,36 @@ describe('Devtools', () => { ).not.toBeInTheDocument() }) }) + + describe('default theme', () => { + it('should render without throwing when no "ThemeContext.Provider" wraps it', () => { + expect(() => + render(() => { + const [localStore, setLocalStore] = createLocalStorage({ + prefix: 'TanstackQueryDevtools', + }) + return ( + + + + + + ) + }), + ).not.toThrow() + }) + }) }) From 0cfde2a9e8874fcfde04c781c13ec359402a4643 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 25 May 2026 14:59:51 +0900 Subject: [PATCH 5/6] test(query-devtools/Devtools): add assertion for default theme falling back to 'dark' without a 'ThemeContext.Provider' (#10786) --- .../src/__tests__/Devtools.test.tsx | 68 +++++++++++-------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index 5179c5be01c..7aa12fe052a 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -3,7 +3,12 @@ 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' -import { PiPProvider, QueryDevtoolsContext, ThemeContext } from '../contexts' +import { + PiPProvider, + QueryDevtoolsContext, + ThemeContext, + useTheme, +} from '../contexts' import type { QueryDevtoolsProps } from '../contexts' // `solid-transition-group` internally imports from @@ -1518,34 +1523,39 @@ describe('Devtools', () => { }) describe('default theme', () => { - it('should render without throwing when no "ThemeContext.Provider" wraps it', () => { - expect(() => - render(() => { - const [localStore, setLocalStore] = createLocalStorage({ - prefix: 'TanstackQueryDevtools', - }) - return ( - - - - - - ) - }), - ).not.toThrow() + it('should fall back to the "dark" theme when no "ThemeContext.Provider" wraps it', () => { + let resolvedTheme: ReturnType> | undefined + function ThemeProbe() { + const theme = useTheme() + resolvedTheme = theme() + return null + } + + const rendered = render(() => { + const [localStore, setLocalStore] = createLocalStorage({ + prefix: 'TanstackQueryDevtools', + }) + return ( + + + + + + + ) + }) + + expect(resolvedTheme).toBe('dark') + expect( + rendered.getByLabelText('Open Tanstack query devtools'), + ).toBeInTheDocument() }) }) }) From 514c132c1b8580e667463839fdbbcd4e25e007ba Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 25 May 2026 15:35:01 +0900 Subject: [PATCH 6/6] test(query-devtools/contexts/ThemeContext): split 'ThemeContext' tests into a unit test file mirroring the 'src/contexts' structure (#10787) --- .../src/__tests__/Devtools.test.tsx | 44 +------------ .../__tests__/contexts/ThemeContext.test.tsx | 65 +++++++++++++++++++ 2 files changed, 66 insertions(+), 43 deletions(-) create mode 100644 packages/query-devtools/src/__tests__/contexts/ThemeContext.test.tsx diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index 7aa12fe052a..ddaa730ec63 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -3,12 +3,7 @@ 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' -import { - PiPProvider, - QueryDevtoolsContext, - ThemeContext, - useTheme, -} from '../contexts' +import { PiPProvider, QueryDevtoolsContext, ThemeContext } from '../contexts' import type { QueryDevtoolsProps } from '../contexts' // `solid-transition-group` internally imports from @@ -1521,41 +1516,4 @@ describe('Devtools', () => { ).not.toBeInTheDocument() }) }) - - describe('default theme', () => { - it('should fall back to the "dark" theme when no "ThemeContext.Provider" wraps it', () => { - let resolvedTheme: ReturnType> | undefined - function ThemeProbe() { - const theme = useTheme() - resolvedTheme = theme() - return null - } - - const rendered = render(() => { - const [localStore, setLocalStore] = createLocalStorage({ - prefix: 'TanstackQueryDevtools', - }) - return ( - - - - - - - ) - }) - - expect(resolvedTheme).toBe('dark') - expect( - rendered.getByLabelText('Open Tanstack query devtools'), - ).toBeInTheDocument() - }) - }) }) diff --git a/packages/query-devtools/src/__tests__/contexts/ThemeContext.test.tsx b/packages/query-devtools/src/__tests__/contexts/ThemeContext.test.tsx new file mode 100644 index 00000000000..5d0cb2c727e --- /dev/null +++ b/packages/query-devtools/src/__tests__/contexts/ThemeContext.test.tsx @@ -0,0 +1,65 @@ +import { describe, expect, it } from 'vitest' +import { render } from '@solidjs/testing-library' +import { createEffect, createSignal } from 'solid-js' +import { ThemeContext, useTheme } from '../../contexts' + +type Theme = ReturnType> + +function renderThemeProbe(provider?: () => Theme) { + let resolvedTheme: Theme | undefined + function ThemeProbe() { + const theme = useTheme() + resolvedTheme = theme() + return null + } + + render(() => + provider ? ( + + + + ) : ( + + ), + ) + + return resolvedTheme +} + +describe('ThemeContext', () => { + describe('default value', () => { + it('should resolve to "dark" when no "ThemeContext.Provider" wraps the consumer', () => { + expect(renderThemeProbe()).toBe('dark') + }) + }) + + describe('with a "ThemeContext.Provider"', () => { + it('should resolve to the value provided by the "Provider"', () => { + expect(renderThemeProbe(() => 'light')).toBe('light') + expect(renderThemeProbe(() => 'dark')).toBe('dark') + }) + + it('should reflect updates when the "Provider" value is a reactive "Accessor"', () => { + const [theme, setTheme] = createSignal('dark') + let observed: Theme | undefined + function ThemeProbe() { + const resolved = useTheme() + createEffect(() => { + observed = resolved() + }) + return null + } + + render(() => ( + + + + )) + + expect(observed).toBe('dark') + + setTheme('light') + expect(observed).toBe('light') + }) + }) +})