Improve e2e tests (#587)

mattermost · Dec 11, 2023 · cfb7487 · cfb7487
1 parent f3d8290
commit cfb7487
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 113 deletions.
diff --git a/e2e/global-setup.ts b/e2e/global-setup.ts
@@ -1,8 +1,7 @@
 import {expect, FullConfig, request} from '@playwright/test';
 import {readFile} from 'fs/promises';
 
-import plugin from '../plugin.json';
-import {adminState, baseURL, channelPrefix, defaultTeam, userPassword, userPrefix} from './constants';
+import {adminState, baseURL, channelPrefix, defaultTeam, pluginID, userPassword, userPrefix} from './constants';
 
 async function globalSetup(config: FullConfig) {
     const numUsers = config.workers * 3;
@@ -189,7 +188,7 @@ async function globalSetup(config: FullConfig) {
             });
         }
 
-        await adminContext.post(`/plugins/${plugin.id}/${channel.id}`, {
+        await adminContext.post(`/plugins/${pluginID}/${channel.id}`, {
             data: {
                 enabled: true,
             },
@@ -206,16 +205,16 @@ async function globalSetup(config: FullConfig) {
         await expect(resp.status()).toEqual(201);
     }
 
-    await adminContext.post(`/api/v4/plugins/${plugin.id}/enable`, {
+    await adminContext.post(`/api/v4/plugins/${pluginID}/enable`, {
         headers,
     });
 
     // enable calls for all channels, enable ringing
     const serverConfig = await (await adminContext.get('/api/v4/config')).json();
     serverConfig.PluginSettings.Plugins = {
         ...serverConfig.PluginSettings.Plugins,
-        [`${plugin.id}`]: {
-            ...serverConfig.PluginSettings.Plugins[plugin.id],
+        [`${pluginID}`]: {
+            ...serverConfig.PluginSettings.Plugins[pluginID],
             defaultenabled: true,
             enableringing: true,
         },

diff --git a/e2e/package-lock.json b/e2e/package-lock.json
diff --git a/e2e/package.json b/e2e/package.json
@@ -9,7 +9,8 @@
     "@babel/core": "7.20.12",
     "@babel/eslint-parser": "7.19.1",
     "@mattermost/types": "6.7.0-0",
-    "@playwright/test": "1.33.0",
+    "@playwright/test": "^1.40.1",
+    "@types/node": "^20.10.4",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "eslint": "8.33.0",
     "eslint-plugin-import": "2.27.5",

diff --git a/e2e/page.ts b/e2e/page.ts
@@ -36,23 +36,24 @@ export default class PlaywrightDevPage {
 
     async leaveCall() {
         await this.page.locator('#calls-widget-leave-button').click();
+        await this.page.waitForFunction(() => !window.callsClient || window.callsClient.closed);
         await expect(this.page.locator('#calls-widget')).toBeHidden();
     }
 
     async startCall() {
-        const startCallButton = this.page.locator('[aria-label="channel header region"] button:has-text("Start call")');
+        const startCallButton = this.page.locator('#calls-join-button');
         await expect(startCallButton).toBeVisible();
         await startCallButton.click();
+        await this.page.waitForFunction(() => window.callsClient && window.callsClient.connected && !window.callsClient.closed);
         await expect(this.page.locator('#calls-widget')).toBeVisible();
-        await expect(this.page.getByTestId('calls-widget-loading-overlay')).toBeHidden();
     }
 
     async joinCall() {
-        const joinCallButton = this.page.locator('[aria-label="channel header region"] button:has-text("Join call")');
+        const joinCallButton = this.page.locator('#calls-join-button');
         await expect(joinCallButton).toBeVisible();
         await joinCallButton.click();
+        await this.page.waitForFunction(() => window.callsClient && window.callsClient.connected && !window.callsClient.closed);
         await expect(this.page.locator('#calls-widget')).toBeVisible();
-        await expect(this.page.getByTestId('calls-widget-loading-overlay')).toBeHidden();
     }
 
     async enableCalls() {

diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
@@ -4,12 +4,12 @@ const config: PlaywrightTestConfig = {
     globalSetup: require.resolve('./global-setup'),
     globalTeardown: require.resolve('./global-teardown'),
     forbidOnly: Boolean(process.env.CI),
-    retries: process.env.CI ? 2 : 1,
+    retries: 1,
     workers: 4,
     fullyParallel: true,
-    timeout: 90 * 1000,
+    timeout: 120 * 1000,
     expect: {
-        timeout: 30 * 1000,
+        timeout: 60 * 1000,
         toMatchSnapshot: {
             maxDiffPixelRatio: 0.05,
         },
@@ -29,6 +29,10 @@ const config: PlaywrightTestConfig = {
                 '--use-file-for-fake-audio-capture=./assets/sample.wav',
             ],
         },
+
+        // Unfortunately waitForFunction is flaky and randomly returns CSP failures.
+        // (https://github.com/microsoft/playwright/issues/7395)
+        bypassCSP: true,
     },
     projects: process.env.CI ? [
         {

diff --git a/e2e/tests/media.spec.ts b/e2e/tests/media.spec.ts
@@ -26,12 +26,11 @@ test.describe('screen sharing', () => {
         await expect(page.locator('#screen-player')).toBeVisible();
         await expect(userPage.page.locator('#screen-player')).toBeVisible();
 
-        await devPage.wait(1000);
-
-        const screenStreamID = await userPage.page.evaluate(() => {
+        const screenStreamID = await (await userPage.page.waitForFunction(() => {
+            return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
+        })).evaluate(() => {
             return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
         });
-
         expect(screenStreamID).toContain('screen_');
 
         await page.getByTestId('calls-widget-stop-screenshare').click();
@@ -49,8 +48,6 @@ test.describe('screen sharing', () => {
         const devPage = new PlaywrightDevPage(page);
         await devPage.joinCall();
 
-        await devPage.wait(1000);
-
         if (process.platform === 'darwin') {
             await page.keyboard.press('Meta+Shift+E');
         } else {
@@ -60,12 +57,11 @@ test.describe('screen sharing', () => {
         await expect(page.locator('#screen-player')).toBeVisible();
         await expect(userPage.page.locator('#screen-player')).toBeVisible();
 
-        await devPage.wait(1000);
-
-        const screenTrackID = await userPage.page.evaluate(() => {
+        const screenTrackID = await (await userPage.page.waitForFunction(() => {
+            return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
+        })).evaluate(() => {
             return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
         });
-
         expect(screenTrackID).toContain('screen_');
 
         if (process.platform === 'darwin') {
@@ -95,10 +91,10 @@ test.describe('screen sharing', () => {
         await expect(page.locator('#screen-player')).toBeVisible();
         await expect(userPage.page.locator('#screen-player')).toBeVisible();
 
-        await devPage.wait(1000);
-
         // verify that on the receiving side the screen track is correctly set
-        let screenStreamID = await userPage.page.evaluate(() => {
+        let screenStreamID = await (await userPage.page.waitForFunction(() => {
+            return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
+        })).evaluate(() => {
             return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
         });
         expect(screenStreamID).toContain('screen_');
@@ -117,10 +113,10 @@ test.describe('screen sharing', () => {
         await expect(userPage.page.locator('#screen-player')).toBeVisible();
         await expect(devPage.page.locator('#screen-player')).toBeVisible();
 
-        await userPage.wait(1000);
-
         // verify that on the receiving side the screen track is correctly set
-        screenStreamID = await devPage.page.evaluate(() => {
+        screenStreamID = await (await devPage.page.waitForFunction(() => {
+            return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
+        })).evaluate(() => {
             return window.callsClient.getRemoteScreenStream()?.getVideoTracks()[0]?.id;
         });
         expect(screenStreamID).toContain('screen_');
@@ -141,9 +137,9 @@ test.describe('sending voice', () => {
 
         await page.locator('#voice-mute-unmute').click();
 
-        await devPage.wait(1000);
-
-        let voiceTrackID = await userPage.page.evaluate(() => {
+        let voiceTrackID = await (await userPage.page.waitForFunction(() => {
+            return window.callsClient.streams[1]?.getAudioTracks()[0]?.id;
+        })).evaluate(() => {
             return window.callsClient.streams[1]?.getAudioTracks()[0]?.id;
         });
 
@@ -152,9 +148,9 @@ test.describe('sending voice', () => {
 
         await userPage.page.locator('#voice-mute-unmute').click();
 
-        await devPage.wait(1000);
-
-        voiceTrackID = await page.evaluate(() => {
+        voiceTrackID = await (await devPage.page.waitForFunction(() => {
+            return window.callsClient.streams[1]?.getAudioTracks()[0]?.id;
+        })).evaluate(() => {
             return window.callsClient.streams[1]?.getAudioTracks()[0]?.id;
         });