diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts index faa46e0d023..fd5b9a51366 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -2084,6 +2084,12 @@ declare global { */ toHaveFirstReceivedEventDetail(eventDetail: any): void; + /** + * When given an EventSpy, checks the last event has + * received the correct custom event `detail` data. + */ + toHaveLastReceivedEventDetail(eventDetail: any): void; + /** * When given an EventSpy, checks the event at an index * has received the correct custom event `detail` data. diff --git a/src/testing/jest/jest-27-and-under/matchers/events.ts b/src/testing/jest/jest-27-and-under/matchers/events.ts index b54e4a96184..b1ed18db445 100644 --- a/src/testing/jest/jest-27-and-under/matchers/events.ts +++ b/src/testing/jest/jest-27-and-under/matchers/events.ts @@ -91,6 +91,33 @@ export function toHaveFirstReceivedEventDetail(eventSpy: d.EventSpy, eventDetail const pass = deepEqual(eventSpy.firstEvent.detail, eventDetail); + expect(eventSpy.firstEvent.detail).toEqual(eventDetail); + + return { + message: () => `expected event "${eventSpy.eventName}" detail to ${pass ? 'not ' : ''}equal`, + pass: pass, + }; +} + +export function toHaveLastReceivedEventDetail(eventSpy: d.EventSpy, eventDetail: any) { + if (!eventSpy) { + throw new Error(`toHaveLastReceivedEventDetail event spy is null`); + } + + if (typeof (eventSpy as any).then === 'function') { + throw new Error(`event spy must be a resolved value, not a promise, before it can be tested`); + } + + if (!eventSpy.eventName) { + throw new Error(`toHaveLastReceivedEventDetail did not receive an event spy`); + } + + if (!eventSpy.firstEvent) { + throw new Error(`event "${eventSpy.eventName}" was not received`); + } + + const pass = deepEqual(eventSpy.lastEvent.detail, eventDetail); + expect(eventSpy.lastEvent.detail).toEqual(eventDetail); return { diff --git a/src/testing/jest/jest-27-and-under/matchers/index.ts b/src/testing/jest/jest-27-and-under/matchers/index.ts index 5238c896acb..f011f4cc2e1 100644 --- a/src/testing/jest/jest-27-and-under/matchers/index.ts +++ b/src/testing/jest/jest-27-and-under/matchers/index.ts @@ -2,6 +2,7 @@ import { toEqualAttribute, toEqualAttributes, toHaveAttribute } from './attribut import { toHaveClass, toHaveClasses, toMatchClasses } from './class-list'; import { toHaveFirstReceivedEventDetail, + toHaveLastReceivedEventDetail, toHaveNthReceivedEventDetail, toHaveReceivedEvent, toHaveReceivedEventDetail, @@ -25,6 +26,7 @@ export const expectExtend = { toHaveReceivedEventDetail, toHaveReceivedEventTimes, toHaveFirstReceivedEventDetail, + toHaveLastReceivedEventDetail, toHaveNthReceivedEventDetail, toMatchScreenshot, }; diff --git a/src/testing/jest/jest-28/matchers/events.ts b/src/testing/jest/jest-28/matchers/events.ts index b54e4a96184..b1ed18db445 100644 --- a/src/testing/jest/jest-28/matchers/events.ts +++ b/src/testing/jest/jest-28/matchers/events.ts @@ -91,6 +91,33 @@ export function toHaveFirstReceivedEventDetail(eventSpy: d.EventSpy, eventDetail const pass = deepEqual(eventSpy.firstEvent.detail, eventDetail); + expect(eventSpy.firstEvent.detail).toEqual(eventDetail); + + return { + message: () => `expected event "${eventSpy.eventName}" detail to ${pass ? 'not ' : ''}equal`, + pass: pass, + }; +} + +export function toHaveLastReceivedEventDetail(eventSpy: d.EventSpy, eventDetail: any) { + if (!eventSpy) { + throw new Error(`toHaveLastReceivedEventDetail event spy is null`); + } + + if (typeof (eventSpy as any).then === 'function') { + throw new Error(`event spy must be a resolved value, not a promise, before it can be tested`); + } + + if (!eventSpy.eventName) { + throw new Error(`toHaveLastReceivedEventDetail did not receive an event spy`); + } + + if (!eventSpy.firstEvent) { + throw new Error(`event "${eventSpy.eventName}" was not received`); + } + + const pass = deepEqual(eventSpy.lastEvent.detail, eventDetail); + expect(eventSpy.lastEvent.detail).toEqual(eventDetail); return { diff --git a/src/testing/jest/jest-28/matchers/index.ts b/src/testing/jest/jest-28/matchers/index.ts index 5238c896acb..f011f4cc2e1 100644 --- a/src/testing/jest/jest-28/matchers/index.ts +++ b/src/testing/jest/jest-28/matchers/index.ts @@ -2,6 +2,7 @@ import { toEqualAttribute, toEqualAttributes, toHaveAttribute } from './attribut import { toHaveClass, toHaveClasses, toMatchClasses } from './class-list'; import { toHaveFirstReceivedEventDetail, + toHaveLastReceivedEventDetail, toHaveNthReceivedEventDetail, toHaveReceivedEvent, toHaveReceivedEventDetail, @@ -25,6 +26,7 @@ export const expectExtend = { toHaveReceivedEventDetail, toHaveReceivedEventTimes, toHaveFirstReceivedEventDetail, + toHaveLastReceivedEventDetail, toHaveNthReceivedEventDetail, toMatchScreenshot, }; diff --git a/src/testing/jest/jest-29/matchers/events.ts b/src/testing/jest/jest-29/matchers/events.ts index b54e4a96184..b1ed18db445 100644 --- a/src/testing/jest/jest-29/matchers/events.ts +++ b/src/testing/jest/jest-29/matchers/events.ts @@ -91,6 +91,33 @@ export function toHaveFirstReceivedEventDetail(eventSpy: d.EventSpy, eventDetail const pass = deepEqual(eventSpy.firstEvent.detail, eventDetail); + expect(eventSpy.firstEvent.detail).toEqual(eventDetail); + + return { + message: () => `expected event "${eventSpy.eventName}" detail to ${pass ? 'not ' : ''}equal`, + pass: pass, + }; +} + +export function toHaveLastReceivedEventDetail(eventSpy: d.EventSpy, eventDetail: any) { + if (!eventSpy) { + throw new Error(`toHaveLastReceivedEventDetail event spy is null`); + } + + if (typeof (eventSpy as any).then === 'function') { + throw new Error(`event spy must be a resolved value, not a promise, before it can be tested`); + } + + if (!eventSpy.eventName) { + throw new Error(`toHaveLastReceivedEventDetail did not receive an event spy`); + } + + if (!eventSpy.firstEvent) { + throw new Error(`event "${eventSpy.eventName}" was not received`); + } + + const pass = deepEqual(eventSpy.lastEvent.detail, eventDetail); + expect(eventSpy.lastEvent.detail).toEqual(eventDetail); return { diff --git a/src/testing/jest/jest-29/matchers/index.ts b/src/testing/jest/jest-29/matchers/index.ts index 5238c896acb..f011f4cc2e1 100644 --- a/src/testing/jest/jest-29/matchers/index.ts +++ b/src/testing/jest/jest-29/matchers/index.ts @@ -2,6 +2,7 @@ import { toEqualAttribute, toEqualAttributes, toHaveAttribute } from './attribut import { toHaveClass, toHaveClasses, toMatchClasses } from './class-list'; import { toHaveFirstReceivedEventDetail, + toHaveLastReceivedEventDetail, toHaveNthReceivedEventDetail, toHaveReceivedEvent, toHaveReceivedEventDetail, @@ -25,6 +26,7 @@ export const expectExtend = { toHaveReceivedEventDetail, toHaveReceivedEventTimes, toHaveFirstReceivedEventDetail, + toHaveLastReceivedEventDetail, toHaveNthReceivedEventDetail, toMatchScreenshot, }; diff --git a/test/end-to-end/src/components.d.ts b/test/end-to-end/src/components.d.ts index 74eb6694fe4..6c64bf54d96 100644 --- a/test/end-to-end/src/components.d.ts +++ b/test/end-to-end/src/components.d.ts @@ -45,9 +45,10 @@ export namespace Components { interface EventCmp { /** * this is some method that fires an event with options + * @param mph some value * @returns */ - "methodThatFiresEventWithOptions": () => Promise; + "methodThatFiresEventWithOptions": (mph: number) => Promise; /** * this is some method that fires a document event * @returns diff --git a/test/end-to-end/src/event-cmp/event-cmp.e2e.ts b/test/end-to-end/src/event-cmp/event-cmp.e2e.ts index d803b53fb28..5619302d7fb 100644 --- a/test/end-to-end/src/event-cmp/event-cmp.e2e.ts +++ b/test/end-to-end/src/event-cmp/event-cmp.e2e.ts @@ -71,7 +71,7 @@ describe('@Event', () => { const elm = await page.find('event-cmp'); const elmEventSpy = await elm.spyOnEvent('my-event-with-options'); - await elm.callMethod('methodThatFiresEventWithOptions'); + await elm.callMethod('methodThatFiresEventWithOptions', 88); expect(elmEventSpy).toHaveReceivedEventTimes(1); @@ -92,11 +92,13 @@ describe('@Event', () => { const elm = await page.find('event-cmp'); const elmEventSpy = await elm.spyOnEvent('my-event-with-options'); - await elm.callMethod('methodThatFiresEventWithOptions'); - await elm.callMethod('methodThatFiresEventWithOptions'); - await elm.callMethod('methodThatFiresEventWithOptions'); + await elm.callMethod('methodThatFiresEventWithOptions', 80); + await elm.callMethod('methodThatFiresEventWithOptions', 90); + await elm.callMethod('methodThatFiresEventWithOptions', 100); expect(elmEventSpy).toHaveReceivedEventTimes(3); + expect(elmEventSpy).toHaveFirstReceivedEventDetail({ mph: 80 }); + expect(elmEventSpy).toHaveLastReceivedEventDetail({ mph: 100 }); }); it('element spyOnEvent', async () => { @@ -111,7 +113,7 @@ describe('@Event', () => { expect(elmEventSpy).not.toHaveReceivedEvent(); - await elm.callMethod('methodThatFiresEventWithOptions'); + await elm.callMethod('methodThatFiresEventWithOptions', 88); await page.waitForChanges(); diff --git a/test/end-to-end/src/event-cmp/event-cmp.tsx b/test/end-to-end/src/event-cmp/event-cmp.tsx index 6e66269121c..8330fd6ca48 100644 --- a/test/end-to-end/src/event-cmp/event-cmp.tsx +++ b/test/end-to-end/src/event-cmp/event-cmp.tsx @@ -36,10 +36,11 @@ export class EventCmp { /** * this is some method that fires an event with options + * @param mph some value * @returns {void} */ @Method() - async methodThatFiresEventWithOptions() { - this.myEventWithOptions.emit({ mph: 88 }); + async methodThatFiresEventWithOptions(mph: number) { + this.myEventWithOptions.emit({ mph }); } } diff --git a/test/end-to-end/src/event-cmp/readme.md b/test/end-to-end/src/event-cmp/readme.md index b32f5adbe88..a83e1bfa90d 100644 --- a/test/end-to-end/src/event-cmp/readme.md +++ b/test/end-to-end/src/event-cmp/readme.md @@ -16,10 +16,16 @@ ## Methods -### `methodThatFiresEventWithOptions() => Promise` +### `methodThatFiresEventWithOptions(mph: number) => Promise` this is some method that fires an event with options +#### Parameters + +| Name | Type | Description | +| ----- | -------- | ----------- | +| `mph` | `number` | some value | + #### Returns Type: `Promise`