fix: update Video Card story & refactor code

src/components/FeaturedVideoCard/featuredVideoCard.tsx

@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import Image from "next/image";
 
 import useNavigation from "@/hooks/useNavigation";
+import { BASE_URL } from "@/utils/constants";
 import { convertSecondsToFormattedTime, formatDateTime, trimTextLength } from "@/utils/utils";
 
 import { FeaturedVideoCardContainer, ImageContainerBox } from "./styled";
@@ -23,7 +24,7 @@ const FeaturedVideoCard: FC<FeaturedVideoCardProps> = ({
   video_duration,
   width = "100%",
 }) => {
-  const inAppThumbnail = `${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/${thumbnail}`;
+  const inAppThumbnail = `${BASE_URL}/${thumbnail}`;
   const { navigateTo } = useNavigation();
 
   return isVisible ? (

src/components/VideoCard/__snapshots__/videoCard.test.tsx.snap

@@ -19,42 +19,45 @@ exports[`VideoCard should matches snapshot 1`] = `
           style="width: 100%; height: 192px;"
         />
         <img
-          alt="Sample Video Title"
+          alt="Refresher & AMA Session on Competency Framework Changes - January 2025"
           data-nimg="1"
+          data-testid="video-card-image"
           decoding="async"
           height="192"
           loading="lazy"
-          src="/_next/image?url=http%3A%2F%2Flocalhost%3A1234%2Fassets%2Fimages%2Ftemp-youtube-logo.webp&w=640&q=75"
-          srcset="/_next/image?url=http%3A%2F%2Flocalhost%3A1234%2Fassets%2Fimages%2Ftemp-youtube-logo.webp&w=384&q=75 1x, /_next/image?url=http%3A%2F%2Flocalhost%3A1234%2Fassets%2Fimages%2Ftemp-youtube-logo.webp&w=640&q=75 2x"
+          src="/_next/image?url=http%3A%2F%2Flocalhost%3A1234%2Fmedia%2Fthumbnails%2FScreenshot_2025-02-12_at_1.13.39PM.png&w=640&q=75"
+          srcset="/_next/image?url=http%3A%2F%2Flocalhost%3A1234%2Fmedia%2Fthumbnails%2FScreenshot_2025-02-12_at_1.13.39PM.png&w=384&q=75 1x, /_next/image?url=http%3A%2F%2Flocalhost%3A1234%2Fmedia%2Fthumbnails%2FScreenshot_2025-02-12_at_1.13.39PM.png&w=640&q=75 2x"
           style="color: transparent;"
           width="315"
         />
         <div
           class="MuiTypography-root MuiTypography-bodyMedium video-duration css-149i8z5-MuiTypography-root"
+          data-testid="video-card-duration"
         >
-          30:00
+          30:30
         </div>
       </div>
       <div
         class="video-detail MuiBox-root css-0"
       >
         <div
           class="MuiTypography-root MuiTypography-h3 css-1fho9p8-MuiTypography-root"
-          title="Sample Video Title"
+          data-testid="video-card-title"
+          title="Refresher & AMA Session on Competency Framework Changes - January 2025"
         >
-          Sample Video Title
+          Refresher & AMA Session on Competency Framework Changes - January 2025
         </div>
         <p
           class="MuiTypography-root MuiTypography-bodyMedium organizer-name css-149i8z5-MuiTypography-root"
           data-testid="video-card-organizer"
         >
-          Ikram Ali
+          John Doe
         </p>
         <p
           class="MuiTypography-root MuiTypography-bodyMedium date-time css-149i8z5-MuiTypography-root"
           data-testid="video-card-date-time"
         >
-          Oct 22, 2024
+          Jan 09, 2025
         </p>
       </div>
     </div>

src/components/VideoCard/types.ts

@@ -1,22 +1,12 @@
 export type VideoCardProps = {
   className?: string;
-  id: number;
-  title: string;
-  description: string;
-  publisher: TPublisher;
-  event_time: string;
-  event_type: string;
-  status: string;
-  workstream_id: string;
-  is_featured: boolean;
-  video_duration: number;
-  tags: string[];
-  thumbnail: string;
+  data: {
+    event_time: string;
+    organizer: string;
+    thumbnail: string;
+    title: string;
+    video_duration: string;
+  };
+  onClick?: VoidFunction;
   width?: string;
 };
-
-interface TPublisher {
-  id: number;
-  first_name: string;
-  last_name: string;
-}

src/components/VideoCard/videoCard.stories.tsx

@@ -1,3 +1,4 @@
+import { faker } from "@faker-js/faker";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { VideoCardProps } from "./types";
@@ -8,29 +9,21 @@ const meta: Meta<VideoCardProps> = {
   component: VideoCard,
   tags: ["autodocs"],
   argTypes: {
-    title: {
+    className: {
       control: "text",
-      description: "The title of the video",
+      description: "Additional CSS class for the video card",
     },
-    workstream_id: {
-      control: "text",
-      description: "The organizer/creator of the video",
-    },
-    event_time: {
-      control: "text",
-      description: "The upload date of the video",
-    },
-    thumbnail: {
-      control: "text",
-      description: "The URL of the video thumbnail image",
-    },
-    tags: {
+    data: {
       control: "object",
-      description: "The tags available in the video",
+      description: "The video data including title, organizer, event time, thumbnail, and duration",
+    },
+    onClick: {
+      action: "clicked",
+      description: "Callback function triggered when the video card is clicked",
     },
     width: {
       control: "text",
-      description: "The width of the card (e.g., '100%', '315px')",
+      description: "The width of the video card (e.g., '315px', '100%')",
     },
   },
 };
@@ -39,20 +32,51 @@ export default meta;
 
 type Story = StoryObj<VideoCardProps>;
 
+const mockVideoData = {
+  event_time: "2023-10-01 14:30",
+  organizer: "Sample Organizer",
+  thumbnail: faker.image.urlLoremFlickr(),
+  title: "Sample Video Title",
+  video_duration: "10:30",
+};
+
 export const Default: Story = {
   args: {
-    title: "Sample Video Title",
-    workstream_id: "Arbisoft",
-    event_time: "2023-10-01",
-    thumbnail: "/assets/images/temp-youtube-logo.webp",
-    tags: ["Workshop", "Ollama", "AI"],
+    data: mockVideoData,
+    width: "315px",
+  },
+};
+
+export const CustomWidth: Story = {
+  args: {
+    ...Default.args,
+    width: "400px",
   },
 };
 
 export const LongTitle: Story = {
   args: {
     ...Default.args,
-    title: "This is a very long video title that should be truncated",
-    width: "315px",
+    data: {
+      ...mockVideoData,
+      title: "This is a very long video title that should be truncated after two lines",
+    },
+  },
+};
+
+export const NoThumbnail: Story = {
+  args: {
+    ...Default.args,
+    data: {
+      ...mockVideoData,
+      thumbnail: "",
+    },
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    ...Default.args,
+    className: "custom-video-card",
   },
 };

src/components/VideoCard/videoCard.test.tsx

@@ -1,77 +1,61 @@
-import useNavigation from "@/hooks/useNavigation";
 import { fireEvent, customRender as render, screen } from "@/jest/utils/testUtils";
+import { BASE_URL } from "@/utils/constants";
+import { convertSecondsToFormattedTime, formatDateTime } from "@/utils/utils";
 
 import { VideoCardProps } from "./types";
 import VideoCard from "./videoCard";
 
 const mockProps: VideoCardProps = {
-  id: 1,
   className: "custom-class",
-  event_time: "2024-10-22T12:00:00Z",
-  event_type: "SESSION",
-  description: "Sample Video Description",
-  thumbnail: "assets/images/temp-youtube-logo.webp",
-  title: "Sample Video Title",
-  publisher: { id: 1, first_name: "John", last_name: "Doe" },
-  tags: ["Workshop", "Ollama", "AI"],
-  is_featured: false,
-  status: "PUBLISHED",
-  workstream_id: "Ikram Ali",
+  data: {
+    title: "Refresher & AMA Session on Competency Framework Changes - January 2025",
+    event_time: formatDateTime("2025-01-09T06:00:00Z"),
+    thumbnail: `${BASE_URL}/media/thumbnails/Screenshot_2025-02-12_at_1.13.39PM.png`,
+    video_duration: convertSecondsToFormattedTime(1830),
+    organizer: "John Doe",
+  },
+  onClick: jest.fn(),
   width: "300px",
-  video_duration: 1800,
 };
 
-jest.mock("@/hooks/useNavigation", () => ({
-  __esModule: true,
-  default: jest.fn(() => ({ navigateTo: jest.fn() })),
-}));
-
 describe("VideoCard", () => {
-  const mockNavigateTo = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    (useNavigation as jest.Mock).mockReturnValue({ navigateTo: mockNavigateTo });
-  });
-
-  test("should renders the component with provided props", () => {
+  it("should renders the component with provided props", () => {
     render(<VideoCard {...mockProps} />);
 
-    expect(screen.getByText(mockProps.title)).toBeInTheDocument();
-    expect(screen.getByTestId("video-card-date-time")).toBeInTheDocument();
-    const imgUrl = screen.getByRole("img", { name: mockProps.title }).getAttribute("src") ?? "";
-    expect(decodeURIComponent(imgUrl)).toContain(mockProps.thumbnail);
-    expect(screen.getByText("30:00")).toBeInTheDocument();
+    expect(screen.getByTestId("video-card-title")).toHaveTextContent(mockProps.data.title);
+    expect(screen.getByTestId("video-card-date-time")).toHaveTextContent(mockProps.data.event_time);
+    expect(screen.getByTestId("video-card-organizer")).toHaveTextContent(mockProps.data.organizer);
+    expect(screen.getByTestId("video-card-duration")).toHaveTextContent(mockProps.data.video_duration);
+    const imgUrl = screen.getByTestId("video-card-image").getAttribute("src") ?? "";
+    expect(decodeURIComponent(imgUrl)).toContain(mockProps.data.thumbnail);
   });
 
-  test("should displays default image when imgUrl is not provided", () => {
-    render(<VideoCard {...mockProps} />);
-
-    const imgUrl = screen.getByRole("img", { name: mockProps.title }).getAttribute("src") ?? "";
+  it("should displays default image when thumbnail is not provided", () => {
+    render(<VideoCard {...mockProps} data={{ ...mockProps.data, thumbnail: "" }} />);
 
+    const imgUrl = screen.getByTestId("video-card-image").getAttribute("src") ?? "";
     expect(decodeURIComponent(imgUrl)).toContain("/assets/images/temp-youtube-logo.webp");
   });
 
-  test("should renders the organizer name", () => {
+  it("should renders the organizer name", () => {
     render(<VideoCard {...mockProps} />);
-    expect(screen.getByText(mockProps.title)).toBeInTheDocument();
     expect(screen.getByTestId("video-card-organizer")).toBeInTheDocument();
+    expect(screen.getByTestId("video-card-organizer")).toHaveTextContent(mockProps.data.organizer);
   });
 
-  test("should matches snapshot", () => {
+  it("should matches snapshot", () => {
     const { asFragment } = render(<VideoCard {...mockProps} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test("should calls navigateTo when clicked", () => {
+  it("should calls onClick when clicked", () => {
     render(<VideoCard {...mockProps} />);
     fireEvent.click(screen.getByTestId("video-card"));
-    expect(mockNavigateTo).toHaveBeenCalledWith("videoDetail", { id: 1 });
+    expect(mockProps.onClick).toHaveBeenCalled();
   });
 
-  test("should displays fallback thumbnail when no thumbnail is provided", () => {
-    render(<VideoCard {...mockProps} thumbnail={""} />);
-    const imgUrl = screen.getByRole("img", { name: mockProps.title }).getAttribute("src") ?? "";
-    expect(decodeURIComponent(imgUrl)).toContain(mockProps.thumbnail);
+  it("should renders skeleton loader correctly", () => {
+    render(<VideoCard {...mockProps} />);
+    expect(screen.getByTestId("video-card")).toBeInTheDocument();
   });
 });