diff --git a/frontend/src/components/LoadingPage.test.tsx b/frontend/src/components/LoadingPage.test.tsx index f600490..ffb343e 100644 --- a/frontend/src/components/LoadingPage.test.tsx +++ b/frontend/src/components/LoadingPage.test.tsx @@ -30,4 +30,10 @@ describe("LoadingPage", () => { "bg-pink-700 flex flex-col items-center justify-center h-screen bg-gray-100", ); }); + + it("displays a custom loading message when passed as a prop", () => { + const customMessage = "Please wait..."; + render(); + expect(screen.getByText(customMessage)).toBeInTheDocument(); + }); }); diff --git a/frontend/src/components/LoadingPage.tsx b/frontend/src/components/LoadingPage.tsx index b84b224..fe73174 100644 --- a/frontend/src/components/LoadingPage.tsx +++ b/frontend/src/components/LoadingPage.tsx @@ -1,7 +1,7 @@ import React from "react"; import { GiFlamingo } from "react-icons/gi"; -function LoadingPage() { +function LoadingPage({ message = "Loading..." }) { return (
-

Loading...

+

{message}

); } diff --git a/frontend/src/components/SwipeableCard.tsx b/frontend/src/components/SwipeableCard.tsx index d377d66..8f1a1c3 100644 --- a/frontend/src/components/SwipeableCard.tsx +++ b/frontend/src/components/SwipeableCard.tsx @@ -6,11 +6,12 @@ import { GrValidate } from "react-icons/gr"; import "./SwipeableCard.css"; interface SwipeableCardProps { + subtitle: string; content: string; onSwiped: (dir: string) => void; } -function SwipeableCard({ content, onSwiped }: SwipeableCardProps) { +function SwipeableCard({ subtitle, content, onSwiped }: SwipeableCardProps) { const [isFlipped, setIsFlipped] = useState(false); const [watermark, setWatermark] = useState(null); const [watermarkColor, setWatermarkColor] = useState(""); @@ -73,9 +74,13 @@ function SwipeableCard({ content, onSwiped }: SwipeableCardProps) { {...handlers} className={`swipeable-card ${isFlipped ? "flipped" : ""} ${swipeClass} justify-center p-8`} > -

- {content} -

+
+

+ {subtitle} +

+

{content}

+
+
{content} (Back)
diff --git a/frontend/src/components/TopMenu.test.tsx b/frontend/src/components/TopMenu.test.tsx index 785afc6..73e24d4 100644 --- a/frontend/src/components/TopMenu.test.tsx +++ b/frontend/src/components/TopMenu.test.tsx @@ -1,5 +1,5 @@ // __tests__/TopMenu.test.tsx -import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; import React from "react"; import TopMenu from "./TopMenu"; // Adjust the import path as necessary diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 016ca04..e81c8ce 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -5,9 +5,9 @@ import Menu from "../components/Menu.tsx"; function Home() { const [cards] = useState([ - { id: 1, content: "Brown Fox Leap Over The Box" }, - { id: 2, content: "Card 2" }, - { id: 3, content: "Card 3" }, + { id: 1, content: "Brown Fox Leap Over The Box", subtitle: "sub 1" }, + { id: 2, content: "Card 2", subtitle: "sub 2" }, + { id: 3, content: "Card 3", subtitle: "sub 3" }, ]); const [currentCardIndex, setCurrentCardIndex] = useState(0); @@ -28,6 +28,7 @@ function Home() { )} diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx index 1d711e0..acbf893 100644 --- a/frontend/src/pages/Settings.tsx +++ b/frontend/src/pages/Settings.tsx @@ -1,6 +1,5 @@ import React from "react"; import { Link } from "react-router-dom"; -import { IoIosSettings } from "react-icons/io"; function Settings() { return ( diff --git a/frontend/src/pages/WordList.test.tsx b/frontend/src/pages/WordList.test.tsx new file mode 100644 index 0000000..a11bbea --- /dev/null +++ b/frontend/src/pages/WordList.test.tsx @@ -0,0 +1,94 @@ +import React from "react"; +import { render, screen, waitFor } from "@testing-library/react"; +import { describe, it, expect, vi, beforeEach } from "vitest"; +import { MemoryRouter } from "react-router-dom"; +import WordList from "./WordList"; + +// Mock data for people +const mockPeople = [ + { + name: "Leslie Alexander", + email: "leslie.alexander@example.com", + role: "Co-Founder / CEO", + imageUrl: + "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", + lastSeen: "3h ago", + lastSeenDateTime: "2023-01-23T13:23Z", + }, + { + name: "Michael Foster", + email: "michael.foster@example.com", + role: "Co-Founder / CTO", + imageUrl: + "https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", + lastSeen: "3h ago", + lastSeenDateTime: "2023-01-23T13:23Z", + }, + // Add more mock people if necessary +]; + +// Helper function to render the component +const renderComponent = () => { + return render( + + + , + ); +}; + +describe("WordList Component", () => { + beforeEach(() => { + // Mock the fetch function + global.fetch = vi.fn(() => + Promise.resolve({ + json: () => Promise.resolve(mockPeople), + }), + ) as jest.Mock; + }); + + it("renders the component and shows the loading state initially", () => { + renderComponent(); + expect(screen.getByText(/Showing/i)).toBeInTheDocument(); + }); + + it("fetches and displays data correctly", async () => { + renderComponent(); + + // Wait for the data to be fetched and rendered + await waitFor(() => { + mockPeople.forEach((person) => { + expect(screen.getByText(person.name)).toBeInTheDocument(); + expect(screen.getByText(person.email)).toBeInTheDocument(); + expect(screen.getByText(person.role)).toBeInTheDocument(); + }); + }); + }); + + it("displays online status correctly when lastSeen is null", async () => { + const mockPeopleWithOnlineStatus = [ + ...mockPeople, + { + name: "Tom Cook", + email: "tom.cook@example.com", + role: "Director of Product", + imageUrl: + "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", + lastSeen: null, + }, + ]; + + global.fetch = vi.fn(() => + Promise.resolve({ + json: () => Promise.resolve(mockPeopleWithOnlineStatus), + }), + ) as jest.Mock; + + renderComponent(); + + // Wait for the data to be fetched and rendered + await waitFor(() => { + expect(screen.getByText("Tom Cook")).toBeInTheDocument(); + expect(screen.getByText("Online")).toBeInTheDocument(); + }); + }); +}); diff --git a/frontend/src/pages/WordList.tsx b/frontend/src/pages/WordList.tsx index 088373e..2456a16 100644 --- a/frontend/src/pages/WordList.tsx +++ b/frontend/src/pages/WordList.tsx @@ -1,9 +1,9 @@ -import Settings from "./Settings.tsx"; +import React, { useEffect, useState } from "react"; import TopMenu from "../components/TopMenu"; import Menu from "../components/Menu.tsx"; -import { FaChevronRight, FaChevronLeft } from "react-icons/fa"; +import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; -const people = [ +const peopleInit = [ { name: "Leslie Alexander", email: "leslie.alexander@example.com", @@ -59,8 +59,26 @@ const people = [ ]; function WordList() { + const [people, setPeople] = useState([]); const likeMenu = false; + useEffect(() => { + // Replace with your API endpoint + const apiEndpoint = "https://api.example.com/people"; + + const fetchData = async () => { + try { + const response = await fetch(apiEndpoint); + const data = await response.json(); + setPeople(data); + } catch (error) { + console.error("Error fetching data: ", error); + } + }; + + fetchData(); + }, []); + return ( <> @@ -141,7 +159,6 @@ function WordList() { Previous