diff --git a/docs/.docgen/components-metadata.json b/docs/.docgen/components-metadata.json index 00d75c70..118084e2 100644 --- a/docs/.docgen/components-metadata.json +++ b/docs/.docgen/components-metadata.json @@ -10679,13 +10679,15 @@ ] }, "CdsSegmentedControl": { - "displayName": "CdsSegmentedControl", + "name": "CdsSegmentedControl", "exportName": "default", + "displayName": "SegmentedControl", "description": "", "tags": {}, "props": [ { "name": "segments", + "description": "Array de strings que serão exibidos como opções do componente.", "type": { "name": "array" }, @@ -10696,6 +10698,7 @@ }, { "name": "withIcon", + "description": "Se verdadeiro, exibe ícones no lugar de texto.", "type": { "name": "boolean" }, @@ -10706,6 +10709,7 @@ }, { "name": "segmentsTooltipText", + "description": "Array de strings que serão exibidos como tooltip quando o mouse estiver sobre o ícone.", "type": { "name": "array" }, @@ -10718,21 +10722,7 @@ "events": [ { "name": "click", - "type": { - "names": [ - "undefined" - ] - }, - "properties": [ - { - "type": { - "names": [ - "undefined" - ] - }, - "name": "" - } - ] + "description": "Evento emitido quando o componente é clicado." } ], "sourceFiles": [ diff --git "a/docs/components/navega\303\247\303\243o/segmented-control.md" "b/docs/components/navega\303\247\303\243o/segmented-control.md" index 3ec7a87e..72243b50 100644 --- "a/docs/components/navega\303\247\303\243o/segmented-control.md" +++ "b/docs/components/navega\303\247\303\243o/segmented-control.md" @@ -6,8 +6,18 @@ SegmentedControls são componentes que permitem que o usuário visualize versõe ## Uso +### Texto ```js +``` + +### Ícone +```js + @@ -28,48 +28,69 @@ - \ No newline at end of file + diff --git a/src/tests/SegmentedControlVModel.spec.ts b/src/tests/SegmentedControlVModel.spec.ts new file mode 100644 index 00000000..f9dfeafd --- /dev/null +++ b/src/tests/SegmentedControlVModel.spec.ts @@ -0,0 +1,64 @@ +import { describe, test, expect } from 'vitest'; +import SegmentedControl from '../components/SegmentedControl.vue'; +import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; + +describe('SegmentedControl v-model', () => { + test('should respect initial modelValue', async () => { + const wrapper = mount(SegmentedControl, { + props: { + segments: ['Segment 1', 'Segment 2'], + modelValue: 'Segment 2', + }, + }); + + const activeButtons = wrapper.findAll('.segment-control__button--active'); + expect(activeButtons.length).toBe(1); + expect(activeButtons[0].text()).toBe('Segment 2'); + }); + + test('should update modelValue when a segment is clicked', async () => { + const wrapper = mount(SegmentedControl, { + props: { + segments: ['Segment 1', 'Segment 2'], + modelValue: 'Segment 1', + 'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }), + }, + }); + + const buttons = wrapper.findAll('.segment-control__button'); + await buttons[1].trigger('click'); + + expect(wrapper.emitted('update:modelValue')).toBeTruthy(); + expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Segment 2']); + }); + + test('should default to the first segment if no modelValue is provided', async () => { + const wrapper = mount(SegmentedControl, { + props: { + segments: ['Segment 1', 'Segment 2'], + }, + }); + + await nextTick(); + + const activeButtons = wrapper.findAll('.segment-control__button--active'); + expect(activeButtons.length).toBe(1); + expect(activeButtons[0].text()).toBe('Segment 1'); + }); + + test('should still emit click event when a segment is clicked', async () => { + const wrapper = mount(SegmentedControl, { + props: { + segments: ['Segment 1', 'Segment 2'], + modelValue: 'Segment 1', + }, + }); + + const buttons = wrapper.findAll('.segment-control__button'); + await buttons[1].trigger('click'); + + expect(wrapper.emitted('click')).toBeTruthy(); + expect(wrapper.emitted('click')![0]).toEqual(['Segment 2', 1]); + }); +});