@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -7,189 +7,189 @@ jest.spyOn(globalFuncs, "generateId");
 globalFuncs.generateId.mockImplementation(() => "random-id");
 // mock observers
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
 }));
 global.MutationObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
+  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",
+  .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">
+  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">
+  });
+  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">
+    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">
+    });
+    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">
+    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">
+    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();
+    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();
     });
-    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.");
-        });
+    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.");
     });
+  });
 });