test(img): load and error events are emitted (#26440)

core/src/components/img/test/basic/img.e2e.ts

@@ -1,30 +1,94 @@
 import { expect } from '@playwright/test';
+import type { EventSpy } from '@utils/test/playwright';
 import { test } from '@utils/test/playwright';
 
 test.describe('img: basic', () => {
-  test('should not have visual regressions', async ({ page }) => {
+  test.beforeEach(({ skip }) => {
-    await page.goto('/src/components/img/test/basic');
+    skip.rtl();
+    skip.mode('ios');
+  });
+
+  test.describe('image successfully loads', () => {
+    let ionImgWillLoad: EventSpy;
+    let ionImgDidLoad: EventSpy;
+
+    test.beforeEach(async ({ page }) => {
+      await page.route('**/*', (route) => {
+        if (route.request().resourceType() === 'image') {
+          return route.fulfill({
+            status: 200,
+            contentType: 'image/png',
+            body: Buffer.from(
+              'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIwAAAABJRU5ErkJggg==',
+              'base64'
+            ),
+          });
+        }
+        return route.continue();
+      });
 
       /**
-     * The first `ion-img` resolves before the spy can be created,
+       * We render the img intentionally without providing a source,
-     * since the image is initially visible and the IO fires.
+       * to allow the event spies to be set-up before the events
+       * can be emitted.
        *
-     * We manually look at the image's completion state to determine
+       * Later we will assign an image source to load.
-     * that it loaded, before creating a spy for the second image.
        */
-    const img = await page.locator('.img-part img');
+      await page.setContent('<ion-img></ion-img>');
-    await img.evaluate((el: HTMLImageElement) => el.complete);
 
-    const ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
+      ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
-    /**
+      ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
-     * Resizing the viewport will cause the intersection observers of
-     * the remaining images to fire, which will cause the `ionImgDidLoad`
-     * event to fire.
-     */
-    await page.setIonViewport();
 
+      const ionImg = await page.locator('ion-img');
+      await ionImg.evaluate((el: HTMLIonImgElement) => {
+        el.src = 'https://via.placeholder.com/150';
+        return el;
+      });
+    });
+
+    test('should emit ionImgWillLoad', async () => {
+      await ionImgWillLoad.next();
+
+      expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
+    });
+
+    test('should emit ionImgDidLoad', async () => {
       await ionImgDidLoad.next();
 
-    expect(await page.screenshot()).toMatchSnapshot(`img-basic-${page.getSnapshotSettings()}.png`);
+      expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
+    });
+  });
+
+  test.describe('image fails to load', () => {
+    let ionError: EventSpy;
+
+    test.beforeEach(async ({ page }) => {
+      await page.route('**/*', (route) =>
+        route.request().resourceType() === 'image' ? route.abort() : route.continue()
+      );
+
+      /**
+       * We render the img intentionally without providing a source,
+       * to allow the event spies to be set-up before the events
+       * can be emitted.
+       *
+       * Later we will assign an image source to load.
+       */
+      await page.setContent('<ion-img></ion-img>');
+
+      ionError = await page.spyOnEvent('ionError');
+
+      const ionImg = await page.locator('ion-img');
+      await ionImg.evaluate((el: HTMLIonImgElement) => {
+        el.src = 'https://via.placeholder.com/150';
+        return el;
+      });
+    });
+
+    test('should emit ionError', async () => {
+      await ionError.next();
+
+      expect(ionError).toHaveReceivedEventTimes(1);
+    });
   });
 });