test(input-date-picker, date-picker): unsetting min/max works

Esri · May 23, 2024 · 06e2379 · 06e2379
1 parent a3aecc0
commit 06e2379
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts
@@ -4,6 +4,21 @@ import { defaults, focusable, hidden, renders, t9n } from "../../tests/commonTes
 import { skipAnimations } from "../../tests/utils";
 import { formatTimePart } from "../../utils/time";
 
+async function setActiveDate(page: E2EPage, date: string): Promise<void> {
+  await page.evaluate((date) => {
+    const datePicker = document.querySelector("calcite-date-picker");
+    datePicker.activeDate = new Date(date);
+  }, date);
+  await page.waitForChanges();
+}
+
+async function getActiveDate(page: E2EPage): Promise<string> {
+  return await page.evaluate(() => {
+    const datePicker = document.querySelector("calcite-date-picker");
+    return datePicker.activeDate.toISOString();
+  });
+}
+
 describe("calcite-date-picker", () => {
   describe("renders", () => {
     renders("calcite-date-picker", { display: "inline-block" });
@@ -315,6 +330,31 @@ describe("calcite-date-picker", () => {
     expect(minDateAsTime).toEqual(new Date(minDateString).getTime());
   });
 
+  it("unsetting min/max updates internally", async () => {
+    const page = await newE2EPage();
+    await page.emulateTimezone("America/Los_Angeles");
+    await page.setContent(
+      html`<calcite-date-picker value="2022-11-20" min="2022-11-15" max="2022-11-25"></calcite-date-picker>`,
+    );
+
+    const element = await page.find("calcite-date-picker");
+
+    element.setProperty("min", null);
+    element.setProperty("max", null);
+    await page.waitForChanges();
+
+    expect(await element.getProperty("minAsDate")).toBe(null);
+    expect(await element.getProperty("maxAsDate")).toBe(null);
+
+    const maxPlusOne = "2022-11-26";
+    await setActiveDate(page, maxPlusOne);
+    expect(await getActiveDate(page)).toEqual(new Date(maxPlusOne).toISOString());
+
+    const minMinusOne = "2022-11-14";
+    await setActiveDate(page, minMinusOne);
+    expect(await getActiveDate(page)).toEqual(new Date(minMinusOne).toISOString());
+  });
+
   it("passes down the default year prop to child date-picker-month-header", async () => {
     const page = await newE2EPage();
     await page.setContent(html`<calcite-date-picker value="2000-11-27" active></calcite-date-picker>`);
@@ -332,14 +372,6 @@ describe("calcite-date-picker", () => {
   });
 
   describe("ArrowKeys and PageKeys", () => {
-    async function setActiveDate(page: E2EPage, date: string): Promise<void> {
-      await page.evaluate((date) => {
-        const datePicker = document.querySelector("calcite-date-picker");
-        datePicker.activeDate = new Date(date);
-      }, date);
-      await page.waitForChanges();
-    }
-
     it("should be able to navigate between months and select date using arrow keys and page keys", async () => {
       const page = await newE2EPage();
       await page.setContent(html`<calcite-date-picker></calcite-date-picker>`);

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -750,6 +750,27 @@ describe("calcite-input-date-picker", () => {
     expect(minDateAsTime).toEqual(new Date(minDateString).getTime());
   });
 
+  it("unsetting min/max updates internally", async () => {
+    const page = await newE2EPage();
+    await page.emulateTimezone("America/Los_Angeles");
+    await page.setContent(
+      html`<calcite-input-date-picker
+        value="2022-11-27"
+        min="2022-11-15"
+        max="2024-11-15"
+      ></calcite-input-date-picker>`,
+    );
+
+    const element = await page.find("calcite-input-date-picker");
+
+    element.setProperty("min", null);
+    element.setProperty("max", null);
+    await page.waitForChanges();
+
+    expect(await element.getProperty("minAsDate")).toBe(null);
+    expect(await element.getProperty("maxAsDate")).toBe(null);
+  });
+
   describe("owns a floating-ui", () => {
     floatingUIOwner(
       `<calcite-input-date-picker value="2022-11-27" min="2022-11-15" max="2024-11-15"></calcite-input-date-picker>`,