tests review

apps/meteor/client/components/Omnichannel/modals/CloseChatModal.tsx

@@ -103,7 +103,7 @@ const CloseChatModal = ({
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onCancel}>{t('Cancel')}</Button>
-					<Button type='submit' disabled={cannotSubmit} primary>
+					<Button role='button' type='submit' disabled={cannotSubmit} primary>
 						{t('Confirm')}
 					</Button>
 				</Modal.FooterControllers>

apps/meteor/tests/e2e/omnichannel-close-chat.spec.ts

@@ -2,22 +2,22 @@ import { faker } from '@faker-js/faker';
 import type { Browser, Page } from '@playwright/test';
 
 import { test, expect } from './utils/test';
-import { OmnichannelLiveChat, HomeChannel } from './page-objects';
+import { OmnichannelLiveChat, HomeOmnichannel } from './page-objects';
 
-const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeChannel: HomeChannel }> => {
+const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeOmnichannel: HomeOmnichannel }> => {
 	const page = await browser.newPage({ storageState });
-	const poHomeChannel = new HomeChannel(page);
+	const poHomeOmnichannel = new HomeOmnichannel(page);
 	await page.goto('/');
 	await page.locator('.main-content').waitFor();
 
-	return { page, poHomeChannel };
+	return { page, poHomeOmnichannel };
 };
 
 test.describe('Omnichannel close chat', () => {
 	let poLiveChat: OmnichannelLiveChat;
 	let newUser: { email: string; name: string };
 
-	let agent: { page: Page; poHomeChannel: HomeChannel };
+	let agent: { page: Page; poHomeOmnichannel: HomeOmnichannel };
 
 	test.beforeAll(async ({ api, browser }) => {
 		newUser = {
@@ -49,14 +49,14 @@ test.describe('Omnichannel close chat', () => {
 		});
 
 		await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => {
-			await agent.poHomeChannel.sidenav.openChat(newUser.name);
+			await agent.poHomeOmnichannel.sidenav.openChat(newUser.name);
 		});
 
 		await test.step('Expect to be able to close an omnichannel to conversation', async () => {
-			await agent.poHomeChannel.content.btnCloseChat.click();
-			await agent.poHomeChannel.content.inputModalClosingComment.type('any_comment');
-			await agent.poHomeChannel.content.btnModalConfirm.click();
-			await expect(agent.poHomeChannel.toastSuccess).toBeVisible();
+			await agent.poHomeOmnichannel.content.btnCloseChat.click();
+			await agent.poHomeOmnichannel.content.inputModalClosingComment.type('any_comment');
+			await agent.poHomeOmnichannel.content.btnModalConfirm.click();
+			await expect(agent.poHomeOmnichannel.toastSuccess).toBeVisible();
 		});
 	});
 });

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

@@ -2,13 +2,13 @@ import { faker } from '@faker-js/faker';
 import type { Browser, Page } from '@playwright/test';
 
 import { test, expect } from './utils/test';
-import { HomeChannel, OmnichannelLiveChat } from './page-objects';
+import { HomeOmnichannel, OmnichannelLiveChat } from './page-objects';
 
-const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeChannel: HomeChannel }> => {
+const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeOmnichannel: HomeOmnichannel }> => {
 	const page = await browser.newPage({ storageState });
-	const poHomeChannel = new HomeChannel(page);
+	const poHomeOmnichannel = new HomeOmnichannel(page);
 	await page.goto('/');
-	return { page, poHomeChannel };
+	return { page, poHomeOmnichannel };
 };
 
 const newUser = {
@@ -17,7 +17,7 @@ const newUser = {
 };
 test.describe('Livechat', () => {
 	test.describe('Send message', () => {
-		let poAuxContext: { page: Page; poHomeChannel: HomeChannel };
+		let poAuxContext: { page: Page; poHomeOmnichannel: HomeOmnichannel };
 		let poLiveChat: OmnichannelLiveChat;
 		let page: Page;
 
@@ -31,7 +31,8 @@ test.describe('Livechat', () => {
 			await page.goto('/livechat');
 		});
 
-		test.afterAll(async () => {
+		test.afterAll(async ({ api }) => {
+			await api.delete('/livechat/users/agent/user1');
 			await poAuxContext.page.close();
 		});
 
@@ -47,15 +48,15 @@ test.describe('Livechat', () => {
 			});
 
 			test('expect message to be received by agent', async () => {
-				await poAuxContext.poHomeChannel.sidenav.openChat(newUser.name);
-				await expect(poAuxContext.poHomeChannel.content.lastUserMessage).toBeVisible();
-				await expect(poAuxContext.poHomeChannel.content.lastUserMessage).toContainText('this_a_test_message_from_user');
+				await poAuxContext.poHomeOmnichannel.sidenav.openChat(newUser.name);
+				await expect(poAuxContext.poHomeOmnichannel.content.lastUserMessage).toBeVisible();
+				await expect(poAuxContext.poHomeOmnichannel.content.lastUserMessage).toContainText('this_a_test_message_from_user');
 			});
 		});
 
 		test.describe('Send message to livechat costumer', () => {
 			test('Expect message to be sent by agent', async () => {
-				await poAuxContext.poHomeChannel.content.sendMessage('this_a_test_message_from_agent');
+				await poAuxContext.poHomeOmnichannel.content.sendMessage('this_a_test_message_from_agent');
 				await expect(page.locator('div >>text="this_a_test_message_from_agent"')).toBeVisible();
 			});
 
@@ -65,13 +66,22 @@ test.describe('Livechat', () => {
 			});
 
 			test('expect message to be received by minimized livechat', async () => {
-				await poAuxContext.poHomeChannel.content.sendMessage('this_a_test_message_again_from_agent');
-				await expect(poLiveChat.unreadMessagesBadge).toBeVisible();
+				await poAuxContext.poHomeOmnichannel.content.sendMessage('this_a_test_message_again_from_agent');
+				await expect(poLiveChat.unreadMessagesBadge(1)).toBeVisible();
 			});
 
 			test('expect unread messages to be visible after a reload', async () => {
 				await page.reload();
-				await expect(poLiveChat.unreadMessagesBadge).toBeVisible();
+				await expect(poLiveChat.unreadMessagesBadge(1)).toBeVisible();
+			});
+		});
+
+		test.describe('close livechat conversation', () => {
+			test('expect livechat conversation to be closed by agent', async () => {
+				await poAuxContext.poHomeOmnichannel.content.btnCloseChat.click();
+				await poAuxContext.poHomeOmnichannel.content.omnichannelCloseChatModal.inputComment.fill('this_is_a_test_comment');
+				await poAuxContext.poHomeOmnichannel.content.omnichannelCloseChatModal.btnConfirm.click();
+				await expect(poAuxContext.poHomeOmnichannel.toastSuccess).toBeVisible();
 			});
 		});
 	});

apps/meteor/tests/e2e/omnichannel-transfer-to-another-agents.spec.ts

@@ -2,23 +2,23 @@ import { faker } from '@faker-js/faker';
 import type { Browser, Page } from '@playwright/test';
 
 import { test, expect } from './utils/test';
-import { OmnichannelLiveChat, HomeChannel } from './page-objects';
+import { OmnichannelLiveChat, HomeOmnichannel } from './page-objects';
 
-const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeChannel: HomeChannel }> => {
+const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeOmnichannel: HomeOmnichannel }> => {
 	const page = await browser.newPage({ storageState });
-	const poHomeChannel = new HomeChannel(page);
+	const poHomeOmnichannel = new HomeOmnichannel(page);
 	await page.goto('/');
 	await page.locator('.main-content').waitFor();
 
-	return { page, poHomeChannel };
+	return { page, poHomeOmnichannel };
 };
 
 test.describe('omnichannel-transfer-to-another-agent', () => {
 	let poLiveChat: OmnichannelLiveChat;
 	let newVisitor: { email: string; name: string };
 
-	let agent1: { page: Page; poHomeChannel: HomeChannel };
-	let agent2: { page: Page; poHomeChannel: HomeChannel };
+	let agent1: { page: Page; poHomeOmnichannel: HomeOmnichannel };
+	let agent2: { page: Page; poHomeOmnichannel: HomeOmnichannel };
 	test.beforeAll(async ({ api, browser }) => {
 		// Set user user 1 as manager and agent
 		let statusCode = (await api.post('/livechat/users/agent', { username: 'user1' })).status();
@@ -37,8 +37,8 @@ test.describe('omnichannel-transfer-to-another-agent', () => {
 	});
 	test.beforeEach(async ({ page }) => {
 		// make "user-1" online & "user-2" offline so that chat can be automatically routed to "user-1"
-		await agent1.poHomeChannel.sidenav.switchStatus('online');
-		await agent2.poHomeChannel.sidenav.switchStatus('offline');
+		await agent1.poHomeOmnichannel.sidenav.switchStatus('online');
+		await agent2.poHomeOmnichannel.sidenav.switchStatus('offline');
 
 		// start a new chat for each test
 		newVisitor = {
@@ -69,33 +69,33 @@ test.describe('omnichannel-transfer-to-another-agent', () => {
 
 	test('transfer omnichannel chat to another agent', async () => {
 		await test.step('Expect to have 1 omnichannel assigned to agent 1', async () => {
-			await agent1.poHomeChannel.sidenav.openChat(newVisitor.name);
+			await agent1.poHomeOmnichannel.sidenav.openChat(newVisitor.name);
 		});
 
 		await test.step('Expect to not be able to transfer chat to "user-2" when that user is offline', async () => {
-			await agent2.poHomeChannel.sidenav.switchStatus('offline');
+			await agent2.poHomeOmnichannel.sidenav.switchStatus('offline');
 
-			await agent1.poHomeChannel.content.btnForwardChat.click();
-			await agent1.poHomeChannel.content.inputModalAgentUserName.type('user2');
+			await agent1.poHomeOmnichannel.content.btnForwardChat.click();
+			await agent1.poHomeOmnichannel.content.inputModalAgentUserName.type('user2');
 			await expect(agent1.page.locator('text=Empty')).toBeVisible();
 
 			await agent1.page.goto('/');
 		});
 
 		await test.step('Expect to be able to transfer an omnichannel to conversation to agent 2 as agent 1 when agent 2 is online', async () => {
-			await agent2.poHomeChannel.sidenav.switchStatus('online');
+			await agent2.poHomeOmnichannel.sidenav.switchStatus('online');
 
-			await agent1.poHomeChannel.sidenav.openChat(newVisitor.name);
-			await agent1.poHomeChannel.content.btnForwardChat.click();
-			await agent1.poHomeChannel.content.inputModalAgentUserName.type('user2');
+			await agent1.poHomeOmnichannel.sidenav.openChat(newVisitor.name);
+			await agent1.poHomeOmnichannel.content.btnForwardChat.click();
+			await agent1.poHomeOmnichannel.content.inputModalAgentUserName.type('user2');
 			await agent1.page.locator('.rcx-option .rcx-option__wrapper >> text="user2"').click();
-			await agent1.poHomeChannel.content.inputModalAgentForwardComment.type('any_comment');
-			await agent1.poHomeChannel.content.btnModalConfirm.click();
-			await expect(agent1.poHomeChannel.toastSuccess).toBeVisible();
+			await agent1.poHomeOmnichannel.content.inputModalAgentForwardComment.type('any_comment');
+			await agent1.poHomeOmnichannel.content.btnModalConfirm.click();
+			await expect(agent1.poHomeOmnichannel.toastSuccess).toBeVisible();
 		});
 
 		await test.step('Expect to have 1 omnichannel assigned to agent 2', async () => {
-			await agent2.poHomeChannel.sidenav.openChat(newVisitor.name);
+			await agent2.poHomeOmnichannel.sidenav.openChat(newVisitor.name);
 		});
 	});
 });

apps/meteor/tests/e2e/page-objects/fragments/home-content.ts

@@ -3,7 +3,7 @@ import fs from 'fs/promises';
 import type { Locator, Page } from '@playwright/test';
 
 export class HomeContent {
-	private readonly page: Page;
+	protected readonly page: Page;
 
 	constructor(page: Page) {
 		this.page = page;
@@ -106,14 +106,6 @@ export class HomeContent {
 		return this.page.locator('[data-qa="UserCard"] a');
 	}
 
-	get btnForwardChat(): Locator {
-		return this.page.locator('[data-qa-id="ToolBoxAction-balloon-arrow-top-right"]');
-	}
-
-	get btnCloseChat(): Locator {
-		return this.page.locator('[data-qa-id="ToolBoxAction-balloon-close-top-right"]');
-	}
-
 	get btnContactInformation(): Locator {
 		return this.page.locator('[data-qa-id="ToolBoxAction-user"]');
 	}

apps/meteor/tests/e2e/page-objects/fragments/home-omnichannel-content.ts

@@ -0,0 +1,25 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { HomeContent } from './home-content';
+import { OmnichannelCloseChatModal } from './omnichannel-close-chat-modal';
+
+export class HomeOmnichannelContent extends HomeContent {
+	readonly omnichannelCloseChatModal: OmnichannelCloseChatModal;
+
+	constructor(page: Page) {
+		super(page);
+		this.omnichannelCloseChatModal = new OmnichannelCloseChatModal(page);
+	}
+
+	get inputMessage(): Locator {
+		return this.page.locator('[name="msg"]');
+	}
+
+	get btnForwardChat(): Locator {
+		return this.page.locator('[data-qa-id="ToolBoxAction-balloon-arrow-top-right"]');
+	}
+
+	get btnCloseChat(): Locator {
+		return this.page.locator('[data-qa-id="ToolBoxAction-balloon-close-top-right"]');
+	}
+}

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

@@ -1,4 +1,6 @@
 export * from './home-content';
+export * from './home-omnichannel-content';
 export * from './home-flextab';
 export * from './home-sidenav';
 export * from './omnichannel-sidenav';
+export * from './omnichannel-close-chat-modal';

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

@@ -0,0 +1,17 @@
+import type { Locator, Page } from '@playwright/test';
+
+export class OmnichannelCloseChatModal {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	get inputComment(): Locator {
+		return this.page.locator('input[name="comment"]');
+	}
+
+	get btnConfirm(): Locator {
+		return this.page.locator('//button[contains(text(), "Confirm")]');
+	}
+}

apps/meteor/tests/e2e/page-objects/home-omnichannel.ts

@@ -0,0 +1,28 @@
+import type { Locator, Page } from '@playwright/test';
+
+import { HomeOmnichannelContent, HomeSidenav, HomeFlextab } from './fragments';
+
+export class HomeOmnichannel {
+	private readonly page: Page;
+
+	readonly content: HomeOmnichannelContent;
+
+	readonly sidenav: HomeSidenav;
+
+	readonly tabs: HomeFlextab;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.content = new HomeOmnichannelContent(page);
+		this.sidenav = new HomeSidenav(page);
+		this.tabs = new HomeFlextab(page);
+	}
+
+	get toastSuccess(): Locator {
+		return this.page.locator('.rcx-toastbar.rcx-toastbar--success');
+	}
+
+	get btnVerticalBarClose(): Locator {
+		return this.page.locator('[data-qa="VerticalBarActionClose"]');
+	}
+}

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

@@ -10,3 +10,4 @@ export * from './omnichannel-current-chats';
 export * from './omnichannel-livechat';
 export * from './omnichannel-manager';
 export * from './omnichannel-custom-fields';
+export * from './home-omnichannel';

apps/meteor/tests/e2e/page-objects/omnichannel-livechat.ts

@@ -8,11 +8,13 @@ export class OmnichannelLiveChat {
 	}
 
 	btnOpenLiveChat(label: string): Locator {
-		return this.page.locator(`[aria-label="${label}"]`);
+		return this.page.locator(`role=button[name="${label}"]`);
 	}
 
-	get unreadMessagesBadge(): Locator {
-		return this.page.locator('[aria-label="unread_messages"]');
+	unreadMessagesBadge(count: number): Locator {
+		const name = count === 1 ? `${count} unread message` : `${count} unread messages`;
+
+		return this.page.locator(`role=status[name="${name}"]`);
 	}
 
 	get inputName(): Locator {