fix(input-time-zone): ensure beforeOpen/open and beforeClose/`c…

…lose` events emit properly (#10228)
Esri · Sep 7, 2024 · 3f04a0b · 3f04a0b
1 parent 4eb75af
commit 3f04a0b
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 187 deletions.
diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -53,12 +53,7 @@ describe("calcite-dialog", () => {
 
   describe("openClose", () => {
     openClose("calcite-dialog");
-
-    describe("initially open", () => {
-      openClose("calcite-dialog", {
-        initialToggleValue: true,
-      });
-    });
+    openClose.initial("calcite-dialog");
   });
 
   describe("slots", () => {

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
@@ -101,10 +101,7 @@ describe("calcite-input-time-picker", () => {
 
   describe("openClose", () => {
     openClose("calcite-input-time-picker");
-
-    describe.skip("initially open", () => {
-      openClose("calcite-input-time-picker", { initialToggleValue: true });
-    });
+    openClose.initial("calcite-input-time-picker");
   });
 
   it("when set to readOnly, element still focusable but won't display the controls or allow for changing the value", async () => {

diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
@@ -8,6 +8,7 @@ import {
   formAssociated,
   hidden,
   labelable,
+  openClose,
   reflects,
   renders,
   t9n,
@@ -128,6 +129,27 @@ describe("calcite-input-time-zone", () => {
     t9n(simpleTestProvider);
   });
 
+  describe("openClose", () => {
+    openClose(simpleTestProvider);
+
+    describe("initially open", () => {
+      openClose.initial("calcite-input-time-zone", {
+        beforeContent: async (page) => {
+          await page.emulateTimezone(testTimeZoneItems[0].name);
+
+          // we add the override script this way because `setContent` was already used before this hook, and calling it again will result in an error.
+          await page.evaluate(
+            (supportedTimeZoneOverrideHtml) =>
+              document.body.insertAdjacentHTML("beforeend", supportedTimeZoneOverrideHtml),
+            overrideSupportedTimeZones(""),
+          );
+
+          await page.waitForChanges();
+        },
+      });
+    });
+  });
+
   describe("mode", () => {
     describe("offset (default)", () => {
       describe("selects user's matching time zone offset on initialization", () => {
@@ -154,7 +176,7 @@ describe("calcite-input-time-zone", () => {
         const page = await newE2EPage();
         await page.emulateTimezone(testTimeZoneItems[0].name);
         await page.setContent(
-          await overrideSupportedTimeZones(
+          overrideSupportedTimeZones(
             html`<calcite-input-time-zone value="${testTimeZoneItems[1].offset}"></calcite-input-time-zone>`,
           ),
         );
@@ -172,7 +194,7 @@ describe("calcite-input-time-zone", () => {
         const page = await newE2EPage();
         await page.emulateTimezone(testTimeZoneItems[0].name);
         await page.setContent(
-          await overrideSupportedTimeZones(html`<calcite-input-time-zone value="9000"></calcite-input-time-zone>`),
+          overrideSupportedTimeZones(html`<calcite-input-time-zone value="9000"></calcite-input-time-zone>`),
         );
 
         const input = await page.find("calcite-input-time-zone");

diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -191,6 +191,12 @@ export class InputTimeZone
   /** When `true`, displays and positions the component. */
   @Prop({ mutable: true, reflect: true }) open = false;
 
+  @Watch("open")
+  openChanged(): void {
+    // we set the property instead of the attribute to ensure open/close events are emitted properly
+    this.comboboxEl.open = this.open;
+  }
+
   /**
    * Determines the type of positioning to use for the overlaid content.
    *
@@ -487,6 +493,7 @@ export class InputTimeZone
   componentDidLoad(): void {
     setComponentLoaded(this);
     this.overrideSelectedLabelForRegion(this.open);
+    this.openChanged();
   }
 
   componentDidRender(): void {
@@ -508,7 +515,6 @@ export class InputTimeZone
             onCalciteComboboxChange={this.onComboboxChange}
             onCalciteComboboxClose={this.onComboboxClose}
             onCalciteComboboxOpen={this.onComboboxOpen}
-            open={this.open}
             overlayPositioning={this.overlayPositioning}
             placeholder={
               this.mode === "name"

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -15,12 +15,7 @@ describe("calcite-modal", () => {
 
   describe("openClose", () => {
     openClose("calcite-modal");
-
-    describe("initially open", () => {
-      openClose("calcite-modal", {
-        initialToggleValue: true,
-      });
-    });
+    openClose.initial("calcite-modal");
   });
 
   describe("slots", () => {

diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts
@@ -81,12 +81,7 @@ describe("calcite-sheet properties", () => {
 
   describe("openClose", () => {
     openClose("calcite-sheet");
-
-    describe("initially open", () => {
-      openClose("calcite-sheet", {
-        initialToggleValue: true,
-      });
-    });
+    openClose.initial("calcite-sheet");
   });
 
   it("sets custom width correctly", async () => {

diff --git a/packages/calcite-components/src/tests/commonTests/interfaces.ts b/packages/calcite-components/src/tests/commonTests/interfaces.ts
@@ -11,9 +11,9 @@ export type TagAndPage = {
   page: E2EPage;
 };
 
-export type TagOrHTMLWithBeforeContent = {
-  tagOrHTML: TagOrHTML;
+export type TagOrHTMLWithBeforeContent = WithBeforeContent<{ tagOrHTML: TagOrHTML }>;
 
+export type WithBeforeContent<TestContent> = TestContent & {
   /**
    * Allows for custom setup of the page.
    *