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>