@windstream/react-shared-components 0.2.74 → 0.2.76

package/src/contentful/blocks/ordered-list/index.test.tsx

@@ -0,0 +1,163 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { OrderedList } from "./index";
+
+import { render, screen, within } from "@testing-library/react";
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, title, className }: any) => (
+    <a href={href} title={title} className={className} data-testid="ol-link">
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as: Tag = "span", className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/dynamic-tabs", () => ({
+  DynamicTabs: ({
+    tabs,
+    dynamic,
+    isOrderedList,
+    navigationType,
+    mobileSidebarTabType,
+  }: any) => (
+    <div
+      data-testid="dynamic-tabs"
+      data-dynamic={String(dynamic)}
+      data-ordered={String(isOrderedList)}
+      data-nav={String(navigationType)}
+      data-sidebar={String(mobileSidebarTabType)}
+    >
+      {tabs.items.map((tab: any) => (
+        <div
+          key={tab.anchorId}
+          data-testid="dt-tab"
+          data-tabname={tab.tabName}
+          data-anchor={tab.anchorId}
+        >
+          {tab.tabContent}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe("OrderedList", () => {
+  const tabs = [
+    {
+      items: {
+        tabName: "States",
+        tabContent: [
+          { itemName: "new york", itemSlug: "/new-york" },
+          { itemName: "los angeles" },
+        ],
+      },
+    },
+    {
+      items: {
+        tabName: "Cities",
+        tabContent: [{ itemName: "san FRANCISCO", itemSlug: "/sf" }],
+      },
+    },
+  ];
+
+  const renderComponent = (overrides: Partial<any> = {}) =>
+    render(
+      <OrderedList
+        title="Browse locations"
+        description="Find availability near you"
+        tabs={tabs}
+        {...overrides}
+      />
+    );
+
+  it("renders the title and description", () => {
+    renderComponent();
+    expect(screen.getByText("Browse locations")).toBeInTheDocument();
+    expect(screen.getByText("Find availability near you")).toBeInTheDocument();
+  });
+
+  it("renders the section with the provided anchor id and testid", () => {
+    const { container } = renderComponent({ anchorId: "locations" });
+    const section = container.querySelector(
+      '[data-testid="non-fiber-city-list"]'
+    );
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveAttribute("id", "locations");
+  });
+
+  it("defaults the background to white", () => {
+    const { container } = renderComponent();
+    expect(container.querySelector(".bg-secondary-white")).toBeInTheDocument();
+  });
+
+  it("applies the cream background when requested", () => {
+    const { container } = renderComponent({ backgroundColor: "cream" });
+    expect(container.querySelector(".bg-secondary-cream")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-secondary-white")
+    ).not.toBeInTheDocument();
+  });
+
+  it("forwards the expected flags to DynamicTabs", () => {
+    renderComponent();
+    const dynamicTabs = screen.getByTestId("dynamic-tabs");
+    expect(dynamicTabs).toHaveAttribute("data-dynamic", "true");
+    expect(dynamicTabs).toHaveAttribute("data-ordered", "true");
+    expect(dynamicTabs).toHaveAttribute("data-nav", "false");
+    expect(dynamicTabs).toHaveAttribute("data-sidebar", "false");
+  });
+
+  it("maps each tab with its name and a generated anchor id", () => {
+    renderComponent();
+    const dtTabs = screen.getAllByTestId("dt-tab");
+    expect(dtTabs).toHaveLength(2);
+    expect(dtTabs[0]).toHaveAttribute("data-tabname", "States");
+    expect(dtTabs[0]).toHaveAttribute("data-anchor", "tab-0");
+    expect(dtTabs[1]).toHaveAttribute("data-tabname", "Cities");
+    expect(dtTabs[1]).toHaveAttribute("data-anchor", "tab-1");
+  });
+
+  it("title-cases item names regardless of input casing", () => {
+    renderComponent();
+    // "new york" -> "New York", "los angeles" -> "Los Angeles",
+    // "san FRANCISCO" -> "San Francisco"
+    expect(screen.getByText("New York")).toBeInTheDocument();
+    expect(screen.getByText("Los Angeles")).toBeInTheDocument();
+    expect(screen.getByText("San Francisco")).toBeInTheDocument();
+  });
+
+  it("renders a linked item with an uppercased title and href", () => {
+    renderComponent();
+    const link = screen.getByText("New York").closest("a");
+    expect(link).not.toBeNull();
+    expect(link).toHaveAttribute("href", "/new-york");
+    expect(link).toHaveAttribute("title", "NEW YORK");
+  });
+
+  it("renders an item without a slug as plain text (no link)", () => {
+    renderComponent();
+    const losAngeles = screen.getByText("Los Angeles");
+    expect(losAngeles.closest("a")).toBeNull();
+  });
+
+  it("keeps each tab's items within that tab", () => {
+    renderComponent();
+    const dtTabs = screen.getAllByTestId("dt-tab");
+    expect(within(dtTabs[0]).getByText("New York")).toBeInTheDocument();
+    expect(within(dtTabs[0]).getByText("Los Angeles")).toBeInTheDocument();
+    expect(within(dtTabs[1]).getByText("San Francisco")).toBeInTheDocument();
+    expect(within(dtTabs[1]).queryByText("New York")).toBeNull();
+  });
+
+  it("does not render DynamicTabs when there are no tabs", () => {
+    renderComponent({ tabs: [] });
+    expect(screen.queryByTestId("dynamic-tabs")).toBeNull();
+  });
+});

package/src/contentful/blocks/primary-hero/index.tsx

@@ -184,6 +184,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 const checklistEl = (
                   <Checklist
                     iconSize={24}
+                    iconPosition="top"
                     listItemClassName={`body2 text-left ${textColorClass}`}
                     items={checklist.map(item =>
                       item.iconUrl