From 3e155828e4a52fbf44d8e6eea45ff0bbde4b2f8c Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 2 Mar 2026 17:03:50 +0000 Subject: [PATCH 1/2] refactor: improve DropdownButton API to use item IDs in events Refactor the DropdownButton component to move away from a fragile, label-based event emission to a more robust, ID-based approach. - Update `items` prop to expect objects with `id`, `label`, and `icon`. - Modify `action-click` event to emit only the `id` of the selected item. - Update documentation and examples to reflect the new API. - Add unit tests for the updated component behavior. Co-authored-by: geidsonc <9142676+geidsonc@users.noreply.github.com> --- docs/components/display/dropdown-button.md | 9 +++-- src/components/DropdownButton.vue | 16 ++++---- src/tests/DropdownButton.spec.ts | 45 ++++++++++++++++++++++ 3 files changed, 59 insertions(+), 11 deletions(-) create mode 100644 src/tests/DropdownButton.spec.ts diff --git a/docs/components/display/dropdown-button.md b/docs/components/display/dropdown-button.md index e341c8fb..8d3b81ba 100644 --- a/docs/components/display/dropdown-button.md +++ b/docs/components/display/dropdown-button.md @@ -68,15 +68,18 @@ const events = [ const items = ref([ { - name: 'Cancelar solicitação', + id: 'cancelar', + label: 'Cancelar solicitação', icon: 'block-outline', }, { - name: 'Indeferir solicitação', + id: 'indeferir', + label: 'Indeferir solicitação', icon: 'alert-outline', }, { - name: 'Deferir solicitação', + id: 'deferir', + label: 'Deferir solicitação', icon: 'check-outline', }, ]); diff --git a/src/components/DropdownButton.vue b/src/components/DropdownButton.vue index f12c9e75..f9edd27a 100644 --- a/src/components/DropdownButton.vue +++ b/src/components/DropdownButton.vue @@ -30,7 +30,7 @@ >
- {{ item.name }} + {{ item.label }}
@@ -76,9 +76,9 @@ const emits = defineEmits([ const props = defineProps({ /** - * Define a lista dos itens do DropdownButton a serem - * mostrados. Os itens da lista devem ser - * objetos com path ou route, e com uma label + * Define a lista dos itens do DropdownButton a serem mostrados. + * Os itens da lista devem ser objetos contendo as chaves: + * `id`, `label` e `icon`. */ items: { type: Array, @@ -203,9 +203,9 @@ function hide() { isActive.value = false; } -function handleOptionClick(actionName, index) { +function handleOptionClick(item) { isActive.value = !isActive.value; - emits('action-click', [actionName, index]); + emits('action-click', item.id); } function closeDropdownButton(event) { diff --git a/src/tests/DropdownButton.spec.ts b/src/tests/DropdownButton.spec.ts new file mode 100644 index 00000000..e0e9e87f --- /dev/null +++ b/src/tests/DropdownButton.spec.ts @@ -0,0 +1,45 @@ +import { describe, test, expect } from 'vitest'; +import { mount } from '@vue/test-utils'; +import DropdownButton from '../components/DropdownButton.vue'; + +describe('DropdownButton', () => { + test('renders correctly and emits event with id when an option is clicked', async () => { + const items = [ + { id: 'opt-1', label: 'Option 1', icon: 'box-outline' }, + { id: 'opt-2', label: 'Option 2', icon: 'box-outline' }, + ]; + const wrapper = mount(DropdownButton, { + props: { + items, + text: 'Click me', + }, + global: { + stubs: { + CdsIcon: true, + CdsChevron: true, + CdsButton: { + template: '' + } + }, + directives: { + cdstip: () => {} + } + } + }); + + // Open dropdown + await wrapper.find('button').trigger('click'); + expect(wrapper.vm.isActive).toBe(true); + + // Find options + const options = wrapper.findAll('.dropdown__container'); + expect(options.length).toBe(2); + + // Click first option + await options[0].trigger('click'); + + // Check event + expect(wrapper.emitted('action-click')).toBeTruthy(); + expect(wrapper.emitted('action-click')[0]).toEqual(['opt-1']); + }); +}); From f5405571656052babe9357c58542d04b680d1f90 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 2 Mar 2026 17:09:33 +0000 Subject: [PATCH 2/2] refactor: improve DropdownButton API and fix DateInput test CI failure Refactor DropdownButton component to use a more robust, ID-based API for items and events, suitable for the next major version. Also, fix a non-deterministic CI failure in DateInput tests by mocking the system time. DropdownButton changes: - Update `items` prop to expect objects with `id`, `label`, and `icon`. - Modify `action-click` event to emit only the `id` of the selected item. - Update documentation and examples to reflect the new API. - Add unit tests for the updated component behavior in `src/tests/DropdownButton.spec.ts`. CI fix: - Fix non-deterministic snapshot mismatch in `src/tests/DateInput.spec.js` by using `vi.useFakeTimers()` and `vi.setSystemTime()` to fix the date to 2026-02-01. Co-authored-by: geidsonc <9142676+geidsonc@users.noreply.github.com> --- src/tests/DateInput.spec.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/tests/DateInput.spec.js b/src/tests/DateInput.spec.js index 7e52790b..9d36b65c 100644 --- a/src/tests/DateInput.spec.js +++ b/src/tests/DateInput.spec.js @@ -1,12 +1,20 @@ -import { describe, test, expect, beforeEach, vi } from 'vitest'; +import { describe, test, expect, beforeEach, beforeAll, afterAll, vi } from 'vitest'; import { mount } from '@vue/test-utils'; import DateInput from '../components/DateInput.vue'; // Ajuste o caminho conforme necessário import CdsBaseInput from '../components/BaseInput.vue'; -import { DateTime } from 'luxon'; describe('DateInput', () => { let wrapper; + beforeAll(() => { + vi.useFakeTimers(); + vi.setSystemTime(new Date('2026-02-01')); + }); + + afterAll(() => { + vi.useRealTimers(); + }); + beforeEach(() => { wrapper = mount(DateInput, { props: {