diff --git a/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx b/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx index df994a3d3..7cce131fe 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx @@ -101,6 +101,7 @@ vi.mock('@/components/input/WebsiteValueComboBox', () => ({ {label} onChange?.(event.currentTarget.value)} + > + {children} + + + ), + }; +}); + +vi.mock('@/components/hooks', () => ({ + useDateRange: () => ({ + dateRange: mockDateRange, + }), + useMessages: () => ({ + t: (value: string) => value, + labels: { + all: 'All', + views: 'Views', + events: 'Events', + steps: 'Steps', + startStep: 'Start Step', + endStep: 'End Step', + }, + }), +})); + +vi.mock('@/app/(main)/websites/[websiteId]/WebsiteControls', () => ({ + WebsiteControls: () =>
WebsiteControls
, +})); + +vi.mock('@/components/common/Panel', () => ({ + Panel: ({ children }: { children: ReactNode }) =>
{children}
, +})); + +vi.mock('@/components/input/FilterButtons', () => ({ + FilterButtons: ({ + items, + value, + onChange, + }: { + items: { id: string; label: string }[]; + value: string; + onChange: (value: string) => void; + }) => ( +
+ {items.map(item => ( + + ))} +
+ ), +})); + +vi.mock('@/components/input/WebsiteValueComboBox', () => ({ + WebsiteValueComboBox: ({ + label, + value, + onChange, + }: { + label: string; + value: string; + onChange: (value: string) => void; + }) => ( + + ), +})); + +vi.mock('./Journey', () => ({ + Journey: ({ + startDate, + endDate, + steps, + startStep, + endStep, + view, + }: { + startDate: Date; + endDate: Date; + steps: number; + startStep: string; + endStep: string; + view: string; + }) => ( +
+ {JSON.stringify({ + startDate: startDate.toISOString(), + endDate: endDate.toISOString(), + steps, + startStep, + endStep, + view, + })} +
+ ), +})); + +test('keeps the selected journey params when the date range refreshes the value list', async () => { + const { rerender, user } = render(); + + await user.selectOptions(screen.getByLabelText('Steps'), '5'); + await user.selectOptions(screen.getByLabelText('Start Step'), '/signup'); + await user.selectOptions(screen.getByLabelText('End Step'), 'Purchase'); + await user.click(screen.getByRole('button', { name: 'Events' })); + + expect(screen.getByLabelText('Steps')).toHaveValue('5'); + expect(screen.getByLabelText('Start Step')).toHaveValue('/signup'); + expect(screen.getByLabelText('End Step')).toHaveValue('Purchase'); + expect(screen.getByRole('button', { name: 'Events' })).toHaveAttribute('aria-pressed', 'true'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"steps":5'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"startStep":"/signup"'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"endStep":"Purchase"'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"view":"events"'); + expect(screen.getByTestId('journey-result')).toHaveTextContent( + '"startDate":"2026-07-01T00:00:00.000Z"', + ); + + mockDateRange = { + startDate: new Date('2026-08-01T00:00:00.000Z'), + endDate: new Date('2026-08-31T23:59:59.999Z'), + }; + mockValues = [{ value: '/pricing' }]; + + rerender(); + + expect(screen.getByLabelText('Steps')).toHaveValue('5'); + expect(screen.getByLabelText('Start Step')).toHaveValue('/signup'); + expect(screen.getByLabelText('End Step')).toHaveValue('Purchase'); + expect(screen.getByRole('button', { name: 'Events' })).toHaveAttribute('aria-pressed', 'true'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"steps":5'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"startStep":"/signup"'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"endStep":"Purchase"'); + expect(screen.getByTestId('journey-result')).toHaveTextContent('"view":"events"'); + expect(screen.getByTestId('journey-result')).toHaveTextContent( + '"startDate":"2026-08-01T00:00:00.000Z"', + ); + expect(screen.getByTestId('journey-result')).toHaveTextContent( + '"endDate":"2026-08-31T23:59:59.999Z"', + ); +});