@stackoverflow/stacks 2.4.0 → 2.5.0

package/lib/components/modal/modal.test.ts

@@ -1,155 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen, waitFor } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../../index";
-
-const user = userEvent.setup();
-
-const createModal = ({
-    hidden = true,
-    initialFocusEl,
-}: { hidden?: boolean; initialFocusEl?: ReturnType<typeof html> } = {}) => html`
-    <div data-controller="s-modal">
-        <button
-            class="s-btn"
-            data-action="s-modal#show"
-            data-testid="trigger">
-            Show Modal
-        </button>
-
-        <aside
-            class="s-modal"
-            id="modal-base"
-            tabindex="-1"
-            role="dialog"
-            aria-labelledby="modal-base-title"
-            aria-describedby="modal-base-description"
-            aria-hidden="${hidden}"
-            data-s-modal-target="modal"
-            data-testid="modal">
-            <div class="s-modal--dialog" role="document">
-                <h1 class="s-modal--header" id="modal-base-title">Title</h1>
-
-                <p class="s-modal--body">
-                    <span id="modal-base-description">Description</span>
-                    <form>
-                        <input type="text" data-testid="first-focusable-element" />
-                        ${initialFocusEl}
-                    </form>
-                </p>
-
-                <div class="d-flex gx8 s-modal--footer">
-                    <button class="flex--item s-btn s-btn__filled" type="button">Save changes</button>
-                    <button class="flex--item s-btn" type="button" data-action="s-modal#hide">Cancel</button>
-                </div>
-
-                <button
-                    class="s-btn s-btn__muted s-modal--close"
-                    type="button"
-                    aria-label="Close"
-                    data-action="s-modal#hide"
-                    data-testid="close-btn">
-                    Close
-                </button>
-            </div>
-        </aside>
-    </div>
-`;
-
-describe("modal", () => {
-    it("should make the modal visible when toggle button is clicked", async () => {
-        await fixture(createModal());
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-
-        expect(modal).not.to.be.visible;
-
-        await user.click(trigger);
-
-        expect(modal).to.be.visible;
-    });
-
-    it("should hide the modal when the close button is clicked", async () => {
-        await fixture(createModal({ hidden: false }));
-
-        const modal = await screen.findByTestId("modal");
-        const closeBtn = await screen.findByTestId("close-btn");
-
-        expect(modal).to.be.visible;
-
-        await user.click(closeBtn);
-
-        await waitFor(() => expect(modal).not.to.be.visible);
-    });
-
-    it('should focus on the first element with `data-s-modal-target"initialFocus"` when modal is shown', async () => {
-        await fixture(
-            createModal({
-                initialFocusEl: html`<input
-                    type="text"
-                    data-testid="initialFocus"
-                    data-s-modal-target="initialFocus"
-                />`,
-            })
-        );
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-        const initialFocusEl = await screen.findByTestId("initialFocus");
-
-        expect(modal).not.to.be.visible;
-
-        await user.click(trigger);
-        expect(modal).to.be.visible;
-
-        await waitFor(() => expect(initialFocusEl).to.have.focus);
-    });
-
-    it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {
-        await fixture(createModal());
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-        const focusableEl = await screen.findByTestId(
-            "first-focusable-element"
-        );
-
-        expect(modal).not.to.be.visible;
-        expect(focusableEl).not.to.have.focus;
-
-        await user.click(trigger);
-        expect(modal).to.be.visible;
-
-        await waitFor(() => expect(focusableEl).to.have.focus);
-    });
-
-    it("should not change set focus when an element within the modal is already focused", async () => {
-        await fixture(createModal());
-
-        const modal = await screen.findByTestId("modal");
-        const trigger = await screen.findByTestId("trigger");
-        const firstFocusableEl = await screen.findByTestId(
-            "first-focusable-element"
-        );
-        const closeButton = await screen.findByTestId("close-btn");
-
-        expect(modal).not.to.be.visible;
-        expect(firstFocusableEl).not.to.have.focus;
-
-        await user.click(trigger);
-        expect(modal).to.be.visible;
-
-        // manually focus on an element within the modal
-        closeButton.focus();
-
-        // wait for s-modal:shown css transition to complete
-        await new Promise((resolve) =>
-            modal.addEventListener("s-modal:shown", resolve)
-        );
-
-        // check that focus stayed on the manually focused element and
-        // has not changed to the first focusable element
-        expect(closeButton).to.have.focus;
-    });
-});

package/lib/components/modal/modal.visual.test.ts

@@ -1,41 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
-import "../../index";
-
-describe("modal", () => {
-    runVisualTests({
-        baseClass: `s-modal`,
-        variants: ["danger"],
-        modifiers: {
-            primary: ["celebration"],
-            secondary: ["full"],
-        },
-        children: {
-            default: `
-                <div class="s-modal--dialog" role="document">
-                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
-                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
-                    <div class="d-flex gx8 s-modal--footer">
-                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
-                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
-                    </div>
-                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
-                        ${IconClearSm}
-                    </button>
-                </div>
-            `,
-        },
-        tag: "aside",
-        attributes: {
-            "id": "example-modal",
-            "tabindex": "-1",
-            "aria-hidden": "false",
-            "aria-labelledby": "modal-title",
-            "class": "ps-relative p32",
-        },
-        template: ({ component, testid }) => html`
-            <div class="m8 ws6" data-testid="${testid}">${component}</div>
-        `,
-    });
-});

package/lib/components/navigation/navigation.a11y.test.ts

@@ -1,81 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { WCAGNonTextContrast } from "../../test/assertions";
-import "../../index";
-
-const items = [
-    {
-        label: "Group 1",
-        title: true,
-    },
-    {
-        label: "Product",
-        selected: true,
-    },
-    {
-        label: "Email",
-    },
-    {
-        label: "Group 2",
-        title: true,
-    },
-    {
-        label: "Content",
-    },
-    {
-        label: "Brand",
-    },
-    {
-        label: "Marketing",
-    },
-    {
-        label: "More selected",
-        dropdown: true,
-        selected: true,
-    },
-    {
-        label: "More",
-        dropdown: true,
-    },
-];
-
-const getChildren = (includeTitles = false): string =>
-    items
-        .map((item) => {
-            if (item.title) {
-                return includeTitles
-                    ? `<li class="s-navigation--title">${item.label}</li>`
-                    : "";
-            }
-            const classes = `s-navigation--item${
-                item.selected ? " is-selected" : ""
-            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
-            return `<li><a href="#" class="${classes}">${item.label}</a></li>`;
-        })
-        .join("");
-
-describe("navigation", () => {
-    runA11yTests({
-        baseClass: "s-navigation",
-        variants: ["vertical", "muted"],
-        modifiers: {
-            primary: ["scroll", "sm"],
-        },
-        tag: "ul",
-        children: {
-            default: getChildren(true),
-        },
-        template: ({ component, testid }) => html`
-            <nav
-                class="d-inline-block p8 wmx3"
-                aria-label="example-navigation"
-                data-testid="${testid}"
-            >
-                ${component}
-            </nav>
-        `,
-        additionalAssertions: [WCAGNonTextContrast],
-        // TODO: fix non-text-contrast SC for s-navigation__muted
-        skippedTestids: [/s-navigation-(light|dark)-muted/],
-    });
-});

package/lib/components/navigation/navigation.visual.test.ts

@@ -1,98 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-const items = [
-    {
-        label: "Group 1",
-        title: true,
-    },
-    {
-        label: "Product",
-        selected: true,
-    },
-    {
-        label: "Email",
-    },
-    {
-        label: "Group 2",
-        title: true,
-    },
-    {
-        label: "Content",
-    },
-    {
-        label: "Brand",
-    },
-    {
-        label: "Marketing",
-    },
-    {
-        label: "More selected",
-        dropdown: true,
-        selected: true,
-    },
-    {
-        label: "More",
-        dropdown: true,
-    },
-];
-
-const getChildren = (includeTitles = false): string =>
-    items
-        .map((item) => {
-            if (item.title) {
-                return includeTitles
-                    ? `<li class="s-navigation--title">${item.label}</li>`
-                    : "";
-            }
-            const classes = `s-navigation--item${
-                item.selected ? " is-selected" : ""
-            }${item.dropdown ? " s-navigation--item__dropdown" : ""}`;
-            return `<li><a href="#" class="${classes}">${item.label}</a></li>`;
-        })
-        .join("");
-
-describe("navigation", () => {
-    runVisualTests({
-        baseClass: "s-navigation",
-        variants: ["muted"],
-        modifiers: {
-            primary: ["scroll", "sm"],
-        },
-        tag: "ul",
-        children: {
-            default: getChildren(),
-        },
-        template: ({ component, testid }) => html`
-            <nav
-                class="d-inline-block p8 wmx3"
-                aria-label="example-navigation"
-                data-testid="${testid}"
-            >
-                ${component}
-            </nav>
-        `,
-    });
-
-    runVisualTests({
-        baseClass: "s-navigation",
-        variants: ["vertical"],
-        tag: "ul",
-        children: {
-            default: getChildren(true),
-        },
-        template: ({ component, testid }) => html`
-            <nav
-                class="d-inline-block p8 ws2"
-                aria-label="example-navigation"
-                data-testid="${testid}"
-            >
-                ${component}
-            </nav>
-        `,
-        options: {
-            includeNullVariant: false,
-        },
-    });
-});

package/lib/components/notice/notice.a11y.test.ts

@@ -1,16 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("notice", () => {
-    runA11yTests({
-        baseClass: "s-notice",
-        variants: ["info", "success", "warning", "danger"],
-        modifiers: {
-            primary: ["important"],
-        },
-        children: {
-            default: `Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a>`,
-        },
-        tag: "aside",
-    });
-});

package/lib/components/notice/notice.visual.test.ts

@@ -1,25 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("notice", () => {
-    runVisualTests({
-        baseClass: "s-notice",
-        variants: ["info", "success", "warning", "danger"],
-        modifiers: {
-            primary: ["important"],
-        },
-        attributes: {
-            ariaHidden: "false",
-        },
-        children: {
-            default: `Test notice <code>some code</code> <a class="s-link s-link__inherit s-link__underlined" href="#">Link</a>`,
-        },
-        tag: "aside",
-        template: ({ component, testid }) => html`
-            <div class="d-inline-block p8 wmx5" data-testid="${testid}">
-                ${component}
-            </div>
-        `,
-    });
-});

package/lib/components/page-title/page-title.a11y.test.ts

@@ -1,28 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-describe("page title", () => {
-    runA11yTests({
-        baseClass: "s-page-title",
-        children: {
-            default: `
-                <div class="s-page-title--text">
-                    <nav class="s-breadcrumbs" aria-label="example-breadcrumbs">…</nav>
-                    <h1 class="s-page-title--header">Page title</h1>
-                    <p class="s-page-title--description">
-                        Optional description de Finibus Bonorum et Malorum
-                    </p>
-                </div>
-                <div class="s-page-title--actions">
-                    <button class="s-btn s-btn__filled" type="button">Action</button>
-                </div>
-            `,
-        },
-        template: ({ component, testid }) => html`
-            <div class="d-block p8 ws6" data-testid="${testid}">
-                ${component}
-            </div>
-        `,
-    });
-});

package/lib/components/page-title/page-title.visual.test.ts

@@ -1,58 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const postTitleTemplate = ({ component, testid }: any) => html`
-    <div class="d-block p8 ws6" data-testid="${testid}">${component}</div>
-`;
-
-const getChildren = ({
-    showEverything = false,
-}: {
-    showEverything: boolean;
-}) => `
-    <div class="s-page-title--text">
-        ${
-            showEverything
-                ? `
-            <nav class="s-breadcrumbs" aria-label="example-breadcrumbs">
-                <div class="s-breadcrumbs--item">
-                    <a class="s-breadcrumbs--link">Stack Overflow</a>
-                </div>
-            </nav>
-        `
-                : ""
-        }
-        <h1 class="s-page-title--header">Page title</h1>
-        ${
-            showEverything
-                ? `
-            <p class="s-page-title--description">
-                Optional description de Finibus Bonorum et Malorum
-            </p>
-        `
-                : ""
-        }
-    </div>
-    ${
-        showEverything
-            ? `
-        <div class="s-page-title--actions">
-            <button class="s-btn s-btn__filled" type="button">Action</button>
-        </div>
-    `
-            : ""
-    }
-`;
-
-describe("page title", () => {
-    runVisualTests({
-        baseClass: "s-page-title",
-        children: {
-            default: getChildren({ showEverything: false }),
-            complete: getChildren({ showEverything: true }),
-        },
-        template: postTitleTemplate,
-    });
-});

package/lib/components/pagination/pagination.a11y.test.ts

@@ -1,21 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { WCAGNonTextContrast } from "../../test/assertions";
-import "../../index";
-
-describe("pagination", () => {
-    runA11yTests({
-        baseClass: "s-pagination",
-        children: {
-            default: `
-                <a class="s-pagination--item" href="#">Prev</a>
-                <a class="s-pagination--item" href="#">1</a>
-                <span class="s-pagination--item is-selected" aria-current="page">2</span>
-                <a class="s-pagination--item" href="#">3</a>
-                <span class="s-pagination--item s-pagination--item__clear">…</span>
-                <a class="s-pagination--item" href="#">100</a>
-                <a class="s-pagination--item" href="#">Next</a>
-            `,
-        },
-        additionalAssertions: [WCAGNonTextContrast],
-    });
-});

package/lib/components/pagination/pagination.visual.test.ts

@@ -1,25 +0,0 @@
-import { html } from "@open-wc/testing";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-describe("pagination", () => {
-    runVisualTests({
-        baseClass: "s-pagination",
-        children: {
-            default: `
-                <a class="s-pagination--item" href="#">Prev</a>
-                <a class="s-pagination--item" href="#">1</a>
-                <span class="s-pagination--item is-selected" aria-current="page">2</span>
-                <a class="s-pagination--item" href="#">3</a>
-                <span class="s-pagination--item s-pagination--item__clear">…</span>
-                <a class="s-pagination--item" href="#">100</a>
-                <a class="s-pagination--item" href="#">Next</a>
-            `,
-        },
-        template: ({ component, testid }) => html`
-            <div class="d-inline-block p8" data-testid="${testid}">
-                ${component}
-            </div>
-        `,
-    });
-});

package/lib/components/popover/tooltip.test.ts

@@ -1,62 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen, waitForElementToBeRemoved } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../../index";
-
-const user = userEvent.setup();
-
-describe("tooltip", () => {
-    it("should make the tooltip element visible on hover (after a delay)", async () => {
-        const trigger = await fixture(html`
-            <button
-                class="s-btn s-btn__filled"
-                role="button"
-                data-controller="s-tooltip"
-                title="tooltip content"
-                data-s-tooltip-placement="bottom-start"
-            >
-                Hover tooltip popover
-            </button>
-        `);
-
-        expect(screen.queryByRole("tooltip")).to.be.null;
-
-        await user.hover(trigger);
-        const tooltip = await screen.findByRole("tooltip");
-        expect(tooltip).to.be.visible;
-
-        await user.unhover(trigger);
-        await waitForElementToBeRemoved(() => screen.queryByRole("tooltip"));
-    });
-
-    it("should not flicker when the host contains an SVG and the user hover on it", async () => {
-        await fixture(html`
-            <button
-                class="s-btn"
-                role="button"
-                title="tooltip content"
-                data-controller="s-tooltip"
-                data-s-tooltip-placement="bottom-start"
-            >
-                <svg
-                    data-testid="svg"
-                    aria-hidden="true"
-                    class="bg-red-400"
-                    width="18"
-                    height="18"
-                    viewBox="0 0 18 18"
-                ></svg>
-                👈 Shouldn't flicker 🤷‍
-            </button>
-        `);
-        const button = screen.getByRole("button");
-        const svg = screen.getByTestId("svg");
-
-        await user.hover(button);
-        const tooltip = await screen.findByRole("tooltip");
-        expect(tooltip).to.be.visible;
-
-        await user.hover(svg);
-        expect(tooltip).to.be.visible;
-    });
-});

package/lib/components/post-summary/post-summary.a11y.test.ts

@@ -1,25 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import testArgs from "./post-summary.test.setup";
-import "../../index";
-
-describe("post-summary", () => {
-    // Base, sparce
-    runA11yTests({
-        ...testArgs.base,
-        // TODO resolve test failures
-        skippedTestids: [
-            /-deleted/,
-            /-ignored/,
-            /-highcontrast-(light|dark)-watched/,
-        ],
-    });
-
-    // Truncated description sizes
-    runA11yTests(testArgs.sizes);
-
-    // Stats - answers, view hotness
-    runA11yTests(testArgs.stats);
-
-    // Badges
-    runA11yTests(testArgs.badges);
-});