dify/web/hooks/use-query-params.spec.tsx

648 lines
19 KiB
TypeScript

import type { UrlUpdateEvent } from 'nuqs/adapters/testing'
import type { ReactNode } from 'react'
import { act, renderHook, waitFor } from '@testing-library/react'
import { NuqsTestingAdapter } from 'nuqs/adapters/testing'
import { ACCOUNT_SETTING_MODAL_ACTION } from '@/app/components/header/account-setting/constants'
import {
clearQueryParams,
PRICING_MODAL_QUERY_PARAM,
PRICING_MODAL_QUERY_VALUE,
useAccountSettingModal,
useMarketplaceFilters,
usePluginInstallation,
usePricingModal,
} from './use-query-params'
const renderWithAdapter = <T,>(hook: () => T, searchParams = '') => {
const onUrlUpdate = vi.fn<(event: UrlUpdateEvent) => void>()
const wrapper = ({ children }: { children: ReactNode }) => (
<NuqsTestingAdapter searchParams={searchParams} onUrlUpdate={onUrlUpdate}>
{children}
</NuqsTestingAdapter>
)
const { result } = renderHook(hook, { wrapper })
return { result, onUrlUpdate }
}
// Query param hooks: defaults, parsing, and URL sync behavior.
describe('useQueryParams hooks', () => {
beforeEach(() => {
vi.clearAllMocks()
})
// Pricing modal query behavior.
describe('usePricingModal', () => {
it('should return closed state when query param is missing', () => {
// Arrange
const { result } = renderWithAdapter(() => usePricingModal())
// Act
const [isOpen] = result.current
// Assert
expect(isOpen).toBe(false)
})
it('should return open state when query param matches open value', () => {
// Arrange
const { result } = renderWithAdapter(
() => usePricingModal(),
`?${PRICING_MODAL_QUERY_PARAM}=${PRICING_MODAL_QUERY_VALUE}`,
)
// Act
const [isOpen] = result.current
// Assert
expect(isOpen).toBe(true)
})
it('should return closed state when query param has unexpected value', () => {
// Arrange
const { result } = renderWithAdapter(
() => usePricingModal(),
`?${PRICING_MODAL_QUERY_PARAM}=closed`,
)
// Act
const [isOpen] = result.current
// Assert
expect(isOpen).toBe(false)
})
it('should set pricing param when opening', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => usePricingModal())
// Act
act(() => {
result.current[1](true)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get(PRICING_MODAL_QUERY_PARAM)).toBe(PRICING_MODAL_QUERY_VALUE)
})
it('should use push history when opening', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => usePricingModal())
// Act
act(() => {
result.current[1](true)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('push')
})
it('should clear pricing param when closing', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => usePricingModal(),
`?${PRICING_MODAL_QUERY_PARAM}=${PRICING_MODAL_QUERY_VALUE}`,
)
// Act
act(() => {
result.current[1](false)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has(PRICING_MODAL_QUERY_PARAM)).toBe(false)
})
it('should use push history when closing', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => usePricingModal(),
`?${PRICING_MODAL_QUERY_PARAM}=${PRICING_MODAL_QUERY_VALUE}`,
)
// Act
act(() => {
result.current[1](false)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('push')
})
it('should respect explicit history options when provided', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => usePricingModal())
// Act
act(() => {
result.current[1](true, { history: 'replace' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('replace')
})
})
// Account settings modal query behavior.
describe('useAccountSettingModal', () => {
it('should return closed state with null payload when query params are missing', () => {
// Arrange
const { result } = renderWithAdapter(() => useAccountSettingModal())
// Act
const [state] = result.current
// Assert
expect(state.isOpen).toBe(false)
expect(state.payload).toBeNull()
})
it('should return open state when action matches', () => {
// Arrange
const { result } = renderWithAdapter(
() => useAccountSettingModal(),
`?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
)
// Act
const [state] = result.current
// Assert
expect(state.isOpen).toBe(true)
expect(state.payload).toBe('billing')
})
it('should return closed state when action does not match', () => {
// Arrange
const { result } = renderWithAdapter(
() => useAccountSettingModal(),
'?action=other&tab=billing',
)
// Act
const [state] = result.current
// Assert
expect(state.isOpen).toBe(false)
expect(state.payload).toBeNull()
})
it('should set action and tab when opening', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => useAccountSettingModal())
// Act
act(() => {
result.current[1]({ payload: 'members' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('action')).toBe(ACCOUNT_SETTING_MODAL_ACTION)
expect(update.searchParams.get('tab')).toBe('members')
})
it('should use push history when opening from closed state', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => useAccountSettingModal())
// Act
act(() => {
result.current[1]({ payload: 'members' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('push')
})
it('should update tab when switching while open', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useAccountSettingModal(),
`?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
)
// Act
act(() => {
result.current[1]({ payload: 'provider' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('tab')).toBe('provider')
})
it('should use replace history when switching tabs while open', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useAccountSettingModal(),
`?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
)
// Act
act(() => {
result.current[1]({ payload: 'provider' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('replace')
})
it('should clear action and tab when closing', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useAccountSettingModal(),
`?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
)
// Act
act(() => {
result.current[1](null)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('action')).toBe(false)
expect(update.searchParams.has('tab')).toBe(false)
})
it('should use replace history when closing', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useAccountSettingModal(),
`?action=${ACCOUNT_SETTING_MODAL_ACTION}&tab=billing`,
)
// Act
act(() => {
result.current[1](null)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('replace')
})
})
// Marketplace filters query behavior.
describe('useMarketplaceFilters', () => {
it('should return default filters when query params are missing', () => {
// Arrange
const { result } = renderWithAdapter(() => useMarketplaceFilters())
// Act
const [filters] = result.current
// Assert
expect(filters.q).toBe('')
expect(filters.category).toBe('all')
expect(filters.tags).toEqual([])
})
it('should parse filters when query params are present', () => {
// Arrange
const { result } = renderWithAdapter(
() => useMarketplaceFilters(),
'?q=prompt&category=tool&tags=ai,ml',
)
// Act
const [filters] = result.current
// Assert
expect(filters.q).toBe('prompt')
expect(filters.category).toBe('tool')
expect(filters.tags).toEqual(['ai', 'ml'])
})
it('should treat empty tags param as empty array', () => {
// Arrange
const { result } = renderWithAdapter(
() => useMarketplaceFilters(),
'?tags=',
)
// Act
const [filters] = result.current
// Assert
expect(filters.tags).toEqual([])
})
it('should preserve other filters when updating a single field', async () => {
// Arrange
const { result } = renderWithAdapter(
() => useMarketplaceFilters(),
'?category=tool&tags=ai,ml',
)
// Act
act(() => {
result.current[1]({ q: 'search' })
})
// Assert
await waitFor(() => expect(result.current[0].q).toBe('search'))
expect(result.current[0].category).toBe('tool')
expect(result.current[0].tags).toEqual(['ai', 'ml'])
})
it('should clear q param when q is empty', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useMarketplaceFilters(),
'?q=search',
)
// Act
act(() => {
result.current[1]({ q: '' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('q')).toBe(false)
})
it('should serialize tags as comma-separated values', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => useMarketplaceFilters())
// Act
act(() => {
result.current[1]({ tags: ['ai', 'ml'] })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('tags')).toBe('ai,ml')
})
it('should remove tags param when list is empty', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useMarketplaceFilters(),
'?tags=ai,ml',
)
// Act
act(() => {
result.current[1]({ tags: [] })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('tags')).toBe(false)
})
it('should keep category in the URL when set to default', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useMarketplaceFilters(),
'?category=tool',
)
// Act
act(() => {
result.current[1]({ category: 'all' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('category')).toBe('all')
})
it('should clear all marketplace filters when set to null', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(
() => useMarketplaceFilters(),
'?q=search&category=tool&tags=ai,ml',
)
// Act
act(() => {
result.current[1](null)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('q')).toBe(false)
expect(update.searchParams.has('category')).toBe(false)
expect(update.searchParams.has('tags')).toBe(false)
})
it('should use replace history when updating filters', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => useMarketplaceFilters())
// Act
act(() => {
result.current[1]({ q: 'search' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.options.history).toBe('replace')
})
})
// Plugin installation query behavior.
describe('usePluginInstallation', () => {
it('should parse package ids from JSON arrays', () => {
// Arrange
const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
const { result } = renderWithAdapter(
() => usePluginInstallation(),
`?package-ids=%5B%22org%2Fplugin%22%5D&bundle-info=${encodeURIComponent(JSON.stringify(bundleInfo))}`,
)
// Act
const [state] = result.current
// Assert
expect(state.packageId).toBe('org/plugin')
expect(state.bundleInfo).toEqual(bundleInfo)
})
it('should return raw package id when JSON parsing fails', () => {
// Arrange
const { result } = renderWithAdapter(
() => usePluginInstallation(),
'?package-ids=org/plugin',
)
// Act
const [state] = result.current
// Assert
expect(state.packageId).toBe('org/plugin')
})
it('should return raw package id when JSON is not an array', () => {
// Arrange
const { result } = renderWithAdapter(
() => usePluginInstallation(),
'?package-ids=%22org%2Fplugin%22',
)
// Act
const [state] = result.current
// Assert
expect(state.packageId).toBe('"org/plugin"')
})
it('should write package ids as JSON arrays when setting packageId', async () => {
// Arrange
const { result, onUrlUpdate } = renderWithAdapter(() => usePluginInstallation())
// Act
act(() => {
result.current[1]({ packageId: 'org/plugin' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('package-ids')).toBe('["org/plugin"]')
})
it('should set bundle info when provided', async () => {
// Arrange
const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
const { result, onUrlUpdate } = renderWithAdapter(() => usePluginInstallation())
// Act
act(() => {
result.current[1]({ bundleInfo })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('bundle-info')).toBe(JSON.stringify(bundleInfo))
})
it('should clear installation params when state is null', async () => {
// Arrange
const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
const { result, onUrlUpdate } = renderWithAdapter(
() => usePluginInstallation(),
`?package-ids=%5B%22org%2Fplugin%22%5D&bundle-info=${encodeURIComponent(JSON.stringify(bundleInfo))}`,
)
// Act
act(() => {
result.current[1](null)
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.has('package-ids')).toBe(false)
expect(update.searchParams.has('bundle-info')).toBe(false)
})
it('should preserve bundle info when only packageId is updated', async () => {
// Arrange
const bundleInfo = { org: 'org', name: 'bundle', version: '1.0.0' }
const { result, onUrlUpdate } = renderWithAdapter(
() => usePluginInstallation(),
`?bundle-info=${encodeURIComponent(JSON.stringify(bundleInfo))}`,
)
// Act
act(() => {
result.current[1]({ packageId: 'org/plugin' })
})
// Assert
await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
expect(update.searchParams.get('bundle-info')).toBe(JSON.stringify(bundleInfo))
})
})
})
// Utility to clear query params from the current URL.
describe('clearQueryParams', () => {
beforeEach(() => {
vi.clearAllMocks()
window.history.replaceState(null, '', '/')
})
afterEach(() => {
vi.unstubAllGlobals()
})
it('should remove a single key when provided one key', () => {
// Arrange
const replaceSpy = vi.spyOn(window.history, 'replaceState')
window.history.pushState(null, '', '/?foo=1&bar=2')
// Act
clearQueryParams('foo')
// Assert
expect(replaceSpy).toHaveBeenCalled()
const params = new URLSearchParams(window.location.search)
expect(params.has('foo')).toBe(false)
expect(params.get('bar')).toBe('2')
replaceSpy.mockRestore()
})
it('should remove multiple keys when provided an array', () => {
// Arrange
const replaceSpy = vi.spyOn(window.history, 'replaceState')
window.history.pushState(null, '', '/?foo=1&bar=2&baz=3')
// Act
clearQueryParams(['foo', 'baz'])
// Assert
expect(replaceSpy).toHaveBeenCalled()
const params = new URLSearchParams(window.location.search)
expect(params.has('foo')).toBe(false)
expect(params.has('baz')).toBe(false)
expect(params.get('bar')).toBe('2')
replaceSpy.mockRestore()
})
it('should no-op when window is undefined', () => {
// Arrange
const replaceSpy = vi.spyOn(window.history, 'replaceState')
vi.stubGlobal('window', undefined)
// Act
expect(() => clearQueryParams('foo')).not.toThrow()
// Assert
expect(replaceSpy).not.toHaveBeenCalled()
replaceSpy.mockRestore()
})
})