npm - @watermarkinsights/ripple - Versions diffs - 4.3.0 → 4.4.0-0 - Mend

@watermarkinsights/ripple 4.3.0 → 4.4.0-0

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 (371) hide show

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

@@ -1,67 +1,67 @@
 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>
+    // 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>
+        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>
+        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"
@@ -74,131 +74,131 @@ describe("wm-tag-input", () => {
         <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>
+        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>
+        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>
+        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");
-  });
+        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");
+    });
 });