Skip to content

Commit

Permalink
chore: implemented e2e tests for manage monitors page (#31067)
Browse files Browse the repository at this point in the history
  • Loading branch information
aleksandernsilva committed Dec 13, 2023
1 parent ef9fc92 commit b78845a
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 4 deletions.
16 changes: 12 additions & 4 deletions apps/meteor/ee/client/omnichannel/monitors/MonitorsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,15 @@ const MonitorsTable = () => {
setModal();
};

setModal(<GenericModal variant='danger' onConfirm={onDeleteMonitor} onCancel={() => setModal()} confirmText={t('Delete')} />);
setModal(
<GenericModal
variant='danger'
data-qa-id='manage-monitors-confirm-remove'
onConfirm={onDeleteMonitor}
onCancel={() => setModal()}
confirmText={t('Delete')}
/>,
);
};

const headers = useMemo(
Expand All @@ -129,7 +137,7 @@ const MonitorsTable = () => {
<Field>
<FieldLabel>{t('Username')}</FieldLabel>
<FieldRow>
<UserAutoComplete value={username} onChange={setUsername as () => void} />
<UserAutoComplete name='monitor' value={username} onChange={setUsername as () => void} />
<Button primary disabled={!username} loading={addMutation.isLoading} onClick={() => handleAdd()} mis={8}>
{t('Add_monitor')}
</Button>
Expand Down Expand Up @@ -157,11 +165,11 @@ const MonitorsTable = () => {
)}
{isSuccess && data.monitors.length > 0 && (
<>
<GenericTable aria-busy={text !== debouncedText} aria-live='assertive'>
<GenericTable aria-busy={text !== debouncedText} aria-live='assertive' data-qa-id='manage-monitors-table'>
<GenericTableHeader>{headers}</GenericTableHeader>
<GenericTableBody>
{data.monitors?.map((monitor) => (
<GenericTableRow key={monitor._id} tabIndex={0} width='full'>
<GenericTableRow key={monitor._id} tabIndex={0} width='full' data-qa-id={monitor.name}>
<GenericTableCell withTruncatedText>{monitor.name}</GenericTableCell>
<GenericTableCell withTruncatedText>{monitor.username}</GenericTableCell>
<GenericTableCell withTruncatedText>{monitor.email}</GenericTableCell>
Expand Down
96 changes: 96 additions & 0 deletions apps/meteor/tests/e2e/omnichannel/omnichannel-monitors.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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"]');
}
}
1 change: 1 addition & 0 deletions apps/meteor/tests/e2e/page-objects/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
38 changes: 38 additions & 0 deletions apps/meteor/tests/e2e/page-objects/omnichannel-monitors.ts
Original file line number Diff line number Diff line change
@@ -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();
}
}

0 comments on commit b78845a

Please sign in to comment.