diff --git a/workspaces/e2e/tests/error/error.spec.ts b/workspaces/e2e/tests/error/error.spec.ts index 219dd03f..4054840f 100644 --- a/workspaces/e2e/tests/error/error.spec.ts +++ b/workspaces/e2e/tests/error/error.spec.ts @@ -7,17 +7,27 @@ test("Emits error event", async ({ page }) => { await expect(page.locator("[data-type='invalidateTooltipError']")).toHaveCount(0); }); -test("should invalidate error without issues", async ({ page }) => { +test("should not emit any error event if it gets invalidates quickly", async ({ page }) => { await page.goto("/error/error.html"); await page.locator(".start-flow").click(); - await expect(page.locator("[data-type='tooltipError']")).toHaveCount(1); + await expect(page.locator("[data-type='tooltipError']")).toHaveCount(0); await page.locator(".add-target").click(); await page.locator(".remove-target").click(); await page.locator(".add-target").click(); + await expect(page.locator("[data-type='tooltipError']")).toHaveCount(0); + await expect(page.locator("[data-type='invalidateTooltipError']")).toHaveCount(0); +}); + +test("should emit error and invalidate it if it gets invalidated after a while", async ({ + page, +}) => { + await page.goto("/error/error.html"); + await page.locator(".start-flow").click(); await expect(page.locator("[data-type='tooltipError']")).toHaveCount(1); + await page.locator(".add-target").click(); + await expect(page.locator("[data-type='invalidateTooltipError']")).toHaveCount(1); await expect(page.locator("[data-type='invalidateTooltipError']")).toHaveAttribute( "data-reference-id", "0", ); - await expect(page.locator("[data-type='invalidateTooltipError']")).toHaveCount(1); }); diff --git a/workspaces/js/src/flow-state.ts b/workspaces/js/src/flow-state.ts index cb3eff9b..d3dc472f 100644 --- a/workspaces/js/src/flow-state.ts +++ b/workspaces/js/src/flow-state.ts @@ -14,7 +14,7 @@ export class FlowState { flowId: string; flowElement?: { element: HTMLElement; cleanup?: () => void; target?: Element }; waitingForElement = false; - tooltipErrorPromise?: Promise<{ referenceId: string } | undefined> | null; + tooltipErrorPromise?: number | Promise<{ referenceId: string } | undefined> | null; flowsContext: FlowsContext; @@ -75,7 +75,9 @@ export class FlowState { enterStep(): this { const step = this.currentStep; if (step && isTooltipStep(step) && !this.tooltipErrorPromise) - this.tooltipErrorPromise = this.debug({ type: "tooltipError" }); + this.tooltipErrorPromise = window.setTimeout(() => { + this.tooltipErrorPromise = this.debug({ type: "tooltipError" }); + }, 1000); return this; } @@ -157,12 +159,19 @@ export class FlowState { render(this); - if (step && isTooltipStep(step) && !this.waitingForElement && this.tooltipErrorPromise) { + if ( + step && + isTooltipStep(step) && + !this.waitingForElement && + this.tooltipErrorPromise !== null + ) { const tooltipErrorPromise = this.tooltipErrorPromise; this.tooltipErrorPromise = null; - void tooltipErrorPromise.then((res) => - this.debug({ type: "invalidateTooltipError", referenceId: res?.referenceId }), - ); + if (typeof tooltipErrorPromise === "number") window.clearTimeout(tooltipErrorPromise); + if (tooltipErrorPromise instanceof Promise) + void tooltipErrorPromise.then((res) => + this.debug({ type: "invalidateTooltipError", referenceId: res?.referenceId }), + ); } return this;