@watermarkinsights/ripple 5.11.0 → 5.11.1

package/dist/collection/components/wm-snackbar/wm-snackbar.e2e.js

@@ -1,112 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-snackbar", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent("<wm-button id='create-snack' onclick='generateSnackbar()'></wm-button><wm-snackbar notifications='[]' id='snack'></wm-snackbar ><script>function generateSnackbar() { const snackbar = document.getElementById('snack'); const id = '3'; let notifications = JSON.parse(snackbar.notifications); let newNotification = {'id': id, message: 'You did something', link: 'Undo'};       let updatedNotifications = [ ...notifications, newNotification ]; snackbar.notifications = JSON.stringify(updatedNotifications); }</script>");
-        await page.evaluate(async () => {
-            document.addEventListener("wmSnackbarSnackFinished", (ev) => {
-                const snackbar = document.querySelector("wm-snackbar");
-                let newSnacks = JSON.parse(snackbar.notifications).filter((snack) => +snack.id !== +ev.detail.id);
-                snackbar.notifications = JSON.stringify(newSnacks);
-            });
-        });
-    });
-    afterEach(async () => {
-        jest.clearAllTimers();
-    });
-    // RENDER
-    it("it displays a snackbar when it receives a notification", async () => {
-        //generate snackbar
-        const button = await page.find("wm-button");
-        button.click(); //perform action that generates a notification
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).not.toBeNull();
-    });
-    it("it displays multiple snackbars when it receives more than one notification", async () => {
-        //generate snackbars
-        const button = await page.find("wm-button");
-        button.click();
-        await page.waitForChanges();
-        button.click();
-        await page.waitForChanges();
-        const snackbars = await page.findAll("wm-snackbar >>> .content-wrapper");
-        expect(snackbars.length).toBe(2);
-    });
-    it("dismisses the snackbar after 20 seconds if the user is clicking and not tabbing", async () => {
-        //generate snackbar
-        const snackExpired = await page.spyOnEvent("wmSnackbarSnackFinished");
-        const button = await page.find("wm-button");
-        button.click();
-        await page.waitForChanges();
-        let snack = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snack).not.toBeNull();
-        await new Promise((resolve) => {
-            setTimeout(() => {
-                resolve("");
-            }, 21000);
-        });
-        snack = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snack).toBeNull();
-        expect(snackExpired).toHaveReceivedEventDetail({
-            id: "3",
-            message: "You did something",
-            link: "Undo",
-        });
-    });
-    it("dismisses the snackbar when the close button is clicked", async () => {
-        //generate snackbar
-        const triggerButton = await page.find("wm-button");
-        triggerButton.click();
-        await page.waitForChanges();
-        //press close button
-        const closeButton = await page.find("wm-snackbar >>> button");
-        closeButton.click();
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-    });
-    //ACCESSIBILITY
-    it("renders an aria-live region", async () => {
-        const element = await page.find("wm-snackbar >>> #wm-live-region-snack");
-        expect(element).toEqualAttribute("aria-live", "polite");
-    });
-    it("focuses the action link in snackbar if the user is tabbing", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const focusedElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        const link = await page.find("wm-snackbar >>> .link");
-        expect(focusedElId).toBe(link.id);
-    });
-    it("dismisses the snackbar when enter is pressed on close button and returns focus to last active element before snackbar was created", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //press close button
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-        const focusedElId = await page.evaluate(() => document.activeElement.id);
-        expect(focusedElId).toBe("create-snack");
-    });
-    it("dismisses the snackbar if the user tabs out of it and it returns focus to last active element before snackbar was created", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //tab out
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-        const focusedElId = await page.evaluate(() => document.activeElement.id);
-        expect(focusedElId).toBe("create-snack");
-    });
-});

package/dist/collection/components/wm-snackbar/wm-snackbar.spec.js

@@ -1,9 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-jest.mock("../../global/functions");
-import { Snackbar } from "./wm-snackbar";
-describe("wm-snackbar", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({ components: [Snackbar], html: "<wm-snackbar><wm-snackbar>" });
-        expect(comp.root).toMatchSnapshot();
-    });
-});

package/dist/collection/components/wm-tabs/wm-tabs.e2e.js

@@ -1,91 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-tab-item", () => {
-    let page; //, mock: any;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en' dir="ltr">
-      <head><title>Page</title></head>
-        <body>
-          <main style="height: 3000px">
-          <h1>Title</h1>
-            <div id="tab-container">
-              <wm-tab-list id="test-tab" selected-tab="first">
-                <wm-tab-item tab-id="first" id="first-tab">First</wm-tab-item>
-                <wm-tab-item tab-id="second" id="second-tab">Second</wm-tab-item>
-              </wm-tab-list>
-              <wm-tab-panel tab-id="first" id="dynamic-panel">Tab Content First</wm-tab-panel>
-            </div>
-            <div id="test-div"></div>
-          </main>
-        </body>
-      </html>`);
-        await page.evaluate(async () => {
-            const container = document.querySelector("#tab-container");
-            container.addEventListener("wmTabSelected", (ev) => {
-                const tabList = document.querySelector("#test-tab");
-                tabList.selectedTab = ev.detail.tabId;
-            });
-        });
-        await page.waitForChanges();
-    });
-    it("renders a list item with a role of presentation and with a link that has a role of tab", async () => {
-        const tabItem = await page.find("wm-tab-item");
-        const listItem = await tabItem.shadowRoot.querySelector("li");
-        expect(listItem).not.toBeNull();
-        expect(listItem.getAttribute("role")).toEqual("presentation");
-        const link = await tabItem.shadowRoot.querySelector("a");
-        expect(link).not.toBeNull();
-        expect(link.getAttribute("role")).toEqual("tab");
-    });
-    it("emits an event when clicked or enter is pressed", async () => {
-        const wmTabSelectedSpy = await page.spyOnEvent("wmTabSelected");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        expect(wmTabSelectedSpy).toHaveReceivedEventDetail({ tabId: "second" });
-        jest.restoreAllMocks();
-    });
-    it("has an aria-selected attribute set to true when it is selected", async () => {
-        await page.keyboard.press("Tab"); // To next tab component
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        let secondTabItemUncontrolled = await page.find("#second-tab");
-        const linkUncontrolled = await secondTabItemUncontrolled.shadowRoot.querySelector("#tab-link-second");
-        const selectedStatusUncontrolled = await linkUncontrolled.getAttribute("aria-selected");
-        expect(selectedStatusUncontrolled).toBe("true");
-    });
-    it("renders an unordered list with a role of tablist", async () => {
-        const ulElement = await page.find("wm-tab-list >>> ul");
-        expect(ulElement).not.toBeNull();
-        expect(ulElement.getAttribute("role")).toEqual("tablist");
-    });
-    it("has a role of tabpanel", async () => {
-        const tabPanel = await page.find("wm-tab-panel");
-        expect(tabPanel.getAttribute("role")).toEqual("tabpanel");
-    });
-    it("displays if the tab item with the same tabId is selected", async () => {
-        const dynamicPanel = await page.find("#dynamic-panel");
-        expect(dynamicPanel).not.toHaveClass("tab-hidden");
-    });
-    it("does not display if the tab item with the same tabId is not selected", async () => { });
-    it("has an aria-labelledby attribute that corresponds to the correct tab", async () => {
-        //uncontrolled -- tab panel attribute is dynamic
-        let changingTabPanel = await page.find("#dynamic-panel");
-        const label = await changingTabPanel.getAttribute("aria-labelledby");
-        expect(label).toEqual("tab-link-first");
-        let secondTabItemUncontrolled = await page.find("#second-tab");
-        await secondTabItemUncontrolled.click();
-        await page.waitForChanges();
-        changingTabPanel = await page.find("#dynamic-panel");
-        const newLabel = await changingTabPanel.getAttribute("aria-labelledby");
-        expect(newLabel).toEqual("tab-link-second");
-    });
-    it("switches to a dropdown at the appropriate breakpoint", async () => {
-        const comp = await page.find("wm-tab-list");
-        expect(comp).toMatchSnapshot();
-        page.setViewport({ width: 300, height: 900 });
-        await page.waitForChanges();
-        expect(comp).toMatchSnapshot();
-    });
-});

package/dist/collection/components/wm-tabs/wm-tabs.spec.js

@@ -1,12 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TabList } from "./wm-tab-list/wm-tab-list";
-import { TabItem } from "./wm-tab-item/wm-tab-item";
-describe("wm-tabs", () => {
-    it("builds", async () => {
-        const page = await newSpecPage({
-            components: [TabList, TabItem],
-            html: '<wm-tab-list><wm-tab-item id="tab1"></wm-tab-item></wm-tab-list>',
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-});

package/dist/collection/components/wm-tag-input/wm-tag-input.e2e.js

@@ -1,204 +0,0 @@
-import AxePuppeteer from "@axe-core/puppeteer";
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-tag-input", () => {
-    // ts throws erroneous warning about vars being unused...
-    // @ts-ignore
-    let page, el, input;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-tag-input label='label'>
-        <wm-tag-option>One</wm-tag-option>
-        <wm-tag-option>Two</wm-tag-option>
-        <wm-tag-option>Three</wm-tag-option>
-      </wm-tag-input>
-      </main></body></html>`);
-        el = await page.find("wm-tag-input");
-        input = await page.find("wm-tag-input >>> input");
-        await page.waitForChanges();
-    });
-    it("passes Axe checks", async () => {
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    it.skip("uses Enter and Comma to add a new tag", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-tag-input label='label'></wm-tag-input>
-      </main></body></html>`);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.type("Hello");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        let tags = await page.findAll("wm-tag-input >>> .tag");
-        expect(tags[0].textContent).toBe("Hello");
-        await page.keyboard.type("Apple");
-        await page.waitForChanges();
-        await page.keyboard.type(",");
-        await page.waitForChanges();
-        tags = await page.findAll("wm-tag-input >>> .tag");
-        expect(tags[1].textContent).toBe("Apple");
-        // it clears the input when adding a tag
-        const input = await page.find("wm-tag-input >>> input");
-        const inputValue = await input.getProperty("value");
-        expect(inputValue).toBe("");
-        // it includes user-added options in the dropdown
-        const listItems = await page.findAll("wm-tag-input >>> .option");
-        expect(listItems[0].textContent).toBe("Apple");
-        expect(listItems[1].textContent).toBe("Hello");
-        // it shows tags in the order they are added
-        await page.keyboard.type("Third");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        tags = await page.findAll("wm-tag-input >>> .tag");
-        expect(tags[0].textContent).toBe("Hello");
-        expect(tags[1].textContent).toBe("Apple");
-        expect(tags[2].textContent).toBe("Third");
-    });
-    it("displays column1 text instead of id for table variant", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-tag-input
-        tag-input-type="table"
-        label="Share Access"
-        col-headers="Name,Email,Role"
-        col-widths=",40%,20%"
-        col-wrap="wrap,trunc,wrap"
-      >
-        <wm-tag-option selected id="johnprice1" col1="John Price" col2="john.price1@university.edu" col3="Admin" locked></wm-tag-option>
-        <wm-tag-option id="johnprice2" col1="John Price" col2="john.price2@university.edu" col3="Faculty"></wm-tag-option>
-        <wm-tag-option id="samsandwich" col1="Sam Sandwich" col2="sam.sandwich@university.edu" col3="Faculty"></wm-tag-option>
-      </wm-tag-input>
-      </main></body></html>`);
-        await page.waitForChanges();
-        let tagTextList = await page.findAll("wm-tag-input >>> .tag-text");
-        expect(tagTextList[0].textContent).toBe("John Price");
-    });
-    it("does not allow adding tags if add-new prop is false", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-tag-input label='label' add-new="false"></wm-tag-input>
-      </main></body></html>`);
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.type("New Tag");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const tags = await page.findAll("wm-tag-input >>> .tag");
-        expect(tags.length).toBe(0);
-    });
-    it("does not allow duplicate tags to be added", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-tag-input label='label'>
-        <wm-tag-option selected>one</wm-tag-option>
-      </wm-tag-input>
-      </main></body></html>`);
-        let tags = await page.findAll("wm-tag-input >>> .tag");
-        expect(tags.length).toBe(1);
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.type("one");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.press("Delete");
-        await page.keyboard.press("Delete");
-        await page.keyboard.press("Delete");
-        await page.waitForChanges();
-        // it is case insensitive
-        await page.keyboard.type("OnE");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(tags.length).toBe(1);
-    });
-    it("opens dropdown when input field is focused", async () => {
-        const dropdown = await page.find("wm-tag-input >>> .dropdown-wrapper");
-        expect(dropdown).not.toHaveClass("open");
-        await input.focus();
-        expect(dropdown).toHaveClass("open");
-    });
-    it("closes dropdown", async () => {
-        //
-        // when pressing escape twice
-        // when clicking outside of component
-        // when tabbing out of component
-        // not while tabbing inside of component
-    });
-    it("renders the add new button when typing in the input", async () => { });
-    it("removes only user-added tags from the dropdown", async () => {
-        // Removing a pre-existing tag will have it still in the dropdown
-        // removing a user-added tag will remove it from the dropdown
-    });
-    it("navigates the dropdown with arrow keys", async () => {
-        let options = await page.findAll("wm-tag-input >>> .option");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        expect(options[0]).toHaveClass("focused");
-        expect(options[1]).not.toHaveClass("focused");
-        expect(options[2]).not.toHaveClass("focused");
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        expect(options[0]).not.toHaveClass("focused");
-        expect(options[1]).toHaveClass("focused");
-        expect(options[2]).not.toHaveClass("focused");
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        expect(options[0]).not.toHaveClass("focused");
-        expect(options[1]).not.toHaveClass("focused");
-        expect(options[2]).toHaveClass("focused");
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        expect(options[0]).toHaveClass("focused");
-        expect(options[1]).not.toHaveClass("focused");
-        expect(options[2]).not.toHaveClass("focused");
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        expect(options[0]).not.toHaveClass("focused");
-        expect(options[1]).not.toHaveClass("focused");
-        expect(options[2]).toHaveClass("focused");
-    });
-    it("navigates tags with left and right keys", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-tag-input label='label'>
-        <wm-tag-option selected>One</wm-tag-option>
-        <wm-tag-option selected>Two</wm-tag-option>
-        <wm-tag-option selected>Three</wm-tag-option>
-      </wm-tag-input>
-      </main></body></html>`);
-        let tags = await page.findAll("wm-tag-input >>> .tag");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(tags[0]).toHaveClass("focused");
-        expect(tags[1]).not.toHaveClass("focused");
-        expect(tags[2]).not.toHaveClass("focused");
-        await page.keyboard.press("ArrowRight");
-        await page.waitForChanges();
-        expect(tags[0]).not.toHaveClass("focused");
-        expect(tags[1]).toHaveClass("focused");
-        expect(tags[2]).not.toHaveClass("focused");
-        await page.keyboard.press("ArrowLeft");
-        await page.waitForChanges();
-        expect(tags[0]).toHaveClass("focused");
-        expect(tags[1]).not.toHaveClass("focused");
-        expect(tags[2]).not.toHaveClass("focused");
-        await page.keyboard.press("ArrowLeft");
-        await page.waitForChanges();
-        expect(tags[0]).not.toHaveClass("focused");
-        expect(tags[1]).not.toHaveClass("focused");
-        expect(tags[2]).toHaveClass("focused");
-    });
-});

package/dist/collection/components/wm-tag-input/wm-tag-input.spec.js

@@ -1,195 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TagInput } from "./wm-tag-input";
-import { TagOption } from "./wm-tag-option/wm-tag-option";
-import * as globalFuncs from "../../global/functions";
-jest.spyOn(globalFuncs, "generateId");
-// @ts-ignore
-globalFuncs.generateId.mockImplementation(() => "random-id");
-// mock observers
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
-global.MutationObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
-// mockComputedStyle, component measures the placeholder on render to properly position the input
-global.getComputedStyle = jest
-    .fn()
-    .mockImplementation(() => ({
-    paddingLeft: "0px",
-    paddingRight: "0px",
-    marginLeft: "0px",
-    marginRight: "0px",
-}));
-describe("taginput", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input id="input" label="label">
-        <wm-tag-option>one</wm-tag-option>
-        <wm-tag-option>two</wm-tag-option>
-        <wm-tag-option>three</wm-tag-option>
-        <wm-tag-option>four</wm-tag-option>
-      </wm-tag-input>`,
-        });
-    });
-    it("builds", async () => {
-        expect(page.root).toMatchSnapshot();
-    });
-    it("has right aria roles", async () => {
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input label="label" info="info text">
-        <wm-tag-option selected>one</wm-tag-option>
-        <wm-tag-option>two</wm-tag-option>
-        <wm-tag-option selected>three</wm-tag-option>
-        <wm-tag-option>four</wm-tag-option>
-      </wm-tag-input>`,
-        });
-        const label = await page.root.shadowRoot.querySelector("label");
-        expect(label.textContent).toBe("label");
-        const input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("role", "combobox");
-        expect(input).toEqualAttribute("aria-label", "label 50 characters allowed.");
-        const helpText = await page.root.shadowRoot.querySelector(".help-text");
-        expect(input).toEqualAttribute("aria-describedby", helpText.id);
-        const dropdown = await page.root.shadowRoot.querySelector(".dropdown");
-        expect(dropdown).toEqualAttribute("role", "listbox");
-        expect(dropdown).toHaveAttribute("aria-multiselectable");
-        const options = await page.root.shadowRoot.querySelectorAll(".option");
-        options.forEach((option) => {
-            expect(option).toEqualAttribute("role", "option");
-        });
-        const tagArea = await page.root.shadowRoot.querySelector(".tag-area");
-        expect(tagArea).toEqualAttribute("role", "listbox");
-        expect(tagArea).toEqualAttribute("aria-label", "label tag selection. Press Backspace or Delete to remove a tag.");
-        expect(tagArea).toEqualAttribute("aria-describedby", "info max-tags");
-        expect(tagArea).toEqualAttribute("aria-orientation", "horizontal");
-        const tags = await page.root.shadowRoot.querySelectorAll(".tag");
-        tags.forEach((tag) => {
-            expect(tag).toEqualAttribute("role", "option");
-        });
-    });
-    it("changes help text when options are not provided", async () => {
-        // not editable with options
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input label="label" add-new="false">
-        <wm-tag-option>One</wm-tag-option>
-        <wm-tag-option>Two</wm-tag-option>
-        <wm-tag-option>Three</wm-tag-option>
-      </wm-tag-input>`,
-        });
-        const el = page.root;
-        let helpText = await el.shadowRoot.querySelector(".help-text");
-        expect(helpText.textContent).toBe("Search and select a tag.");
-        // editable with options
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input label="label">
-        <wm-tag-option>One</wm-tag-option>
-        <wm-tag-option>Two</wm-tag-option>
-        <wm-tag-option>Three</wm-tag-option>
-      </wm-tag-input>`,
-        });
-        helpText = await page.root.shadowRoot.querySelector(".help-text");
-        expect(helpText.textContent).toBe("Search and select a tag. Press the Enter or Comma key to add a new tag.");
-        // editable without options
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input label="label"></wm-tag-input>`,
-        });
-        helpText = await page.root.shadowRoot.querySelector(".help-text");
-        expect(helpText.textContent).toBe(" Press the Enter or Comma key to add a new tag.");
-    });
-    it("shows the appropriate default placeholder text", async () => {
-        // editable with options
-        await page.setContent(`<wm-tag-input label="label">
-        <wm-tag-option>One</wm-tag-option>
-        <wm-tag-option>Two</wm-tag-option>
-    </wm-tag-input>`);
-        let input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("placeholder", "Add or search for a tag");
-        // editable without options
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input label="label"></wm-tag-input>`,
-        });
-        input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("placeholder", "Add a new tag");
-        // not editable
-        page = await newSpecPage({
-            components: [TagInput, TagOption],
-            html: `<wm-tag-input label="label" add-new="false">
-        <wm-tag-option>One</wm-tag-option>
-        <wm-tag-option>Two</wm-tag-option>
-        <wm-tag-option>Three</wm-tag-option>
-      </wm-tag-input>`,
-        });
-        input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("placeholder", "Search and select a tag");
-    });
-    it("throws error if no label prop is passed", async () => {
-        const mockConsoleError = (console.error = jest.fn());
-        await page.setContent(`<wm-tag-input></wm-tag-input>`);
-        expect(mockConsoleError).toHaveBeenCalledWith("wm-tag-input must have a label property");
-        jest.restoreAllMocks();
-    });
-    describe("handles announcements", () => {
-        it("announces live region notifications", async () => {
-            // announce
-            const component = new TagInput();
-            const div = document.createElement("div");
-            div.textContent = "";
-            //@ts-ignore
-            component.liveRegionEl = div;
-            component.announce("Message");
-            expect(component.liveRegionMessage).toBe("Message");
-        });
-        it("announces existing options", async () => {
-            // announceExistingOptions
-            const component = new TagInput();
-            const element1 = {};
-            const element2 = {};
-            const mockAnnounce = (component.announce = jest.fn());
-            jest.spyOn(component, "optionEls", "get").mockReturnValue([element1, element2]);
-            const spyRequestAnimationFrame = jest
-                .spyOn(window, "requestAnimationFrame")
-                //@ts-ignore
-                .mockImplementation((cb) => cb());
-            component.announceExistingOptions();
-            expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
-            expect(mockAnnounce).toHaveBeenCalledTimes(1);
-            expect(mockAnnounce).toHaveBeenLastCalledWith("2 existing options.");
-            jest.clearAllMocks();
-            jest.spyOn(component, "optionEls", "get").mockReturnValue([element1]);
-            component.announceExistingOptions();
-            expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
-            expect(mockAnnounce).toHaveBeenCalledTimes(1);
-            expect(mockAnnounce).toHaveBeenLastCalledWith("1 existing option.");
-            jest.clearAllMocks();
-            jest.spyOn(component, "optionEls", "get").mockReturnValue([]);
-            component.announceExistingOptions();
-            expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
-            expect(mockAnnounce).toHaveBeenCalledTimes(1);
-            expect(mockAnnounce).toHaveBeenLastCalledWith("0 existing options.");
-            jest.restoreAllMocks();
-        });
-        it("announces character limits warnings", async () => {
-            const component = new TagInput();
-            let message = component.generateCharacterLimitWarning(0, 50);
-            expect(message).toBe("0 of 50 characters entered.");
-            message = component.generateCharacterLimitWarning(30, 50);
-            expect(message).toBe("30 of 50 characters entered.");
-            message = component.generateCharacterLimitWarning(50, 50);
-            expect(message).toBe("50 of 50 characters entered. No additional characters will be entered.");
-            message = component.generateCharacterLimitWarning(75, 50);
-            expect(message).toBe("75 of 50 characters entered. No additional characters will be entered.");
-        });
-    });
-});