From 606dc36d59ac8c2fccb58e38f86d0aca5754d7bf Mon Sep 17 00:00:00 2001
From: Volodymyr <vpanov.me@gmail.com>
Date: Sun, 7 Jan 2024 23:28:40 +0200
Subject: [PATCH] feat: add image.removeEventListener implementation (#500)

Co-authored-by: Vladimir Panov <vladimir.panov@motorsport.com>
---
 src/lib/web-worker/worker-image.ts | 13 ++++++++++++-
 tests/platform/image/image.spec.ts | 10 ++++++++--
 tests/platform/image/index.html    | 24 ++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/lib/web-worker/worker-image.ts b/src/lib/web-worker/worker-image.ts
index 09edd0b4..64f74520 100644
--- a/src/lib/web-worker/worker-image.ts
+++ b/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];
     }
diff --git a/tests/platform/image/image.spec.ts b/tests/platform/image/image.spec.ts
index 19f80536..15ee7712 100644
--- a/tests/platform/image/image.spec.ts
+++ b/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');
diff --git a/tests/platform/image/index.html b/tests/platform/image/index.html
index d48b74ea..991c66b3 100644
--- a/tests/platform/image/index.html
+++ b/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>