feat: add image.removeEventListener implementation (#500)

Co-authored-by: Vladimir Panov <[email protected]>

src/lib/web-worker/worker-image.ts

@@ -4,6 +4,8 @@ import { logWorker } from '../log';
 import { resolveUrl } from './worker-exec';
 import { webWorkerCtx } from './worker-constants';
 
+type HTMLImageElementEvents = 'load' | 'error';
+
 export const createImageConstructor = (env: WebWorkerEnvironment) =>
   class HTMLImageElement {
     s: string;
@@ -44,7 +46,7 @@ export const createImageConstructor = (env: WebWorkerEnvironment) =>
       );
     }
 
-    addEventListener(eventName: 'load' | 'error', cb: EventHandler) {
+    addEventListener(eventName: HTMLImageElementEvents, cb: EventHandler) {
       if (eventName === 'load') {
         this.l.push(cb);
       }
@@ -53,6 +55,15 @@ export const createImageConstructor = (env: WebWorkerEnvironment) =>
       }
     }
 
+    removeEventListener(eventName: HTMLImageElementEvents, cb: EventHandler) {
+      if (eventName === 'load') {
+        this.l = this.l.filter((fn) => fn !== cb);
+      }
+      if (eventName === 'error') {
+        this.e = this.e.filter((fn) => fn !== cb);
+      }
+    }
+
     get onload() {
       return this.l[0];
     }

tests/platform/image/image.spec.ts

@@ -3,8 +3,9 @@ import { test, expect } from '@playwright/test';
 test('image', async ({ page }) => {
   await page.goto('/tests/platform/image/');
 
-  const resolveUrlCalled = new Promise(resolve =>
-    page.on('request', request => request.url().includes('resolvedUrl') && resolve(true)));
+  const resolveUrlCalled = new Promise((resolve) =>
+    page.on('request', (request) => request.url().includes('resolvedUrl') && resolve(true))
+  );
 
   await page.waitForSelector('.testImageOnLoad');
   const testImageOnLoad = page.locator('#testImageOnLoad');
@@ -34,6 +35,11 @@ test('image', async ({ page }) => {
   const testImgListenerLoad = page.locator('#testImgListenerLoad');
   await expect(testImgListenerLoad).toHaveText('load');
 
+  await page.waitForSelector('.testImgListenerRemoved');
+  const testImgListenerRemoved = page.locator('#testImgListenerRemoved');
+  await page.waitForTimeout(100);
+  await expect(testImgListenerRemoved).toHaveText('onload');
+
   await page.waitForSelector('.testImgListenerError');
   const testImgListenerError = page.locator('#testImgListenerError');
   await expect(testImgListenerError).toHaveText('error');

tests/platform/image/index.html

@@ -174,6 +174,30 @@ <h1>Image</h1>
         </script>
       </li>
 
+      <li>
+        <strong>&lt;img&gt; removeEventListener('load')</strong>
+        <code id="testImgListenerRemoved"></code>
+        <script type="text/partytown">
+          (function () {
+            const image = new Image();
+            const elm = document.getElementById('testImgListenerRemoved');
+
+            image.onload = function(){
+              elm.textContent = 'onload';
+            }
+
+            function handleImageLoad(ev) {
+              elm.textContent = ev.type;
+            }
+            image.addEventListener('load', handleImageLoad);
+            image.removeEventListener('load', handleImageLoad);
+            image.src = 'dot.gif?testImgListenerRemoved';
+
+            elm.className = 'testImgListenerRemoved';
+          })();
+        </script>
+      </li>
+
       <li>
         <strong>&lt;img&gt; addEventListener('error')</strong>
         <code id="testImgListenerError"></code>