Chore: Federation E2E tests for messaging + admin

apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx

@@ -112,6 +112,7 @@ const UserAutoCompleteMultipleFederated = ({
 				}}
 				renderOptions={AutocompleteOptions}
 				options={options.concat(Object.entries(selectedCache)).map(([, item]) => [item.username, item.name || item.username])}
+				data-qa='create-channel-users-autocomplete'
 			/>
 		</OptionsContext.Provider>
 	);

apps/meteor/package.json

@@ -34,6 +34,7 @@
 		"deploy": "npm run build && pm2 startOrRestart pm2.json",
 		"coverage": "nyc -r html mocha --config ./.mocharc.js",
 		"test:e2e": "playwright test",
+		"test:e2e:federation": "playwright test --config=playwright-federation.config.ts",
 		"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",

apps/meteor/playwright-federation.config.ts

@@ -0,0 +1,24 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+export default {
+	globalSetup: require.resolve('./tests/e2e/federation/config/global-setup.ts'),
+	use: {
+		headless: true,
+		ignoreHTTPSErrors: true,
+		trace: 'retain-on-failure',
+		screenshot: 'only-on-failure',
+		channel: 'chrome',
+		launchOptions: {
+			// force GPU hardware acceleration
+			// (even in headless mode)
+			args: ['--use-gl=egl', '--use-fake-ui-for-media-stream'],
+		},
+		permissions: ['microphone', 'camera'],
+	},
+	outputDir: 'tests/e2e/.playwright',
+	reporter: 'list',
+	testDir: 'tests/e2e/federation',
+	workers: 1,
+	retries: 2,
+	timeout: 60 * 2000,
+} as PlaywrightTestConfig;

apps/meteor/playwright.config.ts

@@ -30,6 +30,7 @@ export default {
 		],
 	],
 	testDir: 'tests/e2e',
+	testIgnore: 'tests/e2e/federation/**',
 	workers: 1,
 	retries: process.env.CI ? 2 : undefined,
 	timeout: 60 * 1000,

apps/meteor/tests/e2e/federation/README.md

@@ -0,0 +1,12 @@
+# E2E Testing with playwright
+
+## Running tests
+
+```sh
+$ RC_SERVER_1=http://localhost:3000 RC_SERVER_1_ADMIN_USER=test RC_SERVER_1_ADMIN_PASSWORD=test RC_SERVER_1_MATRIX_SERVER_NAME=my.matrix.server \
+RC_SERVER_2=http://localhost:3000 RC_SERVER_2_ADMIN_USER=test2 RC_SERVER_2_ADMIN_PASSWORD=test RC_SERVER_2_MATRIX_SERVER_NAME=my2.matrix.server \
+yarn run test:e2e:federation
+```
+
+## Important
+Make sure to increase the rate limiter for the user register api under Admin => Rate Limiter => Feature limiting. This is necessary since we are registering new users programatically.

apps/meteor/tests/e2e/federation/config/constants.ts

@@ -0,0 +1,13 @@
+export const RC_SERVER_1 = {
+	url: process.env.RC_SERVER_1 ?? 'http://localhost:3000',
+	username: process.env.RC_SERVER_1_ADMIN_USER ?? '',
+	password: process.env.RC_SERVER_1_ADMIN_PASSWORD ?? '',
+	matrixServerName: process.env.RC_SERVER_1_MATRIX_SERVER_NAME ?? '',
+};
+
+export const RC_SERVER_2 = {
+	url: process.env.RC_SERVER_2 ?? 'http://localhost:3000',
+	username: process.env.RC_SERVER_2_ADMIN_USER ?? '',
+	password: process.env.RC_SERVER_2_ADMIN_PASSWORD ?? '',
+	matrixServerName: process.env.RC_SERVER_2_MATRIX_SERVER_NAME ?? '',
+};

apps/meteor/tests/e2e/federation/config/global-setup.ts

@@ -0,0 +1,20 @@
+import { chromium } from '@playwright/test';
+
+export default async function (): Promise<void> {
+	const browser = await chromium.launch();
+
+	const requiredEnvVars = [
+		'RC_SERVER_1',
+		'RC_SERVER_2',
+		'RC_SERVER_1_ADMIN_USER',
+		'RC_SERVER_1_ADMIN_PASSWORD',
+		'RC_SERVER_2_ADMIN_USER',
+		'RC_SERVER_2_ADMIN_PASSWORD',
+	];
+
+	if (requiredEnvVars.some((envVar) => !process.env[envVar])) {
+		throw new Error(`Missing required environment variables: ${requiredEnvVars.filter((envVar) => !process.env[envVar]).join(', ')}`);
+	}
+
+	await browser.close();
+}

apps/meteor/tests/e2e/federation/page-objects/account-profile.ts

@@ -0,0 +1,78 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { FederationAccountSidenav } from './fragments/account-sidenav';
+
+export class FederationAccountProfile {
+	private readonly page: Page;
+
+	readonly sidenav: FederationAccountSidenav;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.sidenav = new FederationAccountSidenav(page);
+	}
+
+	get inputName(): Locator {
+		return this.page.locator('//label[contains(text(), "Name")]/..//input');
+	}
+
+	get inputAvatarLink(): Locator {
+		return this.page.locator('[data-qa-id="UserAvatarEditorLink"]');
+	}
+
+	get btnSetAvatarLink(): Locator {
+		return this.page.locator('[data-qa-id="UserAvatarEditorSetAvatarLink"]');
+	}
+
+	get inputUsername(): Locator {
+		return this.page.locator('//label[contains(text(), "Username")]/..//input');
+	}
+
+	get btnSubmit(): Locator {
+		return this.page.locator('[data-qa="AccountProfilePageSaveButton"]');
+	}
+
+	get avatarFileInput(): Locator {
+		return this.page.locator('.avatar-file-input');
+	}
+
+	get emailTextInput(): Locator {
+		return this.page.locator('//label[contains(text(), "Email")]/..//input');
+	}
+
+	get btnClose(): Locator {
+		return this.page.locator('button >> i.rcx-icon--name-cross.rcx-icon');
+	}
+
+	get inputToken(): Locator {
+		return this.page.locator('[data-qa="PersonalTokenField"]');
+	}
+
+	get tokensTableEmpty(): Locator {
+		return this.page.locator('//div[contains(text(), "No results found")]');
+	}
+
+	get btnTokensAdd(): Locator {
+		return this.page.locator('//button[contains(text(), "Add")]');
+	}
+
+	get tokenAddedModal(): Locator {
+		return this.page.locator("//div[text()='Personal Access Token successfully generated']");
+	}
+
+	tokenInTable(name: string): Locator {
+		return this.page.locator(`tr[qa-token-name="${name}"]`);
+	}
+
+	get btnRegenerateTokenModal(): Locator {
+		return this.page.locator('//button[contains(text(), "Regenerate token")]');
+	}
+
+	get btnRemoveTokenModal(): Locator {
+		return this.page.locator('//button[contains(text(), "Remove")]');
+	}
+
+	get inputImageFile(): Locator {
+		return this.page.locator('input[type=file]');
+	}
+}

apps/meteor/tests/e2e/federation/page-objects/admin.ts

@@ -0,0 +1,26 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { FederationAdminFlextab } from './fragments/admin-flextab';
+
+export class FederationAdmin {
+	private readonly page: Page;
+
+	readonly tabs: FederationAdminFlextab;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.tabs = new FederationAdminFlextab(page);
+	}
+
+	get inputSearchRooms(): Locator {
+		return this.page.locator('input[placeholder ="Search Rooms"]');
+	}
+
+	get inputSearchUsers(): Locator {
+		return this.page.locator('input[placeholder="Search Users"]');
+	}
+
+	get inputSearchSettings(): Locator {
+		return this.page.locator('input[type=search]');
+	}
+}

apps/meteor/tests/e2e/federation/page-objects/channel.ts

@@ -0,0 +1,64 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { FederationHomeContent } from './fragments/home-content';
+import { FederationHomeFlextab } from './fragments/home-flextab';
+import { FederationSidenav } from './fragments/home-sidenav';
+
+export class FederationChannel {
+	private readonly page: Page;
+
+	readonly content: FederationHomeContent;
+
+	readonly sidenav: FederationSidenav;
+
+	readonly tabs: FederationHomeFlextab;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.content = new FederationHomeContent(page);
+		this.sidenav = new FederationSidenav(page);
+		this.tabs = new FederationHomeFlextab(page);
+	}
+
+	get toastSuccess(): Locator {
+		return this.page.locator('.rcx-toastbar.rcx-toastbar--success');
+	}
+
+	get btnVerticalBarClose(): Locator {
+		return this.page.locator('[data-qa="VerticalBarActionClose"]');
+	}
+
+	async createPublicChannelAndInviteUsersUsingCreationModal(channelName: string, usernamesToInvite: string[]) {
+		await this.sidenav.openNewByLabel('Channel');
+		await this.sidenav.checkboxPrivateChannel.click();
+		await this.sidenav.checkboxFederatedChannel.click();
+		await this.sidenav.inputChannelName.type(channelName);
+		for await (const username of usernamesToInvite) {
+			await this.sidenav.inviteUserToChannel(username);
+		}
+
+		await this.sidenav.btnCreateChannel.click();
+	}
+
+	async createPrivateGroupAndInviteUsersUsingCreationModal(channelName: string, usernamesToInvite: string[]) {
+		await this.sidenav.openNewByLabel('Channel');
+		await this.sidenav.checkboxFederatedChannel.click();
+		await this.sidenav.inputChannelName.type(channelName);
+		for await (const username of usernamesToInvite) {
+			await this.sidenav.inviteUserToChannel(username);
+		}
+
+		await this.sidenav.btnCreateChannel.click();
+	}
+
+	async createDirectMessagesUsingModal(usernamesToInvite: string[]) {
+		await this.sidenav.openNewByLabel('Direct Messages');
+		for await (const username of usernamesToInvite) {
+			await this.sidenav.inviteUserToDM(username);
+		}
+		await this.page
+			.locator('//*[@id="modal-root"]//*[contains(@class, "rcx-modal__title") and contains(text(), "Direct Messages")]')
+			.click();
+		await this.sidenav.btnCreateChannel.click();
+	}
+}

apps/meteor/tests/e2e/federation/page-objects/fragments/account-sidenav.ts

@@ -0,0 +1,13 @@
+import type { Locator, Page } from '@playwright/test';
+
+export class FederationAccountSidenav {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	get linkTokens(): Locator {
+		return this.page.locator('.flex-nav [href="/account/tokens"]');
+	}
+}

apps/meteor/tests/e2e/federation/page-objects/fragments/admin-flextab-users.ts

@@ -0,0 +1,46 @@
+import type { Locator, Page } from '@playwright/test';
+
+export class FederationAdminFlextabUsers {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	get btnNew(): Locator {
+		return this.page.locator('//button[text()="New"]');
+	}
+
+	get btnEdit(): Locator {
+		return this.page.locator('//button[text()="Edit"]');
+	}
+
+	get btnSave(): Locator {
+		return this.page.locator('//button[text()="Save"]');
+	}
+
+	get inputName(): Locator {
+		return this.page.locator('//label[text()="Name"]/following-sibling::span//input');
+	}
+
+	get inputUserName(): Locator {
+		return this.page.locator('//label[text()="Username"]/following-sibling::span//input');
+	}
+
+	get inputEmail(): Locator {
+		return this.page.locator('//label[text()="Email"]/following-sibling::span//input').first();
+	}
+
+	get inputPassword(): Locator {
+		return this.page.locator('//label[text()="Password"]/following-sibling::span//input');
+	}
+
+	get checkboxVerified(): Locator {
+		return this.page.locator('//label[text()="Email"]/following-sibling::span//input/following-sibling::i');
+	}
+
+	async addRole(role: string): Promise<void> {
+		await this.page.locator('//label[text()="Roles"]/following-sibling::span//input').click();
+		await this.page.locator(`li[value=${role}]`).click();
+	}
+}

apps/meteor/tests/e2e/federation/page-objects/fragments/admin-flextab.ts

@@ -0,0 +1,11 @@
+import type { Page } from '@playwright/test';
+
+import { FederationAdminFlextabUsers } from './admin-flextab-users';
+
+export class FederationAdminFlextab {
+	readonly users: FederationAdminFlextabUsers;
+
+	constructor(page: Page) {
+		this.users = new FederationAdminFlextabUsers(page);
+	}
+}