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 ? : }