feat(testing): add toHaveLastReceivedEventDetail event spy matcher (#…

…5829) * add `toHaveLastReceivedEventDetail` matcher * update e2e event test for new matcher
ionic-team · Jun 20, 2024 · 63491de · 63491de
1 parent d26ea2b
commit 63491de
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 9 deletions.
diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -2090,6 +2090,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<void>;
+        "methodThatFiresEventWithOptions": (mph: number) => Promise<void>;
         /**
           * 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
@@ -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
@@ -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
@@ -16,10 +16,16 @@
 
 ## Methods
 
-### `methodThatFiresEventWithOptions() => Promise<void>`
+### `methodThatFiresEventWithOptions(mph: number) => Promise<void>`
 
 this is some method that fires an event with options
 
+#### Parameters
+
+| Name  | Type     | Description |
+| ----- | -------- | ----------- |
+| `mph` | `number` | some value  |
+
 #### Returns
 
 Type: `Promise<void>`