@windstream/react-shared-components 0.2.46 → 0.2.47

package/src/contentful/blocks/email-input-block/index.test.tsx

@@ -1,204 +1,232 @@
+/// <reference types="jest" />
+/// <reference types="@testing-library/jest-dom" />
+
 import { EmailInputBlock } from "./index";
+import { EmailInputBlockProps } from "./types";
 
 import { fireEvent, render, screen } from "@testing-library/react";
 
-describe("EmailInputBlock", () => {
-  const defaultProps = {
-    onSubmit: jest.fn(),
-  };
+const defaultProps: EmailInputBlockProps = {
+  onSubmit: jest.fn(),
+};
 
+describe("EmailInputBlock", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it("renders with default props", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("#email-input")).toBeInTheDocument();
-  });
+  describe("Rendering", () => {
+    it("renders with default props", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("#email-input")).toBeInTheDocument();
+    });
 
-  it("renders custom anchorId", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} anchorId="custom-anchor" />
-    );
-    expect(container.querySelector("#custom-anchor")).toBeInTheDocument();
-  });
+    it("renders custom anchorId", () => {
+      const { container } = render(
+        <EmailInputBlock {...defaultProps} anchorId="custom-anchor" />
+      );
+      expect(container.querySelector("#custom-anchor")).toBeInTheDocument();
+    });
 
-  it("renders title when provided", () => {
-    render(<EmailInputBlock {...defaultProps} title="Join us" />);
-    expect(screen.getByText("Join us")).toBeInTheDocument();
-    expect(screen.getByText("Join us").tagName).toBe("H1");
-  });
+    it("renders title when provided", () => {
+      render(<EmailInputBlock {...defaultProps} title="Join us" />);
+      const title = screen.getByText("Join us");
+      expect(title).toBeInTheDocument();
+      expect(title.tagName).toBe("H1");
+    });
 
-  it("does not render title when not provided", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("h1")).not.toBeInTheDocument();
-  });
+    it("does not render title when not provided", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("h1")).not.toBeInTheDocument();
+    });
 
-  it("renders subTitle when provided", () => {
-    render(<EmailInputBlock {...defaultProps} subTitle="Stay updated" />);
-    expect(screen.getByText("Stay updated")).toBeInTheDocument();
-    expect(screen.getByText("Stay updated").tagName).toBe("H2");
-  });
+    it("renders subTitle when provided", () => {
+      render(<EmailInputBlock {...defaultProps} subTitle="Stay updated" />);
+      const subtitle = screen.getByText("Stay updated");
+      expect(subtitle).toBeInTheDocument();
+      expect(subtitle.tagName).toBe("H2");
+    });
 
-  it("does not render subTitle when not provided", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("h2")).not.toBeInTheDocument();
-  });
+    it("does not render subTitle when not provided", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("h2")).not.toBeInTheDocument();
+    });
 
-  it("renders emailInputDescription when provided", () => {
-    render(
-      <EmailInputBlock {...defaultProps} emailInputDescription="Sign up now" />
-    );
-    expect(screen.getByText("Sign up now")).toBeInTheDocument();
-  });
+    it("renders emailInputDescription when provided", () => {
+      render(
+        <EmailInputBlock
+          {...defaultProps}
+          emailInputDescription="Sign up now"
+        />
+      );
+      expect(screen.getByText("Sign up now")).toBeInTheDocument();
+    });
 
-  it("renders caption when provided", () => {
-    render(<EmailInputBlock {...defaultProps} caption="No spam" />);
-    expect(screen.getByText("No spam")).toBeInTheDocument();
-  });
+    it("renders caption when provided", () => {
+      render(<EmailInputBlock {...defaultProps} caption="No spam" />);
+      expect(screen.getByText("No spam")).toBeInTheDocument();
+    });
 
-  it("does not render caption when not provided", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    expect(screen.queryByText("No spam")).not.toBeInTheDocument();
-  });
+    it("does not render caption when not provided", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      expect(screen.queryByText("No spam")).not.toBeInTheDocument();
+    });
 
-  it("uses default placeholder text", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    expect(
-      screen.getByPlaceholderText("Enter your email here")
-    ).toBeInTheDocument();
-  });
+    it("uses default placeholder text", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      expect(
+        screen.getByPlaceholderText("Enter your email here")
+      ).toBeInTheDocument();
+    });
 
-  it("uses custom placeholder text", () => {
-    render(<EmailInputBlock {...defaultProps} inputPlaceholder="Your email" />);
-    expect(screen.getByPlaceholderText("Your email")).toBeInTheDocument();
+    it("uses custom placeholder text", () => {
+      render(
+        <EmailInputBlock {...defaultProps} inputPlaceholder="Your email" />
+      );
+      expect(screen.getByPlaceholderText("Your email")).toBeInTheDocument();
+    });
   });
 
-  it("calls onSubmit with email on valid submission", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "test@example.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(defaultProps.onSubmit).toHaveBeenCalledWith({
-      email: "test@example.com",
+  describe("Form submission", () => {
+    it("calls onSubmit with email on valid submission", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "test@example.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(defaultProps.onSubmit).toHaveBeenCalledWith({
+        email: "test@example.com",
+      });
     });
-  });
 
-  it("clears email after successful submission", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText(
-      "Enter your email here"
-    ) as HTMLInputElement;
-    fireEvent.change(input, { target: { value: "test@example.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(input.value).toBe("");
+    it("clears email after successful submission", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText(
+        "Enter your email here"
+      ) as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "test@example.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(input.value).toBe("");
+    });
   });
 
-  it("shows error for invalid email", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "invalid" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Invalid email address")).toBeInTheDocument();
-    expect(defaultProps.onSubmit).not.toHaveBeenCalled();
-  });
+  describe("Validation", () => {
+    it("shows error for invalid email", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "invalid" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Invalid email address")).toBeInTheDocument();
+      expect(defaultProps.onSubmit).not.toHaveBeenCalled();
+    });
 
-  it("shows required error for empty email", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Email is required")).toBeInTheDocument();
-    expect(defaultProps.onSubmit).not.toHaveBeenCalled();
-  });
+    it("shows required error for empty email", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Email is required")).toBeInTheDocument();
+      expect(defaultProps.onSubmit).not.toHaveBeenCalled();
+    });
 
-  it("clears error when user types a valid email after error", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "invalid" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Invalid email address")).toBeInTheDocument();
-
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    expect(
-      screen.queryByText("Invalid email address")
-    ).not.toBeInTheDocument();
+    it("clears error when user types a valid email after error", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "invalid" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Invalid email address")).toBeInTheDocument();
+
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      expect(
+        screen.queryByText("Invalid email address")
+      ).not.toBeInTheDocument();
+    });
   });
 
-  it("shows success feedback after valid submission", () => {
-    render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Thanks!")).toBeInTheDocument();
-  });
+  describe("Success feedback", () => {
+    it("shows success feedback after valid submission", () => {
+      render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Thanks!")).toBeInTheDocument();
+    });
 
-  it("hides success feedback when user types again", () => {
-    render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Thanks!")).toBeInTheDocument();
+    it("hides success feedback when user types again", () => {
+      render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Thanks!")).toBeInTheDocument();
 
-    fireEvent.change(input, { target: { value: "x" } });
-    expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
-  });
+      fireEvent.change(input, { target: { value: "x" } });
+      expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+    });
 
-  it("does not show success feedback without successFeedback prop", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    // No success text rendered
-    expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+    it("does not show success feedback without successFeedback prop", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+    });
   });
 
-  it("applies green theme background by default", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector(".bg-bg-fill-brand")).toBeInTheDocument();
-  });
+  describe("Themes", () => {
+    it("applies green theme background by default", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(
+        container.querySelector(".bg-bg-fill-brand")
+      ).toBeInTheDocument();
+    });
 
-  it("applies blue theme background class", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} themeColor="blue" />
-    );
-    expect(
-      container.querySelector(".bg-bg-fill-brand-supporting")
-    ).toBeInTheDocument();
-  });
+    it("applies blue theme background class", () => {
+      const { container } = render(
+        <EmailInputBlock {...defaultProps} themeColor="blue" />
+      );
+      expect(
+        container.querySelector(".bg-bg-fill-brand-supporting")
+      ).toBeInTheDocument();
+    });
 
-  it("applies purple theme background class", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} themeColor="purple" />
-    );
-    expect(
-      container.querySelector(".bg-bg-fill-brand-tertiary")
-    ).toBeInTheDocument();
-  });
+    it("applies purple theme background class", () => {
+      const { container } = render(
+        <EmailInputBlock {...defaultProps} themeColor="purple" />
+      );
+      expect(
+        container.querySelector(".bg-bg-fill-brand-tertiary")
+      ).toBeInTheDocument();
+    });
 
-  it("applies white outer background class by default", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("section")).toHaveClass("bg-bg");
-  });
+    it("applies white outer background class by default", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("section")).toHaveClass("bg-bg");
+    });
 
-  it("uses white text for dark themes", () => {
-    render(
-      <EmailInputBlock {...defaultProps} themeColor="blue" title="Blue title" />
-    );
-    expect(screen.getByText("Blue title").className).toContain("text-white");
-  });
+    it("uses white text for dark themes", () => {
+      render(
+        <EmailInputBlock
+          {...defaultProps}
+          themeColor="blue"
+          title="Blue title"
+        />
+      );
+      expect(screen.getByText("Blue title")).toHaveClass("text-white");
+    });
 
-  it("uses dark text for the white theme", () => {
-    render(
-      <EmailInputBlock
-        {...defaultProps}
-        themeColor="white"
-        title="White title"
-      />
-    );
-    expect(screen.getByText("White title").className).toContain("text-text");
+    it("uses dark text for the white theme", () => {
+      render(
+        <EmailInputBlock
+          {...defaultProps}
+          themeColor="white"
+          title="White title"
+        />
+      );
+      expect(screen.getByText("White title")).toHaveClass("text-text");
+    });
   });
 
-  it("uses custom ctaText", () => {
-    render(<EmailInputBlock {...defaultProps} ctaText="Subscribe" />);
-    expect(screen.getByText("Subscribe")).toBeInTheDocument();
+  describe("Call to action", () => {
+    it("uses custom ctaText", () => {
+      render(<EmailInputBlock {...defaultProps} ctaText="Subscribe" />);
+      expect(screen.getByText("Subscribe")).toBeInTheDocument();
+    });
   });
 });