@windstream/react-shared-components 0.1.94 → 0.1.96

package/src/contentful/blocks/search-block/index.test.tsx

@@ -1,268 +1,268 @@
-import React from "react";
-import { SearchBlock } from "./index";
-import { SearchBlockProps } from "./types";
-
-import { fireEvent, render, screen } from "@testing-library/react";
-
-// Mock dependencies
-jest.mock("@shared/components/button", () => ({
-  Button: ({ children, onClick, type, className, ...rest }: any) => (
-    <button onClick={onClick} type={type} className={className} {...rest}>
-      {children}
-    </button>
-  ),
-}));
-
-jest.mock("@shared/components/input", () => ({
-  Input: ({
-    value,
-    onChange,
-    placeholder,
-    className,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    containerClassName,
-    ...rest
-  }: any) => (
-    <input
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      className={className}
-      data-testid="search-input"
-      {...rest}
-    />
-  ),
-}));
-
-jest.mock("@shared/components/material-icon", () => ({
-  MaterialIcon: ({ name, className }: any) => (
-    <span data-testid={`icon-${name}`} className={className}>
-      {name}
-    </span>
-  ),
-}));
-
-jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
-  ),
-}));
-
-jest.mock("@shared/utils", () => ({
-  cx: (...args: any[]) => args.filter(Boolean).join(" "),
-}));
-
-const defaultProps: SearchBlockProps = {
-  title: "Search Our Plans",
-  backgroundColor: "white",
-  color: "dark",
-};
-
-describe("SearchBlock", () => {
-  describe("Rendering", () => {
-    it("renders with data-testid", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.getByTestId("search-block")).toBeInTheDocument();
-    });
-
-    it("renders title", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.getByText("Search Our Plans")).toBeInTheDocument();
-    });
-
-    it("renders with default anchorId", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.getByTestId("search-block")).toHaveAttribute(
-        "id",
-        "SearchBlock"
-      );
-    });
-
-    it("renders with custom anchorId", () => {
-      render(<SearchBlock {...defaultProps} anchorId="custom-search" />);
-      expect(screen.getByTestId("search-block")).toHaveAttribute(
-        "id",
-        "custom-search"
-      );
-    });
-
-    it("renders search input with placeholder", () => {
-      render(
-        <SearchBlock
-          {...defaultProps}
-          searchInputPlaceholder="Enter your address"
-        />
-      );
-      expect(screen.getByTestId("search-input")).toHaveAttribute(
-        "placeholder",
-        "Enter your address"
-      );
-    });
-
-    it("renders search icon button", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.getByTestId("icon-search")).toBeInTheDocument();
-    });
-
-    it("renders submit button with type submit", () => {
-      render(<SearchBlock {...defaultProps} />);
-      const submitBtn = screen.getByTestId("icon-search").closest("button");
-      expect(submitBtn).toHaveAttribute("type", "submit");
-    });
-  });
-
-  describe("Optional content", () => {
-    it("renders subtitle when provided", () => {
-      render(<SearchBlock {...defaultProps} subTitle="Find the best plan" />);
-      expect(screen.getByText("Find the best plan")).toBeInTheDocument();
-    });
-
-    it("does not render subtitle when not provided", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.queryByText("Find the best plan")).not.toBeInTheDocument();
-    });
-
-    it("renders searchDescription when provided", () => {
-      render(
-        <SearchBlock
-          {...defaultProps}
-          searchDescription="Enter your ZIP code"
-        />
-      );
-      expect(screen.getByText("Enter your ZIP code")).toBeInTheDocument();
-    });
-
-    it("does not render searchDescription when not provided", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.queryByText("Enter your ZIP code")).not.toBeInTheDocument();
-    });
-
-    it("renders caption ReactNode when provided", () => {
-      render(
-        <SearchBlock
-          {...defaultProps}
-          caption={<div data-testid="caption">Caption content</div>}
-        />
-      );
-      expect(screen.getByTestId("caption")).toBeInTheDocument();
-    });
-
-    it("does not render caption when not provided", () => {
-      render(<SearchBlock {...defaultProps} />);
-      expect(screen.queryByTestId("caption")).not.toBeInTheDocument();
-    });
-
-    it("renders basicCaption ReactNode when provided", () => {
-      render(
-        <SearchBlock
-          {...defaultProps}
-          basicCaption={<p data-testid="basic-caption">Basic caption</p>}
-        />
-      );
-      expect(screen.getByTestId("basic-caption")).toBeInTheDocument();
-    });
-  });
-
-  describe("Heading levels", () => {
-    it("renders title as h2 when enableHeading is false/undefined", () => {
-      render(<SearchBlock {...defaultProps} />);
-      const el = screen.getByText("Search Our Plans");
-      expect(el.tagName).toBe("H2");
-    });
-
-    it("renders title as h1 when enableHeading is true", () => {
-      render(<SearchBlock {...defaultProps} enableHeading={true} />);
-      const el = screen.getByText("Search Our Plans");
-      expect(el.tagName).toBe("H1");
-    });
-  });
-
-  describe("Background and color themes", () => {
-    it("applies supporting background class", () => {
-      render(<SearchBlock {...defaultProps} backgroundColor="supporting" />);
-      expect(screen.getByTestId("search-block")).toHaveClass(
-        "bg-bg-fill-brand-supporting"
-      );
-    });
-
-    it("applies white background class", () => {
-      render(<SearchBlock {...defaultProps} backgroundColor="white" />);
-      expect(screen.getByTestId("search-block")).toHaveClass("bg-bg");
-    });
-
-    it("applies brand background class", () => {
-      render(<SearchBlock {...defaultProps} backgroundColor="brand" />);
-      expect(screen.getByTestId("search-block")).toHaveClass(
-        "bg-bg-fill-brand"
-      );
-    });
-
-    it("applies dark text color", () => {
-      render(<SearchBlock {...defaultProps} color="dark" />);
-      expect(screen.getByTestId("search-block")).toHaveClass("text-text");
-    });
-
-    it("applies light (white) text color", () => {
-      render(<SearchBlock {...defaultProps} color="light" />);
-      expect(screen.getByTestId("search-block")).toHaveClass("text-white");
-    });
-  });
-
-  describe("Form submission", () => {
-    it("calls onSubmit with searchText on form submit", () => {
-      const mockSubmit = jest.fn();
-      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
-      const input = screen.getByTestId("search-input");
-      fireEvent.change(input, { target: { value: "90210" } });
-      const form = input.closest("form")!;
-      fireEvent.submit(form);
-      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "90210" });
-    });
-
-    it("calls onSubmit with empty string when no text entered", () => {
-      const mockSubmit = jest.fn();
-      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
-      const form = screen.getByTestId("search-input").closest("form")!;
-      fireEvent.submit(form);
-      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "" });
-    });
-
-    it("does not throw when onSubmit is not provided", () => {
-      render(<SearchBlock {...defaultProps} />);
-      const form = screen.getByTestId("search-input").closest("form")!;
-      expect(() => fireEvent.submit(form)).not.toThrow();
-    });
-
-    it("prevents default form submission", () => {
-      const mockSubmit = jest.fn();
-      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
-      const form = screen.getByTestId("search-input").closest("form")!;
-      const submitEvent = new Event("submit", {
-        bubbles: true,
-        cancelable: true,
-      });
-      const prevented = !form.dispatchEvent(submitEvent);
-      expect(prevented).toBe(true);
-    });
-  });
-
-  describe("Input interaction", () => {
-    it("updates input value on change", () => {
-      render(<SearchBlock {...defaultProps} />);
-      const input = screen.getByTestId("search-input") as HTMLInputElement;
-      fireEvent.change(input, { target: { value: "test query" } });
-      expect(input.value).toBe("test query");
-    });
-
-    it("submits the latest typed value", () => {
-      const mockSubmit = jest.fn();
-      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
-      const input = screen.getByTestId("search-input");
-      fireEvent.change(input, { target: { value: "first" } });
-      fireEvent.change(input, { target: { value: "second" } });
-      const form = input.closest("form")!;
-      fireEvent.submit(form);
-      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "second" });
-    });
-  });
-});
+import React from "react";
+import { SearchBlock } from "./index";
+import { SearchBlockProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, type, className, ...rest }: any) => (
+    <button onClick={onClick} type={type} className={className} {...rest}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/input", () => ({
+  Input: ({
+    value,
+    onChange,
+    placeholder,
+    className,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    containerClassName,
+    ...rest
+  }: any) => (
+    <input
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      className={className}
+      data-testid="search-input"
+      {...rest}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid={`icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+const defaultProps: SearchBlockProps = {
+  title: "Search Our Plans",
+  backgroundColor: "white",
+  color: "dark",
+};
+
+describe("SearchBlock", () => {
+  describe("Rendering", () => {
+    it("renders with data-testid", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("search-block")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByText("Search Our Plans")).toBeInTheDocument();
+    });
+
+    it("renders with default anchorId", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("search-block")).toHaveAttribute(
+        "id",
+        "SearchBlock"
+      );
+    });
+
+    it("renders with custom anchorId", () => {
+      render(<SearchBlock {...defaultProps} anchorId="custom-search" />);
+      expect(screen.getByTestId("search-block")).toHaveAttribute(
+        "id",
+        "custom-search"
+      );
+    });
+
+    it("renders search input with placeholder", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          searchInputPlaceholder="Enter your address"
+        />
+      );
+      expect(screen.getByTestId("search-input")).toHaveAttribute(
+        "placeholder",
+        "Enter your address"
+      );
+    });
+
+    it("renders search icon button", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("icon-search")).toBeInTheDocument();
+    });
+
+    it("renders submit button with type submit", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const submitBtn = screen.getByTestId("icon-search").closest("button");
+      expect(submitBtn).toHaveAttribute("type", "submit");
+    });
+  });
+
+  describe("Optional content", () => {
+    it("renders subtitle when provided", () => {
+      render(<SearchBlock {...defaultProps} subTitle="Find the best plan" />);
+      expect(screen.getByText("Find the best plan")).toBeInTheDocument();
+    });
+
+    it("does not render subtitle when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByText("Find the best plan")).not.toBeInTheDocument();
+    });
+
+    it("renders searchDescription when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          searchDescription="Enter your ZIP code"
+        />
+      );
+      expect(screen.getByText("Enter your ZIP code")).toBeInTheDocument();
+    });
+
+    it("does not render searchDescription when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByText("Enter your ZIP code")).not.toBeInTheDocument();
+    });
+
+    it("renders caption ReactNode when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          caption={<div data-testid="caption">Caption content</div>}
+        />
+      );
+      expect(screen.getByTestId("caption")).toBeInTheDocument();
+    });
+
+    it("does not render caption when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByTestId("caption")).not.toBeInTheDocument();
+    });
+
+    it("renders basicCaption ReactNode when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          basicCaption={<p data-testid="basic-caption">Basic caption</p>}
+        />
+      );
+      expect(screen.getByTestId("basic-caption")).toBeInTheDocument();
+    });
+  });
+
+  describe("Heading levels", () => {
+    it("renders title as h2 when enableHeading is false/undefined", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const el = screen.getByText("Search Our Plans");
+      expect(el.tagName).toBe("H2");
+    });
+
+    it("renders title as h1 when enableHeading is true", () => {
+      render(<SearchBlock {...defaultProps} enableHeading={true} />);
+      const el = screen.getByText("Search Our Plans");
+      expect(el.tagName).toBe("H1");
+    });
+  });
+
+  describe("Background and color themes", () => {
+    it("applies supporting background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="supporting" />);
+      expect(screen.getByTestId("search-block")).toHaveClass(
+        "bg-bg-fill-brand-supporting"
+      );
+    });
+
+    it("applies white background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="white" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("bg-bg");
+    });
+
+    it("applies brand background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="brand" />);
+      expect(screen.getByTestId("search-block")).toHaveClass(
+        "bg-bg-fill-brand"
+      );
+    });
+
+    it("applies dark text color", () => {
+      render(<SearchBlock {...defaultProps} color="dark" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("text-text");
+    });
+
+    it("applies light (white) text color", () => {
+      render(<SearchBlock {...defaultProps} color="light" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("text-white");
+    });
+  });
+
+  describe("Form submission", () => {
+    it("calls onSubmit with searchText on form submit", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const input = screen.getByTestId("search-input");
+      fireEvent.change(input, { target: { value: "90210" } });
+      const form = input.closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "90210" });
+    });
+
+    it("calls onSubmit with empty string when no text entered", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "" });
+    });
+
+    it("does not throw when onSubmit is not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      expect(() => fireEvent.submit(form)).not.toThrow();
+    });
+
+    it("prevents default form submission", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      const prevented = !form.dispatchEvent(submitEvent);
+      expect(prevented).toBe(true);
+    });
+  });
+
+  describe("Input interaction", () => {
+    it("updates input value on change", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const input = screen.getByTestId("search-input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "test query" } });
+      expect(input.value).toBe("test query");
+    });
+
+    it("submits the latest typed value", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const input = screen.getByTestId("search-input");
+      fireEvent.change(input, { target: { value: "first" } });
+      fireEvent.change(input, { target: { value: "second" } });
+      const form = input.closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "second" });
+    });
+  });
+});