@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/cards/testimonial-card/index.test.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import { TestimonialCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("next/image", () => {
+  const MockImage = ({ src, alt, className }: any) => (
+    <img data-testid="avatar-image" src={src} alt={alt} className={className} />
+  );
+  return MockImage;
+});
+
+jest.mock(
+  "clsx",
+  () =>
+    (...args: any[]) =>
+      args.flat().filter(Boolean).join(" ")
+);
+
+describe("TestimonialCard", () => {
+  const defaultProps = {
+    title: "Great Service",
+    quote: "This is an amazing product!",
+    rating: 4,
+    author: "John Doe",
+    role: "CEO",
+  };
+
+  describe("Rendering", () => {
+    it("renders the figure element", () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      expect(container.querySelector("figure")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("Great Service")).toBeInTheDocument();
+    });
+
+    it("renders quote", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(
+        screen.getByText("This is an amazing product!")
+      ).toBeInTheDocument();
+    });
+
+    it("renders author name", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("John Doe")).toBeInTheDocument();
+    });
+
+    it("renders author role", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("CEO")).toBeInTheDocument();
+    });
+  });
+
+  describe("Rating", () => {
+    it("renders 5 star icons", () => {
+      render(<TestimonialCard {...defaultProps} rating={4} />);
+      const icons = screen.getAllByTestId("material-icon");
+      expect(icons).toHaveLength(5);
+    });
+
+    it("applies filled class to rated stars", () => {
+      render(<TestimonialCard {...defaultProps} rating={3} />);
+      const icons = screen.getAllByTestId("material-icon");
+      const filledIcons = icons.filter(icon =>
+        icon.className.includes("text-text")
+      );
+      expect(filledIcons.length).toBe(3);
+    });
+
+    it("applies unfilled class to remaining stars", () => {
+      render(<TestimonialCard {...defaultProps} rating={3} />);
+      const icons = screen.getAllByTestId("material-icon");
+      const unfilledIcons = icons.filter(icon =>
+        icon.className.includes("text-gray-300")
+      );
+      expect(unfilledIcons.length).toBe(2);
+    });
+
+    it("does not render rating section when rating is undefined", () => {
+      render(<TestimonialCard {...defaultProps} rating={undefined} />);
+      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
+    });
+
+    it("renders rating aria-label", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} rating={4} />
+      );
+      const ratingDiv = container.querySelector("[aria-label]");
+      expect(ratingDiv).toHaveAttribute("aria-label", "Rating: 4 out of 5");
+    });
+  });
+
+  describe("Avatar", () => {
+    it("renders avatar image when avatarUrl is provided", () => {
+      render(<TestimonialCard {...defaultProps} avatarUrl="/avatar.jpg" />);
+      expect(screen.getByTestId("avatar-image")).toBeInTheDocument();
+      expect(screen.getByTestId("avatar-image")).toHaveAttribute(
+        "src",
+        "/avatar.jpg"
+      );
+    });
+
+    it("renders initials when avatarUrl is not provided", () => {
+      render(<TestimonialCard {...defaultProps} />);
+      expect(screen.getByText("J")).toBeInTheDocument();
+    });
+  });
+
+  describe("Active state", () => {
+    it("applies active styles when isActive is true", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} isActive={true} />
+      );
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("bg-bg-surface-secondary");
+      expect(figure?.className).toContain("shadow-drop");
+    });
+
+    it("applies inactive styles when isActive is false", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} isActive={false} />
+      );
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("opacity-40");
+    });
+
+    it("defaults to inactive", () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("opacity-40");
+    });
+  });
+
+  describe("Custom className", () => {
+    it("applies custom className", () => {
+      const { container } = render(
+        <TestimonialCard {...defaultProps} className="custom-card" />
+      );
+      const figure = container.querySelector("figure");
+      expect(figure?.className).toContain("custom-card");
+    });
+  });
+
+  describe("Author section", () => {
+    it("does not render author section when author is not provided", () => {
+      const { container } = render(
+        <TestimonialCard
+          title="Test"
+          quote="Quote"
+          rating={5}
+          author={undefined}
+        />
+      );
+      expect(container.querySelector("figcaption")).not.toBeInTheDocument();
+    });
+
+    it("renders figcaption when author is provided", () => {
+      const { container } = render(<TestimonialCard {...defaultProps} />);
+      expect(container.querySelector("figcaption")).toBeInTheDocument();
+    });
+  });
+});