@watermarkinsights/ripple 4.3.0 → 4.4.0-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");
+        });
     });
-    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">
+    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.");
     });
-    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">
+    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");
     });
-    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("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();
     });
-    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.");
+    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.");
+        });
     });
-  });
 });