test: added e2e tests for Livechat's background setting (#32168)

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

@@ -18,8 +18,14 @@ test.describe.serial('OC - Livechat Appearance', () => {
 	});
 
 	test.afterAll(async ({ api }) => {
-		const res = await api.post('/settings/Livechat_hide_system_messages', { value: ['uj', 'ul', 'livechat-close'] });
-		await expect(res.status()).toBe(200);
+		const res = await Promise.all([
+			api.post('/settings/Livechat_hide_system_messages', { value: ['uj', 'ul', 'livechat-close'] }),
+			api.post('/settings/Livechat_background', { value: '' }),
+		]);
+
+		if (res.some((r) => r.status() !== 200)) {
+			throw new Error('Failed to reset settings');
+		}
 	});
 
 	test('OC - Livechat Appearance - Hide system messages', async ({ page }) => {
@@ -50,4 +56,20 @@ test.describe.serial('OC - Livechat Appearance', () => {
 			await expect(poLivechatAppearance.findHideSystemMessageOption('livechat-close')).toHaveAttribute('aria-selected', 'false');
 		});
 	});
+
+	test('OC - Livechat Appearance - Change Livechat background', async ({ page }) => {
+		await test.step('expect to have default value', async () => {
+			await expect(await poLivechatAppearance.inputLivechatBackground).toHaveValue('');
+		});
+
+		await test.step('expect to change value', async () => {
+			await poLivechatAppearance.inputLivechatBackground.fill('rgb(186, 1, 85)');
+			await poLivechatAppearance.btnSave.click();
+		});
+
+		await test.step('expect to have saved changes', async () => {
+			await page.reload();
+			await expect(poLivechatAppearance.inputLivechatBackground).toHaveValue('rgb(186, 1, 85)');
+		});
+	});
 });

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

@@ -0,0 +1,105 @@
+import { faker } from '@faker-js/faker';
+
+import { IS_EE } from '../config/constants';
+import { Users } from '../fixtures/userStates';
+import { OmnichannelLiveChatEmbedded } from '../page-objects';
+import { createAgent, makeAgentAvailable } from '../utils/omnichannel/agents';
+import { test, expect } from '../utils/test';
+
+declare const window: Window & {
+	RocketChat: {
+		livechat: {
+			setTheme: (theme: { background?: string }) => void;
+		};
+	};
+};
+
+const createVisitor = () => ({
+	name: `${faker.person.firstName()} ${faker.string.uuid()}`,
+	email: faker.internet.email(),
+});
+
+test.use({ storageState: Users.admin.state });
+
+test.skip(!IS_EE, 'Enterprise Only');
+
+test.describe('OC - Livechat - Message list background', async () => {
+	let agent: Awaited<ReturnType<typeof createAgent>>;
+	let poLiveChat: OmnichannelLiveChatEmbedded;
+
+	test.beforeAll(async ({ api }) => {
+		agent = await createAgent(api, 'user1');
+
+		const res = await makeAgentAvailable(api, agent.data._id);
+
+		if (res.status() !== 200) {
+			throw new Error('Failed to make agent available');
+		}
+	});
+
+	test.beforeEach(async ({ page }) => {
+		poLiveChat = new OmnichannelLiveChatEmbedded(page);
+
+		await page.goto('/packages/rocketchat_livechat/assets/demo.html');
+	});
+
+	test.afterEach(async ({ page }) => {
+		await page.close();
+	});
+
+	test.afterAll(async () => {
+		await agent.delete();
+	});
+
+	test('OC - Livechat - Change message list background', async ({ api, page }) => {
+		const visitor = createVisitor();
+
+		await test.step('should initiate Livechat conversation', async () => {
+			await poLiveChat.openLiveChat();
+			await poLiveChat.sendMessage(visitor, false);
+			await poLiveChat.onlineAgentMessage.fill('message_from_user');
+			await poLiveChat.btnSendMessageToOnlineAgent.click();
+			await expect(poLiveChat.txtChatMessage('message_from_user')).toBeVisible();
+		});
+
+		await test.step('expect message list to have default background', async () => {
+			await expect(await poLiveChat.messageListBackground).toBe('rgba(0, 0, 0, 0)');
+		});
+
+		await test.step('expect to change message list background', async () => {
+			const res = await api.post('/settings/Livechat_background', { value: 'rgb(186, 1, 85)' });
+			await expect(res.status()).toBe(200);
+
+			await page.reload();
+			await poLiveChat.openLiveChat();
+			await expect(await poLiveChat.messageListBackground).toBe('rgb(186, 1, 85)');
+		});
+
+		await test.step('expect to give priority to background provided via api', async () => {
+			await poLiveChat.page.evaluate(() => window.RocketChat.livechat.setTheme({ background: 'rgb(186, 218, 85)' }));
+
+			await expect(await poLiveChat.messageListBackground).toBe('rgb(186, 218, 85)');
+		});
+
+		await test.step('expect to fallback to setting if api background is not available', async () => {
+			await poLiveChat.page.evaluate(() => window.RocketChat.livechat.setTheme({ background: undefined }));
+			await expect(await poLiveChat.messageListBackground).toBe('rgb(186, 1, 85)');
+		});
+
+		await test.step('expect to reset message list background to default', async () => {
+			const res = await api.post('/settings/Livechat_background', { value: '' });
+			await expect(res.status()).toBe(200);
+
+			await page.reload();
+			await poLiveChat.openLiveChat();
+			await expect(await poLiveChat.messageListBackground).toBe('rgba(0, 0, 0, 0)');
+		});
+
+		await test.step('should close the conversation', async () => {
+			await poLiveChat.btnOptions.click();
+			await poLiveChat.btnCloseChat.click();
+			await poLiveChat.btnCloseChatConfirm.click();
+			await expect(poLiveChat.btnNewChat).toBeVisible();
+		});
+	});
+});

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

@@ -7,6 +7,10 @@ export class OmnichannelLivechatAppearance extends OmnichannelAdministration {
 		return this.page.locator('[name="Livechat_hide_system_messages"]');
 	}
 
+	get inputLivechatBackground(): Locator {
+		return this.page.locator('[name="Livechat_background"]');
+	}
+
 	findHideSystemMessageOption(option: string): Locator {
 		return this.page.locator(`[role="option"][value="${option}"]`);
 	}

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

@@ -39,6 +39,18 @@ export class OmnichannelLiveChatEmbedded {
 		return this.page.frameLocator('#rocketchat-iframe').locator('[type="button"] >> text="Chat now"');
 	}
 
+	get btnNewChat(): Locator {
+		return this.page.frameLocator('#rocketchat-iframe').locator(`role=button[name="New Chat"]`);
+	}
+
+	get messageList(): Locator {
+		return this.page.frameLocator('#rocketchat-iframe').locator('[data-qa="message-list"]');
+	}
+
+	get messageListBackground(): Promise<string> {
+		return this.messageList.evaluate((el) => window.getComputedStyle(el).getPropertyValue('background-color'));
+	}
+
 	messageBubble(message: string): Locator {
 		return this.page
 			.frameLocator('#rocketchat-iframe')

packages/livechat/src/components/Messages/MessageList/index.js

@@ -217,6 +217,7 @@ export class MessageList extends MemoizedComponent {
 			className={createClassName(styles, 'message-list', {}, [className])}
 			onClick={this.handleClick}
 			style={style}
+			data-qa='message-list'
 		>
 			<ol className={createClassName(styles, 'message-list__content')}>{this.renderItems(this.props)}</ol>
 		</div>