@stackoverflow/stacks 2.3.3 → 2.5.0

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);
-});