From 589227986ba27ef039226a8089d697758b04b88d Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Tue, 5 May 2026 21:36:49 +0900 Subject: [PATCH 1/5] test(query-devtools/TanstackQueryDevtools): replace placeholder with 'mount' and 'unmount' lifecycle tests (#10639) --- .../__tests__/TanstackQueryDevtools.test.tsx | 59 +++++++++++++++++++ .../src/__tests__/devtools.test.tsx | 7 --- 2 files changed, 59 insertions(+), 7 deletions(-) create mode 100644 packages/query-devtools/src/__tests__/TanstackQueryDevtools.test.tsx delete mode 100644 packages/query-devtools/src/__tests__/devtools.test.tsx diff --git a/packages/query-devtools/src/__tests__/TanstackQueryDevtools.test.tsx b/packages/query-devtools/src/__tests__/TanstackQueryDevtools.test.tsx new file mode 100644 index 00000000000..01c8969f3ae --- /dev/null +++ b/packages/query-devtools/src/__tests__/TanstackQueryDevtools.test.tsx @@ -0,0 +1,59 @@ +import { beforeEach, describe, expect, it } from 'vitest' +import { QueryClient, onlineManager } from '@tanstack/query-core' +import { TanstackQueryDevtools } from '..' + +describe('TanstackQueryDevtools', () => { + let devtools: TanstackQueryDevtools + + beforeEach(() => { + devtools = new TanstackQueryDevtools({ + client: new QueryClient(), + queryFlavor: 'TanStack Query', + version: '5', + onlineManager, + }) + }) + + describe('mount', () => { + it('should mount devtools to the provided element', () => { + const el = document.createElement('div') + + expect(() => devtools.mount(el)).not.toThrow() + + devtools.unmount() + }) + + it('should throw if mount is called twice without unmount', () => { + const el = document.createElement('div') + devtools.mount(el) + + expect(() => devtools.mount(el)).toThrow('Devtools is already mounted') + + devtools.unmount() + }) + }) + + describe('unmount', () => { + it('should unmount devtools and allow remounting', () => { + const el = document.createElement('div') + devtools.mount(el) + + expect(() => devtools.unmount()).not.toThrow() + expect(() => devtools.mount(el)).not.toThrow() + + devtools.unmount() + }) + + it('should throw if unmount is called before mount', () => { + expect(() => devtools.unmount()).toThrow('Devtools is not mounted') + }) + + it('should throw if unmount is called twice', () => { + const el = document.createElement('div') + devtools.mount(el) + devtools.unmount() + + expect(() => devtools.unmount()).toThrow('Devtools is not mounted') + }) + }) +}) diff --git a/packages/query-devtools/src/__tests__/devtools.test.tsx b/packages/query-devtools/src/__tests__/devtools.test.tsx deleted file mode 100644 index 0e44d74db67..00000000000 --- a/packages/query-devtools/src/__tests__/devtools.test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, expect, it } from 'vitest' - -describe('ReactQueryDevtools', () => { - it('should be able to open and close devtools', () => { - expect(1).toBe(1) - }) -}) From 0d8d64b9efec6c7f1b56a127a155fa4605b511e8 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Tue, 5 May 2026 21:55:25 +0900 Subject: [PATCH 2/5] test(query-devtools/TanstackQueryDevtoolsPanel): add 'mount' and 'unmount' lifecycle tests (#10640) --- .../TanstackQueryDevtoolsPanel.test.tsx | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 packages/query-devtools/src/__tests__/TanstackQueryDevtoolsPanel.test.tsx diff --git a/packages/query-devtools/src/__tests__/TanstackQueryDevtoolsPanel.test.tsx b/packages/query-devtools/src/__tests__/TanstackQueryDevtoolsPanel.test.tsx new file mode 100644 index 00000000000..1993ef67798 --- /dev/null +++ b/packages/query-devtools/src/__tests__/TanstackQueryDevtoolsPanel.test.tsx @@ -0,0 +1,59 @@ +import { beforeEach, describe, expect, it } from 'vitest' +import { QueryClient, onlineManager } from '@tanstack/query-core' +import { TanstackQueryDevtoolsPanel } from '..' + +describe('TanstackQueryDevtoolsPanel', () => { + let devtools: TanstackQueryDevtoolsPanel + + beforeEach(() => { + devtools = new TanstackQueryDevtoolsPanel({ + client: new QueryClient(), + queryFlavor: 'TanStack Query', + version: '5', + onlineManager, + }) + }) + + describe('mount', () => { + it('should mount devtools to the provided element', () => { + const el = document.createElement('div') + + expect(() => devtools.mount(el)).not.toThrow() + + devtools.unmount() + }) + + it('should throw if mount is called twice without unmount', () => { + const el = document.createElement('div') + devtools.mount(el) + + expect(() => devtools.mount(el)).toThrow('Devtools is already mounted') + + devtools.unmount() + }) + }) + + describe('unmount', () => { + it('should unmount devtools and allow remounting', () => { + const el = document.createElement('div') + devtools.mount(el) + + expect(() => devtools.unmount()).not.toThrow() + expect(() => devtools.mount(el)).not.toThrow() + + devtools.unmount() + }) + + it('should throw if unmount is called before mount', () => { + expect(() => devtools.unmount()).toThrow('Devtools is not mounted') + }) + + it('should throw if unmount is called twice', () => { + const el = document.createElement('div') + devtools.mount(el) + devtools.unmount() + + expect(() => devtools.unmount()).toThrow('Devtools is not mounted') + }) + }) +}) From f4a365f6d2a86b351acfd92d09016bc4d7c0d719 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Wed, 6 May 2026 03:03:15 +0900 Subject: [PATCH 3/5] test(query-devtools/utils): add tests for 'getMutationStatusColor' and 'getQueryStatusColorByLabel' (#10645) * test(query-devtools/utils): add tests for 'getMutationStatusColor' and 'getQueryStatusColorByLabel' * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- .../src/__tests__/utils.test.ts | 73 ++++++++++++++++++- 1 file changed, 72 insertions(+), 1 deletion(-) diff --git a/packages/query-devtools/src/__tests__/utils.test.ts b/packages/query-devtools/src/__tests__/utils.test.ts index 60fbcf130ec..7f67f52e2f1 100644 --- a/packages/query-devtools/src/__tests__/utils.test.ts +++ b/packages/query-devtools/src/__tests__/utils.test.ts @@ -1,5 +1,11 @@ import { describe, expect, it } from 'vitest' -import { deleteNestedDataByPath, updateNestedDataByPath } from '../utils' +import { + deleteNestedDataByPath, + getMutationStatusColor, + getQueryStatusColorByLabel, + updateNestedDataByPath, +} from '../utils' +import type { MutationStatus } from '@tanstack/query-core' describe('Utils tests', () => { describe('updatedNestedDataByPath', () => { @@ -729,4 +735,69 @@ describe('Utils tests', () => { }) }) }) + + describe('getMutationStatusColor', () => { + const cases: Array<{ + label: string + status: MutationStatus + isPaused: boolean + expected: string + }> = [ + { + label: 'paused', + status: 'pending', + isPaused: true, + expected: 'purple', + }, + { + label: 'paused even when status is "error"', + status: 'error', + isPaused: true, + expected: 'purple', + }, + { label: '"error"', status: 'error', isPaused: false, expected: 'red' }, + { + label: '"pending"', + status: 'pending', + isPaused: false, + expected: 'yellow', + }, + { + label: '"success"', + status: 'success', + isPaused: false, + expected: 'green', + }, + { label: '"idle"', status: 'idle', isPaused: false, expected: 'gray' }, + ] + + it.each(cases)( + 'should return "$expected" when mutation is $label', + ({ status, isPaused, expected }) => { + expect(getMutationStatusColor({ status, isPaused })).toBe(expected) + }, + ) + }) + + describe('getQueryStatusColorByLabel', () => { + it('should return "green" for "fresh"', () => { + expect(getQueryStatusColorByLabel('fresh')).toBe('green') + }) + + it('should return "yellow" for "stale"', () => { + expect(getQueryStatusColorByLabel('stale')).toBe('yellow') + }) + + it('should return "purple" for "paused"', () => { + expect(getQueryStatusColorByLabel('paused')).toBe('purple') + }) + + it('should return "gray" for "inactive"', () => { + expect(getQueryStatusColorByLabel('inactive')).toBe('gray') + }) + + it('should return "blue" for "fetching"', () => { + expect(getQueryStatusColorByLabel('fetching')).toBe('blue') + }) + }) }) From 3c24bc865e5a058b44e7baea37f3a2dbaa5ed7e0 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Wed, 6 May 2026 03:18:32 +0900 Subject: [PATCH 4/5] test(query-devtools/utils): add tests for 'displayValue' (#10646) --- .../src/__tests__/utils.test.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/query-devtools/src/__tests__/utils.test.ts b/packages/query-devtools/src/__tests__/utils.test.ts index 7f67f52e2f1..019063e6986 100644 --- a/packages/query-devtools/src/__tests__/utils.test.ts +++ b/packages/query-devtools/src/__tests__/utils.test.ts @@ -1,6 +1,7 @@ import { describe, expect, it } from 'vitest' import { deleteNestedDataByPath, + displayValue, getMutationStatusColor, getQueryStatusColorByLabel, updateNestedDataByPath, @@ -800,4 +801,30 @@ describe('Utils tests', () => { expect(getQueryStatusColorByLabel('fetching')).toBe('blue') }) }) + + describe('displayValue', () => { + it('should stringify a primitive value', () => { + expect(displayValue('hello')).toBe('"hello"') + }) + + it('should stringify a number', () => { + expect(displayValue(42)).toBe('42') + }) + + it('should serialize an object using superjson and discard meta', () => { + expect(displayValue({ a: 1, b: 'two' })).toBe('{"a":1,"b":"two"}') + }) + + it('should return "null" for "undefined" since only the json part is used', () => { + expect(displayValue(undefined)).toBe('null') + }) + + it('should return a single-line string by default', () => { + expect(displayValue({ a: 1 })).toBe('{"a":1}') + }) + + it('should return an indented multi-line string when "beautify" is true', () => { + expect(displayValue({ a: 1 }, true)).toBe('{\n "a": 1\n}') + }) + }) }) From 8a5d1897bf363b0186074d75e260ec5ef43f8156 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Wed, 6 May 2026 03:35:51 +0900 Subject: [PATCH 5/5] test(query-devtools/utils): add tests for 'getSidedProp' (#10647) --- .../src/__tests__/utils.test.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/query-devtools/src/__tests__/utils.test.ts b/packages/query-devtools/src/__tests__/utils.test.ts index 019063e6986..1c30c5e9182 100644 --- a/packages/query-devtools/src/__tests__/utils.test.ts +++ b/packages/query-devtools/src/__tests__/utils.test.ts @@ -4,6 +4,7 @@ import { displayValue, getMutationStatusColor, getQueryStatusColorByLabel, + getSidedProp, updateNestedDataByPath, } from '../utils' import type { MutationStatus } from '@tanstack/query-core' @@ -827,4 +828,22 @@ describe('Utils tests', () => { expect(displayValue({ a: 1 }, true)).toBe('{\n "a": 1\n}') }) }) + + describe('getSidedProp', () => { + it('should append capitalized "top" to the prop', () => { + expect(getSidedProp('margin', 'top')).toBe('marginTop') + }) + + it('should append capitalized "bottom" to the prop', () => { + expect(getSidedProp('margin', 'bottom')).toBe('marginBottom') + }) + + it('should append capitalized "left" to the prop', () => { + expect(getSidedProp('padding', 'left')).toBe('paddingLeft') + }) + + it('should append capitalized "right" to the prop', () => { + expect(getSidedProp('padding', 'right')).toBe('paddingRight') + }) + }) })