npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-4 → 5.11.0-6 - Mend

@watermarkinsights/ripple 5.11.0-4 → 5.11.0-6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

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

@@ -0,0 +1,204 @@
+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.js CHANGED Viewed

@@ -798,7 +798,7 @@ export class TagInput {
     renderTag(o) {
         const focused = this.focusedTag && this.focusedTag.id === "tag-" + o.id ? "focused" : "";
         const tagName = this.getTagName(o);
-        return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${focused} ${o.locked ? "locked" : ""}`, "aria-describedby": `tag-${o.id}-description`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("div", { class: "description", id: `tag-${o.id}-description` }, o.locked ? "locked" : ""), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }))));
+        return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${focused} ${o.locked ? "locked" : ""}`, "aria-describedby": `tag-${o.id}-description`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("div", { class: "description", id: `tag-${o.id}-description` }, o.locked ? "locked" : ""), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "svg-icon svg-locked" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }, h("div", { class: "svg-icon svg-close" })))));
     }
     renderTags() {
         return this.tagsList.map((o) => this.renderTag(o));
@@ -840,7 +840,7 @@ export class TagInput {
             const classes = {
                 focused: !!this._focusedCell && cellId === this._focusedCell.id,
             };
-            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
+            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
         });
     }
     renderTableRow(o) {
@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '51341c91480a0bd8775351040958472ca3b8e6f4', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'd5093793857d3acaa0804a04ad4700fbf7f7fb86', class: "label-wrapper" }, h("label", { key: 'c93f0345c518adb313f8f5327059075023184c56', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '9f869a28e6527a81de52187dc8c08c27dba9963b', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '181fb132ea36b1d4110350d33c4a2f4d05af068c', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '77467753c43ff806af4ac24471fafe4f7eef8e9d', class: "upper-row" }, h("div", { key: '59f80d6730140201dc2f3e9d4f314536fa63cd1e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'ee08bc08d3758af611737d1a161d7966d10c5dae', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: "svg-icon svg-search" }), h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: '6b5e4f09d0b3de33a0c049cc0f1331c0d3c2a680', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '5fec93cbea741cab80bdad46097f3b2ed7538d8d', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'cc343e8be2c9ad89b7187b4fef79f18c6ac30cda', id: "info", class: "info-text" }, this.info)), h("div", { key: '0079bb76abad9795adf09ca24d5a51e001506ea1', id: "error" }, this.errorMessage), h("div", { key: 'a1d74cef536f2431ef9c3e3c1ae127f6b45faf23', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,195 @@
+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.");
+        });
+    });
+});