Chore: Review proposal (#26604)

RocketChat · Aug 17, 2022 · 5d742b4 · 5d742b4
1 parent 97b81be
commit 5d742b4
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 17 deletions.
diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartment.js b/apps/meteor/client/views/omnichannel/departments/EditDepartment.js
@@ -14,7 +14,7 @@ import {
 } from '@rocket.chat/fuselage';
 import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRoute, useMethod, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo, useState, useRef } from 'react';
+import React, { useMemo, useState, useRef, useCallback } from 'react';
 
 import { validateEmail } from '../../../../lib/emailValidator';
 import Page from '../../../components/Page';
@@ -122,7 +122,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 		setTagsState(([tags, tagsText]) => [tags.filter((_tag) => _tag !== tag), tagsText]);
 	};
 
-	const handleTagTextSubmit = useMutableCallback(() => {
+	const handleTagTextSubmit = useCallback(() => {
 		setTagsState((state) => {
 			const [tags, tagsText] = state;
 
@@ -132,7 +132,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 
 			return [[...tags, tagsText], ''];
 		});
-	});
+	}, []);
 
 	const handleTagTextChange = (e) => {
 		setTagsState(([tags]) => [tags, e.target.value]);
@@ -447,7 +447,13 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
 										onChange={handleTagTextChange}
 										placeholder={t('Enter_a_tag')}
 									/>
-									<Button data-qa='DepartmentEditAddButton-ConversationClosingTags' mis='x8' title={t('add')} onClick={handleTagTextSubmit}>
+									<Button
+										disabled={Boolean(!tagsText.trim()) || tags.includes(tagsText)}
+										data-qa='DepartmentEditAddButton-ConversationClosingTags'
+										mis='x8'
+										title={t('add')}
+										onClick={handleTagTextSubmit}
+									>
 										{t('Add')}
 									</Button>
 								</Field.Row>

diff --git a/apps/meteor/tests/e2e/omnichannel-departaments.spec.ts b/apps/meteor/tests/e2e/omnichannel-departaments.spec.ts
@@ -9,7 +9,10 @@ test.use({ storageState: 'admin-session.json' });
 test.describe.serial('omnichannel-departments', () => {
 	let poOmnichannelDepartments: OmnichannelDepartments;
 
-	const departmentName = faker.datatype.uuid();
+	let departmentName: string;
+	test.beforeAll(() => {
+		departmentName = faker.datatype.uuid();
+	});
 
 	test.beforeEach(async ({ page }: { page: Page }) => {
 		poOmnichannelDepartments = new OmnichannelDepartments(page);
@@ -40,25 +43,81 @@ test.describe.serial('omnichannel-departments', () => {
 		await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
 	});
 
-	test('expect update adding department tags ', async () => {
-		await poOmnichannelDepartments.inputSearch.fill(departmentName);
-
-		await poOmnichannelDepartments.firstRowInTable.locator(`text=${departmentName}`).click();
-		await poOmnichannelDepartments.toggleRequestTags.click();
-
-		await poOmnichannelDepartments.inputTags.fill(faker.datatype.string(5));
-		await poOmnichannelDepartments.btnTagsAdd.click();
-
-		await poOmnichannelDepartments.btnSave.click();
+	test.describe('Tags', () => {
+		test.beforeEach(async () => {
+			await poOmnichannelDepartments.inputSearch.fill(departmentName);
+			await poOmnichannelDepartments.firstRowInTable.locator(`text=${departmentName}`).click();
+		});
+
+		test('expect save form button be disabled', async () => {
+			await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
+		});
+
+		test('Disabled tags state', async () => {
+			await test.step('expect to have department tags toggle button', async () => {
+				await expect(poOmnichannelDepartments.toggleRequestTags).toBeVisible();
+			});
+			await test.step('expect have no add tag to department', async () => {
+				await expect(poOmnichannelDepartments.inputTags).not.toBeVisible();
+				await expect(poOmnichannelDepartments.btnTagsAdd).not.toBeVisible();
+			});
+		});
+
+		test('Enabled tags state', async ({ page }) => {
+			await test.step('expect to have form save option disabled', async () => {
+				await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
+			});
+
+			await test.step('expect clicking on toggle button to enable tags', async () => {
+				await poOmnichannelDepartments.toggleRequestTags.click();
+				await expect(poOmnichannelDepartments.inputTags).toBeVisible();
+				await expect(poOmnichannelDepartments.btnTagsAdd).toBeVisible();
+			});
+			await test.step('expect to be invalid if there is no tag added', async () => {
+				await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
+				await expect(poOmnichannelDepartments.invalidInputTags).toBeVisible();
+			});
+
+			await test.step('expect to be not possible adding empty tags', async () => {
+				await poOmnichannelDepartments.inputTags.fill('');
+				await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
+			});
+
+			await test.step('expect to have add and remove one tag properly tags', async () => {
+				const tagName = faker.datatype.string(5);
+				await poOmnichannelDepartments.inputTags.fill(tagName);
+				await poOmnichannelDepartments.btnTagsAdd.click();
+
+				await expect(page.locator(`button`, { hasText: tagName })).toBeVisible();
+
+				await expect(poOmnichannelDepartments.btnSave).toBeEnabled();
+
+				await page.locator(`button`, { hasText: tagName }).click();
+				await expect(poOmnichannelDepartments.invalidInputTags).toBeVisible();
+				await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
+			});
+			await test.step('expect to not be possible adding same tag twice', async () => {
+				const tagName = faker.datatype.string(5);
+				await poOmnichannelDepartments.inputTags.fill(tagName);
+				await poOmnichannelDepartments.btnTagsAdd.click();
+				await poOmnichannelDepartments.inputTags.fill(tagName);
+				await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
+			});
+		});
 	});
 
-	test('expect delete department', async () => {
+	test('expect delete department', async ({ page }) => {
+		await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
+
 		await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);
 
+		await page.waitForRequest('**/livechat/department**');
+
 		await poOmnichannelDepartments.btnDeleteFirstRowInTable.click();
 		await poOmnichannelDepartments.btnModalConfirmDelete.click();
 
 		await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);
-		await expect(poOmnichannelDepartments.firstRowInTable).toBeHidden();
+
+		await expect(poOmnichannelDepartments.firstRowInTable).toHaveCount(0);
 	});
 });
diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
@@ -40,6 +40,10 @@ export class OmnichannelDepartments {
 		return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]');
 	}
 
+	get invalidInputTags() {
+		return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]:invalid');
+	}
+
 	get btnTagsAdd() {
 		return this.page.locator('[data-qa="DepartmentEditAddButton-ConversationClosingTags"]');
 	}