Chore: Collect e2e coverage (#25743)

## Proposed changes
- collect e2e coverage
- publish to artifacts
- publish badges to gh-pages

.github/workflows/build_and_test.yml

@@ -381,7 +381,7 @@ jobs:
           done
 
           cd ./apps/meteor
-          npm run test:playwright
+          npm run test:e2e
 
       - name: Store playwright test trace
         uses: actions/upload-artifact@v2
@@ -640,12 +640,12 @@ jobs:
           done;
           exit $s
 
-      - name: Install Playwright
+      - name: 🎭 Install Playwright
         run: |
           cd ./apps/meteor
           npx playwright install --with-deps
 
-      - name: E2E Test UI
+      - name: 🎭 E2E Test UI
         run: |
           echo -e 'pcm.!default {\n type hw\n card 0\n}\n\nctl.!default {\n type hw\n card 0\n}' > ~/.asoundrc
           Xvfb -screen 0 1024x768x24 :99 &
@@ -685,13 +685,32 @@ jobs:
           docker logs presence --tail=50
 
           cd ./apps/meteor
-          npm run test:playwright
+          npm run test:e2e:ee
 
-      - name: Store playwright test trace
+      - name: 🎭 Extract e2e:coverage
+        run: |
+          NYC_OUTPUT=$(yarn test:e2e:nyc)
+          COVERAGE_REPORTS=$(grep -o '[^ ]*%' <<< "$NYC_OUTPUT")
+          echo "REPORT_STATEMENTS=$(sed -n 1p <<< "$COVERAGE_REPORTS")" >> $GITHUB_ENV
+
+      - name: 🎭 Publish e2e:coverage badge
+        uses: RocketChat/ghpages-dynamic-badges-action@v1.0.0
+        with:
+          label: "e2e:coverage"
+          message: "${{ env.REPORT_STATEMENTS }}"
+          target_folder: "./apps/meteor/tests/coverage-badges"
+
+      - name: 🎭 Store ee-playwright-coverage
+        uses: actions/upload-artifact@v2
+        with:
+          name: ee-playwright-coverage
+          path: ./apps/meteor/coverage
+
+      - name: 🎭 Store ee-playwright-test-trace
         uses: actions/upload-artifact@v2
         if: failure()
         with:
-          name: playwright-test-trace
+          name: ee-playwright-test-trace
           path: ./apps/meteor/tests/e2e/test-failures*
 
   deploy:

apps/meteor/.babelrc

@@ -2,5 +2,8 @@
 	"presets": [
 		"@babel/preset-env",
 		"@babel/preset-react"
+	],
+	"plugins": [
+		"babel-plugin-istanbul"
 	]
 }

apps/meteor/package.json

@@ -32,7 +32,10 @@
 		"typecheck": "cross-env NODE_OPTIONS=\"--max-old-space-size=8184\" tsc --noEmit --skipLibCheck",
 		"deploy": "npm run build && pm2 startOrRestart pm2.json",
 		"coverage": "nyc -r html mocha --config ./.mocharc.js",
-		"test:playwright": "playwright test",
+		"testci": "node .scripts/start.js",
+		"test:e2e": "playwright test",
+		"test:e2e:ee": "cross-env ENTERPRISE=true E2E_COVERAGE=true yarn test:playwright",
+		"test:e2e:nyc": "nyc report --reporter=text-summary --reporter=lcov",
 		"testapi": "mocha --config ./.mocharc.api.js",
 		"testunit": "npm run .testunit:definition && npm run .testunit:client && npm run .testunit:server",
 		".testunit:server": "mocha --config ./.mocharc.js",
@@ -141,6 +144,7 @@
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-array-includes": "^2.0.3",
+		"babel-plugin-istanbul": "^6.1.1",
 		"chai": "^4.3.6",
 		"chai-datetime": "^1.8.0",
 		"chai-dom": "^1.11.0",
@@ -159,6 +163,7 @@
 		"jsdom-global": "^3.0.2",
 		"mocha": "^9.2.2",
 		"mock-require": "^3.0.3",
+		"nyc": "^15.1.0",
 		"outdent": "~0.8.0",
 		"pino-pretty": "^7.6.1",
 		"postcss": "~8.4.12",

apps/meteor/playwright.config.ts

@@ -21,6 +21,7 @@ const config: PlaywrightTestConfig = {
 		screenshot: 'only-on-failure',
 		trace: 'retain-on-failure',
 		baseURL,
+		browserName: 'chromium',
 	},
 	outputDir: 'tests/e2e/test-failures',
 	reporter: [['list']],

apps/meteor/tests/e2e/00-wizard.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { VALID_EMAIL, adminLogin } from './utils/mocks/userAndPasswordMock';
 import { setupWizardStepRegex } from './utils/mocks/urlMock';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';

apps/meteor/tests/e2e/01-forgot-password.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { Global, LoginPage } from './pageobjects';
 import { VALID_EMAIL, INVALID_EMAIL, INVALID_EMAIL_WITHOUT_MAIL_PROVIDER } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/02-register.spec.ts

@@ -1,5 +1,4 @@
-import { test } from '@playwright/test';
-
+import { test } from './utils/test';
 import { registerUser, WRONG_PASSWORD } from './utils/mocks/userAndPasswordMock';
 import { LoginPage } from './pageobjects';
 

apps/meteor/tests/e2e/03-login.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { validUser } from './utils/mocks/userAndPasswordMock';
 import { Global, LoginPage } from './pageobjects';
 import { HOME_SELECTOR } from './utils/mocks/waitSelectorsMock';

apps/meteor/tests/e2e/04-main-elements-render.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { LoginPage, FlexTab, SideNav, MainContent } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/05-channel-creation.spec.ts

@@ -1,6 +1,6 @@
-import { test } from '@playwright/test';
 import { faker } from '@faker-js/faker';
 
+import { test } from './utils/test';
 import { LoginPage, ChannelCreation } from './pageobjects';
 import { validUserInserted, ROCKET_CAT } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/06-messaging.spec.ts

@@ -1,5 +1,6 @@
-import { expect, test, Browser } from '@playwright/test';
+import { Browser } from '@playwright/test';
 
+import { expect, test } from './utils/test';
 import { FlexTab, MainContent, SideNav, LoginPage } from './pageobjects';
 import { adminLogin, validUserInserted } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/07-emoji.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { SideNav, MainContent, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/08-resolutions.spec.ts

@@ -1,5 +1,6 @@
-import { test, expect, Browser } from '@playwright/test';
+import { Browser } from '@playwright/test';
 
+import { expect, test } from './utils/test';
 import { Global, MainContent, SideNav, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/09-channel.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { Global, FlexTab, MainContent, SideNav, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { LOCALHOST } from './utils/mocks/urlMock';

apps/meteor/tests/e2e/10-user-preferences.spec.ts

@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
 import faker from '@faker-js/faker';
 
+import { test, expect } from './utils/test';
 import { PreferencesMainContent, MainContent, SideNav, LoginPage, FlexTab } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { clearMessages } from './utils/helpers/clearMessages';

apps/meteor/tests/e2e/11-admin.spec.ts

@@ -1,5 +1,4 @@
-import { test, expect } from '@playwright/test';
-
+import { test, expect } from './utils/test';
 import { adminLogin, ROCKET_CAT } from './utils/mocks/userAndPasswordMock';
 import { FlexTab, Administration, LoginPage, SideNav } from './pageobjects';
 import { ROCKET_CAT_SELECTOR } from './utils/mocks/waitSelectorsMock';

apps/meteor/tests/e2e/12-settings.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect, Page } from '@playwright/test';
+import { Page } from '@playwright/test';
 import { v4 as uuid } from 'uuid';
 
+import { expect, test } from './utils/test';
 import { BASE_API_URL } from './utils/mocks/urlMock';
 import { adminLogin, validUserInserted, registerUser } from './utils/mocks/userAndPasswordMock';
 import { LoginPage, MainContent, SideNav, Administration, PreferencesMainContent } from './pageobjects';

apps/meteor/tests/e2e/13-permissions.spec.ts

@@ -1,6 +1,7 @@
-import { Page, test, expect } from '@playwright/test';
+import { Page } from '@playwright/test';
 import { v4 as uuid } from 'uuid';
 
+import { expect, test } from './utils/test';
 import { LoginPage, FlexTab, Administration, MainContent, SideNav } from './pageobjects';
 import { adminLogin, createRegisterUser } from './utils/mocks/userAndPasswordMock';
 import { BACKSPACE } from './utils/mocks/keyboardKeyMock';

apps/meteor/tests/e2e/14-setting-permissions.spec.ts

@@ -1,6 +1,6 @@
-import { test, expect } from '@playwright/test';
 import faker from '@faker-js/faker';
 
+import { test, expect } from './utils/test';
 import { adminLogin, validUserInserted } from './utils/mocks/userAndPasswordMock';
 import { SideNav, Administration, LoginPage } from './pageobjects';
 

apps/meteor/tests/e2e/15-message-popup.spec.ts

@@ -1,5 +1,6 @@
-import { Page, test, expect } from '@playwright/test';
+import { Page } from '@playwright/test';
 
+import { expect, test } from './utils/test';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { userMock } from './utils/mocks/userMock';
 import { LoginPage, MainContent, SideNav } from './pageobjects';

apps/meteor/tests/e2e/16-discussion.spec.ts

@@ -1,7 +1,8 @@
-import { test, Page } from '@playwright/test';
+import { Page } from '@playwright/test';
 import { faker } from '@faker-js/faker';
 import { v4 as uuid } from 'uuid';
 
+import { test } from './utils/test';
 import { MainContent, Discussion, LoginPage, SideNav } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/omnichannel-agents.spec.ts

@@ -1,5 +1,6 @@
-import { test, expect, Page } from '@playwright/test';
+import { Page } from '@playwright/test';
 
+import { expect, test } from './utils/test';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 import { LoginPage, SideNav, Agents, Global } from './pageobjects';
 

apps/meteor/tests/e2e/omnichannel-departaments.spec.ts

@@ -1,5 +1,6 @@
-import { test, Page, expect } from '@playwright/test';
+import { Page } from '@playwright/test';
 
+import { expect, test } from './utils/test';
 import { Departments, SideNav, Global, LoginPage } from './pageobjects';
 import { adminLogin } from './utils/mocks/userAndPasswordMock';
 

apps/meteor/tests/e2e/utils/test.ts

@@ -0,0 +1,41 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { v4 as uuid } from 'uuid';
+import { test as baseTest } from '@playwright/test';
+
+const PATH_NYC_OUTPUT = path.join(process.cwd(), '.nyc_output');
+
+export const test = baseTest.extend({
+	context: async ({ context }, use) => {
+		if (!process.env.E2E_COVERAGE) {
+			await use(context);
+			await context.close();
+
+			return;
+		}
+
+		await context.addInitScript(() =>
+			window.addEventListener('beforeunload', () => (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__))),
+		);
+
+		await fs.promises.mkdir(PATH_NYC_OUTPUT, { recursive: true });
+
+		await context.exposeFunction('collectIstanbulCoverage', (coverageJSON: string) => {
+			if (coverageJSON) {
+				fs.writeFileSync(path.join(PATH_NYC_OUTPUT, `playwright_coverage_${uuid()}.json`), coverageJSON);
+			}
+		});
+
+		await use(context);
+
+		await Promise.all(
+			context.pages().map(async (page) => {
+				await page.evaluate(() => (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__)));
+				await page.close();
+			}),
+		);
+	},
+});
+
+export const { expect } = test;