diff --git a/packages/solid-query-devtools/src/__tests__/devtools.test.tsx b/packages/solid-query-devtools/src/__tests__/devtools.test.tsx index 5d197d7e75c..f171551b7c8 100644 --- a/packages/solid-query-devtools/src/__tests__/devtools.test.tsx +++ b/packages/solid-query-devtools/src/__tests__/devtools.test.tsx @@ -1,8 +1,15 @@ import { afterEach, describe, expect, it, vi } from 'vitest' +import { createSignal } from 'solid-js' import { render } from '@solidjs/testing-library' import { QueryClient, QueryClientProvider } from '@tanstack/solid-query' import { TanstackQueryDevtools } from '@tanstack/query-devtools' import SolidQueryDevtools from '../devtools' +import type { + DevtoolsButtonPosition, + DevtoolsErrorType, + DevtoolsPosition, + Theme, +} from '@tanstack/query-devtools' describe('SolidQueryDevtools', () => { afterEach(() => { @@ -140,6 +147,101 @@ describe('SolidQueryDevtools', () => { expect(setClient).toHaveBeenCalledWith(queryClient) }) + it('should forward a "buttonPosition" change to the devtools instance after mount', () => { + const setButtonPosition = vi.spyOn( + TanstackQueryDevtools.prototype, + 'setButtonPosition', + ) + const queryClient = new QueryClient() + const [buttonPosition, setButtonPositionSignal] = + createSignal('bottom-right') + + render(() => ( + + )) + setButtonPosition.mockClear() + + setButtonPositionSignal('top-left') + + expect(setButtonPosition).toHaveBeenCalledWith('top-left') + }) + + it('should forward a "position" change to the devtools instance after mount', () => { + const setPosition = vi.spyOn(TanstackQueryDevtools.prototype, 'setPosition') + const queryClient = new QueryClient() + const [position, setPositionSignal] = + createSignal('bottom') + + render(() => ( + + )) + setPosition.mockClear() + + setPositionSignal('top') + + expect(setPosition).toHaveBeenCalledWith('top') + }) + + it('should forward an "initialIsOpen" change to the devtools instance after mount', () => { + const setInitialIsOpen = vi.spyOn( + TanstackQueryDevtools.prototype, + 'setInitialIsOpen', + ) + const queryClient = new QueryClient() + const [initialIsOpen, setInitialIsOpenSignal] = createSignal(false) + + render(() => ( + + )) + setInitialIsOpen.mockClear() + + setInitialIsOpenSignal(true) + + expect(setInitialIsOpen).toHaveBeenCalledWith(true) + }) + + it('should forward an "errorTypes" change to the devtools instance after mount', () => { + const setErrorTypes = vi.spyOn( + TanstackQueryDevtools.prototype, + 'setErrorTypes', + ) + const queryClient = new QueryClient() + const [errorTypes, setErrorTypesSignal] = createSignal< + Array + >([]) + + render(() => ( + + )) + setErrorTypes.mockClear() + + const nextErrorTypes = [ + { name: 'Network', initializer: () => new Error('Network') }, + ] + setErrorTypesSignal(nextErrorTypes) + + expect(setErrorTypes).toHaveBeenCalledWith(nextErrorTypes) + }) + + it('should forward a "theme" change to the devtools instance after mount', () => { + const setTheme = vi.spyOn(TanstackQueryDevtools.prototype, 'setTheme') + const queryClient = new QueryClient() + const [theme, setThemeSignal] = createSignal('light') + + render(() => ) + setTheme.mockClear() + + setThemeSignal('dark') + + expect(setTheme).toHaveBeenCalledWith('dark') + }) + it('should call "unmount" on the devtools instance when the component unmounts', () => { const unmount = vi.spyOn(TanstackQueryDevtools.prototype, 'unmount') const queryClient = new QueryClient()