From e9272fe391b67b7b8b2bf6ff466b207dbc04c06f Mon Sep 17 00:00:00 2001 From: "sentry-autofix[bot]" <157164994+sentry-autofix[bot]@users.noreply.github.com> Date: Sun, 23 Mar 2025 04:45:56 +0000 Subject: [PATCH] fix: handle undefined card titles in card modal header --- .../components/card-modal-header.test.tsx | 65 +++++++++++++++++++ components/modals/card-modal/header.tsx | 2 +- components/modals/card-modal/index.tsx | 6 +- 3 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 __tests__/components/card-modal-header.test.tsx diff --git a/__tests__/components/card-modal-header.test.tsx b/__tests__/components/card-modal-header.test.tsx new file mode 100644 index 0000000..86ccc3b --- /dev/null +++ b/__tests__/components/card-modal-header.test.tsx @@ -0,0 +1,65 @@ +import { render, screen } from '@testing-library/react'; +import { Header } from '@/components/modals/card-modal/header'; + +// Mock the necessary hooks and components +jest.mock('@/hooks/use-action', () => ({ + useAction: () => ({ + execute: jest.fn(), + }), +})); + +jest.mock('next/navigation', () => ({ + useParams: () => ({ + boardId: 'test-board-id', + }), +})); + +jest.mock('@tanstack/react-query', () => ({ + useQueryClient: jest.fn(() => ({ + invalidateQueries: jest.fn(), + })), +})); + +describe('Card Modal Header Component', () => { + it('should render with valid data', () => { + const mockData = { + id: 'test-card-id', + title: 'Test Card Title', + list: { + id: 'test-list-id', + title: 'Test List Title', + }, + }; + + render(
); + + const titleInput = screen.getByDisplayValue('Test Card Title'); + expect(titleInput).toBeInTheDocument(); + + const listText = screen.getByText(/in list/i); + expect(listText).toBeInTheDocument(); + expect(screen.getByText('Test List Title')).toBeInTheDocument(); + }); + + it('should handle undefined title gracefully', () => { + // Create a mock data object without a title + const mockData = { + id: 'test-card-id', + list: { + id: 'test-list-id', + title: 'Test List Title', + }, + }; + + // @ts-ignore - Intentionally passing incorrect data to test the fix + render(
); + + // Should render with empty title + const titleInput = screen.getByRole('textbox', { name: /title/i }); + expect(titleInput).toBeInTheDocument(); + expect(titleInput).toHaveValue(''); + + // List title should still be displayed + expect(screen.getByText('Test List Title')).toBeInTheDocument(); + }); +}); \ No newline at end of file diff --git a/components/modals/card-modal/header.tsx b/components/modals/card-modal/header.tsx index b70f9e9..3f3c160 100644 --- a/components/modals/card-modal/header.tsx +++ b/components/modals/card-modal/header.tsx @@ -40,7 +40,7 @@ export const Header = ({ data }: HeaderProps) => { const inputRef = useRef(null); - const [title, setTitle] = useState(data.title); + const [title, setTitle] = useState(data?.title || ''); const onBlur = () => { inputRef.current?.form?.requestSubmit(); diff --git a/components/modals/card-modal/index.tsx b/components/modals/card-modal/index.tsx index 5b826b3..4a554ae 100644 --- a/components/modals/card-modal/index.tsx +++ b/components/modals/card-modal/index.tsx @@ -19,14 +19,16 @@ export const CardModal = () => { const isOpen = useCardModal((state) => state.isOpen); const onClose = useCardModal((state) => state.onClose); - const { data: cardData } = useQuery({ + const { data: cardData, isLoading } = useQuery({ queryKey: ['card', id], queryFn: () => fetcher(`/api/cards/${id}`), + enabled: !!id, // Only run the query when ID exists }); const { data: auditLogsData } = useQuery({ queryKey: ['card-logs', id], queryFn: () => fetcher(`/api/cards/${id}/logs`), + enabled: !!id, // Only run the query when ID exists }); return ( @@ -35,7 +37,7 @@ export const CardModal = () => { Card Data Panel - {!cardData ? :
} + {!cardData || !cardData.title ? :
}