diff --git a/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx b/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx new file mode 100644 index 000000000..f1df189ef --- /dev/null +++ b/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.test.tsx @@ -0,0 +1,123 @@ +import type { ReactNode } from 'react'; +import { beforeEach, expect, test, vi } from 'vitest'; +import { render, screen } from '@/test/render'; +import { AttributionPage } from './AttributionPage'; + +let mockDateRange = { + startDate: new Date('2026-07-01T00:00:00.000Z'), + endDate: new Date('2026-07-31T23:59:59.999Z'), +}; + +let mockValues = [{ value: 'Sign up' }, { value: 'Purchase' }]; + +beforeEach(() => { + mockDateRange = { + startDate: new Date('2026-07-01T00:00:00.000Z'), + endDate: new Date('2026-07-31T23:59:59.999Z'), + }; + mockValues = [{ value: 'Sign up' }, { value: 'Purchase' }]; +}); + +vi.mock('@umami/react-zen', () => ({ + Column: ({ children }: { children: ReactNode }) =>
{children}
, + Grid: ({ children }: { children: ReactNode }) =>
{children}
, + ListItem: ({ id, children }: { id: string; children: ReactNode }) => ( + + ), + Select: ({ + label, + value, + defaultValue, + placeholder, + onChange, + children, + }: { + label: string; + value?: string; + defaultValue?: string; + placeholder?: string; + onChange?: (value: string) => void; + children: ReactNode; + }) => ( + + ), +})); + +vi.mock('@/components/common/Empty', () => ({ + Empty: () =>
Empty
, +})); + +vi.mock('@/components/hooks', () => ({ + useDateRange: () => ({ + dateRange: mockDateRange, + }), + useMessages: () => ({ + t: (value: string) => value, + labels: { + model: 'Model', + type: 'Type', + conversionStep: 'Conversion Step', + firstClick: 'First Click', + lastClick: 'Last Click', + viewedPage: 'Viewed Page', + triggeredEvent: 'Triggered Event', + }, + }), + useWebsiteValuesQuery: () => ({ + data: mockValues, + isLoading: false, + }), +})); + +vi.mock('@/app/(main)/websites/[websiteId]/WebsiteControls', () => ({ + WebsiteControls: () =>
WebsiteControls
, +})); + +vi.mock('./Attribution', () => ({ + Attribution: ({ step, type }: { step: string; type: string }) => ( +
{`${type}:${step}`}
+ ), +})); + +test('keeps the selected conversion step when the date range refreshes the value list', async () => { + const { rerender, user } = render(); + + await user.selectOptions(screen.getByLabelText('Conversion Step'), 'Purchase'); + + expect(screen.getByLabelText('Conversion Step')).toHaveValue('Purchase'); + expect(screen.getByTestId('attribution-result')).toHaveTextContent('path:Purchase'); + + mockDateRange = { + startDate: new Date('2026-08-01T00:00:00.000Z'), + endDate: new Date('2026-08-31T23:59:59.999Z'), + }; + mockValues = [{ value: 'Sign up' }]; + + rerender(); + + expect(screen.getByLabelText('Conversion Step')).toHaveValue('Purchase'); + expect(screen.getByTestId('attribution-result')).toHaveTextContent('path:Purchase'); +}); + +test('clears the selected conversion step when the attribution type changes', async () => { + const { user } = render(); + + await user.selectOptions(screen.getByLabelText('Conversion Step'), 'Purchase'); + + expect(screen.getByTestId('attribution-result')).toHaveTextContent('path:Purchase'); + + await user.selectOptions(screen.getByLabelText('Type'), 'event'); + + expect(screen.getByLabelText('Conversion Step')).toHaveValue(''); + expect(screen.queryByTestId('attribution-result')).not.toBeInTheDocument(); +}); diff --git a/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx index 358bb1879..96a7d1a74 100644 --- a/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx +++ b/src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx @@ -1,6 +1,6 @@ 'use client'; import { Column, Grid, ListItem, Select } from '@umami/react-zen'; -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls'; import { Empty } from '@/components/common/Empty'; import { useDateRange, useMessages, useWebsiteValuesQuery } from '@/components/hooks'; @@ -25,6 +25,13 @@ export function AttributionPage({ websiteId }: { websiteId: string }) { endDate, }); const items = data?.filter(({ value }) => value) || []; + const stepItems = useMemo(() => { + if (!step || items.some(({ value }) => value === step)) { + return items; + } + + return [{ value: step }, ...items]; + }, [items, step]); const handleTypeChange = (value: any) => { setType(value as string); @@ -71,7 +78,7 @@ export function AttributionPage({ websiteId }: { websiteId: string }) { maxHeight={320} allowSearch > - {items.map(({ value }) => ( + {stepItems.map(({ value }) => ( {value}