test(query-devtools/contexts/ThemeContext): split 'ThemeContext' tests into a unit test file mirroring the 'src/contexts' structure (TanStack#10787)

Author: sukvvon

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<ReturnType<typeof useTheme>> | undefined
-      function ThemeProbe() {
-        const theme = useTheme()
-        resolvedTheme = theme()
-        return null
-      }
-
-      const rendered = render(() => {
-        const [localStore, setLocalStore] = createLocalStorage({
-          prefix: 'TanstackQueryDevtools',
-        })
-        return (
-          <QueryDevtoolsContext.Provider
-            value={{
-              client: queryClient,
-              queryFlavor: 'TanStack Query',
-              version: '5',
-              onlineManager,
-            }}
-          >
-            <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
-              <Devtools localStore={localStore} setLocalStore={setLocalStore} />
-              <ThemeProbe />
-            </PiPProvider>
-          </QueryDevtoolsContext.Provider>
-        )
-      })
-
-      expect(resolvedTheme).toBe('dark')
-      expect(
-        rendered.getByLabelText('Open Tanstack query devtools'),
-      ).toBeInTheDocument()
-    })
-  })
 })

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<ReturnType<typeof useTheme>>
+
+function renderThemeProbe(provider?: () => Theme) {
+  let resolvedTheme: Theme | undefined
+  function ThemeProbe() {
+    const theme = useTheme()
+    resolvedTheme = theme()
+    return null
+  }
+
+  render(() =>
+    provider ? (
+      <ThemeContext.Provider value={provider}>
+        <ThemeProbe />
+      </ThemeContext.Provider>
+    ) : (
+      <ThemeProbe />
+    ),
+  )
+
+  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<Theme>('dark')
+      let observed: Theme | undefined
+      function ThemeProbe() {
+        const resolved = useTheme()
+        createEffect(() => {
+          observed = resolved()
+        })
+        return null
+      }
+
+      render(() => (
+        <ThemeContext.Provider value={theme}>
+          <ThemeProbe />
+        </ThemeContext.Provider>
+      ))
+
+      expect(observed).toBe('dark')
+
+      setTheme('light')
+      expect(observed).toBe('light')
+    })
+  })
+})