ep_webrtc 2.5.35 → 2.5.36

package/package.json

@@ -5,7 +5,7 @@
     "url": "git@github.com:ether/ep_webrtc.git",
     "type": "git"
   },
-  "version": "2.5.35",
+  "version": "2.5.36",
   "description": "WebRTC based audio/video chat to Etherpad",
   "author": "John McLear <john@mclear.co.uk>",
   "contributors": [],

package/static/tests/frontend-new/helper/utils.ts

@@ -0,0 +1,96 @@
+import {Page} from '@playwright/test';
+
+// Generator that yields the Cartesian product of the given iterables.
+// 1:1 port of the legacy utils.js cartesian generator.
+export function* cartesian<T>(head: T[], ...tail: T[][]): Generator<T[]> {
+  const remainder: Iterable<T[]> = tail.length > 0 ? cartesian(tail[0], ...tail.slice(1)) : [[]];
+  for (const r of remainder) for (const h of head) yield [h, ...r];
+}
+
+// Installs a fake navigator.mediaDevices.getUserMedia inside the page.
+//
+// Implementation note: the legacy helper depended on document/AudioContext
+// at the time of installation (it created the canvas + AudioContext inside
+// the pad's chrome window). The Playwright equivalent runs the entire
+// install inside page.evaluate() so canvas/AudioContext live in browser
+// context, matching the old behavior 1:1.
+//
+// If `track` is true, the function also sets `window.__webrtcLastStream`
+// and `window.__webrtcLastConstraints` on every getUserMedia call so the
+// caller can inspect the most recent audio/video tracks (used by the
+// interface_buttons spec which originally captured the tracks via
+// closure variables in the helper).
+export const installFakeGetUserMedia = async (page: Page, opts: {track?: boolean} = {}) => {
+  const {track = false} = opts;
+  await page.evaluate((track) => {
+    const w = window as any;
+    const makeSilentAudioTrack = () => {
+      const ctx = new AudioContext();
+      const gain = ctx.createGain();
+      const dst = gain.connect(ctx.createMediaStreamDestination());
+      return dst.stream.getAudioTracks()[0];
+    };
+    const makeVideoTrack = (constraints: any) => {
+      const canvas = document.createElement('canvas');
+      const {
+        width: {max: widthMax = 160, ideal: widthIdeal} = {} as any,
+        height: {max: heightMax = 120, ideal: heightIdeal} = {} as any,
+      } = constraints || {};
+      canvas.width = widthIdeal || widthMax;
+      canvas.height = heightIdeal || heightMax;
+      const ctx = canvas.getContext('2d')!;
+      // Some animation is needed because in some browsers HTMLVideoElement.play() will hang
+      // until the canvas is updated. Use a relatively high frame rate to speed up tests.
+      window.setInterval(() => {
+        ctx.fillStyle = `#${Math.floor(Math.random() * 2 ** 24).toString(16).padStart(6, '0')}`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }, 100);
+      return (canvas as any).captureStream().getVideoTracks()[0];
+    };
+    const fakeGetUserMedia = async (constraints: any) => {
+      const audio = constraints && constraints.audio;
+      const video = constraints && constraints.video;
+      if (!audio && !video) {
+        throw new DOMException('either audio or video is required', 'TypeError');
+      }
+      const stream = new MediaStream([
+        ...(audio ? [makeSilentAudioTrack()] : []),
+        ...(video ? [makeVideoTrack(video)] : []),
+      ]);
+      if (track) {
+        w.__webrtcLastStream = stream;
+        w.__webrtcLastConstraints = constraints;
+      }
+      return stream;
+    };
+    w.__fakeGetUserMedia = fakeGetUserMedia;
+    w.navigator.mediaDevices.getUserMedia = fakeGetUserMedia;
+  }, track);
+};
+
+// Sets the `prefs` cookie so the next pad load picks up the supplied
+// padPrefs. Mirrors helper.aNewPad({padPrefs}) from the legacy harness.
+export const setPadPrefsCookie = async (page: Page, padPrefs: Record<string, any>) => {
+  await page.context().addCookies([{
+    name: 'prefs',
+    value: encodeURIComponent(JSON.stringify({prefs: padPrefs})),
+    url: 'http://localhost:9001',
+  }]);
+};
+
+// Navigates to a fresh pad with optional URL query params (mirrors
+// helper.aNewPad({params}) from the legacy harness). Does not clear
+// cookies – call setPadPrefsCookie first if you need padPrefs.
+export const goToNewPadWithParams = async (
+    page: Page, params: Record<string, any> = {}) => {
+  const {randomUUID} = await import('node:crypto');
+  const padId = 'FRONTEND_TESTS' + randomUUID();
+  const qs = new URLSearchParams();
+  for (const [k, v] of Object.entries(params)) qs.append(k, String(v));
+  const url = `http://localhost:9001/p/${padId}` +
+              (qs.toString() ? `?${qs.toString()}` : '');
+  await page.goto(url);
+  await page.waitForSelector('iframe[name="ace_outer"]');
+  await page.waitForSelector('#editorcontainer.initialized');
+  return padId;
+};

package/static/tests/frontend-new/specs/audio_video_on_start.spec.ts

@@ -0,0 +1,37 @@
+import {expect, test} from '@playwright/test';
+import {cartesian, goToNewPadWithParams, installFakeGetUserMedia, setPadPrefsCookie}
+    from '../helper/utils';
+
+test.describe('audio/video on/off according to query parameters/cookies', () => {
+  const testCases = [...cartesian(
+      ['audio', 'video'] as Array<'audio' | 'video'>,
+      [null, false, true],
+      [null, false, true])];
+
+  for (const [avType, cookieVal, queryVal] of testCases) {
+    test(`${avType} cookie=${cookieVal} query=${queryVal}`, async ({page, context}) => {
+      test.setTimeout(60_000);
+      await context.clearCookies();
+      const padPrefs = cookieVal == null ? {} : {[`${avType}EnabledOnStart`]: cookieVal};
+      await setPadPrefsCookie(page, padPrefs);
+      const params: Record<string, any> = {av: false};
+      if (queryVal != null) params[`webrtc${avType}enabled`] = queryVal;
+      await goToNewPadWithParams(page, params);
+      await installFakeGetUserMedia(page);
+      // Calling activate() directly blocks until activation completes.
+      await page.evaluate(() => (window as any).ep_webrtc.activate());
+      const disabled: string = await page.evaluate(
+          (avType) => (window as any).ep_webrtc._settings[avType].disabled, avType);
+      const checkboxCount = await page.locator(`#options-${avType}enabledonstart`).count();
+      if (disabled === 'hard') {
+        expect(checkboxCount).toBe(0);
+      } else {
+        const wantChecked = !!(queryVal || (queryVal == null && cookieVal) ||
+                                (queryVal == null && cookieVal == null && disabled === 'none'));
+        const checked = await page.locator(`#options-${avType}enabledonstart`)
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(wantChecked);
+      }
+    });
+  }
+});

package/static/tests/frontend-new/specs/checkbox.spec.ts

@@ -0,0 +1,165 @@
+import {expect, test} from '@playwright/test';
+import {cartesian, goToNewPadWithParams, setPadPrefsCookie} from '../helper/utils';
+
+type Tc = {
+  name: string;
+  defaultVal: boolean;
+  cookieVal: boolean | null;
+  queryVal: boolean | null;
+  i: number;
+  id: string;
+  want: boolean;
+};
+
+const testCases: Tc[] = [...cartesian(
+    [false, true] as boolean[],
+    [null, false, true] as Array<boolean | null>,
+    [null, false, true] as Array<boolean | null>)].map(([defaultVal, cookieVal, queryVal], i) => ({
+  name: `default=${defaultVal} cookie=${cookieVal} query=${queryVal}`,
+  defaultVal: defaultVal as boolean,
+  cookieVal: cookieVal as boolean | null,
+  queryVal: queryVal as boolean | null,
+  i,
+  id: `checkboxId${i}`,
+  want: !!((queryVal as boolean | null) ||
+            (queryVal == null && cookieVal) ||
+            (queryVal == null && cookieVal == null && defaultVal)),
+}));
+
+test.describe('settingToCheckbox', () => {
+  // Use a serial worker so the single before-all setup persists across tests
+  // (legacy used mocha's `before` for one-shot setup).
+  test.describe.configure({mode: 'serial'});
+
+  let sharedPage: import('@playwright/test').Page;
+
+  test.beforeAll(async ({browser}) => {
+    sharedPage = await browser.newPage();
+    test.setTimeout(60_000);
+    const padPrefs: Record<string, any> = {};
+    for (const tc of testCases) {
+      if (tc.cookieVal != null) padPrefs[`cookie${tc.i}`] = tc.cookieVal;
+    }
+    await setPadPrefsCookie(sharedPage, padPrefs);
+    const params: Record<string, any> = {av: false};
+    for (const tc of testCases) {
+      if (tc.queryVal != null) params[`urlVar${tc.i}`] = tc.queryVal;
+    }
+    await goToNewPadWithParams(sharedPage, params);
+    // Append a checkbox per testCase to #settings then call settingToCheckbox.
+    await sharedPage.evaluate((cases) => {
+      const w = window as any;
+      const $ = w.$;
+      for (const c of cases) {
+        $('#settings').append($('<input>').attr('type', 'checkbox').attr('id', c.id));
+      }
+    }, testCases.map(({id}) => ({id})));
+    // Wait for all checkboxes to exist.
+    await sharedPage.waitForFunction((cases) => {
+      for (const c of cases) {
+        if (document.querySelectorAll(`#${c.id}`).length !== 1) return false;
+      }
+      return true;
+    }, testCases.map(({id}) => ({id})));
+    await sharedPage.evaluate((cases) => {
+      const w = window as any;
+      for (const c of cases) {
+        w.ep_webrtc.settingToCheckbox({
+          urlVar: `urlVar${c.i}`,
+          cookie: `cookie${c.i}`,
+          defaultVal: c.defaultVal,
+          checkboxId: `#${c.id}`,
+        });
+      }
+    }, testCases.map(({i, id, defaultVal}) => ({i, id, defaultVal})));
+  });
+
+  test.afterAll(async () => {
+    await sharedPage.close();
+  });
+
+  test.describe('initially checked/unchecked', () => {
+    for (const {name, want, id} of testCases) {
+      test(name, async () => {
+        const checked = await sharedPage.locator(`#${id}`)
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(want);
+      });
+    }
+  });
+
+  test.describe('query parameter sets cookie', () => {
+    for (const {name, queryVal, i} of testCases.filter((t) => t.queryVal != null)) {
+      test(name, async () => {
+        const v = await sharedPage.evaluate((i) => {
+          const w = window as any;
+          const padcookie = w.require('ep_etherpad-lite/static/js/pad_cookie').padcookie;
+          return padcookie.getPref(`cookie${i}`);
+        }, i);
+        expect(v).toBe(queryVal);
+      });
+    }
+  });
+
+  test.describe('no query parameter, no cookie -> cookie not set', () => {
+    for (const {name, queryVal, cookieVal, i} of testCases) {
+      if (queryVal != null || cookieVal != null) continue;
+      test(name, async () => {
+        const v = await sharedPage.evaluate((i) => {
+          const w = window as any;
+          const padcookie = w.require('ep_etherpad-lite/static/js/pad_cookie').padcookie;
+          return padcookie.getPref(`cookie${i}`);
+        }, i);
+        expect(v == null).toBe(true);
+      });
+    }
+  });
+
+  test.describe('clicking sets cookie', () => {
+    for (const {name, i, id, want} of testCases) {
+      test(name, async () => {
+        await sharedPage.locator(`#${id}`).evaluate((el) => {
+          const w = window as any;
+          w.$(el).click();
+        });
+        await sharedPage.waitForFunction(({id, want}) => {
+          const cb = document.querySelector(`#${id}`) as HTMLInputElement | null;
+          return cb != null && cb.checked === !want;
+        }, {id, want});
+        const v = await sharedPage.evaluate((i) => {
+          const w = window as any;
+          const padcookie = w.require('ep_etherpad-lite/static/js/pad_cookie').padcookie;
+          return padcookie.getPref(`cookie${i}`);
+        }, i);
+        expect(v).toBe(!want);
+      });
+    }
+  });
+
+  test.describe('throws errors for missing params', () => {
+    const params = {
+      urlVar: 'urlVar',
+      cookie: 'cookie',
+      defaultVal: true,
+      checkboxId: '#checkboxId',
+    };
+
+    for (const k of Object.keys(params) as Array<keyof typeof params>) {
+      test(k, async () => {
+        const result = await sharedPage.evaluate(({params, k}) => {
+          const w = window as any;
+          const badParams: any = {...params};
+          delete badParams[k];
+          try {
+            w.ep_webrtc.settingToCheckbox(badParams);
+            return {threw: false, msg: ''};
+          } catch (e: any) {
+            return {threw: true, msg: String(e && (e.message || e))};
+          }
+        }, {params, k});
+        expect(result.threw).toBe(true);
+        expect(result.msg).toMatch(new RegExp(k));
+      });
+    }
+  });
+});

package/static/tests/frontend-new/specs/enable_disable.spec.ts

@@ -0,0 +1,69 @@
+import {expect, test} from '@playwright/test';
+import {cartesian, goToNewPadWithParams, setPadPrefsCookie} from '../helper/utils';
+
+const testCases = [...cartesian(
+    [null, false, true] as Array<boolean | null>,
+    [null, false, true, 'NO', 'YES', 'ignored'] as Array<boolean | string | null>)];
+
+test.describe('enable/disable', () => {
+  for (const [cookieVal, queryVal] of testCases) {
+    test.describe(`cookie=${cookieVal} query=${queryVal}`, () => {
+      // serial: tests within share state from beforeAll on a single page.
+      test.describe.configure({mode: 'serial'});
+
+      let sharedPage: import('@playwright/test').Page;
+      let wantChecked: boolean;
+
+      test.beforeAll(async ({browser}) => {
+        sharedPage = await browser.newPage();
+        test.setTimeout(60_000);
+        const padPrefs = cookieVal == null ? {} : {rtcEnabled: cookieVal};
+        await setPadPrefsCookie(sharedPage, padPrefs);
+        const params: Record<string, any> = {};
+        if (queryVal != null) params.av = queryVal;
+        await goToNewPadWithParams(sharedPage, params);
+        // Normalize queryVal to null/false/true.
+        const queryNorm: boolean | null =
+            typeof queryVal === 'boolean' ? queryVal
+            : queryVal === 'NO' ? false
+            : queryVal === 'YES' ? true
+            : null;
+        await sharedPage.waitForFunction(() => {
+          const w = window as any;
+          return w.$('#rtcbox').data('initialized');
+        }, undefined, {timeout: 5000});
+        const defaultChecked: boolean = await sharedPage.evaluate(
+            () => !!(window as any).ep_webrtc._settings.enabled);
+        wantChecked = !!(queryNorm || (queryNorm == null && cookieVal) ||
+                         (queryNorm == null && cookieVal == null && defaultChecked));
+      });
+
+      test.afterAll(async () => {
+        await sharedPage.close();
+      });
+
+      test('checkbox is checked/unchecked', async () => {
+        const checked = await sharedPage.locator('#options-enablertc')
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(wantChecked);
+      });
+
+      test('self video element', async () => {
+        const count = await sharedPage.locator('#rtcbox video').count();
+        expect(count).toBe(wantChecked ? 1 : 0);
+      });
+
+      test('clicking checkbox toggles state', async () => {
+        await sharedPage.locator('#options-enablertc').evaluate((el) => {
+          (window as any).$(el).click();
+        });
+        const checked = await sharedPage.locator('#options-enablertc')
+            .evaluate((el) => (el as HTMLInputElement).checked);
+        expect(checked).toBe(!wantChecked);
+        await sharedPage.waitForFunction((expected) => {
+          return document.querySelectorAll('#rtcbox video').length === expected;
+        }, wantChecked ? 0 : 1);
+      });
+    });
+  }
+});

package/static/tests/frontend-new/specs/errors.spec.ts

@@ -0,0 +1,92 @@
+import {expect, test} from '@playwright/test';
+import {goToNewPadWithParams} from '../helper/utils';
+
+const testCases: Array<[string, string]> = [
+  // Hard to test the version of NotAllowedError that is the SSL error
+  // because it requires changing window.location
+  ['NotAllowedError', 'Failed to get permission to access'],
+  ['NotFoundError', 'Failed to access'],
+  ['NotReadableError', 'hardware error occurred'],
+  ['AbortError', 'not a hardware error'],
+];
+
+test.describe('error handling', () => {
+  test.describe.configure({mode: 'serial'});
+  let sharedPage: import('@playwright/test').Page;
+  let videoBtnSelector: string;
+
+  test.beforeAll(async ({browser}) => {
+    sharedPage = await browser.newPage();
+    test.setTimeout(60_000);
+    await goToNewPadWithParams(sharedPage, {
+      av: true,
+      webrtcaudioenabled: false,
+      webrtcvideoenabled: false,
+    });
+    await sharedPage.waitForFunction(
+        () => (window as any).$('#rtcbox').data('initialized'));
+    const ownInterfaceId: string = await sharedPage.evaluate(() => {
+      const w = window as any;
+      const ownUserId = w.ep_webrtc.getUserId();
+      const ownVideoId = `video_${ownUserId.replace(/\./g, '_')}`;
+      return `interface_${ownVideoId}`;
+    });
+    videoBtnSelector = `#${ownInterfaceId} .video-btn`;
+    // Save the original getUserMedia for restore in afterAll.
+    await sharedPage.evaluate(() => {
+      const w = window as any;
+      w.__getUserMediaBackup = w.navigator.mediaDevices.getUserMedia;
+    });
+  });
+
+  test.afterAll(async () => {
+    await sharedPage.evaluate(() => {
+      const w = window as any;
+      w.navigator.mediaDevices.getUserMedia = w.__getUserMediaBackup;
+    });
+    await sharedPage.close();
+  });
+
+  test.beforeEach(async () => {
+    // No idea why but this needs to be called twice to actually make
+    // #gritter-container hidden.
+    await sharedPage.evaluate(() => {
+      const w = window as any;
+      w.gritter.removeAll({fade: false});
+      w.gritter.removeAll({fade: false});
+    });
+    const off = await sharedPage.locator(videoBtnSelector).evaluate(
+        (el) => el.classList.contains('off'));
+    expect(off).toBe(true);
+  });
+
+  for (const [errName, checkString] of testCases) {
+    test(errName, async () => {
+      await sharedPage.evaluate((errName) => {
+        const w = window as any;
+        w.navigator.mediaDevices.getUserMedia = async () => {
+          const err: any = new Error();
+          err.name = errName;
+          throw err;
+        };
+      }, errName);
+      await sharedPage.waitForFunction(() => {
+        const w = window as any;
+        return w.$('#gritter-container:visible').length === 0;
+      }, undefined, {timeout: 1000});
+      await sharedPage.locator(videoBtnSelector).evaluate((el) => {
+        (window as any).$(el).click();
+      });
+      await sharedPage.waitForFunction(() => {
+        const w = window as any;
+        return w.$('#gritter-container:visible').length === 1;
+      }, undefined, {timeout: 1000});
+      const titleHtml = await sharedPage.evaluate(
+          () => (window as any).$('.gritter-title').html());
+      expect(titleHtml).toBe('Error');
+      const contentHtml = await sharedPage.evaluate(
+          () => (window as any).$('.gritter-content p').html());
+      expect(contentHtml).toContain(checkString);
+    });
+  }
+});