Chore: Improve test for livechat (#26527)

apps/meteor/tests/e2e/messaging.spec.ts

-import type { Browser, Page } from '@playwright/test';
-
 import { expect, test } from './utils/test';
 import { HomeChannel } from './page-objects';
-import { createTargetChannel } from './utils';
-
-const createAuxContext = async (browser: Browser): Promise<{ page: Page; poHomeChannel: HomeChannel }> => {
-	const page = await browser.newPage({ storageState: 'user2-session.json' });
-	const poHomeChannel = new HomeChannel(page);
-	await page.goto('/home');
-
-	return { page, poHomeChannel };
-};
+import { createTargetChannel, createAuxContext } from './utils';
 
 test.use({ storageState: 'user1-session.json' });
 
@@ -30,7 +20,7 @@ test.describe.serial('Messaging', () => {
 
 	test('expect show "hello word" in both contexts (targetChannel)', async ({ browser }) => {
 		await poHomeChannel.sidenav.openChat(targetChannel);
-		const auxContext = await createAuxContext(browser);
+		const auxContext = await createAuxContext(browser, 'user2-session.json');
 		await auxContext.poHomeChannel.sidenav.openChat(targetChannel);
 
 		await poHomeChannel.content.sendMessage('hello world');
@@ -43,7 +33,7 @@ test.describe.serial('Messaging', () => {
 
 	test('expect show "hello word" in both contexts (direct)', async ({ browser }) => {
 		await poHomeChannel.sidenav.openChat('user2');
-		const auxContext = await createAuxContext(browser);
+		const auxContext = await createAuxContext(browser, 'user2-session.json');
 		await auxContext.poHomeChannel.sidenav.openChat('user1');
 
 		await poHomeChannel.content.sendMessage('hello world');

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

+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+
+import { test, expect } from './utils/test';
+import { HomeChannel, OmnichannelLiveChat } from './page-objects';
+import { createAuxContext } from './utils';
+
+const newUser = {
+	name: faker.name.firstName(),
+	email: faker.internet.email(),
+};
+test.describe('Livechat', () => {
+	test.describe('Send message from user', () => {
+		let poLiveChat: OmnichannelLiveChat;
+
+		test.beforeEach(async ({ page }) => {
+			await page.goto('/livechat');
+
+			poLiveChat = new OmnichannelLiveChat(page);
+		});
+
+		test('expect send message to live chat', async () => {
+			await poLiveChat.btnOpenLiveChat('L').click();
+			await poLiveChat.sendMessage(newUser);
+		});
+
+		test.describe('Send message to online agent', () => {
+			let poAuxContext: { page: Page; poHomeChannel: HomeChannel };
+			test.beforeAll(async ({ browser, api }) => {
+				await api.post('/livechat/users/agent', { username: 'user1' });
+
+				poAuxContext = await createAuxContext(browser, 'user1-session.json');
+			});
+
+			test.afterAll(async () => {
+				await poAuxContext.page.close();
+			});
+
+			test('expect message is received from agent and user ', async ({ page }) => {
+				await poLiveChat.btnOpenLiveChat('R').click();
+				await poLiveChat.sendMessage(newUser, false);
+
+				await poLiveChat.onlineAgentMessage.type('this_a_test_message_from_user');
+				await poLiveChat.btnSendMessageToOnlineAgent.click();
+
+				await expect(page.locator('div >>text="this_a_test_message_from_user"')).toBeVisible();
+			});
+
+			test('expect after user close live chat screen dont show messages', async ({ page }) => {
+				await poLiveChat.btnOpenLiveChat('R').click();
+				await expect(page.locator('[contenteditable="true"]')).not.toBeVisible();
+			});
+		});
+	});
+	test.describe('Verify message is received', () => {
+		test.use({ storageState: 'user1-session.json' });
+		test('expect message is received from user', async ({ page }) => {
+			await page.goto('/');
+			const poHomeChannel = new HomeChannel(page);
+			await poHomeChannel.sidenav.openChat(newUser.name);
+			await expect(poHomeChannel.content.lastUserMessage).toBeVisible();
+			await expect(poHomeChannel.content.lastUserMessage).toContainText('this_a_test_message_from_user');
+		});
+	});
+});

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

@@ -5,3 +5,4 @@ export * from './home-channel';
 export * from './home-discussion';
 export * from './omnichannel-agents';
 export * from './omnichannel-departaments';
+export * from './omnichannel-livechat';

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

+import type { Page, Locator } from '@playwright/test';
+
+export class OmnichannelLiveChat {
+	private readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	btnOpenLiveChat(label: string): Locator {
+		return this.page.locator(`[aria-label="${label}"]`);
+	}
+
+	get inputName(): Locator {
+		return this.page.locator('[name="name"]');
+	}
+
+	get inputEmail(): Locator {
+		return this.page.locator('[name="email"]');
+	}
+
+	get textAreaMessage(): Locator {
+		return this.page.locator('[name="message"]');
+	}
+
+	btnSendMessage(btnText: string): Locator {
+		return this.page.locator(`[type="submit"] >> text="${btnText}"`);
+	}
+
+	get btnOk(): Locator {
+		return this.page.locator('button >> text="OK"');
+	}
+
+	get onlineAgentMessage(): Locator {
+		return this.page.locator('[contenteditable="true"]');
+	}
+
+	get btnSendMessageToOnlineAgent(): Locator {
+		return this.page.locator('footer div div div:nth-child(3) button');
+	}
+
+	public async sendMessage(liveChatUser: { name: string; email: string }, isOffline = true): Promise<void> {
+		const buttonLabel = isOffline ? 'Send' : 'Start chat';
+		await this.inputName.type(liveChatUser.name);
+		await this.inputEmail.type(liveChatUser.email);
+		if (isOffline) {
+			await this.textAreaMessage.type('any_message');
+		}
+		await this.btnSendMessage(buttonLabel).click();
+	}
+}

apps/meteor/tests/e2e/utils/create-aux-context.ts

+import type { Browser, Page } from '@playwright/test';
+
+import { HomeChannel } from '../page-objects';
+
+/**
+ * createAuxContext:
+ *  - Usefull to create a aux context for test will need many contexts
+ */
+
+export const createAuxContext = async (browser: Browser, storageState: string): Promise<{ page: Page; poHomeChannel: HomeChannel }> => {
+	const page = await browser.newPage({ storageState });
+	const poHomeChannel = new HomeChannel(page);
+	await page.goto('/');
+	return { page, poHomeChannel };
+};

apps/meteor/tests/e2e/utils/index.ts

 export * from './create-target-channel';
+export * from './create-aux-context';