Skip to content

Chore: Review proposal #26604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 4 commits into from
Aug 17, 2022
Merged

Chore: Review proposal #26604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4eec7fd
few tests and code improvement
ggazzo Aug 17, 2022
0f4921a
Merge branch 'fix/edit-department-tag' into fix/edit-department-tag-r…
ggazzo Aug 17, 2022
b08c944
Merge branch 'fix/edit-department-tag' into fix/edit-department-tag-r…
tiagoevanp Aug 17, 2022
fc853fb
fix tests
ggazzo Aug 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions apps/meteor/client/views/omnichannel/departments/EditDepartment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@rocket.chat/fuselage';
import { useMutableCallback, useUniqueId } from '@rocket.chat/fuselage-hooks';
import { useToastMessageDispatch, useRoute, useMethod, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
import React, { useMemo, useState, useRef } from 'react';
import React, { useMemo, useState, useRef, useCallback } from 'react';

import { validateEmail } from '../../../../lib/emailValidator';
import Page from '../../../components/Page';
Expand Down Expand Up @@ -122,7 +122,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
setTagsState(([tags, tagsText]) => [tags.filter((_tag) => _tag !== tag), tagsText]);
};

const handleTagTextSubmit = useMutableCallback(() => {
const handleTagTextSubmit = useCallback(() => {
setTagsState((state) => {
const [tags, tagsText] = state;

Expand All @@ -132,7 +132,7 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {

return [[...tags, tagsText], ''];
});
});
}, []);

const handleTagTextChange = (e) => {
setTagsState(([tags]) => [tags, e.target.value]);
Expand Down Expand Up @@ -447,7 +447,13 @@ function EditDepartment({ data, id, title, reload, allowedToForwardData }) {
onChange={handleTagTextChange}
placeholder={t('Enter_a_tag')}
/>
<Button data-qa='DepartmentEditAddButton-ConversationClosingTags' mis='x8' title={t('add')} onClick={handleTagTextSubmit}>
<Button
disabled={Boolean(!tagsText.trim()) || tags.includes(tagsText)}
data-qa='DepartmentEditAddButton-ConversationClosingTags'
mis='x8'
title={t('add')}
onClick={handleTagTextSubmit}
>
{t('Add')}
</Button>
</Field.Row>
Expand Down
85 changes: 72 additions & 13 deletions apps/meteor/tests/e2e/omnichannel-departaments.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ test.use({ storageState: 'admin-session.json' });
test.describe.serial('omnichannel-departments', () => {
let poOmnichannelDepartments: OmnichannelDepartments;

const departmentName = faker.datatype.uuid();
let departmentName: string;
test.beforeAll(() => {
departmentName = faker.datatype.uuid();
});

test.beforeEach(async ({ page }: { page: Page }) => {
poOmnichannelDepartments = new OmnichannelDepartments(page);
Expand Down Expand Up @@ -40,25 +43,81 @@ test.describe.serial('omnichannel-departments', () => {
await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
});

test('expect update adding department tags ', async () => {
await poOmnichannelDepartments.inputSearch.fill(departmentName);

await poOmnichannelDepartments.firstRowInTable.locator(`text=${departmentName}`).click();
await poOmnichannelDepartments.toggleRequestTags.click();

await poOmnichannelDepartments.inputTags.fill(faker.datatype.string(5));
await poOmnichannelDepartments.btnTagsAdd.click();

await poOmnichannelDepartments.btnSave.click();
test.describe('Tags', () => {
test.beforeEach(async () => {
await poOmnichannelDepartments.inputSearch.fill(departmentName);
await poOmnichannelDepartments.firstRowInTable.locator(`text=${departmentName}`).click();
});

test('expect save form button be disabled', async () => {
await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
});

test('Disabled tags state', async () => {
await test.step('expect to have department tags toggle button', async () => {
await expect(poOmnichannelDepartments.toggleRequestTags).toBeVisible();
});
await test.step('expect have no add tag to department', async () => {
await expect(poOmnichannelDepartments.inputTags).not.toBeVisible();
await expect(poOmnichannelDepartments.btnTagsAdd).not.toBeVisible();
});
});

test('Enabled tags state', async ({ page }) => {
await test.step('expect to have form save option disabled', async () => {
await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
});

await test.step('expect clicking on toggle button to enable tags', async () => {
await poOmnichannelDepartments.toggleRequestTags.click();
await expect(poOmnichannelDepartments.inputTags).toBeVisible();
await expect(poOmnichannelDepartments.btnTagsAdd).toBeVisible();
});
await test.step('expect to be invalid if there is no tag added', async () => {
await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
await expect(poOmnichannelDepartments.invalidInputTags).toBeVisible();
});

await test.step('expect to be not possible adding empty tags', async () => {
await poOmnichannelDepartments.inputTags.fill('');
await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
});

await test.step('expect to have add and remove one tag properly tags', async () => {
const tagName = faker.datatype.string(5);
await poOmnichannelDepartments.inputTags.fill(tagName);
await poOmnichannelDepartments.btnTagsAdd.click();

await expect(page.locator(`button`, { hasText: tagName })).toBeVisible();

await expect(poOmnichannelDepartments.btnSave).toBeEnabled();

await page.locator(`button`, { hasText: tagName }).click();
await expect(poOmnichannelDepartments.invalidInputTags).toBeVisible();
await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
});
await test.step('expect to not be possible adding same tag twice', async () => {
const tagName = faker.datatype.string(5);
await poOmnichannelDepartments.inputTags.fill(tagName);
await poOmnichannelDepartments.btnTagsAdd.click();
await poOmnichannelDepartments.inputTags.fill(tagName);
await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
});
});
});

test('expect delete department', async () => {
test('expect delete department', async ({ page }) => {
await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();

await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);

await page.waitForRequest('**/livechat/department**');

await poOmnichannelDepartments.btnDeleteFirstRowInTable.click();
await poOmnichannelDepartments.btnModalConfirmDelete.click();

await poOmnichannelDepartments.inputSearch.fill(`edited-${departmentName}`);
await expect(poOmnichannelDepartments.firstRowInTable).toBeHidden();

await expect(poOmnichannelDepartments.firstRowInTable).toHaveCount(0);
});
});
4 changes: 4 additions & 0 deletions apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export class OmnichannelDepartments {
return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]');
}

get invalidInputTags() {
return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]:invalid');
}

get btnTagsAdd() {
return this.page.locator('[data-qa="DepartmentEditAddButton-ConversationClosingTags"]');
}
Expand Down