Chore: Test for department screen

.yarnrc.yml

@@ -13,5 +13,3 @@ plugins:
     spec: '@yarnpkg/plugin-typescript'
 
 yarnPath: .yarn/releases/yarn-3.2.0.cjs
-
-checksumBehavior: 'update'

apps/meteor/client/views/omnichannel/departments/DepartmentsAgentsTable.js

@@ -16,7 +16,7 @@ function DepartmentsAgentsTable({ agents, setAgentListFinal, setAgentsAdded, set
 
 	return (
 		<>
-			<AddAgent agentList={agentList} setAgentList={setAgentList} setAgentsAdded={setAgentsAdded} />
+			<AddAgent agentList={agentList} data-qa='DepartmentSelect-AgentsTable' setAgentList={setAgentList} setAgentsAdded={setAgentsAdded} />
 			<GenericTable
 				header={
 					<>

apps/meteor/client/views/omnichannel/departments/EditDepartment.js

@@ -280,7 +280,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 				<Page.ScrollableContentWithShadow>
 					<FieldGroup w='full' alignSelf='center' maxWidth='x600' id={formId} is='form' autoComplete='off' onSubmit={handleSubmit}>
 						<Field>
-							<Box display='flex' flexDirection='row'>
+							<Box display='flex' data-qa='DepartmentEditToggle-Enabled' flexDirection='row'>
 								<Field.Label>{t('Enabled')}</Field.Label>
 								<Field.Row>
 									<ToggleSwitch flexGrow={1} checked={enabled} onChange={handleEnabled} />
@@ -290,17 +290,30 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 						<Field>
 							<Field.Label>{t('Name')}*</Field.Label>
 							<Field.Row>
-								<TextInput flexGrow={1} error={nameError} value={name} onChange={handleName} placeholder={t('Name')} />
+								<TextInput
+									data-qa='DepartmentEditTextInput-Name'
+									flexGrow={1}
+									error={nameError}
+									value={name}
+									onChange={handleName}
+									placeholder={t('Name')}
+								/>
 							</Field.Row>
 						</Field>
 						<Field>
 							<Field.Label>{t('Description')}</Field.Label>
 							<Field.Row>
-								<TextAreaInput flexGrow={1} value={description} onChange={handleDescription} placeholder={t('Description')} />
+								<TextAreaInput
+									data-qa='DepartmentEditTextInput-Description'
+									flexGrow={1}
+									value={description}
+									onChange={handleDescription}
+									placeholder={t('Description')}
+								/>
 							</Field.Row>
 						</Field>
 						<Field>
-							<Box display='flex' flexDirection='row'>
+							<Box data-qa='DepartmentEditToggle-ShowOnRegistrationPage' display='flex' flexDirection='row'>
 								<Field.Label>{t('Show_on_registration_page')}</Field.Label>
 								<Field.Row>
 									<ToggleSwitch flexGrow={1} checked={showOnRegistration} onChange={handleShowOnRegistration} />
@@ -311,6 +324,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 							<Field.Label>{t('Email')}*</Field.Label>
 							<Field.Row>
 								<TextInput
+									data-qa='DepartmentEditTextInput-Email'
 									flexGrow={1}
 									error={emailError}
 									value={email}
@@ -321,7 +335,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 							</Field.Row>
 						</Field>
 						<Field>
-							<Box display='flex' flexDirection='row'>
+							<Box display='flex' data-qa='DepartmentEditToggle-ShowOnOfflinePage' flexDirection='row'>
 								<Field.Label>{t('Show_on_offline_page')}</Field.Label>
 								<Field.Row>
 									<ToggleSwitch flexGrow={1} checked={showOnOfflineForm} onChange={handleShowOnOfflineForm} />
@@ -332,6 +346,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 							<Field.Label>{t('Livechat_DepartmentOfflineMessageToChannel')}</Field.Label>
 							<Field.Row>
 								<PaginatedSelectFiltered
+									data-qa='DepartmentSelect-LivechatDepartmentOfflineMessageToChannel'
 									value={offlineMessageChannelName}
 									onChange={handleOfflineMessageChannelName}
 									flexShrink={0}
@@ -404,18 +419,29 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 							</Field>
 						)}
 						<Field>
-							<Box display='flex' flexDirection='row'>
+							<Box display='flex' data-qa='DiscussionToggle-RequestTagBeforeCLosingChat' flexDirection='row'>
 								<Field.Label>{t('Request_tag_before_closing_chat')}</Field.Label>
 								<Field.Row>
-									<ToggleSwitch flexGrow={1} checked={requestTagBeforeClosingChat} onChange={handleRequestTagBeforeClosingChat} />
+									<ToggleSwitch
+										data-qa='DiscussionToggle-RequestTagBeforeCLosingChat'
+										flexGrow={1}
+										checked={requestTagBeforeClosingChat}
+										onChange={handleRequestTagBeforeClosingChat}
+									/>
 								</Field.Row>
 							</Box>
 						</Field>
 						{requestTagBeforeClosingChat && (
 							<Field>
 								<Field.Label alignSelf='stretch'>{t('Conversation_closing_tags')}*</Field.Label>
 								<Field.Row>
-									<TextInput error={tagError} value={tagsText} onChange={handleTagTextChange} placeholder={t('Enter_a_tag')} />
+									<TextInput
+										data-qa='DepartmentEditTextInput-ConversationClosingTags'
+										error={tagError}
+										value={tagsText}
+										onChange={handleTagTextChange}
+										placeholder={t('Enter_a_tag')}
+									/>
 									<Button mis='x8' title={t('add')} onClick={handleTagTextSubmit}>
 										{t('Add')}
 									</Button>

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

@@ -0,0 +1,73 @@
+import { test, Page, expect } from '@playwright/test';
+
+import LoginPage from './utils/pageobjects/LoginPage';
+import SideNav from './utils/pageobjects/SideNav';
+import Departments from './utils/pageobjects/Departments';
+import { adminLogin } from './utils/mocks/userAndPasswordMock';
+
+test.describe('[Department]', () => {
+	let loginPage: LoginPage;
+	let sideNav: SideNav;
+	let departments: Departments;
+	let page: Page;
+	test.beforeAll(async ({ browser }) => {
+		page = await browser.newPage();
+		const basePath = '/';
+
+		await page.goto(basePath);
+		loginPage = new LoginPage(page);
+		sideNav = new SideNav(page);
+		departments = new Departments(page);
+
+		await loginPage.login(adminLogin);
+		await sideNav.sidebarUserMenu().click();
+		await sideNav.omnichannel().click();
+	});
+
+	test.describe('[Render]', async () => {
+		test.beforeEach(async () => {
+			await departments.departmentsLink.click();
+			await departments.btnNewDepartment.click();
+		});
+		test('expect show all inputs', async () => {
+			await departments.getAddScreen();
+		});
+	});
+	test.describe('[Actions]', async () => {
+		test.beforeEach(async () => {
+			await departments.departmentsLink.click();
+		});
+		test.describe('[Create and Edit]', async () => {
+			test.afterEach(async () => {
+				await departments.toastSuccess.click();
+			});
+
+			test('expect new department is created', async () => {
+				await departments.btnNewDepartment.click();
+				await departments.doAddDepartments();
+				await expect(departments.departmentAdded).toBeVisible();
+			});
+
+			test('expect department is edited', async () => {
+				await departments.departmentAdded.click();
+				await departments.doEditDepartments();
+				await expect(departments.departmentAdded).toHaveText('any_name_edit');
+			});
+		});
+		test.describe('[Delete department]', () => {
+			test.beforeEach(async () => {
+				await departments.btnTableDeleteDepartment.click();
+			});
+			test('expect dont show dialog on cancel delete department', async () => {
+				await departments.btnModalCancelDeleteDepartment.click();
+				await expect(departments.modalDepartment).not.toBeVisible();
+				await expect(departments.departmentAdded).toBeVisible();
+			});
+			test('expect delete departments', async () => {
+				await departments.btnModalDeleteDepartment.click();
+				await expect(departments.modalDepartment).not.toBeVisible();
+				await expect(departments.departmentAdded).not.toBeVisible();
+			});
+		});
+	});
+});

apps/meteor/tests/e2e/utils/pageobjects/Administration.ts

@@ -675,10 +675,6 @@ export default class Administration extends BasePage {
 		return this.getPage().locator('.section:nth-of-type(2) .rc-button.rc-button--nude');
 	}
 
-	public toastSuccess(): Locator {
-		return this.getPage().locator('.toast-success');
-	}
-
 	public modalCancel(): Locator {
 		return this.getPage().locator('//button[text()="Cancel"]');
 	}

apps/meteor/tests/e2e/utils/pageobjects/BasePage.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { Page, Locator } from '@playwright/test';
 
 class BasePage {
 	private page: Page;
@@ -22,5 +22,9 @@ class BasePage {
 	public async keyboardPress(key: string): Promise<void> {
 		await this.getPage().keyboard.press(key);
 	}
+
+	get toastSuccess(): Locator {
+		return this.getPage().locator('#toast-container');
+	}
 }
 export default BasePage;

apps/meteor/tests/e2e/utils/pageobjects/Departments.ts

@@ -0,0 +1,130 @@
+import { Locator, expect } from '@playwright/test';
+
+import BasePage from './BasePage';
+
+export default class Departments extends BasePage {
+	get departmentsLink(): Locator {
+		return this.getPage().locator('a[href="omnichannel/departments"]');
+	}
+
+	get btnNewDepartment(): Locator {
+		return this.getPage().locator('button.rcx-button >> text="New"');
+	}
+
+	get btnSaveDepartment(): Locator {
+		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Save"');
+	}
+
+	get btnBack(): Locator {
+		return this.getPage().locator('button.rcx-button >> text="Back"');
+	}
+
+	get enabledToggle(): Locator {
+		// temporary selector
+		return this.getPage().locator('[data-qa="DepartmentEditToggle-Enabled"] span label');
+	}
+
+	get nameInput(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentEditTextInput-Name"]');
+	}
+
+	get descriptionInput(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentEditTextInput-Description"]');
+	}
+
+	get showOnRegistrationPage(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentEditToggle-ShowOnRegistrationPage"] span label');
+	}
+
+	get emailInput(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentEditTextInput-Email"]');
+	}
+
+	get showOnOfflinePageToggle(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentEditToggle-ShowOnOfflinePage"] span label');
+	}
+
+	get selectLiveChatDepartmentOfflineMessageToChannel(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentSelect-LivechatDepartmentOfflineMessageToChannel"]');
+	}
+
+	get requestTagBeforeClosingChatToggle(): Locator {
+		return this.getPage().locator('[data-qa="DiscussionToggle-RequestTagBeforeCLosingChat"] span label');
+	}
+
+	get selectAgentsTable(): Locator {
+		return this.getPage().locator('[data-qa="DepartmentSelect-AgentsTable"]');
+	}
+
+	get btnAddAgent(): Locator {
+		return this.getPage().locator('button.rcx-button--primary.rcx-button >> text="Add"');
+	}
+
+	public virtuosoOptions(option: string): Locator {
+		return this.getPage().locator(`[data-test-id="virtuoso-scroller"] .rcx-option >> text="${option}"`);
+	}
+
+	get departmentAdded(): Locator {
+		return this.getPage().locator('table tr:first-child td:first-child ');
+	}
+
+	get btnTableDeleteDepartment(): Locator {
+		return this.getPage().locator('table tr:first-child td:nth-child(6) button');
+	}
+
+	get btnModalCancelDeleteDepartment(): Locator {
+		return this.getPage().locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--ghost');
+	}
+
+	get btnModalDeleteDepartment(): Locator {
+		return this.getPage().locator('#modal-root .rcx-modal .rcx-modal__footer .rcx-button--primary-danger');
+	}
+
+	get modalDepartment(): Locator {
+		return this.getPage().locator('#modal-root');
+	}
+
+	public async getAddScreen(): Promise<void> {
+		const textInputs = [this.nameInput, this.descriptionInput, this.emailInput];
+		const toggleButtons = [this.enabledToggle, this.showOnOfflinePageToggle, this.requestTagBeforeClosingChatToggle];
+		const selects = [this.selectLiveChatDepartmentOfflineMessageToChannel, this.selectAgentsTable];
+		const actionsButtons = [this.btnSaveDepartment, this.btnBack, this.btnAddAgent];
+		const addScreenSelectors = [...textInputs, ...toggleButtons, ...actionsButtons, ...selects];
+
+		await Promise.all(addScreenSelectors.map((addScreenSelector) => expect(addScreenSelector).toBeVisible()));
+	}
+
+	public async doAddAgent(): Promise<void> {
+		await this.enabledToggle.click();
+		await this.nameInput.type('rocket.cat');
+	}
+
+	public async doAddDepartments(): Promise<void> {
+		await this.enabledToggle.click();
+		await this.nameInput.type('any_name');
+		await this.descriptionInput.type('any_description');
+		await this.showOnOfflinePageToggle.click();
+		await this.emailInput.type('any_email@mail.com');
+		await this.showOnRegistrationPage.click();
+		await this.selectLiveChatDepartmentOfflineMessageToChannel.click();
+		await this.virtuosoOptions('general').click();
+		await this.selectAgentsTable.click();
+		await this.btnSaveDepartment.click();
+	}
+
+	public async doEditDepartments(): Promise<void> {
+		await this.enabledToggle.click();
+		await this.nameInput.click({ clickCount: 3 });
+		await this.keyboardPress('Backspace');
+		await this.nameInput.fill('any_name_edit');
+		await this.descriptionInput.click({ clickCount: 3 });
+		await this.keyboardPress('Backspace');
+		await this.descriptionInput.fill('any_description_edited');
+		await this.btnSaveDepartment.click();
+	}
+
+	public async doBackToPrincipalScreen(): Promise<void> {
+		await this.departmentAdded.click();
+		await this.btnBack.click();
+	}
+}

apps/meteor/tests/e2e/utils/pageobjects/MainContent.ts

@@ -412,10 +412,6 @@ export default class MainContent extends BasePage {
 		await this.modalDeleteMessageButton().click();
 	}
 
-	public toastSuccess(): Locator {
-		return this.getPage().locator('.toast-message');
-	}
-
 	public getQuotedMessage(): Locator {
 		return this.getPage().locator('//li[@data-username="rocketchat.internal.admin.test"][last()]//blockquote//div[2]');
 	}

apps/meteor/tests/e2e/utils/pageobjects/SideNav.ts

@@ -85,6 +85,10 @@ class SideNav extends BasePage {
 		return this.getPage().locator('//li[@class="rcx-option"]//div[contains(text(), "Administration")]');
 	}
 
+	public omnichannel(): Locator {
+		return this.getPage().locator('li.rcx-option >> text="Omnichannel"');
+	}
+
 	public logout(): Locator {
 		return this.getPage().locator('//*[contains(@class, "rcx-option__content") and contains(text(), "Logout")]');
 	}