feat: add tests for Story component

Author: mhenriette

__tests__/components/cards/Story.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Story from "@/components/cards/Story";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: (props: any) => <img {...props} />,
+}));
+
+describe("Story Component", () => {
+  const mockStory = {
+    content: "Test story content",
+    icon: "/test-icon.png",
+  };
+
+  const defaultProps = {
+    story: mockStory,
+    position: 0,
+    gridPosition: 0,
+    count: 5,
+    showingBubble: { card: null, grid: null },
+    onShowBubble: jest.fn(),
+    onHideBubble: jest.fn(),
+  };
+
+  it("renders the story icon", () => {
+    render(<Story {...defaultProps} />);
+    expect(screen.getByTestId("storyId")).toBeInTheDocument();
+    const icon = screen.getByAltText("story icon");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "/test-icon.png");
+  });
+
+  it("shows the bubble when clicked", () => {
+    render(<Story {...defaultProps} />);
+    fireEvent.click(screen.getByTestId("storyId"));
+    expect(screen.getByText("Test story content")).toBeInTheDocument();
+    expect(defaultProps.onShowBubble).toHaveBeenCalled();
+  });
+
+  it("hides the bubble when clicked again", () => {
+    render(<Story {...defaultProps} />);
+    fireEvent.click(screen.getByTestId("storyId"));
+    fireEvent.click(screen.getByTestId("storyId"));
+    expect(screen.queryByText("Test story content")).not.toBeInTheDocument();
+    expect(defaultProps.onHideBubble).toHaveBeenCalled();
+  });
+
+  it("shows the bubble initially when showingBubble matches position and gridPosition", () => {
+    const props = {
+      ...defaultProps,
+      showingBubble: { card: 0, grid: 0 },
+    };
+    render(<Story {...props} />);
+    expect(screen.getByText("Test story content")).toBeInTheDocument();
+  });
+});

src/components/cards/Story.tsx

@@ -24,6 +24,7 @@ interface StoryProps {
     card: number | null;
     grid: number | null;
   };
+  testId?: string;
 }
 
 /**
@@ -42,7 +43,7 @@ interface StoryProps {
  * @returns {ReactElement}
  */
 
-export default function Story({ story, position, gridPosition, count, showingBubble, onShowBubble, onHideBubble }: StoryProps): ReactElement {
+export default function Story({ story, position, gridPosition, count, showingBubble, onShowBubble, onHideBubble, testId = "storyId" }: StoryProps): ReactElement {
   const [showBubble, setShowBubble] = useState(() => position === showingBubble.card && gridPosition === showingBubble.grid);
   const [height, setHeight] = useState(0);
   const bubbleRef = useRef<HTMLDivElement>(null);
@@ -108,6 +109,7 @@ export default function Story({ story, position, gridPosition, count, showingBub
       style={{
         transform: getPosition(),
       }}
+      data-testid={testId}
     >
       <Image className="object-cover h-14 w-14 rounded-full" src={story.icon as string} alt="story icon" width={43} height={43} />