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/dropdown/dropdown.e2e.ts

@@ -1,18 +1,28 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import dedent from "dedent";
 import { html } from "../../../support/formatting";
-import { focusable, accessible, defaults, disabled, floatingUIOwner, hidden, renders } from "../../tests/commonTests";
+import {
+  focusable,
+  accessible,
+  defaults,
+  disabled,
+  floatingUIOwner,
+  hidden,
+  renders,
+  emitsOpenCloseTransitionChainedEvents,
+} from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
-import { CSS } from "./resources";
 
-const simpleDropdownHTML = 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 simpleDropdownHTML = 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>
+`;
 
 describe("calcite-dropdown", () => {
   describe("focusable", () => {
@@ -51,6 +61,10 @@ describe("calcite-dropdown", () => {
     });
   });
 
+  describe("emitsOpenCloseTransitionChainedEvents", () => {
+    emitsOpenCloseTransitionChainedEvents(simpleDropdownHTML, "open", ".container");
+  });
+
   interface SelectedItemsAssertionOptions {
     /**
      * IDs from items to assert selection
@@ -1097,57 +1111,4 @@ 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/tests/commonTests.ts

@@ -1323,3 +1323,67 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise<void>
     await page.waitForChanges();
   }
 }
+
+/*
+ * @param {ComponentTestSetup} ComponentTestSetup - A component tag, html, or the tag and e2e page for setting up a test.
+ * @param {string} toggleProp - Toggle property to test. Currently, either "open" or "expanded".
+ * @param {string} containerSelector - Container element selector to test for visibility.
+ *
+ * @example
+ * import { emitsOpenCloseTransitionChainedEvents } from "../../tests/commonTests";
+ *
+ * describe("emitsOpenCloseTransitionChainedEvents", () => {
+ *   emitsOpenCloseTransitionChainedEvents("calcite-dropdown", "open", ".container");
+ * });
+ *
+ */
+export function emitsOpenCloseTransitionChainedEvents(
+  componentTestSetup: ComponentTestSetup,
+  toggleProp: string,
+  containerSelector: string
+): void {
+  it(`should emit component status for transition-chained events: 'calciteComponentBeforeOpen', 'calciteComponentOpen', 'calciteComponentBeforeClose', 'calciteComponentClose'`, async () => {
+    const { page, tag } = await getTagAndPage(componentTestSetup);
+    await page.setContent(`${componentTestSetup}`);
+    const element = await page.find(tag);
+
+    const camelCaseTag = tag.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+
+    const beforeOpenEvent = page.waitForEvent(`${camelCaseTag}BeforeOpen`);
+    const openEvent = page.waitForEvent(`${camelCaseTag}Open`);
+
+    const beforeOpenSpy = await element.spyOnEvent(`${camelCaseTag}BeforeOpen`);
+    const openSpy = await element.spyOnEvent(`${camelCaseTag}Open`);
+
+    const beforeCloseEvent = page.waitForEvent(`${camelCaseTag}BeforeClose`);
+    const closeEvent = page.waitForEvent(`${camelCaseTag}Close`);
+
+    const beforeCloseSpy = await element.spyOnEvent(`${camelCaseTag}BeforeClose`);
+    const closeSpy = await element.spyOnEvent(`${camelCaseTag}Close`);
+
+    element.setProperty(toggleProp, true);
+    await page.waitForChanges();
+
+    const container = await page.find(`calcite-dropdown-group >>> ${containerSelector}`);
+    await page.waitForChanges();
+
+    expect(await container.isVisible()).toBe(true);
+
+    await beforeOpenEvent;
+    await openEvent;
+
+    expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
+    expect(openSpy).toHaveReceivedEventTimes(1);
+
+    element.setProperty(toggleProp, false);
+    await page.waitForChanges();
+
+    expect(await container.isVisible()).toBe(false);
+
+    await beforeCloseEvent;
+    await closeEvent;
+
+    expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
+    expect(closeSpy).toHaveReceivedEventTimes(1);
+  });
+}