From aea5bcd546785d34923d2b4533b79f5f4c5a09bd Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Mon, 29 Jun 2026 11:08:17 +0900
Subject: [PATCH] test(angular-query/devtools): add test for reactive 'theme'
 update

---
 .../src/__tests__/with-devtools.test.ts       | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/angular-query-experimental/src/__tests__/with-devtools.test.ts b/packages/angular-query-experimental/src/__tests__/with-devtools.test.ts
index 6907186a92..47ce117344 100644
--- a/packages/angular-query-experimental/src/__tests__/with-devtools.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/with-devtools.test.ts
@@ -17,6 +17,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { DevtoolsOptions } from '../devtools'
 
@@ -28,6 +29,7 @@ const mockDevtoolsInstance = {
   setErrorTypes: vi.fn(),
   setButtonPosition: vi.fn(),
   setInitialIsOpen: vi.fn(),
+  setTheme: vi.fn(),
 }
 
 function MockTanstackQueryDevtools() {
@@ -433,6 +435,38 @@ describe('withDevtools feature', () => {
     expect(mockDevtoolsInstance.setInitialIsOpen).toHaveBeenCalledWith(true)
   })
 
+  it('should update theme', async () => {
+    const theme = signal<Theme>('system')
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTanStackQuery(
+          new QueryClient(),
+          withDevtools(() => ({
+            loadDevtools: true,
+            theme: theme(),
+          })),
+        ),
+      ],
+    })
+
+    TestBed.inject(ENVIRONMENT_INITIALIZER)
+    await vi.advanceTimersByTimeAsync(0)
+    await vi.dynamicImportSettled()
+
+    TestBed.tick()
+
+    expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(0)
+
+    theme.set('dark')
+
+    TestBed.tick()
+
+    expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledTimes(1)
+    expect(mockDevtoolsInstance.setTheme).toHaveBeenCalledWith('dark')
+  })
+
   it('should destroy devtools', async () => {
     const loadDevtools = signal(true)