@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/button/index.test.tsx

@@ -0,0 +1,339 @@
+import React from "react";
+import { Button } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/brand-button", () => ({
+  BrandButton: ({
+    as,
+    href,
+    text,
+    label,
+    onClick,
+    id,
+    variant,
+    fullWidth,
+    size,
+    buttonClassName,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ...rest
+  }: any) => {
+    const Tag = as || "button";
+    return (
+      <Tag
+        data-testid="brand-button"
+        href={href}
+        id={id}
+        data-variant={variant}
+        data-full-width={fullWidth}
+        data-size={size}
+        className={buttonClassName}
+        onClick={onClick}
+      >
+        {label} {text}
+      </Tag>
+    );
+  },
+}));
+
+jest.mock("@shared/components/button", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Button: ({ onClick, className, children, ...rest }: any) => (
+    <button data-testid="core-button" className={className} onClick={onClick}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({
+    children,
+    href,
+    target,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    variant,
+    className,
+    title,
+    onClick,
+  }: any) => (
+    <a
+      data-testid="link"
+      href={href}
+      target={target}
+      className={className}
+      title={title}
+      onClick={onClick}
+    >
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, size, fill }: any) => (
+    <span
+      data-testid="material-icon"
+      data-name={name}
+      data-size={size}
+      data-fill={fill}
+    />
+  ),
+}));
+
+jest.mock("@shared/utils/utm", () => ({
+  buildPreservedQueryHref: (href: string, search: string) => `${href}${search}`,
+}));
+
+describe("Button", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  describe("showButtonAs='solid' (default)", () => {
+    it("renders BrandButton as anchor when href is provided", () => {
+      render(<Button buttonLabel="Click" href="/page" />);
+      const btn = screen.getByTestId("brand-button");
+      expect(btn.tagName).toBe("A");
+      expect(btn).toHaveAttribute("href", "/page");
+      expect(btn).toHaveTextContent("Click");
+    });
+
+    it("renders BrandButton as button when href is not provided", () => {
+      render(<Button buttonLabel="Click" />);
+      const btn = screen.getByTestId("brand-button");
+      expect(btn.tagName).toBe("BUTTON");
+    });
+
+    it("passes variant, anchorId, fullWidth, size, buttonClassName", () => {
+      render(
+        <Button
+          buttonLabel="X"
+          buttonVariant="secondary"
+          anchorId="test-id"
+          fullWidth={true}
+          size="lg"
+          buttonClassName="custom"
+        />
+      );
+      const btn = screen.getByTestId("brand-button");
+      expect(btn).toHaveAttribute("data-variant", "secondary");
+      expect(btn).toHaveAttribute("id", "test-id");
+      expect(btn).toHaveAttribute("data-full-width", "true");
+      expect(btn).toHaveAttribute("data-size", "lg");
+      expect(btn).toHaveClass("custom");
+    });
+
+    it("passes buttonPrefix as label", () => {
+      render(<Button buttonLabel="Main" buttonPrefix="Prefix" />);
+      expect(screen.getByTestId("brand-button")).toHaveTextContent(
+        "Prefix Main"
+      );
+    });
+  });
+
+  describe("showButtonAs='text'", () => {
+    it("renders Link with buttonLabel and target", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Learn more"
+          href="/info"
+          target="_self"
+        />
+      );
+      const link = screen.getByTestId("link");
+      expect(link).toHaveAttribute("href", "/info");
+      expect(link).toHaveAttribute("target", "_self");
+      expect(link).toHaveAttribute("title", "Learn more");
+    });
+
+    it("applies linkClassName and linkVariant", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Go"
+          linkClassName="extra"
+          linkVariant="unstyled"
+        />
+      );
+      const link = screen.getByTestId("link");
+      expect(link.className).toContain("extra");
+    });
+
+    it("renders MaterialIcon when iconName is provided", () => {
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Go"
+          iconName="arrow_forward"
+          iconSize={20}
+          iconFill={1}
+        />
+      );
+      const icon = screen.getByTestId("material-icon");
+      expect(icon).toHaveAttribute("data-name", "arrow_forward");
+      expect(icon).toHaveAttribute("data-size", "20");
+      expect(icon).toHaveAttribute("data-fill", "1");
+    });
+
+    it("does not render MaterialIcon when iconName is not provided", () => {
+      render(<Button showButtonAs="text" buttonLabel="Go" />);
+      expect(screen.queryByTestId("material-icon")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("showButtonAs='unstyled'", () => {
+    it("renders CoreButton", () => {
+      render(<Button showButtonAs="unstyled" buttonLabel="Plain" />);
+      expect(screen.getByTestId("core-button")).toBeInTheDocument();
+    });
+  });
+
+  describe("showButtonAs default case", () => {
+    it("renders CoreButton for unknown showButtonAs value", () => {
+      render(<Button showButtonAs={"other" as any} buttonLabel="Fallback" />);
+      expect(screen.getByTestId("core-button")).toBeInTheDocument();
+    });
+  });
+
+  describe("preDefinedFunctionExecution", () => {
+    it("renders checkPlans when preDefinedFunctionExecution is 'check availability'", () => {
+      const renderCheckPlans = jest.fn(() => (
+        <div data-testid="check-plans">Plans</div>
+      ));
+      render(
+        <Button
+          preDefinedFunctionExecution="check availability"
+          renderCheckPlans={renderCheckPlans}
+          buttonLabel="Check"
+        />
+      );
+      expect(screen.getByTestId("check-plans")).toBeInTheDocument();
+      expect(renderCheckPlans).toHaveBeenCalledWith(
+        expect.objectContaining({ ctaText: "Check" })
+      );
+    });
+
+    it("returns undefined when renderCheckPlans is not provided", () => {
+      const { container } = render(
+        <Button preDefinedFunctionExecution="check availability" />
+      );
+      expect(container.innerHTML).toBe("");
+    });
+  });
+
+  describe("onClick and modal handling", () => {
+    it("calls onClick on solid button click (no href)", () => {
+      const onClick = jest.fn();
+      render(<Button buttonLabel="Click" onClick={onClick} />);
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("calls onClick on solid link click (with href)", () => {
+      const onClick = jest.fn();
+      render(<Button buttonLabel="Click" href="/page" onClick={onClick} />);
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("calls onClick on text link click", () => {
+      const onClick = jest.fn();
+      render(<Button showButtonAs="text" buttonLabel="Go" onClick={onClick} />);
+      fireEvent.click(screen.getByTestId("link"));
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it("calls onModalButtonClick when clickToOpen is 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          buttonLabel="Open"
+          clickToOpen="modal"
+          tabmodalNameToOpen="my-modal"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onModalButtonClick).toHaveBeenCalledWith("my-modal");
+    });
+
+    it("does not call onModalButtonClick when clickToOpen is not 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          buttonLabel="Open"
+          clickToOpen="other"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("brand-button"));
+      expect(onModalButtonClick).not.toHaveBeenCalled();
+    });
+
+    it("calls onModalButtonClick on text link click when clickToOpen is 'modal'", () => {
+      const onModalButtonClick = jest.fn();
+      render(
+        <Button
+          showButtonAs="text"
+          buttonLabel="Open"
+          clickToOpen="modal"
+          tabmodalNameToOpen="tab1"
+          onModalButtonClick={onModalButtonClick}
+        />
+      );
+      fireEvent.click(screen.getByTestId("link"));
+      expect(onModalButtonClick).toHaveBeenCalledWith("tab1");
+    });
+  });
+
+  describe("preserveQueryParameters", () => {
+    it("uses buildPreservedQueryHref when preserveQueryParameters is true and search exists", () => {
+      Object.defineProperty(window, "location", {
+        value: { search: "?foo=bar" },
+        writable: true,
+      });
+      render(
+        <Button
+          buttonLabel="Go"
+          href="/page"
+          preserveQueryParameters={true}
+          showButtonAs="solid"
+        />
+      );
+      expect(screen.getByTestId("brand-button")).toHaveAttribute(
+        "href",
+        "/page?foo=bar"
+      );
+    });
+
+    it("uses original href when preserveQueryParameters is false", () => {
+      Object.defineProperty(window, "location", {
+        value: { search: "?foo=bar" },
+        writable: true,
+      });
+      render(<Button buttonLabel="Go" href="/page" showButtonAs="solid" />);
+      expect(screen.getByTestId("brand-button")).toHaveAttribute(
+        "href",
+        "/page"
+      );
+    });
+
+    it("uses original href when search is empty", () => {
+      Object.defineProperty(window, "location", {
+        value: { search: "" },
+        writable: true,
+      });
+      render(
+        <Button
+          buttonLabel="Go"
+          href="/page"
+          preserveQueryParameters={true}
+          showButtonAs="solid"
+        />
+      );
+      expect(screen.getByTestId("brand-button")).toHaveAttribute(
+        "href",
+        "/page"
+      );
+    });
+  });
+});