@duetds/components 7.1.0 → 7.1.1

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

@@ -0,0 +1,125 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-collapsible", () => {
+  // taken from here: https://github.com/puppeteer/puppeteer/issues/545#issuecomment-489338078
+  function isElementVisible(page, selector) {
+    return page.$eval(selector, (element) => {
+      if (!element) {
+        return false;
+      }
+      return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+    });
+  }
+  const generatePage = async (open = false) => {
+    return createPage(`
+      <meta charset="utf-8" />
+      <link rel='stylesheet' href='http://localhost:3334/fonts/lib/localtapiola.css' />
+      <duet-collapsible heading="First collapsible" ${open ? "open" : ""} accessible-label="Accessible First collapsible">
+        <duet-paragraph>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae
+        </duet-paragraph>
+        <duet-paragraph>
+          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+        </duet-paragraph>
+      </duet-collapsible>
+      <duet-collapsible heading="Second collapsible" heading-weight="normal" ${open ? "open" : ""}>
+        <duet-paragraph>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam impedit, possimus minima repudiandae
+        </duet-paragraph>
+        <duet-paragraph>
+          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+        </duet-paragraph>
+        <duet-collapsible class="inner" heading="Inner collapsible" heading-weight="normal">
+          <duet-paragraph class="inner">
+            Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+          </duet-paragraph>
+        </duet-collapsible>
+      </duet-collapsible>
+      <duet-collapsible heading="Third collapsible">
+        <div slot="after-heading">
+          <duet-badge>Badge</duet-badge>
+        </div>
+        <duet-paragraph>
+          Laudantium consectetur iusto fugiat hic porro vero ex, non atque saepe maiores. Consectetur tempore
+        </duet-paragraph>
+      </duet-collapsible>
+    `);
+  };
+  it("renders", async () => {
+    const page = await generatePage();
+    const collapsible = await page.find("duet-collapsible");
+    expect(collapsible).toHaveClass("hydrated");
+  });
+  it("can be initially open", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+  });
+  it("can be initially closed", async () => {
+    const page = await generatePage();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("can have initially closed duet-collapsible nested inside initially open one", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(false);
+  });
+  it("can open initially closed nested on click", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(false);
+    const button = await page.find("duet-collapsible.inner >>> button");
+    await button.click();
+    expect(await isElementVisible(page, "duet-paragraph.inner")).toBe(true);
+  });
+  it("closes on click", async () => {
+    const page = await generatePage(true);
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+    const button = await page.find("duet-collapsible >>> button");
+    await button.click();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("opens on click", async () => {
+    const page = await generatePage();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+    const button = await page.find("duet-collapsible >>> button");
+    await button.click();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(true);
+  });
+  it("closes on space key", async () => {
+    const page = await generatePage(true);
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Space");
+    await page.waitForChanges();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("closes on return key", async () => {
+    const page = await generatePage(true);
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    expect(await isElementVisible(page, "duet-paragraph")).toBe(false);
+  });
+  it("raises a toggle event", async () => {
+    const page = await generatePage(true);
+    const collapsible = await page.find("duet-collapsible");
+    const duetToggle = await collapsible.spyOnEvent("duetToggle");
+    const button = await page.find("duet-collapsible >>> button");
+    await button.click();
+    expect(duetToggle).toHaveReceivedEventTimes(1);
+  });
+  it("renders the necessary aria attributes", async () => {
+    const page = await generatePage();
+    const content = await page.find("duet-collapsible >>> [id]");
+    const button = await page.find("duet-collapsible >>> button");
+    // button and content should be associated via aria-controls/id attributes
+    expect(button.getAttribute("aria-controls")).toEqual(content.id);
+    expect(button.getAttribute("aria-label")).toBe("Accessible First collapsible");
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    await button.click();
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+  });
+  it("renders the after-heading slot", async () => {
+    const page = await generatePage();
+    expect(await isElementVisible(page, "duet-badge")).toBe(true);
+  });
+});

package/lib/collection/components/duet-collapsible/duet-collapsible.js

@@ -133,7 +133,8 @@ export class DuetCollapsible {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -227,7 +228,8 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+              "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleWeight"
             }
           }
         },
@@ -250,7 +252,8 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleHeadingFontSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+              "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleHeadingFontSize"
             }
           }
         },
@@ -273,7 +276,8 @@ export class DuetCollapsible {
           "references": {
             "DuetHeadingLevel": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetHeadingLevel"
             }
           }
         },
@@ -296,7 +300,8 @@ export class DuetCollapsible {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -347,7 +352,8 @@ export class DuetCollapsible {
           "references": {
             "DuetCollapsibleToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-collapsible/duet-collapsible.tsx",
+              "id": "src/components/duet-collapsible/duet-collapsible.tsx::DuetCollapsibleToggleEvent"
             }
           }
         }
@@ -364,10 +370,12 @@ export class DuetCollapsible {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"

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

@@ -0,0 +1,110 @@
+/*!
+ * Built with Duet Design System
+ */
+import { getAllFixturesFiles } from "../../utils/fixture-utils";
+import { createPage } from "../../utils/test-utils";
+const items = getAllFixturesFiles(__dirname);
+describe("duet-combobox", () => {
+  it("should render a combobox", async () => {
+    const page = await createPage(`<duet-combobox></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 () => {
+    const page = await createPage(items.fixtures["duet-combobox-e2e"]);
+    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
+    await page.keyboard.press("Tab");
+    // we should see value hasn't changed
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toBe("Heinlahti");
+  });
+  it("closes via escape key with null values if forced", async () => {
+    const page = await createPage(items.fixtures["duet-combobox-e2e"]);
+    const element = await page.find("duet-combobox");
+    const input = await element.find("duet-input .duet-input");
+    // tab to input
+    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.waitForChanges();
+    // check the value
+    expect(await input.getProperty("value")).toBe("");
+  });
+  it("closes via escape key with set values if forced", async () => {
+    const page = await createPage(items.fixtures["duet-combobox-e2e"]);
+    const targetValue = "Heinlahti";
+    const element = await page.find("duet-combobox");
+    const input = await element.find("duet-input .duet-input");
+    // tab to input
+    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);
+  });
+  it("shows dropdown navigable via keys", async () => {
+    const page = await createPage(items.fixtures["duet-combobox-e2e"]);
+    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");
+  });
+  it("allows filtering middle of string", async () => {
+    const page = await createPage(items.fixtures["duet-combobox-e2e"]);
+    const element = await page.find("duet-combobox");
+    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");
+  });
+});

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

@@ -390,7 +390,8 @@ export class DuetCombobox {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -415,7 +416,8 @@ export class DuetCombobox {
           "resolved": "{ [x: string]: string; }",
           "references": {
             "Record": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Record"
             }
           }
         },
@@ -439,7 +441,8 @@ export class DuetCombobox {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -497,7 +500,8 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+              "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
             }
           }
         },
@@ -616,7 +620,8 @@ export class DuetCombobox {
           "references": {
             "DuetComboboxEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+              "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxEvent"
             }
           }
         }
@@ -636,11 +641,13 @@ export class DuetCombobox {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "DuetComboboxItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-combobox/duet-combobox.tsx",
+              "id": "src/components/duet-combobox/duet-combobox.tsx::DuetComboboxItem"
             }
           },
           "return": "Promise<string>"

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -77,7 +77,8 @@ export class DuetContactCard {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -100,7 +101,8 @@ export class DuetContactCard {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -225,7 +227,8 @@ export class DuetContactCard {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.e2e.js

@@ -0,0 +1,31 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+describe("duet-cookie-consent", () => {
+  const generatePage = async (theme = "") => {
+    return createPage(`
+      <meta charset="utf-8" />
+      <link rel='stylesheet' href='http://localhost:3334/fonts/lib/localtapiola.css' />
+      <link rel="stylesheet" href="http://localhost:3334/fonts/lib/turva.css" />
+      <link rel="stylesheet" href="http://localhost:3334/css/lib/duet.min.css" />
+      <duet-cookie-consent accessible-label="Hyväksyn evästeiden käytön" theme=${theme}>
+        Käytämme evästeitä. Käyttämällä verkkosivujamme hyväksyt evästeiden käyton.
+        <a href="#" target="_blank" aria-label="Lue lisää evästeiden käytöstä sivustolla">Lue lisää</a>
+      </duet-cookie-consent>
+    `);
+  };
+  it("renders", async () => {
+    const page = await generatePage();
+    const cookieConsent = await page.find("duet-cookie-consent");
+    expect(cookieConsent).toHaveClass("hydrated");
+  });
+  it("raises an event on button click", async () => {
+    const page = await generatePage();
+    const cookieConsent = await page.find("duet-cookie-consent");
+    const eventSpy = await cookieConsent.spyOnEvent("duetCookieConsent");
+    const button = await page.find("duet-cookie-consent >>> duet-button");
+    await button.click();
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+  });
+});

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -80,7 +80,8 @@ export class DuetCookieConsent {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -113,7 +114,8 @@ export class DuetCookieConsent {
           "references": {
             "DuetCookieConsentEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-cookie-consent/duet-cookie-consent.tsx",
+              "id": "src/components/duet-cookie-consent/duet-cookie-consent.tsx::DuetCookieConsentEvent"
             }
           }
         }