@windstream/react-shared-components 0.1.93 → 0.1.94

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

@@ -0,0 +1,364 @@
+import React from "react";
+import { SimpleCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, width, height, className }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className, style }: any) => (
+    <Tag className={className} style={style}>
+      {children}
+    </Tag>
+  ),
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, className, ...rest }: any) => (
+    <a href={href} className={className} {...rest}>
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("../../button", () => ({
+  Button: ({ children, linkClassName, buttonLabel }: any) => (
+    <button data-testid="cta-button" className={linkClassName}>
+      {buttonLabel || children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+jest.mock("@shared/utils/speed-card-bg", () => ({
+  SpeedCardBg: (color: string) => `<svg>${color}</svg>`,
+}));
+
+describe("SimpleCard", () => {
+  const defaultCard = {
+    title: "Simple Card Title",
+    body: "Card body content",
+    image: "/image.jpg",
+    imageAlt: "Card image",
+  };
+
+  describe("Rendering", () => {
+    it("renders the section element", () => {
+      const { container } = render(<SimpleCard card={defaultCard} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.getByText("Simple Card Title")).toBeInTheDocument();
+    });
+
+    it("renders body", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.getByText("Card body content")).toBeInTheDocument();
+    });
+
+    it("renders aria-labelledby with title", () => {
+      const { container } = render(<SimpleCard card={defaultCard} />);
+      expect(container.querySelector("section")).toHaveAttribute(
+        "aria-labelledby",
+        "callout-Simple Card Title"
+      );
+    });
+
+    it("does not set aria-labelledby when no title", () => {
+      const { container } = render(<SimpleCard card={{ body: "No title" }} />);
+      expect(container.querySelector("section")).not.toHaveAttribute(
+        "aria-labelledby"
+      );
+    });
+  });
+
+  describe("Image views", () => {
+    it("renders icon-sized image by default when image is provided", () => {
+      render(<SimpleCard card={defaultCard} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toBeInTheDocument();
+    });
+
+    it("renders full image when imageView is 'full'", () => {
+      const card = { ...defaultCard, imageView: "full" as const };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("renders margin image when imageView is 'margin'", () => {
+      const card = { ...defaultCard, imageView: "margin" as const };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("renders standard-sized image", () => {
+      const card = {
+        ...defaultCard,
+        imageView: "standard" as const,
+        imageWidth: 120,
+        imageHeight: 120,
+      };
+      render(<SimpleCard card={card} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("width", "120");
+      expect(img).toHaveAttribute("height", "120");
+    });
+
+    it("renders inset image view", () => {
+      const card = { ...defaultCard, imageView: "inset" as const };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("does not render image when image is not provided", () => {
+      render(<SimpleCard card={{ title: "No Image" }} />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders CTA button when cta is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Learn More", href: "/learn" },
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA when not provided", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+
+    it("wraps title in link when cta has href", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<SimpleCard card={card} />);
+      const titleLink = screen.getByText("Simple Card Title").closest("a");
+      expect(titleLink).toHaveAttribute("href", "/click");
+    });
+  });
+
+  describe("CTA Bottom (location CTA)", () => {
+    it("renders ctaBottom link when provided", () => {
+      const card = {
+        ...defaultCard,
+        ctaBottom: { title: "Location", href: "/location" },
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Location")).toBeInTheDocument();
+    });
+
+    it("does not render ctaBottom when not provided", () => {
+      render(<SimpleCard card={defaultCard} />);
+      expect(screen.queryByText("location_on")).not.toBeInTheDocument();
+    });
+
+    it("renders location_on icon with ctaBottom", () => {
+      const card = {
+        ...defaultCard,
+        ctaBottom: { title: "Store", href: "/store" },
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("location_on")).toBeInTheDocument();
+    });
+  });
+
+  describe("Working hours and phone", () => {
+    it("renders working hours table", () => {
+      const card = {
+        ...defaultCard,
+        workingHours: ["Mon-Fri|9am-5pm", "Sat|10am-2pm"],
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Mon-Fri")).toBeInTheDocument();
+      expect(screen.getByText("9am-5pm")).toBeInTheDocument();
+    });
+
+    it("renders phone numbers", () => {
+      const card = {
+        ...defaultCard,
+        phoneNumber: ["(555) 123-4567"],
+      };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("(555) 123-4567")).toBeInTheDocument();
+    });
+
+    it("creates tel: link for phone numbers", () => {
+      const card = {
+        ...defaultCard,
+        phoneNumber: ["(555) 123-4567"],
+      };
+      render(<SimpleCard card={card} />);
+      const phoneLink = screen.getByText("(555) 123-4567").closest("a");
+      expect(phoneLink).toHaveAttribute("href", "tel:5551234567");
+    });
+  });
+
+  describe("Rich text", () => {
+    it("renders richText when provided", () => {
+      const card = { ...defaultCard, richText: "Rich text content" };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Rich text content")).toBeInTheDocument();
+    });
+  });
+
+  describe("Title location", () => {
+    it("renders titleLocation when provided", () => {
+      const card = { ...defaultCard, titleLocation: "Downtown" };
+      render(<SimpleCard card={card} />);
+      expect(screen.getByText("Downtown")).toBeInTheDocument();
+    });
+  });
+
+  describe("Shadow", () => {
+    it("applies shadow class when shadow is true", () => {
+      const card = { ...defaultCard, shadow: true };
+      const { container } = render(<SimpleCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "shadow-card"
+      );
+    });
+  });
+
+  describe("Background colors", () => {
+    it("applies background color class from map", () => {
+      const card = { ...defaultCard, backgroundColor: "blue" };
+      const { container } = render(<SimpleCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "bg-fill-brand"
+      );
+    });
+
+    it("applies dynamic background color when applyCardBackgroundColor is true", () => {
+      const card = {
+        ...defaultCard,
+        applyCardBackgroundColor: true,
+        backgroundColor: "#FF0000",
+        imageView: "icon" as const,
+      };
+      const { container } = render(<SimpleCard card={card} />);
+      const section = container.querySelector("section") as HTMLElement;
+      // jsdom doesn't fully support CSS variables in style, check the attribute directly
+      const styleAttr = section.getAttribute("style") || "";
+      expect(styleAttr).toContain("--scc-bg");
+    });
+
+    it("applies dynamic text color when applyCardBackgroundColor is true", () => {
+      const card = {
+        ...defaultCard,
+        applyCardBackgroundColor: true,
+        textColor: "#FFFFFF",
+        imageView: "icon" as const,
+      };
+      const { container } = render(<SimpleCard card={card} />);
+      const section = container.querySelector("section") as HTMLElement;
+      const styleAttr = section.getAttribute("style") || "";
+      expect(styleAttr).toContain("--scc-fg");
+    });
+  });
+
+  describe("Background image (pinwheel)", () => {
+    it("applies background image when showBackgroundImage and pinwheelColor", () => {
+      const card = {
+        ...defaultCard,
+        applyCardBackgroundColor: true,
+        backgroundColor: "#000",
+        showBackgroundImage: true,
+        pinwheelColor: "Blue-#307998",
+        imageView: "icon" as const,
+      };
+      const { container } = render(<SimpleCard card={card} />);
+      const section = container.querySelector("section") as HTMLElement;
+      expect(section.style.backgroundImage).toContain("data:image/svg+xml");
+    });
+  });
+
+  describe("Layout props", () => {
+    it("applies lgWidth class", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} lgWidth="lg:w-1/3" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "lg:w-1/3"
+      );
+    });
+
+    it("applies mdWidth class", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} mdWidth="md:w-1/2" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "md:w-1/2"
+      );
+    });
+
+    it("applies custom className", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} className="custom-class" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "custom-class"
+      );
+    });
+
+    it("applies custom style", () => {
+      const { container } = render(
+        <SimpleCard card={defaultCard} style={{ margin: "10px" }} />
+      );
+      const section = container.querySelector("section") as HTMLElement;
+      expect(section.style.margin).toBe("10px");
+    });
+  });
+
+  describe("Image alignment", () => {
+    it("uses iconAlignment for icon position", () => {
+      const card = {
+        ...defaultCard,
+        iconAlignment: "center" as const,
+        imageView: "icon" as const,
+      };
+      render(<SimpleCard card={card} />);
+      const iconWrapper = screen.getByTestId("next-image").parentElement;
+      expect(iconWrapper?.style.justifyContent).toBe("center");
+    });
+
+    it("falls back to imageAlignment when iconAlignment not set", () => {
+      const card = {
+        ...defaultCard,
+        imageAlignment: "right" as const,
+        imageView: "icon" as const,
+      };
+      render(<SimpleCard card={card} />);
+      const iconWrapper = screen.getByTestId("next-image").parentElement;
+      expect(iconWrapper?.style.justifyContent).toBe("right");
+    });
+  });
+});