From c282494dd40fe7a4b79852c95d0094671da21c56 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 18 Sep 2023 16:41:41 -0700 Subject: [PATCH] fix(alert): fixes regression with alert opening events --- .../src/components/alert/alert.e2e.ts | 126 +++++++++++++----- .../src/components/alert/alert.tsx | 5 +- 2 files changed, 98 insertions(+), 33 deletions(-) diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index 7ac924f9181..95a00826182 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -280,53 +280,117 @@ 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` ${alertContent} `); + describe("beforeOpen, open, beforeClose, close event emitting", () => { + it("emits via prop", async () => { + await assertEventEmitting({ + openAlert: async (page) => { + const alertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen"); + const alertOpenEvent = page.waitForEvent("calciteAlertOpen"); + const alert = await page.find("calcite-alert"); + + alert.setProperty("open", true); + await page.waitForChanges(); + + await alertBeforeOpenEvent; + await alertOpenEvent; + }, + closeAlert: async (page) => { + const alertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose"); + const alertCloseEvent = page.waitForEvent("calciteAlertClose"); + const alert = await page.find("calcite-alert"); + + alert.setProperty("open", false); + await page.waitForChanges(); + + await alertBeforeCloseEvent; + await alertCloseEvent; + }, + }); + }); - const element = await page.find("calcite-alert"); - const container = await page.find(`calcite-alert >>> .${CSS.container}`); + async function assertEventEmitting(params: { + openAlert: (page: E2EPage) => Promise; + closeAlert: (page: E2EPage) => Promise; + }): Promise { + const page = await newE2EPage(); + await page.setContent(html``); + const alert = await page.find("calcite-alert"); + + const beforeOpenEvent = await alert.spyOnEvent("calciteAlertBeforeOpen"); + const openEvent = await alert.spyOnEvent("calciteAlertOpen"); + const beforeCloseEvent = await alert.spyOnEvent("calciteAlertClose"); + const closeEvent = await alert.spyOnEvent("calciteAlertClose"); + + expect(beforeOpenEvent).toHaveReceivedEventTimes(0); + expect(openEvent).toHaveReceivedEventTimes(0); + expect(beforeCloseEvent).toHaveReceivedEventTimes(0); + expect(closeEvent).toHaveReceivedEventTimes(0); + + await params.openAlert(page); + await page.waitForChanges(); + + expect(beforeOpenEvent).toHaveReceivedEventTimes(1); + expect(openEvent).toHaveReceivedEventTimes(1); + expect(beforeCloseEvent).toHaveReceivedEventTimes(0); + expect(closeEvent).toHaveReceivedEventTimes(0); + + await params.closeAlert(page); + await page.waitForChanges(); + + expect(beforeOpenEvent).toHaveReceivedEventTimes(1); + expect(openEvent).toHaveReceivedEventTimes(1); + expect(beforeCloseEvent).toHaveReceivedEventTimes(1); + expect(closeEvent).toHaveReceivedEventTimes(1); + } + }); - expect(await container.isVisible()).toBe(false); + // it("should emit component status for transition-chained events: 'calciteAlertBeforeOpen', 'calciteAlertOpen', 'calciteAlertBeforeClose', 'calciteAlertClose'", async () => { + // const page = await newE2EPage(); + // await page.setContent(html` ${alertContent} `); - const calciteAlertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen"); - const calciteAlertOpenEvent = page.waitForEvent("calciteAlertOpen"); + // const element = await page.find("calcite-alert"); + // const container = await page.find(`calcite-alert >>> .${CSS.container}`); - const calciteAlertBeforeOpenSpy = await element.spyOnEvent("calciteAlertBeforeOpen"); - const calciteAlertOpenSpy = await element.spyOnEvent("calciteAlertOpen"); + // expect(await container.isVisible()).toBe(false); - await element.setProperty("open", true); - await page.waitForChanges(); + // const calciteAlertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen"); + // const calciteAlertOpenEvent = page.waitForEvent("calciteAlertOpen"); - await calciteAlertBeforeOpenEvent; - await calciteAlertOpenEvent; + // const calciteAlertBeforeOpenSpy = await element.spyOnEvent("calciteAlertBeforeOpen"); + // const calciteAlertOpenSpy = await element.spyOnEvent("calciteAlertOpen"); - expect(await element.getProperty("open")).toBe(true); + // await element.setProperty("open", true); + // await page.waitForChanges(); - expect(calciteAlertBeforeOpenSpy).toHaveReceivedEventTimes(1); - expect(calciteAlertOpenSpy).toHaveReceivedEventTimes(1); + // await calciteAlertBeforeOpenEvent; + // await calciteAlertOpenEvent; - expect(await container.isVisible()).toBe(true); + // expect(await element.getProperty("open")).toBe(true); - const calciteAlertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose"); - const calciteAlertCloseEvent = page.waitForEvent("calciteAlertClose"); + // expect(calciteAlertBeforeOpenSpy).toHaveReceivedEventTimes(1); + // expect(calciteAlertOpenSpy).toHaveReceivedEventTimes(1); - const calciteAlertBeforeCloseSpy = await element.spyOnEvent("calciteAlertBeforeClose"); - const calciteAlertClose = await element.spyOnEvent("calciteAlertClose"); + // expect(await container.isVisible()).toBe(true); - await element.setProperty("open", false); - await page.waitForChanges(); + // const calciteAlertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose"); + // const calciteAlertCloseEvent = page.waitForEvent("calciteAlertClose"); - await calciteAlertBeforeCloseEvent; - await calciteAlertCloseEvent; + // const calciteAlertBeforeCloseSpy = await element.spyOnEvent("calciteAlertBeforeClose"); + // const calciteAlertClose = await element.spyOnEvent("calciteAlertClose"); - expect(await element.getProperty("open")).toBe(false); + // await element.setProperty("open", false); + // await page.waitForChanges(); - expect(calciteAlertBeforeCloseSpy).toHaveReceivedEventTimes(1); - expect(calciteAlertClose).toHaveReceivedEventTimes(1); + // await calciteAlertBeforeCloseEvent; + // await calciteAlertCloseEvent; - expect(await container.isVisible()).toBe(false); - }); + // 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(); diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index a183055d31a..bb596463e71 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -175,9 +175,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen connectMessages(this); const open = this.open; if (open && !this.queued) { - this.openHandler(); this.calciteInternalAlertRegister.emit(); - onToggleOpenCloseComponent(this); } } @@ -185,6 +183,9 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen setUpLoadableComponent(this); this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind); await setUpMessages(this); + if (this.open) { + onToggleOpenCloseComponent(this); + } } componentDidLoad(): void {