@duetds/components 8.5.4 → 8.6.0

package/lib/collection/components/duet-combobox/duet-combobox.e2e.js

@@ -2,18 +2,27 @@
  * Built with Duet Design System
  */
 import { createPage } from "../../utils/test-utils";
+const items = [
+    { id: 0, value: "49200", name: "Heinlahti" },
+    { id: 1, value: "49210", name: "Huutjarvi" },
+    { id: 2, value: "49220", name: "Siltakyla" },
+    { id: 3, value: "49240", name: "Purola" },
+    { id: 4, value: "49270", name: "Something" },
+    { id: 5, value: "49290", name: "Vastila" },
+];
 const createPageWithCombobox = async () => {
-    const combobox = `<duet-combobox force="true"><duet-input label="Combobox Postalcode example" icon="form-location" expand caption="use arrow keys to navigate, type to search list"></duet-input></duet-combobox>`;
+    const combobox = `<duet-combobox><duet-input label="Example" expand></duet-input></duet-combobox>`;
     const page = await createPage(combobox);
     await page.$eval("duet-combobox", (combobox, props) => Object.assign(combobox, props), {
-        items: [
-            { id: 0, value: "49200", name: "Heinlahti" },
-            { id: 1, value: "49210", name: "Huutjarvi" },
-            { id: 2, value: "49220", name: "Siltakyla" },
-            { id: 3, value: "49240", name: "Purola" },
-            { id: 4, value: "49270", name: "Something" },
-            { id: 5, value: "49290", name: "Vastila" },
-        ],
+        items,
+    });
+    return page;
+};
+const createPageWithMultiCombobox = async () => {
+    const combobox = `<duet-combobox multiple></duet-combobox>`;
+    const page = await createPage(combobox);
+    await page.$eval("duet-combobox", (combobox, props) => Object.assign(combobox, props), {
+        items,
     });
     return page;
 };
@@ -23,101 +32,122 @@ describe("duet-combobox", () => {
         const component = await page.find("duet-combobox");
         expect(component).not.toBeNull();
     });
-    it("allow selection of items via keyboard, make sure tabbing away retains content", async () => {
+    it("allows typing in input", async () => {
+        const page = await createPageWithCombobox();
+        const element = await page.find("duet-combobox");
+        const input = await element.find("duet-input .duet-input");
+        await input.click();
+        await page.keyboard.type("Loremipsum", { delay: 150 });
+        expect(await input.getProperty("value")).toBe("Loremipsum");
+        expect(await element.getProperty("value")).toBeFalsy();
+    });
+    it("allows selecting item with keyboard", async () => {
         const page = await createPageWithCombobox();
         const element = await page.find("duet-combobox");
         const input = await element.find("duet-input .duet-input");
         await input.click();
-        // type some chars that match the values in the combobox
         await page.keyboard.type("H", { delay: 150 });
         await page.keyboard.press("ArrowDown", { delay: 150 });
-        // move cursor so we can test maintaining position
         await page.keyboard.press("Enter");
         await page.waitForChanges();
-        // check the value
         expect(await input.getProperty("value")).toBe("Heinlahti");
-        // type some chars that do not match the values in the combobox
-        await page.keyboard.type("superMAN", { delay: 50 });
-        // tab to input
+        expect(await element.getProperty("value")).toBe("49200");
+    });
+    it("keeps independent combobox and input values on blur", async () => {
+        const page = await createPageWithCombobox();
+        const element = await page.find("duet-combobox");
+        const input = await element.find("duet-input .duet-input");
+        await input.click();
+        await page.keyboard.type("H", { delay: 150 });
+        await page.keyboard.press("ArrowDown", { delay: 150 });
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.type("Loremipsum", { delay: 50 });
         await page.keyboard.press("Tab");
-        // we should see value hasn't changed
         await page.waitForChanges();
-        expect(await input.getProperty("value")).toBe("Heinlahti");
+        expect(await input.getProperty("value")).toBe("HeinlahtiLoremipsum");
+        expect(await element.getProperty("value")).toBe("49200");
     });
-    it("closes via escape key with null values if forced", async () => {
+    it("clears input on blur if forced and no selection made", async () => {
         const page = await createPageWithCombobox();
         const element = await page.find("duet-combobox");
         const input = await element.find("duet-input .duet-input");
-        // tab to input
+        element.setProperty("force", true);
+        await page.waitForChanges();
         await page.keyboard.press("Tab");
-        // type some chars that match the values in the combobox
         await page.keyboard.type("Heinlah", { delay: 50 });
-        // send escape
-        await page.keyboard.press("Escape");
+        await page.keyboard.press("Tab");
         await page.waitForChanges();
-        // check the value
         expect(await input.getProperty("value")).toBe("");
+        expect(await element.getProperty("value")).toBeFalsy();
     });
-    it("closes via escape key with set values if forced", async () => {
+    it("reverts input value to the selected item on blur if forced", async () => {
         const page = await createPageWithCombobox();
-        const targetValue = "Heinlahti";
         const element = await page.find("duet-combobox");
         const input = await element.find("duet-input .duet-input");
-        // tab to input
+        element.setProperty("force", true);
+        await page.waitForChanges();
         await page.keyboard.press("Tab");
-        // type some chars that match the values in the combobox
         await page.keyboard.type("Heinlah", { delay: 50 });
-        // move cursor so we can test maintaining position
         await page.keyboard.press("ArrowDown");
         await page.keyboard.press("Enter");
-        //for each letter there is in the string targetValue we need to press backspace
-        for (let i = 0; i < targetValue.length; i++) {
-            await page.keyboard.press("Backspace");
-        }
-        // type some chars that match the values in the combobox
-        await page.keyboard.type("Pyhtää", { delay: 50 });
-        // send escape
-        await page.keyboard.press("Escape");
         await page.waitForChanges();
-        const itemValue = await input.getProperty("value");
-        // check the value
-        expect(itemValue).toBe(targetValue);
+        await page.keyboard.type("Loremipsum", { delay: 50 });
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(await input.getProperty("value")).toBe("Heinlahti");
+        expect(await element.getProperty("value")).toBe("49200");
     });
     it("shows dropdown navigable via keys", async () => {
         const page = await createPageWithCombobox();
         const element = await page.find("duet-combobox");
         const input = await element.find("duet-input .duet-input");
-        // focus on input
         await input.click();
-        // type some chars that match the values in the combobox
         await page.keyboard.type("H", { delay: 150 });
-        // send keys to navigate
         await page.keyboard.press("ArrowDown", { delay: 150 });
         await page.keyboard.press("ArrowDown", { delay: 150 });
         await page.keyboard.press("Enter", { delay: 50 });
-        // tab to input
         await page.keyboard.press("Tab", { delay: 500 });
         await page.waitForChanges();
-        // check the value
         expect(await input.getProperty("value")).toBe("Huutjarvi");
+        expect(await element.getProperty("value")).toBe("49210");
     });
     it("allows filtering middle of string", async () => {
         const page = await createPageWithCombobox();
         const element = await page.find("duet-combobox");
+        const input = await element.find("duet-input .duet-input");
         element.setProperty("filterType", "includes");
         await page.waitForChanges();
-        const input = await element.find("duet-input .duet-input");
-        // focus on input
         await input.click();
-        // type some chars that match the values in the combobox
         await page.keyboard.type("uu", { delay: 150 });
-        // send keys to navigate
         await page.keyboard.press("ArrowDown", { delay: 150 });
         await page.keyboard.press("Enter", { delay: 50 });
-        // tab to input
         await page.keyboard.press("Tab", { delay: 500 });
         await page.waitForChanges();
-        // check the value
         expect(await input.getProperty("value")).toBe("Huutjarvi");
+        expect(await element.getProperty("value")).toBe("49210");
+    });
+    it("will add input if not provided in slot", async () => {
+        const page = await createPageWithMultiCombobox();
+        const element = await page.find("duet-combobox");
+        const input = await element.find("duet-input .duet-input");
+        expect(input).not.toBeNull();
+    });
+    it("allows selection of multiple items", async () => {
+        const page = await createPageWithMultiCombobox();
+        const element = await page.find("duet-combobox");
+        const input = await element.find("duet-input .duet-input");
+        await input.click();
+        // Select { id: 3, value: "49240", name: "Purola" }
+        await page.keyboard.type("pu", { delay: 150 });
+        await page.keyboard.press("ArrowDown", { delay: 150 });
+        await page.keyboard.press("Enter", { delay: 50 });
+        // Select { id: 5, value: "49290", name: "Vastila" }
+        await page.keyboard.type("va", { delay: 150 });
+        await page.keyboard.press("ArrowDown", { delay: 150 });
+        await page.keyboard.press("Enter", { delay: 50 });
+        expect(await input.getProperty("value")).toBe("");
+        expect(await element.find("duet-chip")).not.toBeNull();
+        expect(await element.getProperty("value")).toEqual(["49240", "49290"]);
     });
 });