@ogds/elements 1.0.0-alpha.6 → 1.0.0-alpha.8

package/src/components/ogds-accordion-toggle/ogds-accordion-toggle.spec.ts

@@ -0,0 +1,227 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+vi.mock("./ogds-accordion-toggle.css", () => ({ default: { cssText: "" } }));
+vi.mock("../../core/token-styles", () => ({ adoptTokenStyles: vi.fn() }));
+
+import { OgdsAccordionToggle } from "./index";
+
+function mountPair({
+  accordionId = "test-accordion",
+  openItems = false,
+  expandLabel,
+  collapseLabel,
+}: {
+  accordionId?: string;
+  openItems?: boolean;
+  expandLabel?: string;
+  collapseLabel?: string;
+} = {}): OgdsAccordionToggle {
+  const accordion = document.createElement("div");
+  accordion.id = accordionId;
+  accordion.innerHTML = `
+    <details${openItems ? " open" : ""}><summary>One</summary></details>
+    <details${openItems ? " open" : ""}><summary>Two</summary></details>
+  `;
+  document.body.appendChild(accordion);
+
+  const toggle = document.createElement(
+    "ogds-accordion-toggle",
+  ) as OgdsAccordionToggle;
+  toggle.setAttribute("controls", accordionId);
+  if (expandLabel) {
+    const span = document.createElement("span");
+    span.slot = "expand-label";
+    span.textContent = expandLabel;
+    toggle.appendChild(span);
+  }
+  if (collapseLabel) {
+    const span = document.createElement("span");
+    span.slot = "collapse-label";
+    span.textContent = collapseLabel;
+    toggle.appendChild(span);
+  }
+  document.body.appendChild(toggle);
+  return toggle;
+}
+
+function getButton(toggle: OgdsAccordionToggle): HTMLButtonElement {
+  return toggle.shadowRoot!.querySelector("button") as HTMLButtonElement;
+}
+
+beforeEach(() => {
+  document.adoptedStyleSheets = [];
+});
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function getExpandSlot(toggle: OgdsAccordionToggle): HTMLSlotElement {
+  return toggle.shadowRoot!.querySelector(
+    'slot[name="expand-label"]',
+  ) as HTMLSlotElement;
+}
+
+function getCollapseSlot(toggle: OgdsAccordionToggle): HTMLSlotElement {
+  return toggle.shadowRoot!.querySelector(
+    'slot[name="collapse-label"]',
+  ) as HTMLSlotElement;
+}
+
+describe("rendering", () => {
+  it("renders with the expand slot visible and fallback text 'Expand All' by default", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    expect(getExpandSlot(toggle).hasAttribute("hidden")).toBe(false);
+    expect(getExpandSlot(toggle).textContent?.trim()).toBe("Expand All");
+    expect(getCollapseSlot(toggle).hasAttribute("hidden")).toBe(true);
+  });
+
+  it("renders with custom slotted expand label content", async () => {
+    const toggle = mountPair({
+      expandLabel: "Open All",
+      collapseLabel: "Close All",
+    });
+    await toggle.updateComplete;
+    expect(toggle.querySelector('[slot="expand-label"]')?.textContent).toBe(
+      "Open All",
+    );
+    expect(toggle.querySelector('[slot="collapse-label"]')?.textContent).toBe(
+      "Close All",
+    );
+  });
+});
+
+describe("MutationObserver sync", () => {
+  it("switches to collapse slot when a panel is opened manually", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    expect(getExpandSlot(toggle).hasAttribute("hidden")).toBe(false);
+
+    const details = document.querySelector("details")!;
+    details.setAttribute("open", "");
+    await Promise.resolve(); // flush MutationObserver callback
+    await toggle.updateComplete;
+
+    expect(getCollapseSlot(toggle).hasAttribute("hidden")).toBe(false);
+    expect(getExpandSlot(toggle).hasAttribute("hidden")).toBe(true);
+  });
+
+  it("switches to expand slot when all panels are closed manually", async () => {
+    const toggle = mountPair({ openItems: true });
+    await toggle.updateComplete;
+    expect(getCollapseSlot(toggle).hasAttribute("hidden")).toBe(false);
+
+    document
+      .querySelectorAll("details")
+      .forEach((d) => d.removeAttribute("open"));
+    await Promise.resolve(); // flush MutationObserver callback
+    await toggle.updateComplete;
+
+    expect(getExpandSlot(toggle).hasAttribute("hidden")).toBe(false);
+    expect(getCollapseSlot(toggle).hasAttribute("hidden")).toBe(true);
+  });
+});
+
+describe("toggleAll", () => {
+  it("opens all details when none are open", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    getButton(toggle).click();
+    await toggle.updateComplete;
+    document.querySelectorAll("details").forEach((d) => {
+      expect(d.hasAttribute("open")).toBe(true);
+    });
+  });
+
+  it("shows the collapse slot and hides the expand slot after expanding all", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    getButton(toggle).click();
+    await toggle.updateComplete;
+    expect(getCollapseSlot(toggle).hasAttribute("hidden")).toBe(false);
+    expect(getExpandSlot(toggle).hasAttribute("hidden")).toBe(true);
+  });
+
+  it("closes all details when all are open", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    getButton(toggle).click();
+    await toggle.updateComplete;
+    getButton(toggle).click();
+    await toggle.updateComplete;
+    document.querySelectorAll("details").forEach((d) => {
+      expect(d.hasAttribute("open")).toBe(false);
+    });
+  });
+
+  it("shows the expand slot and hides the collapse slot after collapsing all", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    getButton(toggle).click();
+    await toggle.updateComplete;
+    getButton(toggle).click();
+    await toggle.updateComplete;
+    expect(getExpandSlot(toggle).hasAttribute("hidden")).toBe(false);
+    expect(getCollapseSlot(toggle).hasAttribute("hidden")).toBe(true);
+  });
+
+  it("logs an error when the target accordion is not found", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    document.body.innerHTML = `<ogds-accordion-toggle controls="nonexistent"></ogds-accordion-toggle>`;
+    const toggle = document.body.querySelector(
+      "ogds-accordion-toggle",
+    ) as OgdsAccordionToggle;
+    await toggle.updateComplete;
+    toggle.toggleAll();
+    expect(errorSpy).toHaveBeenCalledOnce();
+    errorSpy.mockRestore();
+  });
+});
+
+describe("checkOpen", () => {
+  it("returns false when no details are open", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    expect(toggle.checkOpen()).toBe(false);
+  });
+
+  it("returns true when at least one details is open", async () => {
+    const toggle = mountPair({ openItems: true });
+    await toggle.updateComplete;
+    expect(toggle.checkOpen()).toBe(true);
+  });
+});
+
+describe("missing controls attribute", () => {
+  it("logs a console error when controls is not set", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    document.body.innerHTML = `<ogds-accordion-toggle></ogds-accordion-toggle>`;
+    const toggle = document.body.querySelector(
+      "ogds-accordion-toggle",
+    ) as OgdsAccordionToggle;
+    await toggle.updateComplete;
+    expect(errorSpy).toHaveBeenCalledOnce();
+    errorSpy.mockRestore();
+  });
+});
+
+describe("stylesheet adoption", () => {
+  beforeEach(() => {
+    (OgdsAccordionToggle as any)._sheet = null;
+    document.adoptedStyleSheets = [];
+  });
+
+  it("adds a stylesheet to document.adoptedStyleSheets on first mount", async () => {
+    const toggle = mountPair();
+    await toggle.updateComplete;
+    expect(document.adoptedStyleSheets).toHaveLength(1);
+  });
+
+  it("does not add the stylesheet more than once when multiple toggles are mounted", async () => {
+    const toggle1 = mountPair({ accordionId: "acc1" });
+    const toggle2 = mountPair({ accordionId: "acc2" });
+    await Promise.all([toggle1.updateComplete, toggle2.updateComplete]);
+    expect(document.adoptedStyleSheets).toHaveLength(1);
+  });
+});

package/src/components/ogds-accordion-toggle/ogds-accordion-toggle.stories.ts

@@ -0,0 +1,95 @@
+import { html } from "lit";
+import "./index";
+import "../ogds-accordion/index";
+import ComponentDocs from "./docs.mdx";
+import { expect, userEvent, waitFor } from "storybook/test";
+import { within } from "shadow-dom-testing-library";
+
+const items = html`
+  <details>
+    <summary>First Amendment</summary>
+    <p>
+      Congress shall make no law respecting an establishment of religion, or
+      prohibiting the free exercise thereof; or abridging the freedom of speech,
+      or of the press; or the right of the people peaceably to assemble, and to
+      petition the Government for a redress of grievances.
+    </p>
+  </details>
+  <details>
+    <summary>Second Amendment</summary>
+    <p>
+      A well regulated Militia, being necessary to the security of a free State,
+      the right of the people to keep and bear Arms, shall not be infringed.
+    </p>
+  </details>
+  <details>
+    <summary>Third Amendment</summary>
+    <p>
+      No Soldier shall, in time of peace be quartered in any house, without the
+      consent of the Owner, nor in time of war, but in a manner to be prescribed
+      by law.
+    </p>
+  </details>
+`;
+
+export default {
+  title: "Components/Accordion Toggle",
+  component: "ogds-accordion-toggle",
+  tags: ["alpha"],
+  parameters: {
+    docs: {
+      page: ComponentDocs,
+    },
+  },
+};
+
+export const Default = {
+  render: () => html`
+    <ogds-accordion-toggle
+      controls="accordion-toggle-default"
+    ></ogds-accordion-toggle>
+    <ogds-accordion id="accordion-toggle-default">${items}</ogds-accordion>
+  `,
+};
+
+export const CustomLabels = {
+  render: () => html`
+    <ogds-accordion-toggle controls="accordion-toggle-custom">
+      <span slot="expand-label">Show All</span>
+      <span slot="collapse-label">Hide All</span>
+    </ogds-accordion-toggle>
+    <ogds-accordion id="accordion-toggle-custom">${items}</ogds-accordion>
+  `,
+};
+
+export const ToggleTest = {
+  parameters: {
+    docs: {
+      disable: true,
+    },
+  },
+  render: () => html`
+    <ogds-accordion-toggle
+      controls="accordion-toggle-test"
+    ></ogds-accordion-toggle>
+    <ogds-accordion id="accordion-toggle-test">${items}</ogds-accordion>
+  `,
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByShadowRole("button");
+
+    await userEvent.click(button);
+    await waitFor(() => {
+      canvasElement.querySelectorAll("details").forEach((d) => {
+        expect(d).toHaveAttribute("open");
+      });
+    });
+
+    await userEvent.click(button);
+    await waitFor(() => {
+      canvasElement.querySelectorAll("details").forEach((d) => {
+        expect(d).not.toHaveAttribute("open");
+      });
+    });
+  },
+};