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 ? :
}
diff --git a/package.json b/package.json index 50f117a..af81798 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ }, "dependencies": { "@arcjet/next": "^1.0.0-beta.4", - "@clerk/nextjs": "^6.12.6", - "@clerk/themes": "^2.2.23", + "@clerk/nextjs": "^6.12.12", + "@clerk/themes": "^2.2.26", "@hello-pangea/dnd": "^18.0.1", "@liveblocks/client": "^2.22.1", "@liveblocks/node": "^2.22.1", @@ -51,12 +51,12 @@ "lodash": "^4.17.21", "lucide-react": "^0.482.0", "next": "^15.2.4", - "next-themes": "^0.4.5", + "next-themes": "^0.4.6", "react": "^19.0.0", "react-day-picker": "^9.6.3", "react-dom": "^19.0.0", "sharp": "^0.33.5", - "sonner": "^2.0.1", + "sonner": "^2.0.2", "stripe": "^17.7.0", "tailwind-merge": "^3.0.2", "tailwindcss-animate": "^1.0.7", diff --git a/yarn.lock b/yarn.lock index ed382e9..6919eb6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -743,56 +743,56 @@ __metadata: languageName: node linkType: hard -"@clerk/backend@npm:^1.25.3": - version: 1.25.3 - resolution: "@clerk/backend@npm:1.25.3" +"@clerk/backend@npm:^1.25.8": + version: 1.25.8 + resolution: "@clerk/backend@npm:1.25.8" dependencies: - "@clerk/shared": "npm:^3.0.2" - "@clerk/types": "npm:^4.49.0" + "@clerk/shared": "npm:^3.2.3" + "@clerk/types": "npm:^4.50.1" cookie: "npm:1.0.2" snakecase-keys: "npm:8.0.1" tslib: "npm:2.8.1" - checksum: 10c0/0e8484e4246d836e28cc42d434d2d01dc6684d0ba76d236ac2a9358d713a3cd5a3c9185ebfaf9ede146cf0a44de8ef0fbb79cbe902957c91aafac7ccc9fef671 + checksum: 10c0/5dbb96b648acdd63bd86e635a622edf125bcce1ab3a9b0a5e997374ec36e26bd7a84afe19cc04a9ca2c690086f0dbdec286597182100a7d9e5151092bfa38178 languageName: node linkType: hard -"@clerk/clerk-react@npm:^5.25.0": - version: 5.25.0 - resolution: "@clerk/clerk-react@npm:5.25.0" +"@clerk/clerk-react@npm:^5.25.5": + version: 5.25.5 + resolution: "@clerk/clerk-react@npm:5.25.5" dependencies: - "@clerk/shared": "npm:^3.0.2" - "@clerk/types": "npm:^4.49.0" + "@clerk/shared": "npm:^3.2.3" + "@clerk/types": "npm:^4.50.1" tslib: "npm:2.8.1" peerDependencies: react: ^18.0.0 || ^19.0.0 || ^19.0.0-0 react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-0 - checksum: 10c0/4e108ea61420461611b7ae5903c76c260818643186a640d39af327ae8a56f9faa3f94fca6fdee3a7a11128cac15f37cb3cc43a07b4ed2d51528c8068d29a5ac6 + checksum: 10c0/dfc8654caba135741362a347f604474b861028ef62a3ae1b000ce87ee83fa7a31ef88bcedb0aeb94cd183e2cc90cf3ab227e53bdfe0b6644ddb95b48fd0f1678 languageName: node linkType: hard -"@clerk/nextjs@npm:^6.12.6": - version: 6.12.6 - resolution: "@clerk/nextjs@npm:6.12.6" +"@clerk/nextjs@npm:^6.12.12": + version: 6.12.12 + resolution: "@clerk/nextjs@npm:6.12.12" dependencies: - "@clerk/backend": "npm:^1.25.3" - "@clerk/clerk-react": "npm:^5.25.0" - "@clerk/shared": "npm:^3.0.2" - "@clerk/types": "npm:^4.49.0" + "@clerk/backend": "npm:^1.25.8" + "@clerk/clerk-react": "npm:^5.25.5" + "@clerk/shared": "npm:^3.2.3" + "@clerk/types": "npm:^4.50.1" server-only: "npm:0.0.1" tslib: "npm:2.8.1" peerDependencies: - next: ^13.5.4 || ^14.0.3 || ^15.0.0 + next: ^13.5.7 || ^14.2.25 || ^15.2.3 react: ^18.0.0 || ^19.0.0 || ^19.0.0-0 react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-0 - checksum: 10c0/f33a726929971cdbcc8d4360c245792e789c6bf1e105f50404e76b1a985968755aed1d0fc45cb950c1a975c9308d3502570a5b4a3e3bbae3623fb9c4431568e9 + checksum: 10c0/a7c4e777d0b710815273a07891d014e078ac00bd58af2352a4b94bc51576b95dd0588e872c3dd025d3b1d2267d794c5fd10fba3a69dc2c025d6cb368b2b70e83 languageName: node linkType: hard -"@clerk/shared@npm:^3.0.2": - version: 3.0.2 - resolution: "@clerk/shared@npm:3.0.2" +"@clerk/shared@npm:^3.2.3": + version: 3.2.3 + resolution: "@clerk/shared@npm:3.2.3" dependencies: - "@clerk/types": "npm:^4.49.0" + "@clerk/types": "npm:^4.50.1" dequal: "npm:2.0.3" glob-to-regexp: "npm:0.4.1" js-cookie: "npm:3.0.5" @@ -806,35 +806,26 @@ __metadata: optional: true react-dom: optional: true - checksum: 10c0/9ba7d5566f24cb68029dcb5bbb9bb44615e060665afd53c626ca34fb34c688a863702fd8d785cb68f0c1d78b1af75f7d93fd9f582c5ad71a0665a28914bbe7cd + checksum: 10c0/07a44d894f4e8c9fb65d137067aefff68914d418620d84dfaa2212fef4d0e6530c02956b8e5b41d7e5e4034d08831783a2b7c0fa31db5c91fd6f20e9611d10d4 languageName: node linkType: hard -"@clerk/themes@npm:^2.2.23": - version: 2.2.23 - resolution: "@clerk/themes@npm:2.2.23" +"@clerk/themes@npm:^2.2.26": + version: 2.2.26 + resolution: "@clerk/themes@npm:2.2.26" dependencies: - "@clerk/types": "npm:^4.49.1" + "@clerk/types": "npm:^4.50.1" tslib: "npm:2.8.1" - checksum: 10c0/22ac6bf1f415be5abb69b40ba82bec4af4f60ea8b30a22ec25a0d0a681c405f5b73e45eeff65a793f956871769bc1e271a45463342260138957b1c5ed31b8a49 + checksum: 10c0/deaeefd247083a6c125bec571a7c1f746704de7810bb0d614b016e1780f26bf1caecca9f630b67aa7aaabdb8c5aad8b3f30bce91ec6b8aafe24fb3129eebac3d languageName: node linkType: hard -"@clerk/types@npm:^4.49.0": - version: 4.49.0 - resolution: "@clerk/types@npm:4.49.0" +"@clerk/types@npm:^4.50.1": + version: 4.50.1 + resolution: "@clerk/types@npm:4.50.1" dependencies: csstype: "npm:3.1.3" - checksum: 10c0/eb6318a3f9c7a403d2a1c8742f95e7dbe55d2e8f834a3f5fbfd75f7e1ecff7265e184e8359e5a5b314b325ab1d534030fb14d3c8a1276a4ec4debeeada11ecfa - languageName: node - linkType: hard - -"@clerk/types@npm:^4.49.1": - version: 4.49.1 - resolution: "@clerk/types@npm:4.49.1" - dependencies: - csstype: "npm:3.1.3" - checksum: 10c0/f2f7ce372c889513d4f5ab00de26264c9abb9c873c863fc56bbb795542ea2aedf1ad97bf5e88d2aca106fa71b7109ab4309befa9b26e3b5c9db7495aff970e7c + checksum: 10c0/db5f3ca38fdf6fcfee57e50c06dd3306e74424a48cce63c3e8639aefd341c6f52174f86eae1f4938a6de4accc86ad7c5955163b38d410e87316a3bef271eb7a6 languageName: node linkType: hard @@ -10677,13 +10668,13 @@ __metadata: languageName: node linkType: hard -"next-themes@npm:^0.4.5": - version: 0.4.5 - resolution: "next-themes@npm:0.4.5" +"next-themes@npm:^0.4.6": + version: 0.4.6 + resolution: "next-themes@npm:0.4.6" peerDependencies: react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc - checksum: 10c0/62c9523fbe88a21dd86b220a1492f4e99467d9fdbbcb8ae61e0b5403cc49bdd094ee57b7e18e897c5c2c7509b993ad4a0234115d7ee962bdfb1e450081269f38 + checksum: 10c0/83590c11d359ce7e4ced14f6ea9dd7a691d5ce6843fe2dc520fc27e29ae1c535118478d03e7f172609c41b1ef1b8da6b8dd2d2acd6cd79cac1abbdbd5b99f2c4 languageName: node linkType: hard @@ -12626,13 +12617,13 @@ __metadata: languageName: node linkType: hard -"sonner@npm:^2.0.1": - version: 2.0.1 - resolution: "sonner@npm:2.0.1" +"sonner@npm:^2.0.2": + version: 2.0.2 + resolution: "sonner@npm:2.0.2" peerDependencies: react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc - checksum: 10c0/29e15324109ac19e0c9f2236ad695e2791fcf183264e5a4ffc72acfff28894fb8e80de65a1bf40bcea881fe4d06481b3c533ee3dc6ffafa80a44912e2ebc5cf6 + checksum: 10c0/c391e8ef85382b77c3255c2d0ccd1aa37fd3a9a50c750b98e3eae62a7a896fe79452a2363a5150ceae5f51e18e0126c05845ce2466c7c2ce5662ee13d223a516 languageName: node linkType: hard @@ -13110,8 +13101,8 @@ __metadata: resolution: "tasko@workspace:." dependencies: "@arcjet/next": "npm:^1.0.0-beta.4" - "@clerk/nextjs": "npm:^6.12.6" - "@clerk/themes": "npm:^2.2.23" + "@clerk/nextjs": "npm:^6.12.12" + "@clerk/themes": "npm:^2.2.26" "@codecov/nextjs-webpack-plugin": "npm:^1.8.0" "@content-collections/cli": "npm:^0.1.6" "@content-collections/core": "npm:^0.8.2" @@ -13177,7 +13168,7 @@ __metadata: lodash: "npm:^4.17.21" lucide-react: "npm:^0.482.0" next: "npm:^15.2.4" - next-themes: "npm:^0.4.5" + next-themes: "npm:^0.4.6" postcss: "npm:^8.5.3" prettier: "npm:^3.5.3" prettier-plugin-tailwindcss: "npm:^0.6.11" @@ -13186,7 +13177,7 @@ __metadata: react-day-picker: "npm:^9.6.3" react-dom: "npm:^19.0.0" sharp: "npm:^0.33.5" - sonner: "npm:^2.0.1" + sonner: "npm:^2.0.2" stripe: "npm:^17.7.0" tailwind-merge: "npm:^3.0.2" tailwindcss: "npm:^3.4.16"