From 36b93ca2b7f7254d23e033f6f4bc4e0a8626acd1 Mon Sep 17 00:00:00 2001
From: Eduardo Medeiros <eduardomedeirosrn2@gmail.com>
Date: Tue, 26 Nov 2024 11:56:15 -0300
Subject: [PATCH] tests: add SelectFlow tests

---
 .../chats/FlowsTrigger/SelectFlow.vue         | 11 ++-
 .../FlowsTrigger/__tests__/SelectFlow.spec.js | 74 +++++++++++++++++++
 2 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/chats/FlowsTrigger/__tests__/SelectFlow.spec.js

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/__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'));
+  });
+});