Skip to content

Commit

Permalink
Merge branch 'main' into feature/utils-tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Aldemylla authored Nov 29, 2024
2 parents c28d0d7 + 79b1130 commit 1fca98e
Show file tree
Hide file tree
Showing 32 changed files with 1,341 additions and 21 deletions.
13 changes: 11 additions & 2 deletions src/components/chats/ContactInfo/ModalStartDiscussion.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
:text="$t('discussions.start_discussion.title')"
@close="close"
>
<section class="start-discussion-form">
<section
class="start-discussion-form"
data-testid="start-discussion-form"
>
<div class="start-discussion-form__selects">
<div class="start-discussion-form__selects__input">
<UnnnicLabel
Expand All @@ -16,6 +19,7 @@
autocomplete
autocompleteIconLeft
autocompleteClearOnFocus
data-testid="select-sector"
/>
</div>
<div class="start-discussion-form__selects__input">
Expand All @@ -29,6 +33,7 @@
autocomplete
autocompleteIconLeft
autocompleteClearOnFocus
data-testid="select-queue"
/>
</div>
</div>
Expand All @@ -38,26 +43,30 @@
:maxlength="50"
:placeholder="$t('discussions.start_discussion.form.discussion_reason')"
:label="$t('discussions.start_discussion.form.subject')"
data-testid="input-subject"
/>

<UnnnicTextArea
v-model="message"
:label="$t('message')"
:placeholder="$t('discussions.start_discussion.form.explain_situation')"
:maxLength="300"
data-testid="input-explain-situation"
/>
</section>
<template #options>
<UnnnicButton
:text="$t('cancel')"
type="secondary"
@click="close"
data-testid="cancel-button"
@click="close()"
/>
<UnnnicButton
:text="$t('confirm')"
type="primary"
:disabled="isConfirmButtonDisabled"
:loading="startDiscussionLoading"
data-testid="confirm-button"
@click="startDiscussion"
/>
</template>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { flushPromises, mount } from '@vue/test-utils';

import ModalStartDiscussion from '../ModalStartDiscussion.vue';

import { createTestingPinia } from '@pinia/testing';
import { createMemoryHistory, createRouter } from 'vue-router';

import { useDiscussions } from '@/store/modules/chats/discussions';

import Queue from '@/services/api/resources/settings/queue';

vi.mock('@/services/api/resources/chats/discussion', () => ({
default: {
getSectors: vi.fn(() =>
Promise.resolve({ results: [{ uuid: '1', name: 'Sector' }] }),
),
},
}));

vi.mock('@/services/api/resources/settings/queue', () => ({
default: {
list: vi.fn(() =>
Promise.resolve({ results: [{ uuid: '1', name: 'Queue' }] }),
),
},
}));

const routes = [{ path: '/settings', name: 'settings' }];
const router = createRouter({
history: createMemoryHistory(),
routes,
});

router.push = vi.fn();

describe('ModalStartDiscussion', () => {
let wrapper;
let discussionsStore;

beforeEach(() => {
wrapper = mount(ModalStartDiscussion, {
global: { plugins: [createTestingPinia({ stubActions: true }), router] },
});
discussionsStore = useDiscussions();
});

it('renders correctly with initial data', () => {
expect(wrapper.find('[data-testid="start-discussion-form"]').exists()).toBe(
true,
);

expect(
wrapper.findComponent('[data-testid="select-sector"]').exists(),
).toBe(true);

expect(wrapper.findComponent('[data-testid="select-queue"]').exists()).toBe(
true,
);

expect(
wrapper.findComponent('[data-testid="input-subject"]').exists(),
).toBe(true);

expect(
wrapper.findComponent('[data-testid="input-explain-situation"]').exists(),
).toBe(true);
});

it('enables confirm button only when all fields are filled', async () => {
const confirmButton = wrapper.findComponent(
'[data-testid="confirm-button"]',
);

expect(confirmButton.props('disabled')).toBe(true);

await wrapper.setData({
sector: [{ value: '1', label: 'Sector' }],
queue: [{ value: '1', label: 'Queue' }],
subject: 'Test Subject',
message: 'Test Message',
});

await wrapper.vm.$nextTick();

await expect(confirmButton.props('disabled')).toBe(false);
});

it('should emit close event on click cancel button', async () => {
const closeSpy = vi.spyOn(wrapper.vm, 'close');
const cancelButton = wrapper.findComponent('[data-testid="cancel-button"]');
await cancelButton.trigger('click');
expect(closeSpy).toHaveBeenCalled();
expect(wrapper.emitted('close')).toBeTruthy();
});

it('loads queues when sector is selected', async () => {
await wrapper.setData({ sector: [{ value: '1', label: 'Sector' }] });

expect(Queue.list).toHaveBeenCalledWith('1');

expect(wrapper.vm.queuesToSelect).toEqual([
{
value: '',
label: wrapper.vm.$t('discussions.start_discussion.form.search_queue'),
},
{ value: '1', label: 'Queue' },
]);
});

it('creates a new discussion and redirects', async () => {
await wrapper.setData({
sector: [{ value: '1', label: 'Sector' }],
queue: [{ value: '1', label: 'Queue' }],
subject: 'Test Subject',
message: 'Test Message',
});

await flushPromises();

discussionsStore.create = vi.fn(() => Promise.resolve({ uuid: '1' }));

await wrapper
.findComponent('[data-testid="confirm-button"]')
.trigger('click');

expect(discussionsStore.create).toHaveBeenCalledWith({
queue: '1',
subject: 'Test Subject',
initial_message: 'Test Message',
});

expect(wrapper.vm.$router.push).toHaveBeenCalledWith({
name: 'discussion',
params: { discussionId: '1' },
});
});
});
7 changes: 6 additions & 1 deletion src/components/chats/FlowsTrigger/ModalAddNewContact.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<UnnnicModal
:text="$t('flows_trigger.add_new_contact.title')"
class="modal-add-new-contact"
data-testid="modal-add-new-contact"
@close="$emit('close')"
>
<form
Expand All @@ -13,12 +14,14 @@
v-model="contact.name"
:label="inputLabelContactName"
:placeholder="inputPlaceholderContactName"
data-testid="input-contact-name"
/>
<UnnnicInput
v-model="contact.tel"
:label="inputLabelContactTel"
placeholder="+99 (99) 99999 9999"
:mask="Object.values(telMask)"
data-testid="input-contact-tel"
/>
</form>

Expand All @@ -27,13 +30,15 @@
v-if="!isMobile"
:text="$t('cancel')"
type="secondary"
data-testid="cancel-button"
@click="$emit('close')"
/>
<UnnnicButton
:text="$t('save')"
type="primary"
:disabled="!isValidForm"
:loading="isLoading"
data-testid="save-button"
@click="saveNewContact"
/>
</template>
Expand Down Expand Up @@ -68,7 +73,7 @@ export default {
isValidForm() {
const { contact, telMask } = this;

return (
return !!(
contact.name &&
(contact.tel.length === telMask.telephone.length ||
contact.tel.length === telMask.cellphone.length)
Expand Down
12 changes: 10 additions & 2 deletions src/components/chats/FlowsTrigger/ModalListTriggeredFlows.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<template>
<UnnnicModal
class="modal-list-triggered-flows"
:text="$t('flows_trigger.triggered_flows.title')"
data-testid="modal-list-triggered-flows"
@close="$emit('close')"
>
<section class="modal-list-triggered-flows__handlers">
Expand All @@ -22,6 +22,7 @@
v-if="!isTableLoading && triggeredFlows.length > 0"
:items="triggeredFlows"
class="modal-list-triggered-flows__table"
data-testid="modal-list-triggered-flows-table"
>
<template #header>
<UnnnicTableRow :headers="tableHeaders" />
Expand All @@ -46,6 +47,7 @@
<p
v-if="!isTableLoading && triggeredFlows.length === 0"
class="modal-list-triggered-flows__table__no-results"
data-testid="no-results-text"
>
{{ $t('without_results') }}
</p>
Expand All @@ -57,6 +59,7 @@
:countPages="triggeredFlowsCountPages"
:limit="triggeredFlowsLimit"
:isLoading="isPagesLoading"
data-testid="modal-list-triggered-flows-table-pagination"
@update:model-value="triggeredFlowsCurrentPage = $event"
/>
</template>
Expand Down Expand Up @@ -131,7 +134,12 @@ export default {
triggeredFlowsCurrentPage() {
this.getListFlowsStart(true);
},
filterDate: 'getListFlowsStart',
filterDate: {
deep: true,
handler() {
this.getListFlowsStart();
},
},
},
async mounted() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,27 @@
:text="$t('flows_trigger.remove_selected_contacts')"
class="modal-remove-selected-contacts"
:showModal="contacts.length > 0"
data-testid="modal-remove-selected-contacts"
@close="$emit('close')"
>
<SelectedContactsSection
:contacts="newContacts"
data-testid="selected-contacts-section"
@remove-contact="removeModalContact($event)"
/>
<template #options>
<UnnnicButton
:text="$t('cancel')"
type="secondary"
size="large"
data-testid="cancel-button"
@click="closeModalInternally"
/>
<UnnnicButton
:text="$t('confirm')"
type="primary"
size="large"
data-testid="confirm-button"
@click="emitRemoveContacts"
/>
</template>
Expand Down
7 changes: 6 additions & 1 deletion src/components/chats/FlowsTrigger/ModalSendFlow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,20 @@
<UnnnicModal
:text="$t('flows_trigger.send')"
class="modal-send-flow"
data-testid="modal-send-flow"
@close="$emit('close')"
>
<SelectFlow v-model="selectedFlow" />
<SelectFlow
v-model="selectedFlow"
data-testid="select-flow"
/>

<template #options>
<SendFlowButton
class="modal-send-flow__handler"
:contacts="contacts"
:selectedFlow="selectedFlow"
data-testid="send-flow-button"
@send-flow-finished="finishSendFlow"
/>
</template>
Expand Down
11 changes: 9 additions & 2 deletions src/components/chats/FlowsTrigger/SelectFlow.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<template>
<div class="select-flow">
<UnnnicLabel :label="$t('flows_trigger.select')" />
<div
class="select-flow"
data-testid="select-flow-container"
>
<UnnnicLabel
:label="$t('flows_trigger.select')"
data-testid="select-flow-label"
/>
<UnnnicSelectSmart
v-model="flowUuid"
:options="templates"
autocomplete
autocompleteIconLeft
autocompleteClearOnFocus
data-testid="select-flow-input"
@update:model-value="getFlowTrigger(flowUuid?.[0].value)"
/>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/components/chats/FlowsTrigger/SelectedContactsSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<section
v-if="contacts.length > 0"
class="selected-contacts-section"
data-testid="selected-contacts-section"
@click="$emit('click')"
@keypress.enter="$emit('click')"
>
Expand All @@ -12,6 +13,7 @@
:text="contact.name"
hasCloseIcon
scheme="background-snow"
data-testid="contact-tag"
@close="$emit('remove-contact', contact)"
/>
</section>
Expand Down
Loading

0 comments on commit 1fca98e

Please sign in to comment.