ep_webrtc 2.5.35 → 2.5.37

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

@@ -0,0 +1,165 @@
+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);
+    // ep_webrtc's postAceInit checks enumerateDevices() and skips auto-
+    // activation when no audio/video device is visible. This test
+    // exercises the error-toast flow which needs the .video-btn button
+    // (created by activate → addInterface) to exist, so install a fake
+    // mediaDevices BEFORE the pad loads so auto-activation runs.
+    // Each test below patches getUserMedia separately to throw the
+    // specific DOMException it wants to verify.
+    await sharedPage.addInitScript(() => {
+      const w = window as any;
+      w.navigator.mediaDevices.enumerateDevices = async () => [
+        {kind: 'audioinput', deviceId: 'fake-audio', groupId: 'fake', label: 'fake mic'},
+        {kind: 'videoinput', deviceId: 'fake-video', groupId: 'fake', label: 'fake cam'},
+      ];
+      w.navigator.mediaDevices.getUserMedia = async () => new MediaStream();
+    });
+    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;
+      // gritter is exposed via jQuery in modern Etherpad rather than as
+      // a bare window.gritter global. Fall back to manual DOM cleanup
+      // if neither is present so the beforeEach never throws. Remove
+      // the entire #gritter-container so the next gritter.add cleanly
+      // re-creates it via _verifyWrapper — leaving the container in
+      // place leaks .gritter-title elements from earlier tests and
+      // confuses the title-html assertion below.
+      const gritter = w.gritter || (w.$ && w.$.gritter);
+      if (gritter && typeof gritter.removeAll === 'function') {
+        gritter.removeAll({fade: false});
+        gritter.removeAll({fade: false});
+      }
+      document.querySelectorAll('#gritter-container').forEach((el) => el.remove());
+    });
+    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);
+    });
+  }
+
+  test('gritter container does not intercept editor clicks', async () => {
+    // Regression: a sticky "Failed to access camera/microphone" toast used
+    // to span the top of the page and block all pointer events on the
+    // editor underneath, which made the pad unusable in production and
+    // broke every Playwright test that clicked into the editor.
+    await sharedPage.evaluate(() => {
+      const w = window as any;
+      w.navigator.mediaDevices.getUserMedia = async () => {
+        const err: any = new Error();
+        err.name = 'NotFoundError';
+        throw err;
+      };
+    });
+    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});
+    // Verify pointer-events is none on the container AND on the toast
+    // subtree (.gritter-item, .gritter-content, the <p> with the error
+    // text). The previous fix only set the container itself to none and
+    // restored auto on .gritter-item — that left the actual toast
+    // subtree intercepting pointer events, which is what made
+    // Playwright report `<p>Failed to access...</p> from <#gritter-container>
+    // subtree intercepts pointer events` in CI.
+    const subtreePointerEvents = await sharedPage.evaluate(() => ({
+      container: getComputedStyle(document.querySelector('#gritter-container')!).pointerEvents,
+      item: getComputedStyle(document.querySelector('#gritter-container .gritter-item')!).pointerEvents,
+      content: getComputedStyle(document.querySelector('#gritter-container .gritter-content')!).pointerEvents,
+      close: getComputedStyle(document.querySelector('#gritter-container .gritter-close')!).pointerEvents,
+    }));
+    expect(subtreePointerEvents).toMatchObject({
+      container: 'none',
+      item: 'none',
+      content: 'none',
+      close: 'auto',
+    });
+    // Click the editor at the location overlaid by the gritter toast.
+    // Without the fix Playwright's stability check sees the toast
+    // subtree intercepting and times out at 90s.
+    const innerFrame = sharedPage.frame('ace_inner');
+    if (!innerFrame) throw new Error('ace_inner frame missing');
+    await innerFrame.locator('#innerdocbody').first().click({timeout: 5000});
+  });
+});

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

@@ -0,0 +1,271 @@
+import {expect, test} from '@playwright/test';
+import {goToNewPadWithParams, installFakeGetUserMedia, setPadPrefsCookie} from '../helper/utils';
+
+// Helpers for inspecting the in-page tracks captured by the fake
+// getUserMedia (see installFakeGetUserMedia({track:true})).
+const tracksInfo = async (page: import('@playwright/test').Page) =>
+    page.evaluate(() => {
+      const w = window as any;
+      const stream: MediaStream | undefined = w.__webrtcLastStream;
+      const a = stream && stream.getAudioTracks()[0];
+      const v = stream && stream.getVideoTracks()[0];
+      return {
+        hasStream: !!stream,
+        audio: a ? {enabled: a.enabled} : null,
+        video: v ? {enabled: v.enabled} : null,
+      };
+    });
+
+test.describe('Test the behavior of the interface buttons: Mute, Video Disable, Enlarge', () => {
+  test.describe('audio and video on by default', () => {
+    test.beforeEach(async ({page, context}) => {
+      test.setTimeout(60_000);
+      await context.clearCookies();
+      await setPadPrefsCookie(page, {
+        rtcEnabled: false,
+        audioEnabledOnStart: true,
+        videoEnabledOnStart: true,
+      });
+      await goToNewPadWithParams(page, {});
+      await installFakeGetUserMedia(page, {track: true});
+      await page.evaluate(() => (window as any).ep_webrtc.activate());
+    });
+
+    test('enlarges then shrinks', async ({page}) => {
+      test.setTimeout(60_000);
+      // i.e., "160.25px" -> 160.25 the number
+      const numFromCss = (s: string | null): number => {
+        expect(s && s.endsWith('px')).toBeTruthy();
+        return Number((s as string).slice(0, -2));
+      };
+
+      await page.waitForFunction(() => {
+        const v = document.querySelector('video') as HTMLElement | null;
+        if (!v) return false;
+        const cs = getComputedStyle(v);
+        const w = parseFloat(cs.width);
+        const h = parseFloat(cs.height);
+        return 159 < w && w < 161 && 119 < h && h < 121;
+      });
+
+      await page.locator('.enlarge-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      // Expect grow to 260, 190 (test originally used >259 width and >194 height).
+      await page.waitForFunction(() => {
+        const v = document.querySelector('video') as HTMLElement | null;
+        if (!v) return false;
+        const cs = getComputedStyle(v);
+        return parseFloat(cs.width) > 259 && parseFloat(cs.height) > 194;
+      }, undefined, {timeout: 1000});
+      await page.locator('.enlarge-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      // Shrink back to <161, <121.
+      await page.waitForFunction(() => {
+        const v = document.querySelector('video') as HTMLElement | null;
+        if (!v) return false;
+        const cs = getComputedStyle(v);
+        return parseFloat(cs.width) < 161 && parseFloat(cs.height) < 121;
+      }, undefined, {timeout: 1000});
+      // Silence numFromCss "unused" warning by referencing it in a noop.
+      void numFromCss;
+    });
+
+    test('mutes then unmutes', async ({page}) => {
+      test.setTimeout(60_000);
+      const info0 = await tracksInfo(page);
+      expect(info0.audio?.enabled).toBe(true);
+      expect(await page.locator('.audio-btn.muted').count()).toBe(0);
+      expect(await page.locator('.audio-btn').first().getAttribute('title')).toBe('Mute');
+
+      await page.locator('.audio-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const a = stream && stream.getAudioTracks()[0];
+        return document.querySelectorAll('.audio-btn.muted').length === 1 && a && a.enabled === false;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.audio-btn').first().getAttribute('title')).toBe('Unmute');
+
+      await page.locator('.audio-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const a = stream && stream.getAudioTracks()[0];
+        return document.querySelectorAll('.audio-btn.muted').length === 0 && a && a.enabled === true;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.audio-btn').first().getAttribute('title')).toBe('Mute');
+    });
+
+    test('disables then enables video', async ({page}) => {
+      test.setTimeout(60_000);
+      const info0 = await tracksInfo(page);
+      expect(info0.video?.enabled).toBe(true);
+      expect(await page.locator('.video-btn.off').count()).toBe(0);
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toContain('Disable');
+
+      await page.locator('.video-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const v = stream && stream.getVideoTracks()[0];
+        return document.querySelectorAll('.video-btn.off').length === 1 && v && v.enabled === false;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toContain('Enable');
+
+      await page.locator('.video-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const v = stream && stream.getVideoTracks()[0];
+        return document.querySelectorAll('.video-btn.off').length === 0 && v && v.enabled === true;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toContain('Disable');
+    });
+  });
+
+  test.describe('audio and video off by default', () => {
+    test.beforeEach(async ({page, context}) => {
+      test.setTimeout(60_000);
+      await context.clearCookies();
+      await setPadPrefsCookie(page, {
+        rtcEnabled: false,
+        audioEnabledOnStart: false,
+        videoEnabledOnStart: false,
+      });
+      await goToNewPadWithParams(page, {});
+      await installFakeGetUserMedia(page, {track: true});
+      await page.evaluate(() => (window as any).ep_webrtc.activate());
+    });
+
+    test('unmutes then mutes', async ({page}) => {
+      test.setTimeout(60_000);
+      const info0 = await tracksInfo(page);
+      // No getUserMedia call yet because audio/video are off on start.
+      expect(info0.hasStream).toBe(false);
+      expect(await page.locator('.audio-btn.muted').count()).toBe(1);
+      expect(await page.locator('.audio-btn').first().getAttribute('title')).toBe('Unmute');
+
+      await page.locator('.audio-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const a = stream && stream.getAudioTracks()[0];
+        return document.querySelectorAll('.audio-btn.muted').length === 0 &&
+               a != null && a.enabled;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.audio-btn').first().getAttribute('title')).toBe('Mute');
+
+      await page.locator('.audio-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const a = stream && stream.getAudioTracks()[0];
+        return document.querySelectorAll('.audio-btn.muted').length === 1 &&
+               a && a.enabled === false;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.audio-btn').first().getAttribute('title')).toBe('Unmute');
+    });
+
+    test('enables then disables video', async ({page}) => {
+      test.setTimeout(60_000);
+      const info0 = await tracksInfo(page);
+      expect(info0.hasStream).toBe(false);
+      expect(await page.locator('.video-btn.off').count()).toBe(1);
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toContain('Enable');
+
+      await page.locator('.video-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const v = stream && stream.getVideoTracks()[0];
+        return document.querySelectorAll('.video-btn.off').length === 0 &&
+               v != null && v.enabled;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toContain('Disable');
+
+      await page.locator('.video-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForFunction(() => {
+        const w = window as any;
+        const stream: MediaStream | undefined = w.__webrtcLastStream;
+        const v = stream && stream.getVideoTracks()[0];
+        return document.querySelectorAll('.video-btn.off').length === 1 &&
+               v && v.enabled === false;
+      }, undefined, {timeout: 3000});
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toContain('Enable');
+    });
+  });
+
+  test.describe('audio and video hard-disabled', () => {
+    test.beforeEach(async ({page, context}) => {
+      test.setTimeout(60_000);
+      await context.clearCookies();
+      // Disable WebRTC so we can install fake getUserMedia and tweak settings
+      // before activation.
+      await goToNewPadWithParams(page, {av: false});
+      await page.waitForFunction(
+          () => (window as any).$('#rtcbox').data('initialized'));
+      await page.evaluate(() => {
+        const w = window as any;
+        w.ep_webrtc._settings.audio.disabled = 'hard';
+        w.ep_webrtc._settings.video.disabled = 'hard';
+      });
+      await installFakeGetUserMedia(page, {track: true});
+      await page.evaluate(() => (window as any).ep_webrtc.activate());
+    });
+
+    test('cannot mute or unmute', async ({page}) => {
+      test.setTimeout(60_000);
+      expect(await page.locator('.audio-btn.disallowed').count()).toBe(1);
+      expect(await page.locator('.audio-btn.muted').count()).toBe(1);
+      expect(await page.locator('.audio-btn').first().getAttribute('title'))
+          .toBe('Audio disallowed by admin');
+      const info = await tracksInfo(page);
+      expect(info.hasStream).toBe(false);
+
+      await page.locator('.audio-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForTimeout(200);
+      expect(await page.locator('.audio-btn.disallowed').count()).toBe(1);
+      expect(await page.locator('.audio-btn.muted').count()).toBe(1);
+      expect(await page.locator('.audio-btn').first().getAttribute('title'))
+          .toBe('Audio disallowed by admin');
+      const info2 = await tracksInfo(page);
+      expect(info2.hasStream).toBe(false);
+    });
+
+    test('cannot enable or disable video', async ({page}) => {
+      test.setTimeout(60_000);
+      expect(await page.locator('.video-btn.disallowed').count()).toBe(1);
+      expect(await page.locator('.video-btn.off').count()).toBe(1);
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toBe('Video disallowed by admin');
+      const info = await tracksInfo(page);
+      expect(info.hasStream).toBe(false);
+
+      await page.locator('.video-btn').first().evaluate(
+          (el) => (window as any).$(el).click());
+      await page.waitForTimeout(200);
+      expect(await page.locator('.video-btn.disallowed').count()).toBe(1);
+      expect(await page.locator('.video-btn.off').count()).toBe(1);
+      expect(await page.locator('.video-btn').first().getAttribute('title'))
+          .toBe('Video disallowed by admin');
+      const info2 = await tracksInfo(page);
+      expect(info2.hasStream).toBe(false);
+    });
+  });
+});