@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/components/call-button/index.test.tsx

@@ -1,260 +1,260 @@
-/// <reference types="@testing-library/jest-dom" />
-import React from "react";
-import { CallButton } from "./index";
-
-import { render, screen } from "@testing-library/react";
-
-// Mock dependencies
-/* eslint-disable react/prop-types */
-jest.mock("@shared/components/link", () => ({
-  Link: ({
-    children,
-    className,
-    href,
-    ...props
-  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children: React.ReactNode;
-  }) => (
-    <a href={href} className={className} {...props}>
-      {children}
-    </a>
-  ),
-}));
-/* eslint-enable react/prop-types */
-
-jest.mock("@shared/components/material-icon", () => ({
-  MaterialIcon: ({ name, className }: { name: string; className?: string }) => (
-    <span data-testid={`material-icon-${name}`} className={className}>
-      {name}
-    </span>
-  ),
-}));
-
-jest.mock("@shared/utils", () => ({
-  cx: (...args: unknown[]) => args.filter(Boolean).join(" "),
-}));
-
-describe("CallButton", () => {
-  describe("rendering", () => {
-    it("renders children text content", () => {
-      render(<CallButton href="tel:+1234567890">Call Us</CallButton>);
-      expect(screen.getByText("Call Us")).toBeInTheDocument();
-    });
-
-    it("renders the call icon", () => {
-      render(<CallButton href="tel:+1234567890">Call</CallButton>);
-      expect(screen.getByTestId("material-icon-call")).toBeInTheDocument();
-    });
-
-    it("renders an anchor element via Link", () => {
-      render(<CallButton href="tel:+1234567890">Call</CallButton>);
-      const link = screen.getByRole("link");
-      expect(link).toHaveAttribute("href", "tel:+1234567890");
-    });
-
-    it("applies displayName correctly", () => {
-      expect(CallButton.displayName).toBe("CallButton");
-    });
-  });
-
-  describe("size variants", () => {
-    it("applies sm size classes", () => {
-      render(
-        <CallButton href="tel:123" size="sm">
-          Call
-        </CallButton>
-      );
-      const link = screen.getByRole("link");
-      expect(link.className).toContain("h-6");
-      expect(link.className).toContain("text-xs");
-    });
-
-    it("applies md size classes by default", () => {
-      render(<CallButton href="tel:123">Call</CallButton>);
-      const link = screen.getByRole("link");
-      expect(link.className).toContain("h-8");
-      expect(link.className).toContain("text-sm");
-    });
-
-    it("applies lg size classes", () => {
-      render(
-        <CallButton href="tel:123" size="lg">
-          Call
-        </CallButton>
-      );
-      const link = screen.getByRole("link");
-      expect(link.className).toContain("h-10");
-      expect(link.className).toContain("text-base");
-    });
-  });
-
-  describe("buttonStyle variants", () => {
-    it("applies primary style classes by default", () => {
-      render(<CallButton href="tel:123">Call</CallButton>);
-      const link = screen.getByRole("link");
-      expect(link.className).toContain("border-border");
-      expect(link.className).toContain("text-text");
-    });
-
-    it("applies primary style classes when explicitly set", () => {
-      render(
-        <CallButton href="tel:123" buttonStyle="primary">
-          Call
-        </CallButton>
-      );
-      const link = screen.getByRole("link");
-      expect(link.className).toContain("border-border");
-    });
-  });
-
-  describe("blinking dot", () => {
-    it("does not render blinking dot by default", () => {
-      const { container } = render(
-        <CallButton href="tel:123">Call</CallButton>
-      );
-      const dot = container.querySelector(".animate-blink");
-      expect(dot).not.toBeInTheDocument();
-    });
-
-    it("renders blinking dot when showBlinkDot is true", () => {
-      const { container } = render(
-        <CallButton href="tel:123" showBlinkDot={true}>
-          Call
-        </CallButton>
-      );
-      const dot = container.querySelector(".animate-blink");
-      expect(dot).toBeInTheDocument();
-    });
-
-    it("applies correct dot size for sm", () => {
-      const { container } = render(
-        <CallButton href="tel:123" showBlinkDot={true} size="sm">
-          Call
-        </CallButton>
-      );
-      const dot = container.querySelector(".animate-blink");
-      expect(dot).toHaveClass("h-2", "w-2");
-    });
-
-    it("applies correct dot size for md", () => {
-      const { container } = render(
-        <CallButton href="tel:123" showBlinkDot={true} size="md">
-          Call
-        </CallButton>
-      );
-      const dot = container.querySelector(".animate-blink");
-      expect(dot).toHaveClass("h-3", "w-3");
-    });
-
-    it("applies correct dot size for lg", () => {
-      const { container } = render(
-        <CallButton href="tel:123" showBlinkDot={true} size="lg">
-          Call
-        </CallButton>
-      );
-      const dot = container.querySelector(".animate-blink");
-      expect(dot).toHaveClass("h-4", "w-4");
-    });
-  });
-
-  describe("prefix", () => {
-    it("renders without prefix wrapper when prefix is null", () => {
-      const { container } = render(
-        <CallButton href="tel:123" prefix={null}>
-          Call
-        </CallButton>
-      );
-      // Should not have the outer wrapper span
-      const wrapper = container.querySelector("span.flex.items-center.gap-2");
-      expect(wrapper).not.toBeInTheDocument();
-    });
-
-    it("renders without prefix wrapper when prefix is false", () => {
-      const { container } = render(
-        <CallButton href="tel:123" prefix={false}>
-          Call
-        </CallButton>
-      );
-      const wrapper = container.querySelector("span.flex.items-center.gap-2");
-      expect(wrapper).not.toBeInTheDocument();
-    });
-
-    it("renders without prefix wrapper when prefix is empty string", () => {
-      const { container } = render(
-        <CallButton href="tel:123" prefix="">
-          Call
-        </CallButton>
-      );
-      const wrapper = container.querySelector("span.flex.items-center.gap-2");
-      expect(wrapper).not.toBeInTheDocument();
-    });
-
-    it("renders string prefix in a span", () => {
-      render(
-        <CallButton href="tel:123" prefix="Call now:">
-          555-1234
-        </CallButton>
-      );
-      expect(screen.getByText("Call now:")).toBeInTheDocument();
-    });
-
-    it("renders numeric prefix in a span", () => {
-      render(
-        <CallButton href="tel:123" prefix={42}>
-          Call
-        </CallButton>
-      );
-      expect(screen.getByText("42")).toBeInTheDocument();
-    });
-
-    it("renders ReactNode prefix directly", () => {
-      render(
-        <CallButton
-          href="tel:123"
-          prefix={<strong data-testid="custom-prefix">Custom</strong>}
-        >
-          Call
-        </CallButton>
-      );
-      expect(screen.getByTestId("custom-prefix")).toBeInTheDocument();
-    });
-
-    it("applies containerClassName to the outer wrapper", () => {
-      const { container } = render(
-        <CallButton
-          href="tel:123"
-          prefix="Prefix"
-          containerClassName="my-container"
-        >
-          Call
-        </CallButton>
-      );
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("my-container");
-    });
-  });
-
-  describe("custom className", () => {
-    it("applies custom className to the link", () => {
-      render(
-        <CallButton href="tel:123" className="custom-class">
-          Call
-        </CallButton>
-      );
-      const link = screen.getByRole("link");
-      expect(link.className).toContain("custom-class");
-    });
-  });
-
-  describe("accessibility", () => {
-    it("passes aria attributes to the link", () => {
-      render(
-        <CallButton href="tel:123" aria-label="Call support">
-          Call
-        </CallButton>
-      );
-      const link = screen.getByRole("link");
-      expect(link).toHaveAttribute("aria-label", "Call support");
-    });
-  });
-});
+/// <reference types="@testing-library/jest-dom" />
+import React from "react";
+import { CallButton } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock dependencies
+/* eslint-disable react/prop-types */
+jest.mock("@shared/components/link", () => ({
+  Link: ({
+    children,
+    className,
+    href,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: React.ReactNode;
+  }) => (
+    <a href={href} className={className} {...props}>
+      {children}
+    </a>
+  ),
+}));
+/* eslint-enable react/prop-types */
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: { name: string; className?: string }) => (
+    <span data-testid={`material-icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: unknown[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("CallButton", () => {
+  describe("rendering", () => {
+    it("renders children text content", () => {
+      render(<CallButton href="tel:+1234567890">Call Us</CallButton>);
+      expect(screen.getByText("Call Us")).toBeInTheDocument();
+    });
+
+    it("renders the call icon", () => {
+      render(<CallButton href="tel:+1234567890">Call</CallButton>);
+      expect(screen.getByTestId("material-icon-call")).toBeInTheDocument();
+    });
+
+    it("renders an anchor element via Link", () => {
+      render(<CallButton href="tel:+1234567890">Call</CallButton>);
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("href", "tel:+1234567890");
+    });
+
+    it("applies displayName correctly", () => {
+      expect(CallButton.displayName).toBe("CallButton");
+    });
+  });
+
+  describe("size variants", () => {
+    it("applies sm size classes", () => {
+      render(
+        <CallButton href="tel:123" size="sm">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("h-6");
+      expect(link.className).toContain("text-xs");
+    });
+
+    it("applies md size classes by default", () => {
+      render(<CallButton href="tel:123">Call</CallButton>);
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("h-8");
+      expect(link.className).toContain("text-sm");
+    });
+
+    it("applies lg size classes", () => {
+      render(
+        <CallButton href="tel:123" size="lg">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("h-10");
+      expect(link.className).toContain("text-base");
+    });
+  });
+
+  describe("buttonStyle variants", () => {
+    it("applies primary style classes by default", () => {
+      render(<CallButton href="tel:123">Call</CallButton>);
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("border-border");
+      expect(link.className).toContain("text-text");
+    });
+
+    it("applies primary style classes when explicitly set", () => {
+      render(
+        <CallButton href="tel:123" buttonStyle="primary">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("border-border");
+    });
+  });
+
+  describe("blinking dot", () => {
+    it("does not render blinking dot by default", () => {
+      const { container } = render(
+        <CallButton href="tel:123">Call</CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).not.toBeInTheDocument();
+    });
+
+    it("renders blinking dot when showBlinkDot is true", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true}>
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toBeInTheDocument();
+    });
+
+    it("applies correct dot size for sm", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true} size="sm">
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toHaveClass("h-2", "w-2");
+    });
+
+    it("applies correct dot size for md", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true} size="md">
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toHaveClass("h-3", "w-3");
+    });
+
+    it("applies correct dot size for lg", () => {
+      const { container } = render(
+        <CallButton href="tel:123" showBlinkDot={true} size="lg">
+          Call
+        </CallButton>
+      );
+      const dot = container.querySelector(".animate-blink");
+      expect(dot).toHaveClass("h-4", "w-4");
+    });
+  });
+
+  describe("prefix", () => {
+    it("renders without prefix wrapper when prefix is null", () => {
+      const { container } = render(
+        <CallButton href="tel:123" prefix={null}>
+          Call
+        </CallButton>
+      );
+      // Should not have the outer wrapper span
+      const wrapper = container.querySelector("span.flex.items-center.gap-2");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    it("renders without prefix wrapper when prefix is false", () => {
+      const { container } = render(
+        <CallButton href="tel:123" prefix={false}>
+          Call
+        </CallButton>
+      );
+      const wrapper = container.querySelector("span.flex.items-center.gap-2");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    it("renders without prefix wrapper when prefix is empty string", () => {
+      const { container } = render(
+        <CallButton href="tel:123" prefix="">
+          Call
+        </CallButton>
+      );
+      const wrapper = container.querySelector("span.flex.items-center.gap-2");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+
+    it("renders string prefix in a span", () => {
+      render(
+        <CallButton href="tel:123" prefix="Call now:">
+          555-1234
+        </CallButton>
+      );
+      expect(screen.getByText("Call now:")).toBeInTheDocument();
+    });
+
+    it("renders numeric prefix in a span", () => {
+      render(
+        <CallButton href="tel:123" prefix={42}>
+          Call
+        </CallButton>
+      );
+      expect(screen.getByText("42")).toBeInTheDocument();
+    });
+
+    it("renders ReactNode prefix directly", () => {
+      render(
+        <CallButton
+          href="tel:123"
+          prefix={<strong data-testid="custom-prefix">Custom</strong>}
+        >
+          Call
+        </CallButton>
+      );
+      expect(screen.getByTestId("custom-prefix")).toBeInTheDocument();
+    });
+
+    it("applies containerClassName to the outer wrapper", () => {
+      const { container } = render(
+        <CallButton
+          href="tel:123"
+          prefix="Prefix"
+          containerClassName="my-container"
+        >
+          Call
+        </CallButton>
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.className).toContain("my-container");
+    });
+  });
+
+  describe("custom className", () => {
+    it("applies custom className to the link", () => {
+      render(
+        <CallButton href="tel:123" className="custom-class">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link.className).toContain("custom-class");
+    });
+  });
+
+  describe("accessibility", () => {
+    it("passes aria attributes to the link", () => {
+      render(
+        <CallButton href="tel:123" aria-label="Call support">
+          Call
+        </CallButton>
+      );
+      const link = screen.getByRole("link");
+      expect(link).toHaveAttribute("aria-label", "Call support");
+    });
+  });
+});