test: Merge modal page objects (RocketChat#37253)

Author: dougfabris

apps/meteor/client/views/modal/uikit/ModalBlock.tsx

@@ -175,10 +175,10 @@ const ModalBlock = ({ view, errors, onSubmit, onClose, onCancel }: ModalBlockPar
 	return (
 		<AnimatedVisibility visibility={AnimatedVisibility.UNHIDING}>
 			<FocusScope contain restoreFocus autoFocus>
-				<Modal open id={id} ref={ref}>
+				<Modal aria-labelledby={`${id}-title`} open id={id} ref={ref}>
 					<ModalHeader>
 						{view.showIcon ? <ModalThumb url={getURL(`/api/apps/${view.appId}/icon`)} /> : null}
-						<ModalTitle>{modalParser.text(view.title, UiKit.BlockContext.NONE, 0)}</ModalTitle>
+						<ModalTitle id={`${id}-title`}>{modalParser.text(view.title, UiKit.BlockContext.NONE, 0)}</ModalTitle>
 						<ModalClose tabIndex={-1} onClick={onClose} />
 					</ModalHeader>
 					<ModalContent>

apps/meteor/tests/e2e/apps/apps-modal.spec.ts

@@ -3,23 +3,23 @@ import type { Page } from '@playwright/test';
 import { IS_EE } from '../config/constants';
 import { Users } from '../fixtures/userStates';
 import { HomeChannel } from '../page-objects';
-import { Modal } from '../page-objects/modal';
+import { AppsModal } from '../page-objects/fragments/apps-modal';
 import { expect, test } from '../utils/test';
 
 test.use({ storageState: Users.user1.state });
 
 test.describe.serial('Apps > Modal', () => {
 	test.skip(!IS_EE, 'Premium Only');
 	let poHomeChannel: HomeChannel;
-	let poModal: Modal;
+	let poModal: AppsModal;
 
 	let page: Page;
 
 	test.beforeAll(async ({ browser }) => {
 		page = await browser.newPage();
 
 		poHomeChannel = new HomeChannel(page);
-		poModal = new Modal(page);
+		poModal = new AppsModal(page);
 
 		await page.goto('/home');
 		await poHomeChannel.sidenav.openChat('general');
@@ -29,23 +29,17 @@ test.describe.serial('Apps > Modal', () => {
 		await page.close();
 	});
 
-	test('expect allow user open app modal', async () => {
+	test('should allow user open app modal', async () => {
 		await poHomeChannel.content.dispatchSlashCommand('/modal');
-		await expect(poModal.btnModalSubmit).toBeVisible();
+		await poModal.waitForDisplay();
 	});
 
-	test('expect validation error message appears in app modal', async () => {
-		await expect(poModal.textInput).toBeVisible();
-
-		await poModal.btnModalSubmit.click();
-
+	test('should display validation error message in app modal', async () => {
+		await poModal.btnSubmit.click();
 		await expect(poModal.textInputErrorMessage).toBeVisible();
 	});
 
-	test("expect validation error message don't appears in app modal", async () => {
-		await poModal.textInput.fill('something');
-		await poModal.btnModalSubmit.click();
-
-		await expect(poModal.textInputErrorMessage).not.toBeVisible();
+	test('should not display validation error message in app modal', async () => {
+		await poModal.submit('something');
 	});
 });

apps/meteor/tests/e2e/page-objects/fragments/apps-modal.ts

@@ -0,0 +1,29 @@
+import type { Locator, Page } from 'playwright-core';
+
+import { Modal } from './modal';
+
+export class AppsModal extends Modal {
+	protected readonly page: Page;
+
+	constructor(page: Page) {
+		super(page.getByRole('dialog', { name: 'Modal Example' }));
+	}
+
+	get textInput(): Locator {
+		return this.root.locator('[name="modal_input"]');
+	}
+
+	get textInputErrorMessage(): Locator {
+		return this.root.getByText('Validation failed');
+	}
+
+	get btnSubmit(): Locator {
+		return this.root.getByRole('button', { name: 'Submit' });
+	}
+
+	async submit(inputText: string) {
+		await this.textInput.fill(inputText);
+		await this.btnSubmit.click();
+		await this.waitForDismissal();
+	}
+}

apps/meteor/tests/e2e/page-objects/fragments/edit-status-modal.ts

@@ -0,0 +1,20 @@
+import type { Page } from 'playwright-core';
+
+import { Modal } from './modal';
+
+export class EditStatusModal extends Modal {
+	protected readonly page: Page;
+
+	constructor(page: Page) {
+		super(page.getByRole('dialog', { name: 'Edit Status' }));
+	}
+
+	private get statusMessageInput() {
+		return this.root.getByRole('textbox', { name: 'Status message' });
+	}
+
+	async changeStatusMessage(statusMessage: string): Promise<void> {
+		await this.statusMessageInput.fill(statusMessage);
+		await this.save();
+	}
+}

apps/meteor/tests/e2e/page-objects/fragments/modal.ts

@@ -5,7 +5,20 @@ import { expect } from '../../utils/test';
 export abstract class Modal {
 	constructor(protected root: Locator) {}
 
+	waitForDisplay() {
+		return expect(this.root).toBeVisible();
+	}
+
 	waitForDismissal() {
 		return expect(this.root).not.toBeVisible();
 	}
+
+	private get btnSave() {
+		return this.root.getByRole('button', { name: 'Save' });
+	}
+
+	async save() {
+		await this.btnSave.click();
+		await this.waitForDismissal();
+	}
 }

apps/meteor/tests/e2e/page-objects/index.ts

@@ -20,6 +20,5 @@ export * from './omnichannel-settings';
 export * from './omnichannel-business-hours';
 export * from './omnichannel-tags';
 export * from './utils';
-export * from './modal';
 export * from './marketplace';
 export * from './toastBar';

apps/meteor/tests/e2e/page-objects/modal.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_USER_CREDENTIALS, IS_EE } from './config/constants';
 import { Users } from './fixtures/userStates';
 import { Registration, HomeChannel } from './page-objects';
-import { Modal } from './page-objects/modal';
+import { EditStatusModal } from './page-objects/fragments/edit-status-modal';
 import { setSettingValueById } from './utils/setSettingValueById';
 import { test, expect } from './utils/test';
 
@@ -48,12 +48,11 @@ test.describe.serial('Presence', () => {
 				const user1Page = await browser.newPage({ storageState: Users.user1.state });
 				await user1Page.goto('/home');
 				const user1Channel = new HomeChannel(user1Page);
-				const user1Modal = new Modal(user1Page);
+				const user1Modal = new EditStatusModal(user1Page);
 
 				await user1Channel.sidenav.btnUserProfileMenu.click();
 				await user1Channel.sidenav.getUserProfileMenuOption('Custom Status').click();
-				await user1Modal.getModalByName('Edit Status').getByRole('textbox', { name: 'Status message' }).fill('new status');
-				await user1Modal.getModalByName('Edit Status').getByRole('button', { name: 'Save' }).click();
+				await user1Modal.changeStatusMessage('new status');
 
 				await user1Page.close();
 			});