diff --git a/apps/meteor/ee/client/omnichannel/monitors/MonitorsTable.tsx b/apps/meteor/ee/client/omnichannel/monitors/MonitorsTable.tsx index 21eba51275bed..d403cbda98f2b 100644 --- a/apps/meteor/ee/client/omnichannel/monitors/MonitorsTable.tsx +++ b/apps/meteor/ee/client/omnichannel/monitors/MonitorsTable.tsx @@ -104,7 +104,15 @@ const MonitorsTable = () => { setModal(); }; - setModal( setModal()} confirmText={t('Delete')} />); + setModal( + setModal()} + confirmText={t('Delete')} + />, + ); }; const headers = useMemo( @@ -129,7 +137,7 @@ const MonitorsTable = () => { {t('Username')} - void} /> + void} /> @@ -157,11 +165,11 @@ const MonitorsTable = () => { )} {isSuccess && data.monitors.length > 0 && ( <> - + {headers} {data.monitors?.map((monitor) => ( - + {monitor.name} {monitor.username} {monitor.email} diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-monitors.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-monitors.spec.ts new file mode 100644 index 0000000000000..c3e2ef16b2c2b --- /dev/null +++ b/apps/meteor/tests/e2e/omnichannel/omnichannel-monitors.spec.ts @@ -0,0 +1,96 @@ +import { IS_EE } from '../config/constants'; +import { Users } from '../fixtures/userStates'; +import { OmnichannelMonitors } from '../page-objects'; +import { test, expect } from '../utils/test'; + +test.use({ storageState: Users.user1.state }); + +test.skip(!IS_EE, 'OC - Manage Monitors > Enterprise Only'); + +test.describe.serial('OC - Manage Monitors', () => { + let poMonitors: OmnichannelMonitors; + + test.beforeAll(async ({ api }) => { + await Promise.all([ + api.post('/livechat/users/agent', { username: 'user1' }), + api.post('/livechat/users/agent', { username: 'user2' }), + api.post('/livechat/users/manager', { username: 'user1' }), + ]); + }); + + test.afterAll(async ({ api }) => { + await Promise.all([ + api.delete('/livechat/users/agent/user1'), + api.delete('/livechat/users/manager/user1'), + api.delete('/livechat/users/agent/user2'), + api.delete('/livechat/users/manager/user2'), + ]); + }); + + test.beforeEach(async ({ page }) => { + poMonitors = new OmnichannelMonitors(page); + + await page.goto('/omnichannel'); + await page.locator('.main-content').waitFor(); + await poMonitors.sidenav.linkMonitors.click(); + }); + + test('OC - Manager Monitors - Add monitor', async () => { + await test.step('expect to add agent as monitor', async () => { + await expect(poMonitors.findRowByName('user1')).not.toBeVisible(); + await poMonitors.selectMonitor('user1'); + await poMonitors.btnAddMonitor.click(); + await expect(poMonitors.findRowByName('user1')).toBeVisible(); + }); + + await test.step('expect to remove agent from monitor', async () => { + await poMonitors.btnRemoveByName('user1').click(); + await expect(poMonitors.modalConfirmRemove).toBeVisible(); + await poMonitors.btnConfirmRemove.click(); + await expect(poMonitors.findRowByName('user1')).not.toBeVisible(); + }); + }); + + test('OC - Manager Monitors - Search', async () => { + await test.step('expect to add 2 monitors', async () => { + await poMonitors.selectMonitor('user1'); + await poMonitors.btnAddMonitor.click(); + + await poMonitors.selectMonitor('user2'); + await poMonitors.btnAddMonitor.click(); + + await expect(poMonitors.findRowByName('user1')).toBeVisible(); + await expect(poMonitors.findRowByName('user2')).toBeVisible(); + }); + + await test.step('expect to search monitor', async () => { + await expect(poMonitors.findRowByName('user1')).toBeVisible(); + await expect(poMonitors.findRowByName('user2')).toBeVisible(); + + await poMonitors.inputSearch.fill('user1'); + await expect(poMonitors.findRowByName('user1')).toBeVisible(); + await expect(poMonitors.findRowByName('user2')).not.toBeVisible(); + + await poMonitors.inputSearch.fill('user2'); + await expect(poMonitors.findRowByName('user1')).not.toBeVisible(); + await expect(poMonitors.findRowByName('user2')).toBeVisible(); + + await poMonitors.inputSearch.fill(''); + await expect(poMonitors.findRowByName('user1')).toBeVisible(); + await expect(poMonitors.findRowByName('user2')).toBeVisible(); + }); + + await test.step('expect to remove monitors', async () => { + await poMonitors.btnRemoveByName('user1').click(); + await expect(poMonitors.modalConfirmRemove).toBeVisible(); + await poMonitors.btnConfirmRemove.click(); + + await poMonitors.btnRemoveByName('user2').click(); + await expect(poMonitors.modalConfirmRemove).toBeVisible(); + await poMonitors.btnConfirmRemove.click(); + + await expect(poMonitors.findRowByName('user1')).not.toBeVisible(); + await expect(poMonitors.findRowByName('user2')).not.toBeVisible(); + }); + }); +}); diff --git a/apps/meteor/tests/e2e/page-objects/fragments/omnichannel-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/omnichannel-sidenav.ts index 6b10bcd47b2e0..a801c3b911dbd 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/omnichannel-sidenav.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/omnichannel-sidenav.ts @@ -38,4 +38,8 @@ export class OmnichannelSidenav { get linkPriorities(): Locator { return this.page.locator('a[href="/omnichannel/priorities"]'); } + + get linkMonitors(): Locator { + return this.page.locator('a[href="/omnichannel/monitors"]'); + } } diff --git a/apps/meteor/tests/e2e/page-objects/index.ts b/apps/meteor/tests/e2e/page-objects/index.ts index b6f1ca1275aaf..5e9ea6b9a8eba 100644 --- a/apps/meteor/tests/e2e/page-objects/index.ts +++ b/apps/meteor/tests/e2e/page-objects/index.ts @@ -12,4 +12,5 @@ export * from './omnichannel-livechat'; export * from './omnichannel-manager'; export * from './omnichannel-custom-fields'; export * from './home-omnichannel'; +export * from './omnichannel-monitors'; export * from './utils'; diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-monitors.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-monitors.ts new file mode 100644 index 0000000000000..b72594024aaf3 --- /dev/null +++ b/apps/meteor/tests/e2e/page-objects/omnichannel-monitors.ts @@ -0,0 +1,38 @@ +import type { Locator } from '@playwright/test'; + +import { OmnichannelAdministration } from './omnichannel-administration'; + +export class OmnichannelMonitors extends OmnichannelAdministration { + get modalConfirmRemove(): Locator { + return this.page.locator('[data-qa-id="manage-monitors-confirm-remove"]'); + } + + get btnConfirmRemove(): Locator { + return this.modalConfirmRemove.locator('role=button[name="Delete"]'); + } + + get btnAddMonitor(): Locator { + return this.page.locator('role=button[name="Add monitor"]'); + } + + get inputMonitor(): Locator { + return this.page.locator('input[name="monitor"]'); + } + + get inputSearch(): Locator { + return this.page.locator('input[placeholder="Search"]'); + } + + findRowByName(name: string): Locator { + return this.page.locator(`tr[data-qa-id="${name}"]`); + } + + btnRemoveByName(name: string): Locator { + return this.findRowByName(name).locator('role=button[name="Remove"]'); + } + + async selectMonitor(name: string) { + await this.inputMonitor.fill(name); + await this.page.locator(`li[role="option"]`, { has: this.page.locator(`[data-username='${name}']`) }).click(); + } +}