@stackoverflow/stacks 2.4.0 → 2.5.1

package/lib/components/table/table.test.ts

@@ -1,366 +0,0 @@
-import { assert, expect, fixture, html } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import { buildIndex, getCellSlot, SortOrder } from "./table";
-import "../../index";
-import { AsLiterals } from "../../test/test-utils";
-
-const user = userEvent.setup();
-
-const iconData = [
-    {
-        direction: "asc",
-        classes: "iconArrowUpSm js-sorting-indicator-asc d-none",
-        pathD: "M3 9h8L7 5 3 9Z",
-    },
-    {
-        direction: "desc",
-        classes: "iconArrowDownSm js-sorting-indicator-desc d-none",
-        pathD: "M3 5h8L7 9 3 5Z",
-    },
-    {
-        direction: "none",
-        classes: "iconArrowUpDownSm js-sorting-indicator-none",
-        pathD: "m7 2 4 4H3l4-4Zm0 10 4-4H3l4 4Z",
-    },
-];
-
-const sortDirectionIcons = (modifier: string) =>
-    iconData.map(
-        (icon) => html`
-            <svg
-                data-testid="test-sortable-${modifier}-svg-${icon.direction}"
-                aria-hidden="true"
-                class="svg-icon js-sorting-indicator ${icon.classes}"
-                width="14"
-                height="14"
-                viewBox="0 0 14 14"
-            >
-                <path d="${icon.pathD}"></path>
-            </svg>
-        `
-    );
-
-const getTh = (label: string, modifier: string, useButton: boolean) =>
-    useButton
-        ? html`
-              <th
-                  data-s-table-target="column"
-                  data-testid="test-sortable-${modifier}-col"
-              >
-                  <button
-                      data-action="click->s-table#sort"
-                      data-testid="test-sortable-${modifier}-btn"
-                  >
-                      ${label} ${sortDirectionIcons(modifier)}
-                  </button>
-              </th>
-          `
-        : html`
-              <th
-                  data-s-table-target="column"
-                  data-action="click->s-table#sort"
-                  data-testid="test-sortable-${modifier}-col"
-              >
-                  ${label} ${sortDirectionIcons(modifier)}
-              </th>
-          `;
-
-const mockSortableTable = (useButton: boolean) => {
-    return html`
-        <div class="s-table-container" data-testid="test-sortable-table">
-            <table class="s-table s-table__sortable" data-controller="s-table">
-                <thead>
-                    <tr>
-                        ${getTh("Season", "season", useButton)}
-                        ${getTh("Month", "month", useButton)}
-                        ${getTh("Temperature", "temp", useButton)}
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Winter</td>
-                        <td data-s-table-sort-val="12">December</td>
-                        <td>2</td>
-                    </tr>
-                    <tr>
-                        <td>Spring</td>
-                        <td data-s-table-sort-val="3">March</td>
-                        <td>13</td>
-                    </tr>
-                    <tr>
-                        <td>Summer</td>
-                        <td data-s-table-sort-val="6">June</td>
-                        <td>25</td>
-                    </tr>
-                    <tr>
-                        <td>Fall</td>
-                        <td data-s-table-sort-val="9">September</td>
-                        <td>13</td>
-                    </tr>
-                    <tr data-s-table-sort-to="bottom" class="fw-bold">
-                        <td colspan="2">Average temperature</td>
-                        <td>13</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    `;
-};
-
-describe("s-table", () => {
-    // Current, legacy markup
-    [true, false].forEach((useButton) => {
-        describe(`Column sorting indicators${
-            useButton ? "" : " (legacy markup)"
-        }`, () => {
-            const allColIds = [
-                "test-sortable-season-col",
-                "test-sortable-month-col",
-                "test-sortable-temp-col",
-            ] as const;
-            type ColId = AsLiterals<typeof allColIds>;
-
-            const allSvgIds = [
-                "test-sortable-season-svg-asc",
-                "test-sortable-season-svg-desc",
-                "test-sortable-season-svg-none",
-                "test-sortable-month-svg-asc",
-                "test-sortable-month-svg-desc",
-                "test-sortable-month-svg-none",
-                "test-sortable-temp-svg-asc",
-                "test-sortable-temp-svg-desc",
-                "test-sortable-temp-svg-none",
-            ] as const;
-            type SvgId = AsLiterals<typeof allSvgIds>;
-
-            const expectThisColumnToBeSorted = (
-                columnId?: ColId,
-                order?: SortOrder
-            ) => {
-                allColIds.forEach((colId) => {
-                    const columnEl = screen.getByTestId(colId);
-
-                    if (columnId === colId) {
-                        expect(columnEl).to.have.attribute("aria-sort", order);
-                    } else {
-                        expect(columnEl).to.not.have.attribute("aria-sort");
-                    }
-                });
-            };
-
-            const expectTheseIndicatorsToBeVisible = (visibleIds: SvgId[]) => {
-                allSvgIds.forEach((svgId) => {
-                    const svgEl = screen.getByTestId(svgId);
-
-                    if (visibleIds.includes(svgId)) {
-                        expect(svgEl).to.not.have.class("d-none");
-                    } else {
-                        expect(svgEl).to.have.class("d-none");
-                    }
-                });
-            };
-
-            beforeEach(async () => {
-                await fixture(mockSortableTable(useButton));
-            });
-
-            it("should start toggle correctly between ASC/DESC after initial click", async () => {
-                const seasonColumn = useButton
-                    ? screen.getByTestId("test-sortable-season-btn")
-                    : screen.getByTestId("test-sortable-season-col");
-
-                // Starting off in a fresh state, the "None" SVG icon should be visible
-                expectThisColumnToBeSorted();
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-none",
-                    "test-sortable-month-svg-none",
-                    "test-sortable-temp-svg-none",
-                ]);
-
-                // Cycle through all season sort options
-                await user.click(seasonColumn);
-                expectThisColumnToBeSorted(
-                    "test-sortable-season-col",
-                    SortOrder.Ascending
-                );
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-asc",
-                    "test-sortable-month-svg-none",
-                    "test-sortable-temp-svg-none",
-                ]);
-
-                await user.click(seasonColumn);
-                expectThisColumnToBeSorted(
-                    "test-sortable-season-col",
-                    SortOrder.Descending
-                );
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-desc",
-                    "test-sortable-month-svg-none",
-                    "test-sortable-temp-svg-none",
-                ]);
-
-                // Clicking on a sorted column repeatedly will only toggle between ASC/DESC
-                await user.click(seasonColumn);
-                expectThisColumnToBeSorted(
-                    "test-sortable-season-col",
-                    SortOrder.Ascending
-                );
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-asc",
-                    "test-sortable-month-svg-none",
-                    "test-sortable-temp-svg-none",
-                ]);
-            });
-
-            it('should toggle back a column indicator to "None" when another column is clicked', async () => {
-                const seasonColumn = useButton
-                    ? screen.getByTestId("test-sortable-season-btn")
-                    : screen.getByTestId("test-sortable-season-col");
-                const monthColumn = useButton
-                    ? screen.getByTestId("test-sortable-month-btn")
-                    : screen.getByTestId("test-sortable-month-col");
-
-                // Starting off in a fresh state, the "None" SVG icon should be visible
-                expectThisColumnToBeSorted();
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-none",
-                    "test-sortable-month-svg-none",
-                    "test-sortable-temp-svg-none",
-                ]);
-
-                // Click season first; ASC indicator for Season column only should be visible
-                await user.click(seasonColumn);
-                expectThisColumnToBeSorted(
-                    "test-sortable-season-col",
-                    SortOrder.Ascending
-                );
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-asc",
-                    "test-sortable-month-svg-none",
-                    "test-sortable-temp-svg-none",
-                ]);
-
-                // Click on month next
-                await user.click(monthColumn);
-                expectThisColumnToBeSorted(
-                    "test-sortable-month-col",
-                    SortOrder.Ascending
-                );
-                expectTheseIndicatorsToBeVisible([
-                    "test-sortable-season-svg-none",
-                    "test-sortable-month-svg-asc",
-                    "test-sortable-temp-svg-none",
-                ]);
-            });
-        });
-    });
-
-    describe("Helper functions", () => {
-        describe("buildIndex()", () => {
-            it("should make references to individual cells that use `colspan`", async () => {
-                const table = await fixture<HTMLTableElement>(html`
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>Fall</td>
-                                <td>September</td>
-                                <td>13</td>
-                            </tr>
-                            <tr>
-                                <td colspan="2">Winter</td>
-                                <td>10</td>
-                            </tr>
-                            <tr>
-                                <td>Spring</td>
-                                <td colspan="2">April</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                `);
-
-                expect(table.tBodies).to.have.length(1);
-
-                const tableBody = table.tBodies[0];
-                const tableIndex = buildIndex(tableBody);
-
-                expect(tableIndex).to.satisfy((rows: typeof tableIndex) =>
-                    rows.every((row) => row.length === 3)
-                );
-                await expect(tableIndex[1][0]).to.equal(
-                    tableIndex[1][1],
-                    "the Winter cell is expected to be referenced twice in this index"
-                );
-                await expect(tableIndex[2][1]).to.equal(
-                    tableIndex[2][2],
-                    "the April cell is expected to be referenced twice in this index"
-                );
-            });
-
-            it("should make references to individual cells that use `rowspan`", async () => {
-                const table = await fixture<HTMLTableElement>(html`
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td rowspan="2">Fall</td>
-                                <td>September</td>
-                                <td>13</td>
-                            </tr>
-                            <tr>
-                                <td>October</td>
-                                <td>20</td>
-                            </tr>
-                            <tr>
-                                <td rowspan="2">Spring</td>
-                                <td>April</td>
-                                <td>46</td>
-                            </tr>
-                            <tr>
-                                <td>October</td>
-                                <td>20</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                `);
-
-                expect(table.tBodies).to.have.length(1);
-
-                const tableBody = table.tBodies[0];
-                const tableIndex = buildIndex(tableBody);
-
-                expect(tableIndex).to.satisfy((rows: typeof tableIndex) =>
-                    rows.every((row) => row.length === 3)
-                );
-                await expect(tableIndex[1][0]).to.equal(
-                    tableIndex[0][0],
-                    "the Fall cell is expected to be referenced twice across multiple rows"
-                );
-                await expect(tableIndex[3][0]).to.equal(
-                    tableIndex[2][0],
-                    "the Spring cell is expected to be referenced twice in this index"
-                );
-            });
-        });
-
-        describe("getCellSlot()", () => {
-            it("should correctly calculate the column number for each button", async () => {
-                await fixture(mockSortableTable(true));
-
-                [
-                    "test-sortable-season-btn",
-                    "test-sortable-month-btn",
-                    "test-sortable-temp-btn",
-                ].forEach((testID, index) => {
-                    const buttonElement = screen.getByTestId(testID);
-                    const columnCell = buttonElement.parentElement;
-
-                    assert.isNotNull(columnCell);
-                    assert.instanceOf(columnCell, HTMLTableCellElement);
-
-                    void expect(getCellSlot(columnCell)).to.equal(index);
-                });
-            });
-        });
-    });
-});

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

@@ -1,104 +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 template = ({ component, testid }: any) => html`
-    <div class="s-table-container p8" data-testid="${testid}">${component}</div>
-`;
-
-const rows = [
-    {
-        displayName: "Sponge",
-        fullName: "Bobby Geometrislacks",
-        progress: 10,
-        active: true,
-    },
-    {
-        displayName: "Patty",
-        fullName: "Pat Supernova",
-        progress: 50,
-        active: true,
-    },
-    {
-        displayName: "Crustoph",
-        fullName: "Eugene Harold K",
-        progress: 75,
-        active: false,
-    },
-    {
-        displayName: "SCheeks",
-        fullName: "Sandra C.",
-        progress: 100,
-        active: true,
-    },
-];
-
-const children = {
-    default: `
-        <thead>
-            <tr>
-                <th scope="col" class="s-table--bulk">
-                    <label class="v-visible-sr" for="check">bulk action</label>
-                    <input type="checkbox" class="s-checkbox" id="check">
-                </th>
-                <th scope="col">Display Name</th>
-                <th scope="col">Full name</th>
-                <th scope="col" colspan="2">Progress</th>
-                <th scope="col"><span>class="v-visible-sr">Bar</span></th>
-            </tr>
-        </thead>
-        <tbody>
-            ${rows
-                .map(
-                    (row, i) => `
-                <tr class="${row.active ? "" : "is-disabled"}">
-                    <th scope="row">
-                        <label class="v-visible-sr" for="check-${i}">bulk</label>
-                        <input type="checkbox" class="s-checkbox" id="check-${i}">
-                    </th>
-                    <td>${row.displayName}</td>
-                    <td>${row.fullName}</td>
-                    <td class="s-table--progress">${row.progress}</td>
-                    <td class="s-table--progress-bar">
-                        <div class="s-progress bg-white">
-                            <div class="s-progress--bar bg-blue-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${
-                                row.progress
-                            }" aria-label="progressbar" style="width: ${
-                                row.progress
-                            }%"></div>
-                        </div>
-                    </td>
-                    <td><a class="s-link" href="#">Add</a></td>
-                </tr>
-            `
-                )
-                .join("")}
-        </tbody>
-        <tfoot class="s-table--totals">
-            <tr>
-                <td scope="row"><span class="v-visible-sr">Empty</span></td>
-                <th scope="row" class="ta-left">Totals</th>
-                <td><span class="v-visible-sr">Empty</span></td>
-                <td colspan="2">160</td>
-                <td><span class="v-visible-sr">Empty</span></td>
-            </tr>
-        </tfoot>
-    `,
-};
-
-describe("table", () => {
-    // default, sizes
-    runVisualTests({
-        baseClass: "s-table",
-        variants: ["stripes"],
-        modifiers: {
-            primary: ["sm", "lg"],
-            secondary: ["b0", "bx", "bx-simple", "sortable"],
-            // global: ["ta-center", "ta-left", "ta-justify", "ta-right", "va-bottom", "va-middle", "va-top"], // Removing these modifiers *for now* since they create so many test images and would slow testing
-        },
-        tag: "table",
-        children,
-        template,
-    });
-});

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

@@ -1,28 +0,0 @@
-import { IconClearSm } from "@stackoverflow/stacks-icons";
-import { runA11yTests } from "../../test/a11y-test-utils";
-import "../../index";
-
-const children = {
-    default: `default`,
-    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
-    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
-};
-
-describe("tag", () => {
-    runA11yTests({
-        baseClass: "s-tag",
-        variants: ["ignored", "watched", "moderator", "muted", "required"],
-        modifiers: {
-            global: ["is-selected"],
-        },
-        children,
-        // TODO: revisit this after minor tag changes are made
-        skippedTestids: [
-            /s-tag-highcontrast-light-muted/, // 6.33
-            /s-tag-light-is-selected/, // 58.28Lc
-            /s-tag-light-ignored-is-selected/, // 58.28Lc
-            /s-tag-light-moderator-is-selected/, // 49.14Lc
-            /s-tag-light-watched-is-selected/, // 58.28Lc
-        ],
-    });
-});

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

@@ -1,43 +0,0 @@
-import { html } from "@open-wc/testing";
-import { IconClearSm } from "@stackoverflow/stacks-icons";
-import { runVisualTests } from "../../test/visual-test-utils";
-import "../../index";
-
-const children = {
-    default: `default`,
-    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
-    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid }: any) => html`
-    <div data-testid="${testid}" class="d-inline-block p4">${component}</div>
-`;
-
-describe("tag", () => {
-    runVisualTests({
-        baseClass: "s-tag",
-        variants: ["ignored", "watched", "moderator", "muted", "required"],
-        modifiers: {
-            global: ["is-selected"],
-        },
-        children,
-        template,
-    });
-
-    // Size modifiers
-    runVisualTests({
-        baseClass: "s-tag",
-        modifiers: {
-            primary: ["xs", "sm", "md", "lg"],
-            global: ["is-selected"],
-        },
-        children: {
-            default: `default`,
-        },
-        template,
-        options: {
-            includeNullModifier: false,
-        },
-    });
-});

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

@@ -1,29 +0,0 @@
-import { runA11yTests } from "../../test/a11y-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("toast > notice", () => {
-    // This is a test of notice component wrapped in a toast component
-    runA11yTests({
-        baseClass: "s-notice", // s-toast is a wrapper around s-notice
-        variants: ["info", "success", "warning", "danger"],
-        modifiers: {
-            primary: ["important"],
-        },
-        children: {
-            toast: `<span id="message">Test toast</span>`,
-        },
-        tag: "aside",
-        template: ({ component, testid }) => html`
-            <div
-                class="s-toast ps-static t0 l0"
-                role="alertdialog"
-                aria-hidden="false"
-                aria-labelledby="message"
-                data-testid="${testid}"
-            >
-                ${component}
-            </div>
-        `,
-    });
-});

package/lib/components/toast/toast.test.ts

@@ -1,64 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import "../../index";
-import { showToast, hideToast } from "../../controllers";
-
-const user = userEvent.setup();
-
-const testToast = (hidden = true) =>
-    html` <button
-            class="js-open-test-toast"
-            data-toggle="s-toast"
-            data-target="#test-toast"
-        >
-            Show test toast
-        </button>
-        <button type="button" aria-label="Dismiss">Close toast</button>
-        <div
-            role="alertdialog"
-            id="test-toast"
-            class="s-toast"
-            aria-hidden="${hidden}"
-            aria-labelledby="toast-message"
-            data-controller="s-toast"
-            data-s-toast-target="toast"
-            data-s-toast-return-element=".js-open-test-toast[data-target='#test-toast']"
-            data-testid="test-toast"
-        >
-            <aside class="s-notice s-notice__success">
-                <div id="notice-message">Test toast</div>
-            </aside>
-        </div>`;
-
-describe("toast", () => {
-    it("trigger should make toast visible", async () => {
-        await fixture(testToast(true));
-
-        const button = screen.getAllByRole("button")[0]; // Trigger button
-        const toast = screen.getByTestId("test-toast");
-
-        expect(toast).to.have.attribute("aria-hidden", "true");
-        button.addEventListener("click", () => showToast(toast));
-
-        await user.click(button);
-        expect(toast).to.have.attribute("aria-hidden", "false");
-    });
-
-    it("trigger should hide toast", async () => {
-        await fixture(testToast(false));
-
-        const button = screen.getAllByRole("button")[1]; // Close button
-        const toast = screen.getByTestId("test-toast");
-
-        expect(toast).to.have.attribute("aria-hidden", "false");
-        button.addEventListener("click", () => hideToast(toast));
-
-        await user.click(button);
-        expect(toast).to.have.attribute("aria-hidden", "true");
-    });
-
-    // TODO: add test for refocus trigger
-
-    // TODO: add test for removing toast from DOM
-});

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

@@ -1,30 +0,0 @@
-import { runVisualTests } from "../../test/visual-test-utils";
-import { html } from "@open-wc/testing";
-import "../../index";
-
-describe("toast > notice", () => {
-    // This is a test of notice component wrapped in a toast component
-    runVisualTests({
-        baseClass: "s-notice", // s-toast is a wrapper around s-notice
-        variants: ["info", "success", "warning", "danger"],
-        modifiers: {
-            primary: ["important"],
-        },
-        children: {
-            toast: `<span id="message">Test toast</span>`,
-        },
-        tag: "aside",
-        template: ({ component, testid }) => html`
-            <div class="d-inline-block p8" data-testid="${testid}">
-                <div
-                    class="s-toast ps-static t0 l0"
-                    role="alertdialog"
-                    aria-hidden="false"
-                    aria-labelledby="message"
-                >
-                    ${component}
-                </div>
-            </div>
-        `,
-    });
-});