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/**/*' 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', () => { 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() + } + }) + }) }) 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') + }) + }) +})