diff --git a/src/components/chats/ContactInfo/ModalStartDiscussion.vue b/src/components/chats/ContactInfo/ModalStartDiscussion.vue
index f07ee0be..abbcaa6e 100644
--- a/src/components/chats/ContactInfo/ModalStartDiscussion.vue
+++ b/src/components/chats/ContactInfo/ModalStartDiscussion.vue
@@ -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
@@ -16,6 +19,7 @@
             autocomplete
             autocompleteIconLeft
             autocompleteClearOnFocus
+            data-testid="select-sector"
           />
         </div>
         <div class="start-discussion-form__selects__input">
@@ -29,6 +33,7 @@
             autocomplete
             autocompleteIconLeft
             autocompleteClearOnFocus
+            data-testid="select-queue"
           />
         </div>
       </div>
@@ -38,6 +43,7 @@
         :maxlength="50"
         :placeholder="$t('discussions.start_discussion.form.discussion_reason')"
         :label="$t('discussions.start_discussion.form.subject')"
+        data-testid="input-subject"
       />
 
       <UnnnicTextArea
@@ -45,19 +51,22 @@
         :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>
diff --git a/src/components/chats/ContactInfo/__tests__/ModalStartDiscussion.spec.js b/src/components/chats/ContactInfo/__tests__/ModalStartDiscussion.spec.js
new file mode 100644
index 00000000..5b4751d2
--- /dev/null
+++ b/src/components/chats/ContactInfo/__tests__/ModalStartDiscussion.spec.js
@@ -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' },
+    });
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/ModalAddNewContact.vue b/src/components/chats/FlowsTrigger/ModalAddNewContact.vue
index 5aa75aa8..a79d7b92 100644
--- a/src/components/chats/FlowsTrigger/ModalAddNewContact.vue
+++ b/src/components/chats/FlowsTrigger/ModalAddNewContact.vue
@@ -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
@@ -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>
 
@@ -27,6 +30,7 @@
         v-if="!isMobile"
         :text="$t('cancel')"
         type="secondary"
+        data-testid="cancel-button"
         @click="$emit('close')"
       />
       <UnnnicButton
@@ -34,6 +38,7 @@
         type="primary"
         :disabled="!isValidForm"
         :loading="isLoading"
+        data-testid="save-button"
         @click="saveNewContact"
       />
     </template>
@@ -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)
diff --git a/src/components/chats/FlowsTrigger/ModalListTriggeredFlows.vue b/src/components/chats/FlowsTrigger/ModalListTriggeredFlows.vue
index ab234b91..9f9225f6 100644
--- a/src/components/chats/FlowsTrigger/ModalListTriggeredFlows.vue
+++ b/src/components/chats/FlowsTrigger/ModalListTriggeredFlows.vue
@@ -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">
@@ -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" />
@@ -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>
@@ -57,6 +59,7 @@
         :countPages="triggeredFlowsCountPages"
         :limit="triggeredFlowsLimit"
         :isLoading="isPagesLoading"
+        data-testid="modal-list-triggered-flows-table-pagination"
         @update:model-value="triggeredFlowsCurrentPage = $event"
       />
     </template>
@@ -131,7 +134,12 @@ export default {
     triggeredFlowsCurrentPage() {
       this.getListFlowsStart(true);
     },
-    filterDate: 'getListFlowsStart',
+    filterDate: {
+      deep: true,
+      handler() {
+        this.getListFlowsStart();
+      },
+    },
   },
 
   async mounted() {
diff --git a/src/components/chats/FlowsTrigger/ModalRemoveSelectedContacts.vue b/src/components/chats/FlowsTrigger/ModalRemoveSelectedContacts.vue
index b0fa5832..91e0d5e3 100644
--- a/src/components/chats/FlowsTrigger/ModalRemoveSelectedContacts.vue
+++ b/src/components/chats/FlowsTrigger/ModalRemoveSelectedContacts.vue
@@ -5,10 +5,12 @@
     :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>
@@ -16,12 +18,14 @@
         :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>
diff --git a/src/components/chats/FlowsTrigger/ModalSendFlow.vue b/src/components/chats/FlowsTrigger/ModalSendFlow.vue
index e3a3306e..4422d421 100644
--- a/src/components/chats/FlowsTrigger/ModalSendFlow.vue
+++ b/src/components/chats/FlowsTrigger/ModalSendFlow.vue
@@ -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>
diff --git a/src/components/chats/FlowsTrigger/SelectFlow.vue b/src/components/chats/FlowsTrigger/SelectFlow.vue
index 7cdb43da..809f96ac 100644
--- a/src/components/chats/FlowsTrigger/SelectFlow.vue
+++ b/src/components/chats/FlowsTrigger/SelectFlow.vue
@@ -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>
diff --git a/src/components/chats/FlowsTrigger/SelectedContactsSection.vue b/src/components/chats/FlowsTrigger/SelectedContactsSection.vue
index 675941b7..02c43e0d 100644
--- a/src/components/chats/FlowsTrigger/SelectedContactsSection.vue
+++ b/src/components/chats/FlowsTrigger/SelectedContactsSection.vue
@@ -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')"
   >
@@ -12,6 +13,7 @@
       :text="contact.name"
       hasCloseIcon
       scheme="background-snow"
+      data-testid="contact-tag"
       @close="$emit('remove-contact', contact)"
     />
   </section>
diff --git a/src/components/chats/FlowsTrigger/SendFlow.vue b/src/components/chats/FlowsTrigger/SendFlow.vue
index 1dee30f9..4e56163e 100644
--- a/src/components/chats/FlowsTrigger/SendFlow.vue
+++ b/src/components/chats/FlowsTrigger/SendFlow.vue
@@ -1,7 +1,12 @@
-<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
 <template>
-  <section class="send-flow">
-    <SelectFlow v-model="selectedFlow" />
+  <section
+    class="send-flow"
+    data-testid="send-flow-container"
+  >
+    <SelectFlow
+      v-model="selectedFlow"
+      data-testid="select-flow"
+    />
     <div v-if="showProgressBar">
       <ModalProgressBarFalse
         :title="$t('flows_trigger.sending')"
@@ -14,6 +19,7 @@
         :text="$t('back')"
         size="small"
         type="tertiary"
+        data-testid="back-button"
         @click="$emit('back')"
       />
       <SendFlowButton
@@ -21,6 +27,7 @@
         :contacts="contacts"
         :selectedContact="selectedContact"
         :selectedFlow="selectedFlow"
+        data-testid="send-flow-button"
         @send-flow-started="openModalProgress"
         @send-flow-finished="closeModalProgress"
       />
diff --git a/src/components/chats/FlowsTrigger/SendFlowButton.vue b/src/components/chats/FlowsTrigger/SendFlowButton.vue
index e1a8af28..72d88e81 100644
--- a/src/components/chats/FlowsTrigger/SendFlowButton.vue
+++ b/src/components/chats/FlowsTrigger/SendFlowButton.vue
@@ -7,6 +7,7 @@
     size="small"
     type="primary"
     iconLeft="send"
+    data-testid="send-flow-button"
     @click="sendFlow"
   />
 </template>
diff --git a/src/components/chats/FlowsTrigger/__tests__/ModalAddNewContact.spec.js b/src/components/chats/FlowsTrigger/__tests__/ModalAddNewContact.spec.js
new file mode 100644
index 00000000..3f2d8f22
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/ModalAddNewContact.spec.js
@@ -0,0 +1,131 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, beforeEach, vi } from 'vitest';
+
+import ModalAddNewContact from '../ModalAddNewContact.vue';
+
+import FlowsTrigger from '@/services/api/resources/chats/flowsTrigger.js';
+import callUnnnicAlert from '@/utils/callUnnnicAlert';
+
+vi.mock('@/utils/callUnnnicAlert');
+
+vi.mock('@/services/api/resources/chats/flowsTrigger.js', () => ({
+  default: {
+    createContact: vi.fn(() => Promise.resolve()),
+  },
+}));
+
+describe('ModalAddNewContact', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(ModalAddNewContact);
+  });
+
+  it('renders correctly', () => {
+    expect(wrapper.find('[data-testid="modal-add-new-contact"]').exists()).toBe(
+      true,
+    );
+
+    expect(
+      wrapper.findComponent('[data-testid="input-contact-name"]').exists(),
+    ).toBe(true);
+
+    expect(
+      wrapper.findComponent('[data-testid="input-contact-tel"]').exists(),
+    ).toBe(true);
+  });
+
+  it('validates form correctly', () => {
+    expect(wrapper.vm.isValidForm).toBe(false);
+
+    wrapper.setData({
+      contact: {
+        name: 'John Doe',
+        tel: '+55 (11) 91234 5678',
+      },
+    });
+
+    expect(wrapper.vm.isValidForm).toBe(true);
+
+    // invalid tel test
+    wrapper.setData({ contact: { tel: '+12345' } });
+    expect(wrapper.vm.isValidForm).toBe(false);
+  });
+
+  it('submits contact correctly', async () => {
+    const createContactSpy = vi.spyOn(FlowsTrigger, 'createContact');
+
+    await wrapper.setData({
+      contact: {
+        name: 'John Doe',
+        tel: '+55 (11) 91234 5678',
+      },
+    });
+
+    const saveButton = wrapper.findComponent('[data-testid="save-button"]');
+
+    await saveButton.trigger('click');
+
+    expect(createContactSpy).toHaveBeenCalledWith({
+      name: 'John Doe',
+      urns: ['whatsapp:5511912345678'],
+    });
+
+    expect(callUnnnicAlert).toHaveBeenCalledWith({
+      props: {
+        text: wrapper.vm.$t('flows_trigger.successfully_add_contact'),
+        type: 'success',
+      },
+      seconds: 5,
+    });
+  });
+
+  it('shows error alert when contact already exists', async () => {
+    vi.spyOn(FlowsTrigger, 'createContact').mockRejectedValue({
+      response: { status: 400 },
+    });
+
+    await wrapper.setData({
+      contact: {
+        name: 'John Doe',
+        tel: '+55 (11) 91234 5678',
+      },
+    });
+
+    await wrapper.vm.saveNewContact();
+
+    expect(callUnnnicAlert).toHaveBeenCalledWith(
+      expect.objectContaining({
+        props: {
+          text: wrapper.vm.$t('flows_trigger.contact_already_exists', {
+            contact: ['5511912345678'],
+          }),
+          type: 'error',
+        },
+      }),
+    );
+  });
+
+  it('adjusts input labels for mobile devices', async () => {
+    await wrapper.setData({ isMobile: true });
+
+    expect(wrapper.vm.inputLabelContactName).toBe('');
+    expect(wrapper.vm.inputLabelContactTel).toBe('');
+  });
+
+  it('should emit close on modal emitted close', async () => {
+    const modal = wrapper.findComponent(
+      '[data-testid="modal-add-new-contact"]',
+    );
+    await modal.vm.$emit('close');
+    expect(wrapper.emitted('close')[0]).toBeTruthy();
+  });
+
+  it('should emit close on click cancel button', async () => {
+    const cancelButton = wrapper.findComponent('[data-testid="cancel-button"]');
+
+    await cancelButton.trigger('click');
+
+    expect(wrapper.emitted('close')[0]).toBeTruthy();
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/ModalListTriggeredFlows.spec.js b/src/components/chats/FlowsTrigger/__tests__/ModalListTriggeredFlows.spec.js
new file mode 100644
index 00000000..6407de90
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/ModalListTriggeredFlows.spec.js
@@ -0,0 +1,106 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, describe, it, beforeEach, vi } from 'vitest';
+
+import ModalListTriggeredFlows from '../ModalListTriggeredFlows.vue';
+
+import FlowsTrigger from '@/services/api/resources/chats/flowsTrigger.js';
+
+vi.mock('@/services/api/resources/chats/flowsTrigger.js', () => ({
+  default: {
+    listFlowsStart: vi.fn(() => {
+      return Promise.resolve({
+        results: [{ name: 'Flow 1', created_on: '2024-11-10T12:00:00Z' }],
+        count: 1,
+      });
+    }),
+  },
+}));
+
+describe('ModalListTriggeredFlows', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(ModalListTriggeredFlows);
+  });
+
+  it('renders correctly', () => {
+    expect(
+      wrapper.find('[data-testid="modal-list-triggered-flows"]').exists(),
+    ).toBe(true);
+
+    expect(
+      wrapper
+        .findComponent(
+          '[data-testid="modal-list-triggered-flows-table-pagination"]',
+        )
+        .exists(),
+    ).toBe(true);
+  });
+
+  it('fetches and updates triggeredFlows data', async () => {
+    const listFlowsStartSpy = vi.spyOn(FlowsTrigger, 'listFlowsStart');
+
+    const wrapper = mount(ModalListTriggeredFlows);
+    await flushPromises();
+
+    expect(listFlowsStartSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        limit: wrapper.vm.triggeredFlowsLimit,
+      }),
+    );
+    expect(wrapper.vm.triggeredFlows).toEqual([
+      { name: 'Flow 1', created_on: '2024-11-10T12:00:00Z' },
+    ]);
+  });
+
+  it('updates flows when filterDate changes', async () => {
+    const getListFlowsStartSpy = vi.spyOn(wrapper.vm, 'getListFlowsStart');
+
+    await wrapper.setData({
+      filterDate: { start: '2024-11-01', end: '2024-11-10' },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(getListFlowsStartSpy).toHaveBeenCalled();
+  });
+
+  it('displays no results message when triggeredFlows is empty', async () => {
+    await wrapper.setData({ triggeredFlows: [], isTableLoading: false });
+    const noResultsMessage = wrapper.find('[data-testid="no-results-text"]');
+    expect(noResultsMessage.exists()).toBe(true);
+    expect(noResultsMessage.text()).toBe(wrapper.vm.$t('without_results'));
+  });
+
+  it('updates current page when TablePagination emits event', async () => {
+    const newPage = 2;
+    wrapper
+      .findComponent(
+        '[data-testid="modal-list-triggered-flows-table-pagination"]',
+      )
+      .vm.$emit('update:model-value', newPage);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.triggeredFlowsCurrentPage).toBe(newPage);
+  });
+
+  it('should emits close on trigger close from modal', async () => {
+    const modal = wrapper.findComponent(
+      '[data-testid="modal-list-triggered-flows"]',
+    );
+    await modal.vm.$emit('close');
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('should log error on fail getListFlowsStart', async () => {
+    vi.spyOn(FlowsTrigger, 'listFlowsStart').mockRejectedValueOnce(
+      new Error('API Error'),
+    );
+    const consoleLogSpy = vi.spyOn(console, 'log');
+
+    await wrapper.vm.getListFlowsStart();
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(new Error('API Error'));
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/ModalRemoveSelectedContacts.spec.js b/src/components/chats/FlowsTrigger/__tests__/ModalRemoveSelectedContacts.spec.js
new file mode 100644
index 00000000..d37b5f5c
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/ModalRemoveSelectedContacts.spec.js
@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, beforeEach } from 'vitest';
+
+import ModalRemoveSelectedContacts from '../ModalRemoveSelectedContacts.vue';
+
+const contactsMock = [{ uuid: '1', name: 'John Doe' }];
+
+describe('ModalRemoveSelectedContacts', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(ModalRemoveSelectedContacts, {
+      props: { contacts: contactsMock },
+    });
+  });
+
+  it('renders correctly when contacts are provided', () => {
+    expect(
+      wrapper
+        .findComponent('[data-testid="modal-remove-selected-contacts"]')
+        .exists(),
+    ).toBe(true);
+
+    expect(
+      wrapper
+        .findComponent('[data-testid="selected-contacts-section"]')
+        .exists(),
+    ).toBe(true);
+
+    expect(
+      wrapper.findComponent('[data-testid="confirm-button"]').exists(),
+    ).toBe(true);
+
+    expect(
+      wrapper.findComponent('[data-testid="cancel-button"]').exists(),
+    ).toBe(true);
+  });
+
+  it('emits close event when cancel button is clicked', async () => {
+    await wrapper.find('[data-testid="cancel-button"]').trigger('click');
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('adds contact to contactsToRemove when removeModalContact is called', async () => {
+    const contact = contactsMock[0];
+
+    const selectedContactsSection = wrapper.findComponent(
+      '[data-testid="selected-contacts-section"]',
+    );
+
+    selectedContactsSection.vm.$emit('remove-contact', contact);
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.contactsToRemove[0].uuid).toEqual(contact.uuid);
+    expect(wrapper.vm.contactsToRemove[0].name).toEqual(contact.name);
+  });
+
+  it('computes newContacts excluding contactsToRemove', async () => {
+    await wrapper.setProps({
+      contacts: [...contactsMock, { uuid: '2', name: 'Jane Doe' }],
+    });
+
+    await wrapper.setData({ contactsToRemove: [contactsMock[0]] });
+
+    expect(wrapper.vm.newContacts).toEqual([{ uuid: '2', name: 'Jane Doe' }]);
+  });
+
+  it('should emit remove-contacts on click confirm button', async () => {
+    await wrapper.setProps({
+      contacts: [...contactsMock, { uuid: '2', name: 'Jane Doe' }],
+    });
+
+    await wrapper.setData({ contactsToRemove: [contactsMock[0]] });
+
+    await wrapper.find('[data-testid="confirm-button"]').trigger('click');
+
+    expect(wrapper.emitted('remove-contacts')[0][0]).toStrictEqual([
+      contactsMock[0],
+    ]);
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/ModalSendFlow.spec.js b/src/components/chats/FlowsTrigger/__tests__/ModalSendFlow.spec.js
new file mode 100644
index 00000000..44e4d2e7
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/ModalSendFlow.spec.js
@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, beforeEach, vi } from 'vitest';
+
+import ModalSendFlow from '../ModalSendFlow.vue';
+
+import callUnnnicAlert from '@/utils/callUnnnicAlert';
+vi.mock('@/utils/callUnnnicAlert');
+
+vi.mock('@/services/api/resources/chats/flowsTrigger', () => ({
+  default: {
+    getFlows: vi.fn(() =>
+      Promise.resolve([{ uuid: 'flow-1', name: 'Flow 1' }]),
+    ),
+  },
+}));
+
+describe('ModalSendFlow', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(ModalSendFlow, {
+      props: { contacts: [{ uuid: '1', name: 'Contact 1' }] },
+    });
+  });
+
+  it('renders correctly', () => {
+    expect(
+      wrapper.findComponent('[data-testid="modal-send-flow"]').exists(),
+    ).toBe(true);
+
+    expect(wrapper.findComponent('[data-testid="select-flow"]').exists()).toBe(
+      true,
+    );
+
+    expect(
+      wrapper.findComponent('[data-testid="send-flow-button"]').exists(),
+    ).toBe(true);
+  });
+
+  it('emits close event when modal is closed', async () => {
+    const modal = wrapper.findComponent('[data-testid="modal-send-flow"]');
+    await modal.vm.$emit('close');
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('updates selectedFlow when a flow is selected', async () => {
+    const selectFlow = wrapper.findComponent('[data-testid="select-flow"]');
+
+    await selectFlow.vm.$emit('update:modelValue', 'flow-uuid-123');
+
+    expect(wrapper.vm.selectedFlow).toBe('flow-uuid-123');
+  });
+
+  it('shows success alert and emits send-flow-finished after sending flow', async () => {
+    const sendFlowButton = wrapper.findComponent(
+      '[data-testid="send-flow-button"]',
+    );
+    await sendFlowButton.vm.$emit('send-flow-finished');
+
+    expect(callUnnnicAlert).toHaveBeenCalledWith({
+      props: {
+        text: wrapper.vm.$t('flows_trigger.successfully_triggered'),
+        type: 'success',
+      },
+      seconds: 5,
+    });
+
+    expect(wrapper.emitted('send-flow-finished')).toHaveLength(1);
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/SelectFlow.spec.js b/src/components/chats/FlowsTrigger/__tests__/SelectFlow.spec.js
new file mode 100644
index 00000000..1e6401b4
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/SelectFlow.spec.js
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, vi, beforeEach } from 'vitest';
+
+import FlowsTrigger from '@/services/api/resources/chats/flowsTrigger';
+
+import SelectFlow from '../SelectFlow.vue';
+
+vi.mock('@/services/api/resources/chats/flowsTrigger', () => ({
+  default: {
+    getFlows: vi.fn(() =>
+      Promise.resolve([{ uuid: 'flow-1', name: 'Flow 1' }]),
+    ),
+  },
+}));
+
+describe('SelectFlow', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(SelectFlow, { props: { modelValue: '' } });
+  });
+
+  it('renders with the correct initial state', () => {
+    expect(wrapper.find('[data-testid="select-flow-container"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.findComponent('[data-testid="select-flow-input"]').exists(),
+    ).toBe(true);
+  });
+
+  it('fetches flows on mount and populates options', async () => {
+    await wrapper.vm.$nextTick();
+    expect(FlowsTrigger.getFlows).toHaveBeenCalled();
+
+    const selectOptions = wrapper.vm.templates;
+    expect(selectOptions).toEqual([
+      { value: '', label: wrapper.vm.$t('search_or_select') },
+      { value: 'flow-1', label: 'Flow 1' },
+    ]);
+  });
+
+  it('emits update:modelValue when a flow is selected', async () => {
+    await wrapper.setData({
+      templates: [
+        { value: '', label: wrapper.vm.$t('search_or_select') },
+        { value: 'flow-1', label: 'Flow 1' },
+      ],
+      flowUuid: [{ value: 'flow-1', label: 'Flow 1' }],
+    });
+
+    await wrapper.vm.getFlowTrigger('flow-1');
+
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['flow-1']);
+  });
+
+  it('handles API errors gracefully', async () => {
+    FlowsTrigger.getFlows.mockRejectedValueOnce(new Error('API Error'));
+    const consoleLogSpy = vi.spyOn(console, 'log');
+
+    const wrapper = mount(SelectFlow, {
+      props: { modelValue: '' },
+      mocks: { $t: (key) => key },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.loadingFlows).toBe(false);
+    expect(wrapper.vm.templates).toEqual([
+      { value: '', label: wrapper.vm.$t('search_or_select') },
+    ]);
+    expect(consoleLogSpy).toHaveBeenCalledWith(new Error('API Error'));
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/SelectedContactsSection.spec.js b/src/components/chats/FlowsTrigger/__tests__/SelectedContactsSection.spec.js
new file mode 100644
index 00000000..dbcf4e20
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/SelectedContactsSection.spec.js
@@ -0,0 +1,56 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, beforeEach } from 'vitest';
+
+import SelectedContactsSection from '../SelectedContactsSection.vue';
+
+const contactsMock = [
+  { uuid: '1', name: 'Contact 1' },
+  { uuid: '2', name: 'Contact 2' },
+];
+
+describe('SelectedContactsSection', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(SelectedContactsSection, { props: { contacts: [] } });
+  });
+
+  it('renders only if contacts are provided', async () => {
+    expect(
+      wrapper.find('[data-testid="selected-contacts-section"]').exists(),
+    ).toBe(false);
+    await wrapper.setProps({ contacts: [{ uuid: '1', name: 'Contact 1' }] });
+    expect(
+      wrapper.find('[data-testid="selected-contacts-section"]').exists(),
+    ).toBe(true);
+  });
+
+  it('displays contacts as tags', async () => {
+    await wrapper.setProps({ contacts: contactsMock });
+
+    const tags = wrapper.findAllComponents('[data-testid="contact-tag"]');
+    expect(tags).toHaveLength(contactsMock.length);
+    expect(tags[0].props('text')).toBe(contactsMock[0].name);
+    expect(tags[1].props('text')).toBe(contactsMock[1].name);
+  });
+
+  it('emits remove-contact event with correct contact on tag close', async () => {
+    await wrapper.setProps({ contacts: [contactsMock[0]] });
+
+    const tag = wrapper.findComponent('[data-testid="contact-tag"]');
+
+    await tag.vm.$emit('close');
+
+    expect(wrapper.emitted('remove-contact')[0]).toEqual([contactsMock[0]]);
+  });
+
+  it('emits click event when section is clicked or Enter is pressed', async () => {
+    await wrapper.setProps({ contacts: [contactsMock[0]] });
+
+    await wrapper.trigger('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
+
+    await wrapper.trigger('keypress.enter');
+    expect(wrapper.emitted('click')).toHaveLength(2);
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/SendFlow.spec.js b/src/components/chats/FlowsTrigger/__tests__/SendFlow.spec.js
new file mode 100644
index 00000000..9e9e6392
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/SendFlow.spec.js
@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, vi, beforeEach } from 'vitest';
+
+import SendFlow from '../SendFlow.vue';
+import SelectFlow from '../SelectFlow.vue';
+import SendFlowButton from '../SendFlowButton.vue';
+
+vi.mock('@/services/api/resources/chats/flowsTrigger', () => ({
+  default: {
+    getFlows: vi.fn(() =>
+      Promise.resolve([{ uuid: 'flow-1', name: 'Flow 1' }]),
+    ),
+  },
+}));
+
+describe('SendFlow', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(SendFlow, {
+      global: { components: { SelectFlow, SendFlowButton } },
+      props: { contacts: [], selectedContact: {} },
+    });
+  });
+
+  it('renders correctly with initial state', async () => {
+    await wrapper.setProps({ contacts: undefined, selectedContact: undefined });
+    expect(wrapper.findComponent('[data-testid="select-flow"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('[data-testid="back-button"]').exists()).toBe(true);
+    expect(
+      wrapper.findComponent('[data-testid="send-flow-button"]').exists(),
+    ).toBe(true);
+  });
+
+  it('updates selectedFlow when a flow is selected', async () => {
+    const selectFlow = wrapper.findComponent('[data-testid="select-flow"]');
+    await selectFlow.vm.$emit('update:modelValue', 'flow-1');
+    expect(wrapper.vm.selectedFlow).toBe('flow-1');
+  });
+
+  it('shows and hides progress modal during flow sending process', async () => {
+    const sendFlowButton = wrapper.findComponent(
+      '[data-testid="send-flow-button"]',
+    );
+    await sendFlowButton.vm.$emit('send-flow-started');
+    expect(wrapper.vm.showProgressBar).toBe(true);
+
+    await sendFlowButton.vm.$emit('send-flow-finished');
+    expect(wrapper.vm.showProgressBar).toBe(false);
+  });
+
+  it('emits back event when back button is clicked', async () => {
+    await wrapper.find('[data-testid="back-button"]').trigger('click');
+    expect(wrapper.emitted('back')).toHaveLength(1);
+  });
+});
diff --git a/src/components/chats/FlowsTrigger/__tests__/SendFlowButton.spec.js b/src/components/chats/FlowsTrigger/__tests__/SendFlowButton.spec.js
new file mode 100644
index 00000000..ac87e21e
--- /dev/null
+++ b/src/components/chats/FlowsTrigger/__tests__/SendFlowButton.spec.js
@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils';
+import { expect, describe, it, vi, beforeEach } from 'vitest';
+
+import SendFlowButton from '../SendFlowButton.vue';
+import { createTestingPinia } from '@pinia/testing';
+import FlowsTrigger from '@/services/api/resources/chats/flowsTrigger';
+
+vi.mock('@/services/api/resources/chats/flowsTrigger', () => ({
+  default: { sendFlow: vi.fn() },
+}));
+
+describe('SendFlowButton', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(SendFlowButton, {
+      global: { plugins: [createTestingPinia()] },
+      props: { selectedFlow: '' },
+    });
+  });
+
+  it('renders with the correct initial state', () => {
+    const button = wrapper.find('[data-testid="send-flow-button"]');
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+
+  it('disables button when selectedFlow is empty', async () => {
+    const button = wrapper.find('[data-testid="send-flow-button"]');
+    expect(button.attributes('disabled')).toBeDefined();
+
+    await wrapper.setProps({ selectedFlow: 'flow-uuid' });
+    expect(button.attributes('disabled')).toBeUndefined();
+  });
+
+  it('emits events when sendFlow is called', async () => {
+    await wrapper.setProps({
+      selectedFlow: 'flow-uuid',
+      contacts: [{ external_id: 'contact-1' }],
+    });
+
+    await wrapper.find('[data-testid="send-flow-button"]').trigger('click');
+
+    expect(wrapper.emitted('send-flow-started')).toHaveLength(1);
+
+    expect(wrapper.emitted('send-flow-finished')).toHaveLength(1);
+  });
+
+  it('calls FlowsTrigger.sendFlow with correct parameters', async () => {
+    const contacts = [
+      { external_id: 'contact-1', name: 'Contact 1' },
+      { uuid: 'contact-2', name: 'Contact 2' },
+    ];
+
+    await wrapper.setProps({ selectedFlow: 'flow-uuid', contacts });
+
+    await wrapper.find('[data-testid="send-flow-button"]').trigger('click');
+
+    expect(FlowsTrigger.sendFlow).toHaveBeenCalledWith({
+      flow: 'flow-uuid',
+      contacts: ['contact-1'],
+      room: undefined,
+      contact_name: 'Contact 1',
+    });
+
+    expect(FlowsTrigger.sendFlow).toHaveBeenCalledWith({
+      flow: 'flow-uuid',
+      contacts: ['contact-2'],
+      room: undefined,
+      contact_name: 'Contact 2',
+    });
+  });
+
+  it('handles errors gracefully during flow sending', async () => {
+    await wrapper.setProps({
+      selectedFlow: 'flow-uuid',
+      contacts: [{ external_id: 'contact-1' }],
+      selectedContact: { external_id: 'contact-1' },
+    });
+    const consoleError = vi.spyOn(console, 'error');
+
+    FlowsTrigger.sendFlow.mockRejectedValueOnce(new Error('API error'));
+
+    await wrapper.find('[data-testid="send-flow-button"]').trigger('click');
+
+    expect(FlowsTrigger.sendFlow).toHaveBeenCalled();
+    expect(consoleError).toHaveBeenCalledWith(new Error('API error'));
+
+    expect(wrapper.emitted('send-flow-finished')).toHaveLength(1);
+  });
+});
diff --git a/src/components/chats/MediaMessage/Previews/Audio.vue b/src/components/chats/MediaMessage/Previews/Audio.vue
index 82f8a406..5c4117c5 100644
--- a/src/components/chats/MediaMessage/Previews/Audio.vue
+++ b/src/components/chats/MediaMessage/Previews/Audio.vue
@@ -2,22 +2,30 @@
 <!-- eslint-disable vuejs-accessibility/media-has-caption -->
 <template>
   <div class="media__content_audio__media__preview">
-    <div @click="play">
+    <div
+      data-testid="play"
+      @click="play"
+    >
       <UnnnicIcon
         v-if="!isTimerPlaying"
         size="xs"
         icon="controls-play-1"
         clickable
         scheme="neutral-dark"
+        data-testid="play-icon"
       />
     </div>
-    <div @click="pause">
+    <div
+      data-testid="pause"
+      @click="pause"
+    >
       <UnnnicIcon
         v-if="isTimerPlaying"
         size="xs"
         icon="controls-pause-1"
         clickable
         scheme="neutral-dark"
+        data-testid="pause-icon"
       />
     </div>
   </div>
@@ -34,9 +42,13 @@ export default {
     },
   },
 
-  data: () => ({
-    isTimerPlaying: false,
-  }),
+  data() {
+    return {
+      isTimerPlaying: false,
+      audio: null,
+    };
+  },
+
   methods: {
     play() {
       this.audio = new Audio(this.currentAudio);
diff --git a/src/components/chats/MediaMessage/Previews/Document.vue b/src/components/chats/MediaMessage/Previews/Document.vue
index 9e496b26..c08ba7f1 100644
--- a/src/components/chats/MediaMessage/Previews/Document.vue
+++ b/src/components/chats/MediaMessage/Previews/Document.vue
@@ -9,10 +9,12 @@
     @keypress.enter="$emit('download')"
   >
     <UnnnicIconSvg
+      data-testid="icon"
       :icon="icon"
       :scheme="highlight ? 'weni-600' : 'neutral-darkest'"
     />
     <span
+      data-testid="filename"
       class="filename"
       style="white-space: nowrap"
     >
diff --git a/src/components/chats/MediaMessage/Previews/Fullscreen.vue b/src/components/chats/MediaMessage/Previews/Fullscreen.vue
index c2742a3b..3dd5dc61 100644
--- a/src/components/chats/MediaMessage/Previews/Fullscreen.vue
+++ b/src/components/chats/MediaMessage/Previews/Fullscreen.vue
@@ -6,33 +6,40 @@
   >
     <header
       class="toolbar"
+      data-testid="toolbar"
       @click.stop
     >
       <FullscreenControl
         icon="rotate_left"
+        data-testid="rotate-left-button"
         @click="rotate('left')"
       />
       <FullscreenControl
         icon="rotate_right"
+        data-testid="rotate-right-button"
         @click="rotate('right')"
       />
       <FullscreenControl
         :icon="isZoomed ? 'zoom_out' : 'zoom_in'"
+        data-testid="zoom-button"
         @click="zoomHandler"
       />
       <FullscreenControl
         icon="download"
-        @click="download"
+        data-testid="download-button"
+        @click="download()"
       />
       <FullscreenControl
         icon="close"
-        @click="close"
+        data-testid="close-button"
+        @click="close()"
       />
     </header>
 
     <div
       ref="mediaContainer"
       class="media__container"
+      data-testid="media-container"
       @mousedown="startPan"
       @mousemove="pan"
       @mouseup="endPan"
@@ -54,10 +61,12 @@
     >
       <FullscreenControl
         icon="chevron_left"
+        data-testid="previous-button"
         @click="previous"
       />
       <FullscreenControl
         icon="chevron_right"
+        data-testid="next-button"
         @click="next"
       />
     </footer>
diff --git a/src/components/chats/MediaMessage/Previews/FullscreenControl.vue b/src/components/chats/MediaMessage/Previews/FullscreenControl.vue
index fae894b9..56c4dcac 100644
--- a/src/components/chats/MediaMessage/Previews/FullscreenControl.vue
+++ b/src/components/chats/MediaMessage/Previews/FullscreenControl.vue
@@ -7,6 +7,7 @@
     <UnnnicIcon
       :icon="icon"
       scheme="neutral-snow"
+      data-testid="control-icon"
     />
   </div>
 </template>
diff --git a/src/components/chats/MediaMessage/Previews/Image.vue b/src/components/chats/MediaMessage/Previews/Image.vue
index 9181ecf5..031bedf6 100644
--- a/src/components/chats/MediaMessage/Previews/Image.vue
+++ b/src/components/chats/MediaMessage/Previews/Image.vue
@@ -5,12 +5,14 @@
       enabled
       :text="tooltip || $t('fullscreen_view')"
       side="right"
+      data-testid="image-preview-tooltip"
     >
       <img
         :src="url"
         :alt="alt"
         :style="{ 'object-fit': objectFit }"
         class="clickable image-preview__image"
+        data-testid="image-preview"
         @click="handleImageClick"
         @keypress.enter="handleImageClick"
       />
diff --git a/src/components/chats/MediaMessage/Previews/Media.vue b/src/components/chats/MediaMessage/Previews/Media.vue
index 64ccf4f0..2884be21 100644
--- a/src/components/chats/MediaMessage/Previews/Media.vue
+++ b/src/components/chats/MediaMessage/Previews/Media.vue
@@ -6,6 +6,7 @@
         icon="button-play-1"
         size="md"
         class="media-preview__video-play-icon"
+        data-testid="play-button"
       />
       <video
         ref="video"
@@ -13,6 +14,7 @@
         :alt="alt"
         class="media-preview__media"
         muted
+        data-testid="media-video"
         @click="handleClick"
         @keypress.enter="handleClick"
       />
@@ -23,6 +25,7 @@
       :src="src"
       :alt="alt"
       class="media-preview__media"
+      data-testid="media-image"
       @click="handleClick"
       @keypress.enter="handleClick"
     />
diff --git a/src/components/chats/MediaMessage/Previews/__tests__/Audio.spec.js b/src/components/chats/MediaMessage/Previews/__tests__/Audio.spec.js
new file mode 100644
index 00000000..3f43edda
--- /dev/null
+++ b/src/components/chats/MediaMessage/Previews/__tests__/Audio.spec.js
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, vi } from 'vitest';
+
+import Audio from '../Audio.vue';
+
+describe('MediaAudioPreview', () => {
+  let wrapper;
+  let playMock;
+  let pauseMock;
+
+  beforeEach(() => {
+    playMock = vi.fn();
+    pauseMock = vi.fn();
+
+    global.Audio = vi.fn(() => ({
+      play: playMock,
+      pause: pauseMock,
+      onended: null,
+      paused: true,
+    }));
+
+    wrapper = mount(Audio, {
+      props: {
+        currentAudio: 'audio-file.mp3',
+      },
+    });
+  });
+
+  it('renders play icon when isTimerPlaying is false', async () => {
+    await wrapper.setData({ isTimerPlaying: false });
+    const playIcon = wrapper.find('[data-testid="play-icon"]');
+    expect(playIcon.exists()).toBe(true);
+    const pauseIcon = wrapper.find('[data-testid="pause-icon"]');
+    expect(pauseIcon.exists()).toBe(false);
+  });
+
+  it('renders pause icon when isTimerPlaying is true', async () => {
+    await wrapper.setData({ isTimerPlaying: true });
+    const pauseIcon = wrapper.find('[data-testid="pause-icon"]');
+    expect(pauseIcon.exists()).toBe(true);
+    const playIcon = wrapper.find('[data-testid="play-icon"]');
+    expect(playIcon.exists()).toBe(false);
+  });
+
+  it('plays audio when play click play icon', async () => {
+    const play = wrapper.find('[data-testid="play"]');
+    await play.trigger('click');
+    expect(global.Audio).toHaveBeenCalledWith('audio-file.mp3');
+  });
+
+  it('pauses audio when pause method is called', async () => {
+    await wrapper.vm.play(); // Start playing first
+    const pause = wrapper.find('[data-testid="pause"]');
+    await pause.trigger('click');
+    expect(pauseMock).toHaveBeenCalled();
+    expect(wrapper.vm.isTimerPlaying).toBe(false);
+  });
+
+  it('resets isTimerPlaying to false when audio ends', async () => {
+    await wrapper.vm.play();
+
+    wrapper.vm.audio.onended();
+    expect(wrapper.vm.isTimerPlaying).toBe(false);
+  });
+});
diff --git a/src/components/chats/MediaMessage/Previews/__tests__/Document.spec.js b/src/components/chats/MediaMessage/Previews/__tests__/Document.spec.js
new file mode 100644
index 00000000..bf5b20cb
--- /dev/null
+++ b/src/components/chats/MediaMessage/Previews/__tests__/Document.spec.js
@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import { beforeAll, beforeEach, describe, expect, vi } from 'vitest';
+
+import Document from '../Document.vue';
+
+describe('DocumentPreview', () => {
+  let wrapper;
+
+  const defaultWindowOpen = window.open;
+
+  beforeEach(() => {
+    window.open = defaultWindowOpen;
+    wrapper = mount(Document, {
+      props: {
+        fullFilename: 'example.pdf',
+        url: 'https://example.com/file.pdf',
+        highlight: false,
+        size: 'md',
+      },
+    });
+  });
+
+  beforeAll(() => {
+    window.open = defaultWindowOpen;
+  });
+
+  it('renders the filename correctly', () => {
+    const filenameElement = wrapper.find('[data-testid="filename"]');
+    expect(filenameElement.text()).toBe('example.pdf');
+  });
+
+  it('renders the correct icon scheme', async () => {
+    const icon = wrapper.findComponent('[data-testid="icon"]');
+    expect(icon.exists()).toBe(true);
+    expect(icon.props().scheme).toBe('neutral-darkest');
+    await wrapper.setProps({ highlight: true });
+    expect(icon.props().scheme).toBe('weni-600');
+  });
+
+  it('emits "download" event when clicked', async () => {
+    window.open = vi.fn();
+    const openFileSpy = vi.spyOn(wrapper.vm, 'openFile');
+    await wrapper.trigger('click');
+    expect(wrapper.emitted('download')).toHaveLength(1);
+    expect(openFileSpy).toHaveBeenCalledWith(wrapper.vm.url);
+    vi.clearAllMocks();
+  });
+
+  it('emits "download" event when clicked', async () => {
+    window.open = vi.fn();
+    await wrapper.trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted('download')).toHaveLength(1);
+  });
+});
diff --git a/src/components/chats/MediaMessage/Previews/__tests__/Fullscreen.spec.js b/src/components/chats/MediaMessage/Previews/__tests__/Fullscreen.spec.js
new file mode 100644
index 00000000..bb7893d5
--- /dev/null
+++ b/src/components/chats/MediaMessage/Previews/__tests__/Fullscreen.spec.js
@@ -0,0 +1,97 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, vi } from 'vitest';
+
+import Fullscreen from '../Fullscreen.vue';
+import FullscreenControl from '../FullscreenControl.vue';
+
+describe('FullscreenPreview', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Fullscreen, {
+      props: {
+        downloadMediaUrl: 'https://example.com/media.jpg',
+        downloadMediaName: 'media.jpg',
+      },
+      global: {
+        components: { FullscreenControl },
+      },
+    });
+  });
+
+  it('emits "close" event when clicking outside', async () => {
+    await wrapper.trigger('click');
+    expect(wrapper.emitted('close')).toHaveLength(1);
+  });
+
+  it('does not emit "close" when clicking inside toolbar or media', async () => {
+    await wrapper.find('[data-testid="toolbar"]').trigger('click');
+    expect(wrapper.emitted('close')).toBeUndefined();
+
+    await wrapper.find('[data-testid="media-container"]').trigger('click');
+    expect(wrapper.emitted('close')).toBeUndefined();
+  });
+
+  it('emits "next" and "previous" events when navigation buttons are clicked', async () => {
+    const nextButton = wrapper.findComponent('[data-testid="next-button"]');
+    const prevButton = wrapper.findComponent('[data-testid="previous-button"]');
+
+    await nextButton.trigger('click');
+    expect(wrapper.emitted('next')).toHaveLength(1);
+
+    await prevButton.trigger('click');
+    expect(wrapper.emitted('previous')).toHaveLength(1);
+  });
+
+  it('toggles zoom state when zoom button is clicked', async () => {
+    const zoomButton = wrapper.findComponent('[data-testid="zoom-button"]');
+
+    expect(wrapper.vm.isZoomed).toBe(false);
+
+    await zoomButton.trigger('click');
+    expect(wrapper.vm.isZoomed).toBe(true);
+
+    await zoomButton.trigger('click');
+    expect(wrapper.vm.isZoomed).toBe(false);
+  });
+
+  it('rotates media when rotate buttons are clicked', async () => {
+    const rotateLeftButton = wrapper.findComponent(
+      '[data-testid="rotate-left-button"]',
+    );
+
+    const rotateRightButton = wrapper.findComponent(
+      '[data-testid="rotate-right-button"]',
+    );
+
+    await rotateLeftButton.trigger('click');
+    expect(wrapper.vm.rotatedDeg).toBe(-90);
+
+    await rotateRightButton.trigger('click');
+    expect(wrapper.vm.rotatedDeg).toBe(0); // resets to initial state
+  });
+
+  it('downloads media when download button is clicked', async () => {
+    const downloadButton = wrapper.findComponent(
+      '[data-testid="download-button"]',
+    );
+
+    const downloadSpy = vi.spyOn(wrapper.vm, 'download');
+
+    await downloadButton.trigger('click');
+
+    expect(downloadSpy).toHaveBeenCalled();
+  });
+
+  it('resets zoom and rotation when navigating', async () => {
+    wrapper.vm.isZoomed = true;
+    wrapper.vm.rotatedDeg = 90;
+
+    const nextButton = wrapper.findComponent('[data-testid="next-button"]');
+
+    await nextButton.trigger('click');
+
+    expect(wrapper.vm.isZoomed).toBe(false);
+    expect(wrapper.vm.rotatedDeg).toBe(0);
+  });
+});
diff --git a/src/components/chats/MediaMessage/Previews/__tests__/FullscreenControl.spec.js b/src/components/chats/MediaMessage/Previews/__tests__/FullscreenControl.spec.js
new file mode 100644
index 00000000..8b22bbd6
--- /dev/null
+++ b/src/components/chats/MediaMessage/Previews/__tests__/FullscreenControl.spec.js
@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect } from 'vitest';
+
+import FullscreenControl from '../FullscreenControl.vue';
+
+describe('FullscreenControl', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(FullscreenControl, {
+      props: {
+        icon: 'fullscreen-enter-1',
+      },
+    });
+  });
+
+  it('renders the icon with the correct props', () => {
+    const icon = wrapper.findComponent('[data-testid="control-icon"]');
+    expect(icon.exists()).toBe(true);
+    expect(icon.props('icon')).toBe('fullscreen-enter-1');
+    expect(icon.props('scheme')).toBe('neutral-snow');
+  });
+
+  it('emits "click" event when clicked', async () => {
+    await wrapper.trigger('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+
+  it('emits "click" event when Enter key is pressed', async () => {
+    await wrapper.trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+});
diff --git a/src/components/chats/MediaMessage/Previews/__tests__/Image.spec.js b/src/components/chats/MediaMessage/Previews/__tests__/Image.spec.js
new file mode 100644
index 00000000..870f9959
--- /dev/null
+++ b/src/components/chats/MediaMessage/Previews/__tests__/Image.spec.js
@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect } from 'vitest';
+
+import Image from '../Image.vue';
+
+describe('ImagePreview', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Image, {
+      props: {
+        url: 'https://example.com/image.png',
+        alt: 'Example image',
+        tooltip: 'View image',
+        objectFit: 'contain',
+        fullscreen: false,
+        fullscreenOnClick: true,
+      },
+    });
+  });
+
+  it('renders the image with the correct attributes', () => {
+    const img = wrapper.find('[data-testid="image-preview"]');
+    expect(img.attributes('src')).toBe('https://example.com/image.png');
+    expect(img.attributes('alt')).toBe('Example image');
+    expect(img.attributes('style')).toContain('object-fit: contain');
+  });
+
+  it('renders the tooltip with the correct text', async () => {
+    const tooltip = wrapper.findComponent(
+      '[data-testid="image-preview-tooltip"]',
+    );
+    expect(tooltip.exists()).toBe(true);
+    expect(tooltip.props('text')).toBe('View image');
+
+    await wrapper.setProps({ tooltip: '' });
+    expect(tooltip.props('text')).toBe(wrapper.vm.$t('fullscreen_view'));
+  });
+
+  it('emits "click" event when the image is clicked', async () => {
+    const img = wrapper.find('[data-testid="image-preview"]');
+    await img.trigger('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+
+  it('sets `isFullscreenByUserClick` to true when `fullscreenOnClick` is enabled and the image is clicked', async () => {
+    const img = wrapper.find('[data-testid="image-preview"]');
+    expect(wrapper.vm.isFullscreenByUserClick).toBe(false);
+    await img.trigger('click');
+    expect(wrapper.vm.isFullscreenByUserClick).toBe(true);
+  });
+
+  it('computes `isFullscreen` correctly when `fullscreen` prop is true', async () => {
+    await wrapper.setProps({ fullscreen: true });
+    expect(wrapper.vm.isFullscreen).toBe(true);
+  });
+
+  it('computes `isFullscreen` correctly when `fullscreenOnClick` is true and image is clicked', async () => {
+    const img = wrapper.find('[data-testid="image-preview"]');
+    await img.trigger('click');
+    expect(wrapper.vm.isFullscreen).toBe(true);
+  });
+
+  it('does not set `isFullscreenByUserClick` when `fullscreenOnClick` is false', async () => {
+    await wrapper.setProps({ fullscreenOnClick: false });
+    const img = wrapper.find('[data-testid="image-preview"]');
+    await img.trigger('click');
+    expect(wrapper.vm.isFullscreenByUserClick).toBe(false);
+  });
+
+  it('handles Enter key press to emit "click"', async () => {
+    const img = wrapper.find('[data-testid="image-preview"]');
+    await img.trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+});
diff --git a/src/components/chats/MediaMessage/Previews/__tests__/Media.spec.js b/src/components/chats/MediaMessage/Previews/__tests__/Media.spec.js
new file mode 100644
index 00000000..40b557dd
--- /dev/null
+++ b/src/components/chats/MediaMessage/Previews/__tests__/Media.spec.js
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect } from 'vitest';
+
+import Media from '../Media.vue';
+
+describe('MediaPreview', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Media, {
+      props: {
+        src: 'https://example.com/media.mp4',
+        alt: 'Example media',
+        isVideo: false,
+      },
+    });
+  });
+
+  it('renders an image when isVideo is false', () => {
+    const img = wrapper.find('[data-testid="media-image"]');
+    expect(img.exists()).toBe(true);
+    expect(img.attributes('src')).toBe('https://example.com/media.mp4');
+    expect(img.attributes('alt')).toBe('Example media');
+
+    const video = wrapper.find('[data-testid="media-video"]');
+    expect(video.exists()).toBe(false);
+  });
+
+  it('renders a video and play icon when isVideo is true', async () => {
+    await wrapper.setProps({ isVideo: true });
+
+    const video = wrapper.find('[data-testid="media-video"]');
+    expect(video.exists()).toBe(true);
+    expect(video.attributes('src')).toBe('https://example.com/media.mp4');
+    expect(video.attributes('alt')).toBe('Example media');
+    const playIcon = wrapper.findComponent('[data-testid="play-button"]');
+    expect(playIcon.exists()).toBe(true);
+  });
+
+  it('emits "click" event when the image is clicked', async () => {
+    const img = wrapper.find('[data-testid="media-image"]');
+    await img.trigger('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+
+  it('emits "click" event when the video is clicked', async () => {
+    await wrapper.setProps({ isVideo: true });
+    const video = wrapper.find('[data-testid="media-video"]');
+    await video.trigger('click');
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+
+  it('emits "click" event when the Enter key is pressed on an image', async () => {
+    const img = wrapper.find('[data-testid="media-image"]');
+    await img.trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+
+  it('emits "click" event when the Enter key is pressed on a video', async () => {
+    await wrapper.setProps({ isVideo: true });
+    const video = wrapper.find('[data-testid="media-video"]');
+    await video.trigger('keypress', { key: 'Enter' });
+    expect(wrapper.emitted('click')).toHaveLength(1);
+  });
+});
diff --git a/src/views/chats/Home/HomeChatModals.vue b/src/views/chats/Home/HomeChatModals.vue
index f923b187..c3305d77 100644
--- a/src/views/chats/Home/HomeChatModals.vue
+++ b/src/views/chats/Home/HomeChatModals.vue
@@ -4,6 +4,7 @@
     :class="{ 'home-chat-modals--mobile': isMobile }"
   >
     <ModalGetChat
+      data-testid="modal-get-chat"
       :showModal="modalsShowing.getChat"
       :title="$t('chats.get_chat_question')"
       :description="
@@ -14,6 +15,7 @@
     />
 
     <UnnnicModal
+      data-testid="modal-assume-chat"
       :text="$t('chats.your_chat_assumed', { contact: assumedChatContactName })"
       :description="
         $t('chats.your_chat_assumed_description', {
@@ -29,6 +31,7 @@
     <ModalCloseChat
       v-if="modalsShowing.closeChat"
       v-model="modalsShowing.closeChat"
+      data-testid="modal-close-chat"
       :room="room"
       @close="closeModal('closeChat')"
     />
@@ -44,6 +47,7 @@
 
     <ModalQuickMessages
       v-if="modalsShowing.quickMessages"
+      data-testid="quick-messages-modal"
       @close="closeModal('quickMessages')"
       @select-quick-message="emitSelectQuickMessage"
     />
diff --git a/src/views/chats/Home/__tests__/HomeChatModals.spec.js b/src/views/chats/Home/__tests__/HomeChatModals.spec.js
index 37457e82..d91ee195 100644
--- a/src/views/chats/Home/__tests__/HomeChatModals.spec.js
+++ b/src/views/chats/Home/__tests__/HomeChatModals.spec.js
@@ -7,7 +7,15 @@ import { beforeEach, describe } from 'vitest';
 
 const createWrapper = ({ store }) => {
   return mount(HomeChatModals, {
-    global: { plugins: [store], stubs: { UnnnicModal: true } },
+    global: {
+      plugins: [store],
+      stubs: {
+        ModalCloseChat: true,
+        ModalGetChat: true,
+        UnnnicModal: true,
+        ModalQuickMessages: true,
+      },
+    },
   });
 };
 
@@ -19,6 +27,7 @@ describe('HomeChatModals.vue', () => {
       initialState: {
         rooms: {
           activeRoom: {
+            uuid: '123',
             contact: {
               name: 'John Doe',
             },
@@ -41,11 +50,45 @@ describe('HomeChatModals.vue', () => {
   it('closes ModalGetChat when closeModal is called', async () => {
     wrapper.vm.openModal('getChat');
     expect(wrapper.vm.modalsShowing.getChat).toBe(true);
-
-    await wrapper.vm.closeModal('getChat');
+    const getChatModal = wrapper.findComponent(
+      '[data-testid="modal-get-chat"]',
+    );
+    getChatModal.vm.$emit('close-modal');
     expect(wrapper.vm.modalsShowing.getChat).toBe(false);
   });
 
+  it('closes assumedChat when close is called', async () => {
+    wrapper.vm.openModal('assumedChat');
+    expect(wrapper.vm.modalsShowing.assumedChat).toBe(true);
+    const assumeChatModal = wrapper.findComponent(
+      '[data-testid="modal-assume-chat"]',
+    );
+    assumeChatModal.vm.$emit('close');
+    expect(wrapper.vm.modalsShowing.assumedChat).toBe(false);
+  });
+
+  it('closes closeChat when close is called', async () => {
+    wrapper.vm.openModal('closeChat');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.modalsShowing.closeChat).toBe(true);
+    const assumeChatModal = wrapper.findComponent(
+      '[data-testid="modal-close-chat"]',
+    );
+    assumeChatModal.vm.$emit('close');
+    expect(wrapper.vm.modalsShowing.assumedChat).toBe(false);
+  });
+
+  it('closes quickMessages when close is called', async () => {
+    wrapper.vm.openModal('quickMessages');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.modalsShowing.quickMessages).toBe(true);
+    const assumeChatModal = wrapper.findComponent(
+      '[data-testid="quick-messages-modal"]',
+    );
+    assumeChatModal.vm.$emit('close');
+    expect(wrapper.vm.modalsShowing.quickMessages).toBe(false);
+  });
+
   it('renders FileUploader and opens it when modalsShowing.fileUploader is true', async () => {
     wrapper.vm.openModal('fileUploader');