test(commonTests, alert, combobox, dropdown, input-date-picker, modal, popover, tooltip): extracts a general test utility OpenClose for all components implementing openCloseComponent util

packages/calcite-components/src/components/alert/alert.e2e.ts

@@ -3,6 +3,7 @@ import { html } from "../../../support/formatting";
 import { accessible, defaults, hidden, HYDRATED_ATTR, renders, t9n } from "../../tests/commonTests";
 import { getElementXY } from "../../tests/utils";
 import { CSS, DURATIONS } from "./resources";
+import { openClose } from "../../tests/commonTests";
 
 describe("defaults", () => {
   defaults("calcite-alert", [
@@ -38,6 +39,10 @@ describe("calcite-alert", () => {
     `);
   });
 
+  describe("openClose", () => {
+    openClose("calcite-alert");
+  });
+
   it("renders default props when none are provided", async () => {
     const page = await newE2EPage();
     await page.setContent(`
@@ -280,54 +285,6 @@ describe("calcite-alert", () => {
     });
   });
 
-  it("should emit component status for transition-chained events: 'calciteAlertBeforeOpen', 'calciteAlertOpen', 'calciteAlertBeforeClose', 'calciteAlertClose'", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-alert> ${alertContent} </calcite-alert>`);
-
-    const element = await page.find("calcite-alert");
-    const container = await page.find(`calcite-alert >>> .${CSS.container}`);
-
-    expect(await container.isVisible()).toBe(false);
-
-    const calciteAlertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen");
-    const calciteAlertOpenEvent = page.waitForEvent("calciteAlertOpen");
-
-    const calciteAlertBeforeOpenSpy = await element.spyOnEvent("calciteAlertBeforeOpen");
-    const calciteAlertOpenSpy = await element.spyOnEvent("calciteAlertOpen");
-
-    await element.setProperty("open", true);
-    await page.waitForChanges();
-
-    await calciteAlertBeforeOpenEvent;
-    await calciteAlertOpenEvent;
-
-    expect(await element.getProperty("open")).toBe(true);
-
-    expect(calciteAlertBeforeOpenSpy).toHaveReceivedEventTimes(1);
-    expect(calciteAlertOpenSpy).toHaveReceivedEventTimes(1);
-
-    expect(await container.isVisible()).toBe(true);
-
-    const calciteAlertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose");
-    const calciteAlertCloseEvent = page.waitForEvent("calciteAlertClose");
-
-    const calciteAlertBeforeCloseSpy = await element.spyOnEvent("calciteAlertBeforeClose");
-    const calciteAlertClose = await element.spyOnEvent("calciteAlertClose");
-
-    await element.setProperty("open", false);
-    await page.waitForChanges();
-
-    await calciteAlertBeforeCloseEvent;
-    await calciteAlertCloseEvent;
-
-    expect(await element.getProperty("open")).toBe(false);
-
-    expect(calciteAlertBeforeCloseSpy).toHaveReceivedEventTimes(1);
-    expect(calciteAlertClose).toHaveReceivedEventTimes(1);
-
-    expect(await container.isVisible()).toBe(false);
-  });
-
   it("should update number of queued alerts with a calcite-chip when removing an alert", async () => {
     const page = await newE2EPage();
     await page.setContent(html`

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -3,18 +3,18 @@ import {
   accessible,
   defaults,
   disabled,
+  hidden,
   floatingUIOwner,
   formAssociated,
-  hidden,
   labelable,
+  openClose,
   reflects,
   renders,
   t9n,
 } from "../../tests/commonTests";
 
 import { html } from "../../../support/formatting";
 import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
-import { CSS } from "./resources";
 import { CSS as XButtonCSS } from "../functional/XButton";
 import { skipAnimations } from "../../tests/utils";
 
@@ -143,51 +143,17 @@ describe("calcite-combobox", () => {
     disabled("calcite-combobox");
   });
 
-  it("filter properly when items have duplicate values with parents", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      html`
-        <calcite-combobox>
-          <calcite-combobox-item-group label="arcgis-app-identity">
-            <calcite-combobox-item
-              value="./html/arcgis-app-identity/index.html"
-              text-label="index.html"
-            ></calcite-combobox-item>
-          </calcite-combobox-item-group>
-          <calcite-combobox-item-group label="arcgis-configuration-editor">
-            <calcite-combobox-item
-              value="./html/arcgis-configuration-editor/composite-field-editor.html"
-              text-label="composite-field-editor.html"
-            ></calcite-combobox-item>
-            <calcite-combobox-item
-              value="./html/arcgis-configuration-editor/index.html"
-              text-label="index.html"
-            ></calcite-combobox-item>
-            <calcite-combobox-item
-              value="./html/arcgis-configuration-editor/rule-editor.html"
-              text-label="rule-editor.html"
-            ></calcite-combobox-item>
-          </calcite-combobox-item-group>
-        </calcite-combobox>
-      `
-    );
-
-    const combobox = await page.find("calcite-combobox");
-    await combobox.click();
-    await page.waitForChanges();
-    await combobox.type("conf");
-    await page.waitForChanges();
-
-    const items = await page.findAll("calcite-combobox-item");
-    const groups = await page.findAll("calcite-combobox-item-group");
-
-    expect(await groups[0].isVisible()).toBe(false);
-    expect(await items[0].isVisible()).toBe(false);
+  const simpleComboboxHTML = html`
+    <calcite-combobox id="myCombobox">
+      <calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
+      <calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
+      <calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
+      <calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
+    </calcite-combobox>
+  `;
 
-    expect(await groups[1].isVisible()).toBe(true);
-    expect(await items[1].isVisible()).toBe(true);
-    expect(await items[2].isVisible()).toBe(true);
-    expect(await items[3].isVisible()).toBe(true);
+  describe("openClose", () => {
+    openClose(simpleComboboxHTML);
   });
 
   it("filtering does not match property with value of undefined", async () => {
@@ -1593,56 +1559,6 @@ describe("calcite-combobox", () => {
     );
   });
 
-  it("should emit component status for transition-chained events: 'calciteComboboxBeforeOpen', 'calciteComboboxOpen', 'calciteComboboxBeforeClose', 'calciteComboboxClose'", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`
-      <calcite-combobox id="myCombobox">
-        <calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
-        <calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
-        <calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
-        <calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
-      </calcite-combobox>
-    `);
-    const element = await page.find("calcite-combobox");
-    const container = await page.find(`calcite-combobox >>> .${CSS.listContainer}`);
-
-    expect(await container.isVisible()).toBe(false);
-
-    const calciteComboboxBeforeOpenEvent = page.waitForEvent("calciteComboboxBeforeOpen");
-    const calciteComboboxOpenEvent = page.waitForEvent("calciteComboboxOpen");
-
-    const calciteComboboxBeforeOpenSpy = await element.spyOnEvent("calciteComboboxBeforeOpen");
-    const calciteComboboxOpenSpy = await element.spyOnEvent("calciteComboboxOpen");
-
-    await element.setProperty("open", true);
-    await page.waitForChanges();
-
-    await calciteComboboxBeforeOpenEvent;
-    await calciteComboboxOpenEvent;
-
-    expect(calciteComboboxBeforeOpenSpy).toHaveReceivedEventTimes(1);
-    expect(calciteComboboxOpenSpy).toHaveReceivedEventTimes(1);
-
-    expect(await container.isVisible()).toBe(true);
-
-    const calciteComboboxBeforeCloseEvent = page.waitForEvent("calciteComboboxBeforeClose");
-    const calciteComboboxCloseEvent = page.waitForEvent("calciteComboboxClose");
-
-    const calciteComboboxBeforeCloseSpy = await element.spyOnEvent("calciteComboboxBeforeClose");
-    const calciteComboboxClose = await element.spyOnEvent("calciteComboboxClose");
-
-    await element.setProperty("open", false);
-    await page.waitForChanges();
-
-    await calciteComboboxBeforeCloseEvent;
-    await calciteComboboxCloseEvent;
-
-    expect(calciteComboboxBeforeCloseSpy).toHaveReceivedEventTimes(1);
-    expect(calciteComboboxClose).toHaveReceivedEventTimes(1);
-
-    expect(await container.isVisible()).toBe(false);
-  });
-
   it("should have input--icon class when placeholder-icon is parsed", async () => {
     const page = await newE2EPage();
     await page.setContent(html` <calcite-combobox

packages/calcite-components/src/components/dropdown/dropdown.e2e.ts

@@ -8,11 +8,11 @@ import {
   floatingUIOwner,
   focusable,
   hidden,
+  openClose,
   reflects,
   renders,
 } from "../../tests/commonTests";
 import { GlobalTestProps, getFocusedElementProp } from "../../tests/utils";
-import { CSS } from "./resources";
 
 describe("calcite-dropdown", () => {
   const simpleDropdownHTML = html`
@@ -74,6 +74,10 @@ describe("calcite-dropdown", () => {
       });
     });
 
+    describe("openClose", () => {
+      openClose(simpleDropdownHTML);
+    });
+
     interface SelectedItemsAssertionOptions {
       /**
        * IDs from items to assert selection
@@ -1228,58 +1232,5 @@ describe("calcite-dropdown", () => {
         }
       );
     });
-
-    it("should emit component status for transition-chained events: 'calciteDropdownBeforeOpen', 'calciteDropdownOpen', 'calciteDropdownBeforeClose', 'calciteDropdownClose'", async () => {
-      const page = await newE2EPage();
-      await page.setContent(html`
-        <calcite-dropdown>
-          <calcite-button slot="trigger">Open dropdown</calcite-button>
-          <calcite-dropdown-group id="group-1">
-            <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
-            <calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
-            <calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
-          </calcite-dropdown-group>
-        </calcite-dropdown>
-      `);
-      const element = await page.find(`calcite-dropdown`);
-      const group = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownContent}`);
-
-      expect(await group.isVisible()).toBe(false);
-
-      const calciteDropdownBeforeOpenEvent = page.waitForEvent("calciteDropdownBeforeOpen");
-      const calciteDropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
-
-      const calciteDropdownBeforeOpenSpy = await element.spyOnEvent("calciteDropdownBeforeOpen");
-      const calciteDropdownOpenSpy = await element.spyOnEvent("calciteDropdownOpen");
-
-      element.setProperty("open", true);
-      await page.waitForChanges();
-
-      expect(await element.getProperty("open")).toBe(true);
-      await calciteDropdownBeforeOpenEvent;
-      await calciteDropdownOpenEvent;
-
-      expect(calciteDropdownBeforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownOpenSpy).toHaveReceivedEventTimes(1);
-
-      expect(await group.isVisible()).toBe(true);
-
-      const calciteDropdownBeforeCloseEvent = page.waitForEvent("calciteDropdownBeforeClose");
-      const calciteDropdownCloseEvent = page.waitForEvent("calciteDropdownClose");
-
-      const calciteDropdownBeforeCloseSpy = await element.spyOnEvent("calciteDropdownBeforeClose");
-      const calciteDropdownCloseSpy = await element.spyOnEvent("calciteDropdownClose");
-
-      element.setProperty("open", false);
-      await page.waitForChanges();
-
-      await calciteDropdownBeforeCloseEvent;
-      await calciteDropdownCloseEvent;
-
-      expect(calciteDropdownBeforeCloseSpy).toHaveReceivedEventTimes(1);
-      expect(calciteDropdownCloseSpy).toHaveReceivedEventTimes(1);
-
-      expect(await group.isVisible()).toBe(false);
-    });
   });
 });

packages/calcite-components/src/components/dropdown/resources.ts

@@ -1,7 +1,3 @@
 export const SLOTS = {
   dropdownTrigger: "trigger",
 };
-
-export const CSS = {
-  calciteDropdownContent: "calcite-dropdown-content",
-};

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

@@ -1,14 +1,15 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import {
+  accessible,
   defaults,
   disabled,
   formAssociated,
-  labelable,
   floatingUIOwner,
-  renders,
   hidden,
+  labelable,
+  openClose,
+  renders,
   t9n,
-  accessible,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -55,6 +56,10 @@ describe("calcite-input-date-picker", () => {
     disabled("calcite-input-date-picker");
   });
 
+  describe("openClose", () => {
+    openClose(`<calcite-input-date-picker id="pickerOpenClose" value="2021-12-08"></calcite-input-date-picker>`);
+  });
+
   it.skip("supports t9n", () => t9n("calcite-input-date-picker"));
 
   async function navigateMonth(page: E2EPage, direction: "previous" | "next"): Promise<void> {
@@ -499,50 +504,6 @@ describe("calcite-input-date-picker", () => {
     expect(await input.getProperty("value")).toBe("");
   });
 
-  it("should emit component status for transition-chained events: 'calciteInputDatePickerBeforeOpen', 'calciteInputDatePickerOpen', 'calciteInputDatePickerBeforeClose', 'calciteInputDatePickerClose'", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      html` <calcite-input-date-picker id="pickerOpenClose" value="2021-12-08"></calcite-input-date-picker> `
-    );
-
-    const element = await page.find("calcite-input-date-picker");
-    const container = await page.find(`calcite-input-date-picker >>> .${CSS.menu}`);
-
-    const calciteInputDatePickerBeforeOpenEvent = page.waitForEvent("calciteInputDatePickerBeforeOpen");
-    const calciteInputDatePickerOpenEvent = page.waitForEvent("calciteInputDatePickerOpen");
-
-    const calciteInputDatePickerBeforeOpenSpy = await element.spyOnEvent("calciteInputDatePickerBeforeOpen");
-    const calciteInputDatePickerOpenSpy = await element.spyOnEvent("calciteInputDatePickerOpen");
-
-    await element.setProperty("open", true);
-    await page.waitForChanges();
-
-    expect(container).toHaveClass(CSS.menuActive);
-
-    await calciteInputDatePickerBeforeOpenEvent;
-    await calciteInputDatePickerOpenEvent;
-
-    expect(calciteInputDatePickerBeforeOpenSpy).toHaveReceivedEventTimes(1);
-    expect(calciteInputDatePickerOpenSpy).toHaveReceivedEventTimes(1);
-
-    const calciteInputDatePickerBeforeCloseEvent = page.waitForEvent("calciteInputDatePickerBeforeClose");
-    const calciteInputDatePickerCloseEvent = page.waitForEvent("calciteInputDatePickerClose");
-
-    const calciteInputDatePickerBeforeCloseSpy = await element.spyOnEvent("calciteInputDatePickerBeforeClose");
-    const calciteInputDatePickerClose = await element.spyOnEvent("calciteInputDatePickerClose");
-
-    await element.setProperty("open", false);
-    await page.waitForChanges();
-
-    expect(container).not.toHaveClass(CSS.menuActive);
-
-    await calciteInputDatePickerBeforeCloseEvent;
-    await calciteInputDatePickerCloseEvent;
-
-    expect(calciteInputDatePickerBeforeCloseSpy).toHaveReceivedEventTimes(1);
-    expect(calciteInputDatePickerClose).toHaveReceivedEventTimes(1);
-  });
-
   it("should return endDate time as 23:59:999 when end value is typed", async () => {
     const page = await newE2EPage();
     await page.setContent(html` <calcite-input-date-picker layout="horizontal" range></calcite-input-date-picker>`);