@duetds/components 7.1.0 → 7.1.2

package/lib/collection/components/duet-number-input/duet-number-input.e2e.js

@@ -0,0 +1,242 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+export function createComponent(props = {}) {
+  function camelToKebab(str) {
+    return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  const attrs = Object.entries(props)
+    .map(([attr, value]) => `${camelToKebab(attr)}="${value}"`)
+    .join(" ");
+  return createPage(`<duet-number-input ${attrs}></duet-number-input>`);
+}
+describe("duet-number-input", () => {
+  it("should render a number-input", async () => {
+    const page = await createComponent();
+    const component = await page.find("duet-number-input");
+    expect(component).not.toBeNull();
+    expect(component).toHaveClass("hydrated");
+  });
+  it("should provide a property that switches the theme", async () => {
+    const page = await createComponent({ theme: "turva" });
+    const element = await page.find("duet-number-input");
+    expect(element).toHaveClass("duet-theme-turva");
+  });
+  it("should provide a property that expands the input to fill 100% width", async () => {
+    const page = await createComponent({ expand: true });
+    const element = await page.find("duet-number-input");
+    expect(element).toHaveClass("duet-expand");
+  });
+  it("should provide a property that sets the max amount", async () => {
+    const page = await createComponent({ max: 10 });
+    const element = await page.find("duet-number-input duet-input");
+    expect(element.getAttribute("aria-valuemax")).toEqual("10");
+  });
+  it("should provide a property that sets the min amount", async () => {
+    const page = await createComponent({ min: 1 });
+    const element = await page.find("duet-number-input duet-input");
+    expect(element.getAttribute("aria-valuemin")).toEqual("1");
+  });
+  it("supports not setting an initial value", async () => {
+    const MIN_VALUE = 100;
+    const page = await createComponent({ min: MIN_VALUE, step: 50 });
+    const numberInput = await page.find("duet-number-input");
+    const spy = await numberInput.spyOnEvent("duetChange");
+    // input should initially be empty
+    const input = await numberInput.find("duet-input");
+    expect(await input.getProperty("value")).toBe("");
+    // subtract button should be disabled
+    const subtractButton = await numberInput.find(".duet-number-button-subtract");
+    expect(subtractButton.getAttribute("aria-disabled")).toBe("true");
+    // add button should be enabled
+    const addButton = await numberInput.find(".duet-number-button-add");
+    expect(addButton.getAttribute("aria-disabled")).toBe("false");
+    await addButton.click();
+    await page.waitForChanges();
+    // input value should now be set to min + unit
+    expect(await input.getProperty("value")).toBe(`${MIN_VALUE} €`);
+    // and should have received a single input event
+    expect(spy).toHaveReceivedEventTimes(1);
+    expect(spy.lastEvent.detail).toEqual(expect.objectContaining({
+      value: MIN_VALUE.toString(),
+      valueAsNumber: MIN_VALUE,
+      component: "duet-number-input",
+    }));
+  });
+  it("support clearing the input with backspace key", async () => {
+    const page = await createComponent({ value: "50", step: 50 });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    const spyInput = await numberInput.spyOnEvent("duetInput");
+    const spyChange = await numberInput.spyOnEvent("duetChange");
+    // focus and clear input
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    // input's value should be empty
+    // and should have received a single input event
+    expect(await input.getProperty("value")).toBe("");
+    expect(spyInput).toHaveReceivedEventTimes(1);
+    expect(spyInput.lastEvent.detail).toEqual(expect.objectContaining({
+      value: null,
+      valueAsNumber: null,
+      component: "duet-number-input",
+    }));
+    // when blurring input, we should get a single change event
+    await page.keyboard.press("Tab");
+    expect(spyChange).toHaveReceivedEventTimes(1);
+    expect(spyChange.lastEvent.detail).toEqual(expect.objectContaining({
+      value: null,
+      valueAsNumber: null,
+      component: "duet-number-input",
+    }));
+  });
+  it("supports stepping of the value", async () => {
+    const page = await createComponent({ value: "50", step: 50 });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    const subtract = await numberInput.find(".duet-number-button-subtract");
+    const add = await numberInput.find(".duet-number-button-add");
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    // increment via up arrow
+    await page.keyboard.press("ArrowUp");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("100 €");
+    // increment via right arrow
+    await page.keyboard.press("ArrowRight");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("150 €");
+    // increment via + button
+    await add.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("200 €");
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    // decrement via down arrow
+    await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("150 €");
+    // decrement via left arrow
+    await page.keyboard.press("ArrowLeft");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("100 €");
+    // decrement via - button
+    await subtract.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("50 €");
+  });
+  it("supports min and max values", async () => {
+    const page = await createComponent({ value: "2", step: 1, min: 1, max: 3 });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    const subtract = await numberInput.find(".duet-number-button-subtract");
+    const add = await numberInput.find(".duet-number-button-add");
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    await add.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("3 €");
+    // we've hit the max, so should still be 3
+    await add.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("3 €");
+    await subtract.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("2 €");
+    await subtract.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("1 €");
+    // we've hit the min, so should be still be 1
+    await subtract.click();
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("1 €");
+  });
+  it("rounds value to nearest step on blur in constrained mode", async () => {
+    const page = await createComponent({ value: "50", step: 50 });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    // focus and clear input
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    // enter value that is not a multiple of step
+    await page.keyboard.type("75", { delay: 100 });
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("100 €");
+  });
+  it("does not round values on blur when rounding disabled", async () => {
+    const page = await createComponent({ value: "50", step: 50, rounding: false });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    // focus and clear input
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    // enter value that is not a multiple of step
+    await page.keyboard.type("73", { delay: 100 });
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("73 €");
+  });
+  it("increments to nearest multiple of step when rounding disabled", async () => {
+    const page = await createComponent({ value: "100", step: 100, rounding: false });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    // focus and clear input
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    // enter value that is not a multiple of step
+    await page.keyboard.type("199", { delay: 100 });
+    await page.keyboard.press("ArrowUp");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("200 €");
+    // enter value that is not a multiple of step
+    await page.keyboard.press("Backspace");
+    await page.keyboard.type("101", { delay: 100 });
+    await page.keyboard.press("ArrowUp");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("200 €");
+  });
+  it("decrements to nearest multiple of step when rounding disabled", async () => {
+    const page = await createComponent({ value: "100", step: 100, rounding: false });
+    const numberInput = await page.find("duet-number-input");
+    const input = await numberInput.find("duet-input");
+    // focus and clear input
+    await page.$eval("duet-number-input", (el) => el.setFocus());
+    await page.keyboard.press("Backspace");
+    await page.waitForChanges();
+    // enter value that is not a multiple of step
+    await page.keyboard.type("101", { delay: 100 });
+    await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("100 €");
+    // enter value that is not a multiple of step
+    await page.keyboard.press("Backspace");
+    await page.keyboard.type("199", { delay: 100 });
+    await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
+    expect(await input.getProperty("value")).toEqualText("100 €");
+  });
+  it("should provide a method to get the initial numeric value of the input", async () => {
+    const page = await createComponent({ value: "50" });
+    const initialNumericValue = await page.evaluate(() => {
+      const element = document.querySelector("duet-number-input");
+      return element.getValueAsNumber();
+    });
+    expect(typeof initialNumericValue).toBe("number");
+    expect(initialNumericValue).toBe(50);
+  });
+  it("should provide a method to get the current numeric value of the input", async () => {
+    const page = await createComponent({ value: "50", step: 50 });
+    const add = await page.find(".duet-number-button-add");
+    await add.click();
+    await page.waitForChanges();
+    const currentNumericValue = await page.evaluate(() => {
+      const element = document.querySelector("duet-number-input");
+      return element.getValueAsNumber();
+    });
+    expect(typeof currentNumericValue).toBe("number");
+    expect(currentNumericValue).toBe(100);
+  });
+});

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -311,7 +311,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLanguage": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLanguage"
             }
           }
         },
@@ -340,7 +341,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLocale": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetLocale"
             }
           }
         },
@@ -503,7 +505,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -568,7 +571,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -615,7 +619,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -662,7 +667,8 @@ export class DuetNumberInput {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -685,7 +691,8 @@ export class DuetNumberInput {
           "references": {
             "DuetMargin": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
             }
           }
         },
@@ -761,7 +768,8 @@ export class DuetNumberInput {
           "references": {
             "DuetLangObject": {
               "location": "import",
-              "path": "../../utils/language-utils"
+              "path": "../../utils/language-utils",
+              "id": "src/utils/language-utils.ts::DuetLangObject"
             }
           }
         },
@@ -1018,7 +1026,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1038,7 +1047,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1058,7 +1068,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1078,7 +1089,8 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+              "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
             }
           }
         }
@@ -1095,10 +1107,12 @@ export class DuetNumberInput {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "FocusOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusOptions"
             }
           },
           "return": "Promise<void>"
@@ -1114,7 +1128,8 @@ export class DuetNumberInput {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<number>"

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -56,7 +56,8 @@ export class DuetPageHeading {
           "references": {
             "DuetTheme": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
             }
           }
         },
@@ -79,7 +80,8 @@ export class DuetPageHeading {
           "references": {
             "DuetIconName": {
               "location": "import",
-              "path": "../../common-types"
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetIconName"
             }
           }
         },

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

@@ -0,0 +1,101 @@
+/*!
+ * Built with Duet Design System
+ */
+import { createPage } from "../../utils/test-utils";
+import { shouldDisplayNavigation } from "./duet-pagination-utils";
+describe("duet-pagination", () => {
+  describe("shouldDisplayNavigation", () => {
+    it("return false when visibleItems are low compared to totalItems", async () => {
+      const shouldDisplayNavigationResult = shouldDisplayNavigation(10, 100, 10);
+      expect(shouldDisplayNavigationResult).toBe(false);
+    });
+    it("return true when visibleItems are high compared to totalItems", async () => {
+      const shouldDisplayNavigationResult = shouldDisplayNavigation(10, 1000, 10);
+      expect(shouldDisplayNavigationResult).toBe(true);
+    });
+  });
+  describe("Edge conditions should appear correctly", () => {
+    /**
+     * The component should handle situation where take / totals is not an equal number
+     * eg 1000 / 30 = 33,3333333
+     * and should display 34 page with a fraction of the visible-items viewable
+     */
+    it("The characters should look correctly when setting un-divisible fractions", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="30" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const pager = await page.find("duet-pagination");
+      const paginationLinks = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinks.length).toBe(7); // ( 1 2 3 4 5 … 34 )
+      const fwdButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-forward");
+      expect(pager).not.toBeNull();
+      expect(pager).toHaveClass("hydrated");
+      expect(fwdButton.textContent).toBe("…");
+      expect(paginationLinks[6].textContent).toBe("34");
+      await fwdButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.length).toBe(9); // ( 1 … 6 7 8 9 10 … 34 )
+      expect(paginationLinksPost[6].textContent).toBe("10");
+      expect(paginationLinksPost[7].textContent).toBe("…");
+      expect(paginationLinksPost[8].textContent).toBe("34");
+      // now that the pager is on second "page" it will have changed the dom elements and re-rendered, we need tog et the bn again
+      const newFwdButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-forward");
+      await newFwdButton.click();
+      const paginationLinksPost2ndClick = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost2ndClick.length).toBe(9); // ( 1 … 11 12 13 14 15 … 34 )
+      expect(paginationLinksPost[6].textContent).not.toBe("5.666666666666666");
+      expect(paginationLinksPost[6].textContent).toBe("15");
+      expect(paginationLinksPost[7].textContent).toBe("…");
+      expect(paginationLinksPost[8].textContent).toBe("34");
+    });
+  });
+  describe("fixes", () => {
+    it("DUET-765: should not display upper ellipsis in the last take", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="5" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const lastPageButton = await page.find("duet-pagination >>> .duet-pagination-link-jump-forward");
+      await lastPageButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.map(item => item.textContent)).toEqual(["1", "…", "196", "197", "198", "199", "200"]);
+    });
+    it("DUET-765: should display upper ellipsis and total buttons except the last take", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="5" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const lastPageButton = await page.find("duet-pagination >>> .duet-pagination-link-jump-forward");
+      await lastPageButton.click();
+      const jumpBackButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-back");
+      await jumpBackButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.map(item => item.textContent)).toEqual([
+        "1",
+        "…",
+        "191",
+        "192",
+        "193",
+        "194",
+        "195",
+        "…",
+        "200",
+      ]);
+    });
+    it("DUET-766: should not allow navigation beyond the last page", async () => {
+      const page = await createPage(`
+        <div>
+          <duet-pagination take="5" visible-items="5" total="1000"></duet-pagination>
+        </div>`);
+      const lastPageButton = await page.find("duet-pagination >>> .duet-pagination-link-jump-forward");
+      await lastPageButton.click();
+      const jumpBackButton = await page.find("duet-pagination >>> .duet-pagination-link-dots-back");
+      await jumpBackButton.click();
+      const fwdArrowButton = await page.find("duet-pagination >>> .duet-date-dialog-next");
+      await fwdArrowButton.click();
+      const paginationLinksPost = await page.findAll("duet-pagination >>> li.duet-pagination-item duet-button");
+      expect(paginationLinksPost.map(item => item.textContent)).toEqual(["1", "…", "196", "197", "198", "199", "200"]);
+    });
+  });
+});