From e89d3d04229db05289d9990ca037af827c8b027d Mon Sep 17 00:00:00 2001 From: Jordan Lawrence Date: Fri, 30 Aug 2024 15:17:56 +0100 Subject: [PATCH] tests(router): reworking sticky params to support mocked testing --- .../sanity/src/router/IntentLink.test.tsx | 22 +++++++++++-------- packages/sanity/src/router/RouterProvider.tsx | 10 ++++----- packages/sanity/src/router/stickyParams.ts | 1 + 3 files changed, 19 insertions(+), 14 deletions(-) create mode 100644 packages/sanity/src/router/stickyParams.ts diff --git a/packages/sanity/src/router/IntentLink.test.tsx b/packages/sanity/src/router/IntentLink.test.tsx index 91ba9340783..008ca2f0042 100644 --- a/packages/sanity/src/router/IntentLink.test.tsx +++ b/packages/sanity/src/router/IntentLink.test.tsx @@ -1,4 +1,4 @@ -import {describe, expect, it} from '@jest/globals' +import {describe, expect, it, jest} from '@jest/globals' import {render} from '@testing-library/react' import {noop} from 'lodash' @@ -6,6 +6,10 @@ import {IntentLink} from './IntentLink' import {route} from './route' import {RouterProvider} from './RouterProvider' +jest.mock('./stickyParams', () => ({ + STICKY_PARAMS: ['aTestStickyParam'], +})) + describe('IntentLink', () => { it('should resolve intent link with query params', () => { const router = route.create('/test', [route.intents('/intent')]) @@ -16,7 +20,7 @@ describe('IntentLink', () => { id: 'document-id-123', type: 'document-type', }} - searchParams={[['perspective', `bundle.summer-drop`]]} + searchParams={[['aTestStickyParam', `aStickyParam.value`]]} />, { wrapper: ({children}) => ( @@ -28,7 +32,7 @@ describe('IntentLink', () => { ) // Component should render the query param in the href expect(component.container.querySelector('a')?.href).toContain( - '/test/intent/edit/id=document-id-123;type=document-type/?perspective=bundle.summer-drop', + '/test/intent/edit/id=document-id-123;type=document-type/?aTestStickyParam=aStickyParam.value', ) }) @@ -48,7 +52,7 @@ describe('IntentLink', () => { onNavigate={noop} router={router} state={{ - _searchParams: [['perspective', 'bundle.summer-drop']], + _searchParams: [['aTestStickyParam', 'aStickyParam.value']], }} > {children} @@ -58,7 +62,7 @@ describe('IntentLink', () => { ) // Component should render the query param in the href expect(component.container.querySelector('a')?.href).toContain( - '/test/intent/edit/id=document-id-123;type=document-type/?perspective=bundle.summer-drop', + '/test/intent/edit/id=document-id-123;type=document-type/?aTestStickyParam=aStickyParam.value', ) }) @@ -71,7 +75,7 @@ describe('IntentLink', () => { id: 'document-id-123', type: 'document-type', }} - searchParams={[['perspective', `bundle.autumn-drop`]]} + searchParams={[['aTestStickyParam', `aStickyParam.value.to-be-defined`]]} />, { wrapper: ({children}) => ( @@ -79,7 +83,7 @@ describe('IntentLink', () => { onNavigate={noop} router={router} state={{ - _searchParams: [['perspective', 'bundle.summer-drop']], + _searchParams: [['aTestStickyParam', 'aStickyParam.value.to-be-overridden']], }} > {children} @@ -89,10 +93,10 @@ describe('IntentLink', () => { ) // Component should render the query param in the href expect(component.container.querySelector('a')?.href).toContain( - '/test/intent/edit/id=document-id-123;type=document-type/?perspective=bundle.autumn-drop', + '/test/intent/edit/id=document-id-123;type=document-type/?aTestStickyParam=aStickyParam.value.to-be-defined', ) expect(component.container.querySelector('a')?.href).not.toContain( - 'perspective=bundle.summer-drop', + 'aTestStickyParam=aStickyParam.value.to-be-overridden', ) }) }) diff --git a/packages/sanity/src/router/RouterProvider.tsx b/packages/sanity/src/router/RouterProvider.tsx index 78e4593ef8d..4b819bff1a4 100644 --- a/packages/sanity/src/router/RouterProvider.tsx +++ b/packages/sanity/src/router/RouterProvider.tsx @@ -2,6 +2,7 @@ import {fromPairs, partition, toPairs} from 'lodash' import {type ReactElement, type ReactNode, useCallback, useMemo} from 'react' import {RouterContext} from 'sanity/_singletons' +import {STICKY_PARAMS} from './stickyParams' import { type IntentParameters, type NavigateOptions, @@ -89,7 +90,7 @@ export function RouterProvider(props: RouterProviderProps): ReactElement { params, payload, _searchParams: toPairs({ - ...fromPairs((state._searchParams ?? []).filter(([key]) => STICKY.includes(key))), + ...fromPairs((state._searchParams ?? []).filter(([key]) => STICKY_PARAMS.includes(key))), ...fromPairs(_searchParams ?? []), }), }) @@ -101,7 +102,7 @@ export function RouterProvider(props: RouterProviderProps): ReactElement { (nextState: RouterState): string => { const currentStateParams = state._searchParams || [] const nextStateParams = nextState._searchParams || [] - const nextParams = STICKY.reduce((acc, param) => { + const nextParams = STICKY_PARAMS.reduce((acc, param) => { return replaceStickyParam( acc, param, @@ -119,7 +120,7 @@ export function RouterProvider(props: RouterProviderProps): ReactElement { const handleNavigateStickyParam = useCallback( (param: string, value: string | undefined, options: NavigateOptions = {}) => { - if (!STICKY.includes(param)) { + if (!STICKY_PARAMS.includes(param)) { throw new Error('Parameter is not sticky') } onNavigate({ @@ -152,7 +153,7 @@ export function RouterProvider(props: RouterProviderProps): ReactElement { return [state, null] } const {_searchParams, ...rest} = state - const [sticky, restParams] = partition(_searchParams, ([key]) => STICKY.includes(key)) + const [sticky, restParams] = partition(_searchParams, ([key]) => STICKY_PARAMS.includes(key)) if (sticky.length === 0) { return [state, null] } @@ -184,7 +185,6 @@ export function RouterProvider(props: RouterProviderProps): ReactElement { return {props.children} } -const STICKY: string[] = [] function replaceStickyParam( current: SearchParam[], diff --git a/packages/sanity/src/router/stickyParams.ts b/packages/sanity/src/router/stickyParams.ts new file mode 100644 index 00000000000..577e1874654 --- /dev/null +++ b/packages/sanity/src/router/stickyParams.ts @@ -0,0 +1 @@ +export const STICKY_PARAMS: string[] = []