From 9b9806c2320ffe3a1effae684143b2b704972660 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 5 Jul 2025 18:42:23 +0200 Subject: [PATCH] Fix tests --- ui/src/components/DeleteTabloModal.tsx | 2 +- ui/src/components/TabloModal.tsx | 2 +- ui/src/hooks/invite.ts | 2 +- ui/src/hooks/tablos.ts | 5 +- ui/src/pages/tablo.tsx | 14 +++--- ui/src/providers/UserStoreProvider.tsx | 26 +++++++++++ ui/src/utils/testHelpers.tsx | 64 ++++++++++++++++---------- 7 files changed, 79 insertions(+), 36 deletions(-) diff --git a/ui/src/components/DeleteTabloModal.tsx b/ui/src/components/DeleteTabloModal.tsx index 6bd8c2e..faea2be 100644 --- a/ui/src/components/DeleteTabloModal.tsx +++ b/ui/src/components/DeleteTabloModal.tsx @@ -6,7 +6,7 @@ type Tablo = Database["public"]["Tables"]["tablos"]["Row"]; interface DeleteTabloModalProps { tablo: Tablo | null; onClose: () => void; - onConfirm: (tabloId: number) => void; + onConfirm: (tabloId: string) => void; isDeleting: boolean; } diff --git a/ui/src/components/TabloModal.tsx b/ui/src/components/TabloModal.tsx index 337d148..d406f14 100644 --- a/ui/src/components/TabloModal.tsx +++ b/ui/src/components/TabloModal.tsx @@ -44,7 +44,7 @@ export const TabloModal = ({ tablo, onClose, onEdit }: TabloModalProps) => { const handleSendInvite = () => { if (inviteEmail.trim()) { - inviteUser({ email: inviteEmail, tablo_id: tablo?.id ?? 0 }); + inviteUser({ email: inviteEmail, tablo_id: tablo?.id ?? "" }); setInviteEmail(""); } }; diff --git a/ui/src/hooks/invite.ts b/ui/src/hooks/invite.ts index 39885c0..012976a 100644 --- a/ui/src/hooks/invite.ts +++ b/ui/src/hooks/invite.ts @@ -11,7 +11,7 @@ export const useInviteUser = () => { tablo_id, }: { email: string; - tablo_id: number; + tablo_id: string; }) => { const { data } = await api.post( "/api/v1/tablos/invite", diff --git a/ui/src/hooks/tablos.ts b/ui/src/hooks/tablos.ts index 5f9985d..91e3f5a 100644 --- a/ui/src/hooks/tablos.ts +++ b/ui/src/hooks/tablos.ts @@ -75,7 +75,7 @@ export const useUpdateTablo = () => { const queryClient = useQueryClient(); return useMutation({ - mutationFn: async ({ id, ...tablo }: TabloUpdate & { id: number }) => { + mutationFn: async ({ id, ...tablo }: TabloUpdate & { id: string }) => { const { error } = await supabase .from("tablos") .update(tablo) @@ -93,8 +93,9 @@ export const useUpdateTablo = () => { export const useDeleteTablo = () => { const queryClient = useQueryClient(); + // TODO: investigate issue with deletions return useMutation({ - mutationFn: async (id: number) => { + mutationFn: async (id: string) => { const { error } = await supabase .from("tablos") .update({ deleted_at: new Date().toISOString() }) diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx index b477c0a..cfb5190 100644 --- a/ui/src/pages/tablo.tsx +++ b/ui/src/pages/tablo.tsx @@ -16,7 +16,7 @@ import { useSession } from "@ui/contexts/SessionContext"; type Tablo = Database["public"]["Tables"]["tablos"]["Row"]; export const TabloPage = () => { - const [contextMenuTablo, setContextMenuTablo] = useState(null); + const [contextMenuTablo, setContextMenuTablo] = useState(null); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [viewingTablo, setViewingTablo] = useState(null); const [deletingTablo, setDeletingTablo] = useState(null); @@ -57,17 +57,17 @@ export const TabloPage = () => { }; // Tablo movement functions - simplified for now, would need position field in DB - const moveTabloLeft = (tabloId: number) => { + const moveTabloLeft = (tabloId: string) => { // TODO: Implement with proper position field in database console.log("Moving tablo left:", tabloId); }; - const moveTabloRight = (tabloId: number) => { + const moveTabloRight = (tabloId: string) => { // TODO: Implement with proper position field in database console.log("Moving tablo right:", tabloId); }; - const openTablo = (tabloId: number) => { + const openTablo = (tabloId: string) => { if (!tablos) return; const tablo = tablos.find((t) => t.id === tabloId); if (tablo) { @@ -105,7 +105,7 @@ export const TabloPage = () => { } }; - const changeTabloStatus = async (tabloId: number, newStatus: string) => { + const changeTabloStatus = async (tabloId: string, newStatus: string) => { try { await updateTablo({ id: tabloId, @@ -125,7 +125,7 @@ export const TabloPage = () => { }); }; - const handleDeleteTablo = (tabloId: number) => { + const handleDeleteTablo = (tabloId: string) => { if (!tablos) return; const tablo = tablos.find((t) => t.id === tabloId); if (tablo) { @@ -133,7 +133,7 @@ export const TabloPage = () => { } }; - const confirmDeleteTablo = async (tabloId: number) => { + const confirmDeleteTablo = async (tabloId: string) => { setIsDeleting(true); try { await deleteTablo(tabloId); diff --git a/ui/src/providers/UserStoreProvider.tsx b/ui/src/providers/UserStoreProvider.tsx index 3c39055..6f6a463 100644 --- a/ui/src/providers/UserStoreProvider.tsx +++ b/ui/src/providers/UserStoreProvider.tsx @@ -61,3 +61,29 @@ export const useUser = () => { } return useStore(store); }; + +// TestUserStoreProvider component +export const TestUserStoreProvider = ({ + children, + user, +}: { + children: React.ReactNode; + user: User; +}) => { + const store = createStore()(() => user); + + return ( + }> + {children} + + ); +}; + +// // Test useUser hook +// export const useTestUser = () => { +// const store = React.useContext(TestUserStoreContext); +// if (!store) { +// throw new Error("Missing TestUserStoreProvider"); +// } +// return useStore(store); +// }; diff --git a/ui/src/utils/testHelpers.tsx b/ui/src/utils/testHelpers.tsx index 677b5d3..936a5b4 100644 --- a/ui/src/utils/testHelpers.tsx +++ b/ui/src/utils/testHelpers.tsx @@ -2,11 +2,20 @@ import { render, RenderResult, waitFor } from "@testing-library/react"; import { SessionTestProvider } from "@ui/contexts/SessionContext"; import { BrowserRouter } from "react-router-dom"; import { ThemeProvider } from "@ui/contexts/ThemeContext"; -import { User } from "@supabase/supabase-js"; import userEvent from "@testing-library/user-event"; -import { queryClient } from "@ui/lib/api"; -import { QueryClientProvider } from "@tanstack/react-query"; -import { UserStoreProvider } from "@ui/providers/UserStoreProvider"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import React from "react"; +import { TestUserStoreProvider } from "@ui/providers/UserStoreProvider"; + +const defaultUser = { + id: "123", + name: "John Doe", + first_name: "John", + last_name: "Doe", + email: "john@example.com", + avatar_url: "https://example.com/avatar.jpg", + streamToken: null, +}; export const renderWithRouter = (ui: React.ReactNode, { route = "/" } = {}) => { window.history.pushState({}, "Test page", route); @@ -17,31 +26,38 @@ export const renderWithRouter = (ui: React.ReactNode, { route = "/" } = {}) => { }; }; -export const renderWithProviders = ( - ui: React.ReactNode, - opts: { user?: User } = {} -): RenderResult => { +export const renderWithProviders = (ui: React.ReactNode): RenderResult => { + // Create a new QueryClient instance for each test to avoid state pollution + const testQueryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: false, + staleTime: Infinity, + }, + }, + }); + return render( - + - {ui} + + {ui} +