diff --git a/core/src/components/range/test/basic/e2e.ts b/core/src/components/range/test/basic/e2e.ts deleted file mode 100644 index a01500e5c0..0000000000 --- a/core/src/components/range/test/basic/e2e.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; -import { dragElementBy } from '@utils/test'; - -test('range: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/range/test/basic?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); - -test('range:rtl: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/range/test/basic?ionic:_testing=true&rtl=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); - -test('range: start/end events', async () => { - const page = await newE2EPage({ - url: '/src/components/range/test/basic?ionic:_testing=true', - }); - - const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); - const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); - const rangeEl = await page.$('#basic'); - - await dragElementBy(rangeEl, page, 300, 0); - await page.waitForChanges(); - - /** - * dragElementBy defaults to starting the drag from the middle of the el, - * so the start value should jump to 50 despite the range defaulting to 20. - */ - expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 91 }); - - /** - * Verify both events fire if range is clicked without dragging. - */ - await dragElementBy(rangeEl, page, 0, 0); - await page.waitForChanges(); - - expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 50 }); -}); - -test('range: start/end events, keyboard', async () => { - const page = await newE2EPage({ - url: '/src/components/range/test/basic?ionic:_testing=true', - }); - - const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); - const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); - - await page.keyboard.press('Tab'); // focus first range - await page.keyboard.press('ArrowRight'); - - expect(rangeStart).toHaveReceivedEventDetail({ value: 20 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 }); -}); diff --git a/core/src/components/range/test/basic/range.e2e.ts b/core/src/components/range/test/basic/range.e2e.ts new file mode 100644 index 0000000000..6915c5de26 --- /dev/null +++ b/core/src/components/range/test/basic/range.e2e.ts @@ -0,0 +1,56 @@ +import { expect } from '@playwright/test'; +import { dragElementBy, test } from '@utils/test/playwright'; + +test.describe('range: basic', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/range/test/basic`); + + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`range-diff-${page.getSnapshotSettings()}.png`); + }); + + test('should emit start/end events', async ({ page }) => { + await page.setContent(``); + + const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); + const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); + + const rangeEl = page.locator('ion-range'); + + await dragElementBy(rangeEl, page, 300, 0); + await page.waitForChanges(); + + /** + * dragElementBy defaults to starting the drag from the middle of the el, + * so the start value should jump to 50 despite the range defaulting to 20. + */ + expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); + expect(rangeEnd).toHaveReceivedEventDetail({ value: 100 }); + + /** + * Verify both events fire if range is clicked without dragging. + */ + await dragElementBy(rangeEl, page, 0, 0); + await page.waitForChanges(); + + expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); + expect(rangeEnd).toHaveReceivedEventDetail({ value: 50 }); + }); + + test('should emit start/end events, keyboard', async ({ page }) => { + await page.setContent(``); + + const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); + const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); + + await page.keyboard.press('Tab'); // focus first range + await page.keyboard.press('ArrowRight'); + + await rangeStart.next(); + await rangeEnd.next(); + + expect(rangeStart).toHaveReceivedEventDetail({ value: 20 }); + expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 }); + }); +}); diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..72dc707651 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b7714cb0dd Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e0025645b2 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7a1498e279 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bc725dca14 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d66a235986 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e1f0aeae32 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8f7a80202a Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8f9d0289b3 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..afa14b1883 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..30be9c4978 Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c3fab35b1d Binary files /dev/null and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/rtl/e2e.ts b/core/src/components/range/test/rtl/e2e.ts deleted file mode 100644 index d812a642e2..0000000000 --- a/core/src/components/range/test/rtl/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('range: RTL', async () => { - const page = await newE2EPage({ - url: '/src/components/range/test/rtl?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/range/test/rtl/index.html b/core/src/components/range/test/rtl/index.html deleted file mode 100644 index ff9460afb7..0000000000 --- a/core/src/components/range/test/rtl/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - Range - RTL - - - - - - - - - - - - - Range - RTL - - - - - - - Range - - - - - - - - - diff --git a/core/src/components/range/test/standalone/e2e.ts b/core/src/components/range/test/standalone/e2e.ts deleted file mode 100644 index 0555e71257..0000000000 --- a/core/src/components/range/test/standalone/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('range: standalone', async () => { - const page = await newE2EPage({ - url: '/src/components/range/test/standalone?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/range/test/standalone/range.e2e.ts b/core/src/components/range/test/standalone/range.e2e.ts new file mode 100644 index 0000000000..f5617da040 --- /dev/null +++ b/core/src/components/range/test/standalone/range.e2e.ts @@ -0,0 +1,12 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('range: standalone', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/range/test/standalone`); + + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`range-diff-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..dad01a0381 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..e80d4dd816 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..966ce35ec0 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..520efa289a Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..eca0cae052 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..651cceb488 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8456d9ac21 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..b2462b6d7e Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..53a0210bdf Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4f8d00d044 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..988a34c9a9 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..811a089053 Binary files /dev/null and b/core/src/components/range/test/standalone/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/utils/test/playwright/matchers/index.ts b/core/src/utils/test/playwright/matchers/index.ts index e8c2900067..5e3997ccc7 100644 --- a/core/src/utils/test/playwright/matchers/index.ts +++ b/core/src/utils/test/playwright/matchers/index.ts @@ -1,5 +1,7 @@ import { toHaveReceivedEvent } from './toHaveReceivedEvent'; +import { toHaveReceivedEventDetail } from './toHaveReceivedEventDetail'; export const matchers = { toHaveReceivedEvent, + toHaveReceivedEventDetail, }; diff --git a/core/src/utils/test/playwright/matchers/toHaveReceivedEventDetail.ts b/core/src/utils/test/playwright/matchers/toHaveReceivedEventDetail.ts new file mode 100644 index 0000000000..745a8b2cd2 --- /dev/null +++ b/core/src/utils/test/playwright/matchers/toHaveReceivedEventDetail.ts @@ -0,0 +1,44 @@ +import { expect } from '@playwright/test'; +import deepEqual from 'fast-deep-equal'; + +import type { EventSpy } from '../page/event-spy'; + +export function toHaveReceivedEventDetail(eventSpy: EventSpy, eventDetail: any) { + if (!eventSpy) { + return { + message: () => `toHaveReceivedEventDetail event spy is null`, + pass: false, + }; + } + + if (typeof (eventSpy as any).then === 'function') { + return { + message: () => + `expected spy to have received event, but it was not resolved (did you forget an await operator?).`, + pass: false, + }; + } + + if (!eventSpy.eventName) { + return { + message: () => `toHaveReceivedEventDetail did not receive an event spy`, + pass: false, + }; + } + + if (!eventSpy.lastEvent) { + return { + message: () => `event "${eventSpy.eventName}" was not received`, + pass: false, + }; + } + + const pass = deepEqual(eventSpy.lastEvent.detail, eventDetail); + + expect(eventSpy.lastEvent.detail).toEqual(eventDetail); + + return { + message: () => `expected event "${eventSpy.eventName}" detail to ${pass ? 'not ' : ''}equal`, + pass: pass, + }; +} diff --git a/core/src/utils/test/playwright/page/event-spy.ts b/core/src/utils/test/playwright/page/event-spy.ts index 2fd2fa3843..5d134f0e95 100644 --- a/core/src/utils/test/playwright/page/event-spy.ts +++ b/core/src/utils/test/playwright/page/event-spy.ts @@ -16,7 +16,7 @@ export class EventSpy { */ private cursor = 0; private queuedHandler: (() => void)[] = []; - public events: Event[] = []; + public events: CustomEvent[] = []; constructor(public eventName: string) {} @@ -24,6 +24,14 @@ export class EventSpy { return this.events.length; } + get firstEvent() { + return this.events[0] || null; + } + + get lastEvent() { + return this.events[this.events.length - 1] || null; + } + public next() { const { cursor } = this; this.cursor++; @@ -48,7 +56,7 @@ export class EventSpy { } } - public push(ev: Event) { + public push(ev: CustomEvent) { this.events.push(ev); const next = this.queuedHandler.shift(); if (next) { @@ -91,8 +99,55 @@ export const addE2EListener = async (page: E2EPage, eventName: string, callback: await page.evaluate( ([eventName, id]) => { + (window as any).stencilSerializeEventTarget = (target: any) => { + // BROWSER CONTEXT + if (!target) { + return null; + } + if (target === window) { + return { serializedWindow: true }; + } + if (target === document) { + return { serializedDocument: true }; + } + if (target.nodeType != null) { + const serializedElement: any = { + serializedElement: true, + nodeName: target.nodeName, + nodeValue: target.nodeValue, + nodeType: target.nodeType, + tagName: target.tagName, + className: target.className, + id: target.id, + }; + return serializedElement; + } + return null; + }; + + (window as any).serializeStencilEvent = (orgEv: CustomEvent) => { + const serializedEvent = { + bubbles: orgEv.bubbles, + cancelBubble: orgEv.cancelBubble, + cancelable: orgEv.cancelable, + composed: orgEv.composed, + currentTarget: (window as any).stencilSerializeEventTarget(orgEv.currentTarget), + defaultPrevented: orgEv.defaultPrevented, + detail: orgEv.detail, + eventPhase: orgEv.eventPhase, + isTrusted: orgEv.isTrusted, + returnValue: orgEv.returnValue, + srcElement: (window as any).stencilSerializeEventTarget(orgEv.srcElement), + target: (window as any).stencilSerializeEventTarget(orgEv.target), + timeStamp: orgEv.timeStamp, + type: orgEv.type, + isSerializedEvent: true, + }; + return serializedEvent; + }; + window.addEventListener(eventName as string, (ev: Event) => { - (window as any).ionicOnEvent(id, ev); + (window as any).ionicOnEvent(id, (window as any).serializeStencilEvent(ev)); }); }, [eventName, id] diff --git a/core/src/utils/test/playwright/page/utils/set-ion-viewport.ts b/core/src/utils/test/playwright/page/utils/set-ion-viewport.ts index a5002bf30a..f655c5ede8 100644 --- a/core/src/utils/test/playwright/page/utils/set-ion-viewport.ts +++ b/core/src/utils/test/playwright/page/utils/set-ion-viewport.ts @@ -13,8 +13,13 @@ import type { Page } from '@playwright/test'; */ export const setIonViewport = async (page: Page) => { const currentViewport = page.viewportSize(); + const ionContent = await page.$('ion-content'); - const pixelAmountRenderedOffscreen = await page.evaluate(() => { + if (ionContent) { + await ionContent.waitForElementState('stable'); + } + + const pixelAmountRenderedOffscreen = await page.evaluate(async () => { const content = document.querySelector('ion-content'); if (content) { const innerScroll = content.shadowRoot!.querySelector('.inner-scroll')!; diff --git a/core/src/utils/test/playwright/page/utils/spy-on-event.ts b/core/src/utils/test/playwright/page/utils/spy-on-event.ts index 777090b36c..c205a0e9c9 100644 --- a/core/src/utils/test/playwright/page/utils/spy-on-event.ts +++ b/core/src/utils/test/playwright/page/utils/spy-on-event.ts @@ -4,7 +4,7 @@ import { addE2EListener, EventSpy } from '../event-spy'; export const spyOnEvent = async (page: E2EPage, eventName: string): Promise => { const spy = new EventSpy(eventName); - await addE2EListener(page, eventName, (ev: Event) => spy.push(ev)); + await addE2EListener(page, eventName, (ev: CustomEvent) => spy.push(ev)); return spy; }; diff --git a/core/src/utils/test/playwright/testExpect.d.ts b/core/src/utils/test/playwright/testExpect.d.ts index d64692a06a..9028360c5c 100644 --- a/core/src/utils/test/playwright/testExpect.d.ts +++ b/core/src/utils/test/playwright/testExpect.d.ts @@ -3,6 +3,11 @@ interface CustomMatchers { * Will check if the event spy received the expected event. */ toHaveReceivedEvent(): R; + /** + * Will check if the event spy received the expected event with the expected detail. + * @param eventDetail The expected detail of the event. + */ + toHaveReceivedEventDetail(eventDetail: any): R; } declare namespace PlaywrightTest {