-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(FE:FSADT1-772): updating radio to use new component
- Loading branch information
1 parent
54a218e
commit fef4ff2
Showing
5 changed files
with
191 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <template> | ||
| <b-form-group label="Choose one these options:" v-slot="{ ariaDescribedby}"> | ||
| <b-form-radio v-for="(option, index) in modelValue" :key="index" | ||
| v-model="selectedValue" | ||
| :id="id+'_'+option.value" | ||
| :value="option.value" | ||
| :name="option.text" | ||
| :aria-describedby="ariaDescribedby" | ||
| @change="validateInput" | ||
| >{{ option.text }}</b-form-radio> | ||
| </b-form-group> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref, watch } from "vue"; | ||
| import { CodeDescrType, isEmpty } from "@/core/CommonTypes"; | ||
| const props = defineProps({ | ||
| id: { type: String, required: true }, | ||
| modelValue: { | ||
| type: Array as () => CodeDescrType[], | ||
| required: true, | ||
| }, | ||
| validations: { type: Array<Function>, required: true }, | ||
| }); | ||
| //Events we emit during component lifecycle | ||
| const emit = defineEmits<{ | ||
| (e: "error", value: string): void; | ||
| (e: "empty", value: boolean): void; | ||
| (e: "update:modelValue", value: Object): void; | ||
| }>(); | ||
| const selectedValue = ref({}); | ||
| //We initialize the error message handling for validation | ||
| const error = ref<string | undefined>(""); | ||
| //We call all the validations | ||
| const validateInput = () => { | ||
| if (props.validations) { | ||
| error.value = props.validations | ||
| .map((validation) => validation(selectedValue.value)) | ||
| .filter((errorMessage) => { | ||
| if (errorMessage) return true; | ||
| return false; | ||
| }) | ||
| .shift() ?? ""; | ||
| } | ||
| emit("empty", isEmpty(selectedValue)); | ||
| }; | ||
| //We watch for input changes to emit events | ||
| watch(selectedValue, () => { | ||
| if (error.value) { | ||
| error.value = ""; | ||
| } | ||
| emit("update:modelValue", | ||
| props.modelValue.find((entry) => entry.value === selectedValue.value) | ||
| ); | ||
| }); | ||
| //We watch for error changes to emit events | ||
| watch(error, () => emit("error", error.value)); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
frontend/src/tests/unittests/components/forms/RadioInputComponent.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { describe, it, expect } from 'vitest'; | ||
|
|
||
| import { mount } from "@vue/test-utils"; | ||
| import RadioInputComponent from '@/components/forms/RadioInputComponent.vue'; | ||
|
|
||
| describe("Radio Input Component", () => { | ||
|
|
||
| const id = "my-input"; | ||
| const values = [ | ||
| { value: 'A', text: 'First' }, { value: 'B', text: 'Second' } | ||
| ]; | ||
| const validations = [(value: any) => (value && value === 'A' ? "Can't select A" : "")]; | ||
|
|
||
| it("renders the input field with the provided id", () => { | ||
|
|
||
| const wrapper = mount(RadioInputComponent, { | ||
| props: { | ||
| id, | ||
| modelValue: values, | ||
| validations: [], | ||
| }, | ||
| }); | ||
|
|
||
| expect(wrapper.find(`#${id}_A`).exists()).toBe(true); | ||
| expect(wrapper.find(`#${id}_B`).exists()).toBe(true); | ||
| }); | ||
|
|
||
| it('emits the "error" event when there is a validation error', async () => { | ||
|
|
||
| const wrapper = mount(RadioInputComponent, { | ||
| props: { | ||
| id, | ||
| modelValue: values, | ||
| validations, | ||
| }, | ||
| }); | ||
|
|
||
| await wrapper.find('input[type=radio][value=A]').setValue(); | ||
| await wrapper.find('input[type=radio][value=A]').trigger('change'); | ||
|
|
||
| const event = wrapper.emitted("error"); | ||
|
|
||
| expect(event).toBeTruthy(); | ||
| expect(event).toHaveLength(1); | ||
| expect(event[0][0]).toBe("Can't select A"); | ||
| }); | ||
|
|
||
| it('emits the "update" event when selected', async () => { | ||
|
|
||
| const wrapper = mount(RadioInputComponent, { | ||
| props: { | ||
| id, | ||
| modelValue: values, | ||
| validations, | ||
| }, | ||
| }); | ||
|
|
||
| await wrapper.find('input[type=radio][value=B]').setValue(); | ||
| await wrapper.find('input[type=radio][value=B]').trigger('change'); | ||
|
|
||
| const event = wrapper.emitted("update:modelValue"); | ||
| expect(event).toBeTruthy(); | ||
| expect(event).toHaveLength(1); | ||
| expect(event[0]).toStrictEqual([{ value: 'B', text: 'Second' }]); | ||
| }); | ||
|
|
||
| it('emits the "error" then no error', async () => { | ||
|
|
||
| const wrapper = mount(RadioInputComponent, { | ||
| props: { | ||
| id, | ||
| modelValue: values, | ||
| validations, | ||
| }, | ||
| }); | ||
|
|
||
| await wrapper.find('input[type=radio][value=A]').setValue(); | ||
| await wrapper.find('input[type=radio][value=A]').trigger('change'); | ||
|
|
||
| const errorEvent = wrapper.emitted("error"); | ||
| const updateEvent = wrapper.emitted("update:modelValue"); | ||
|
|
||
| expect(errorEvent).toBeTruthy(); | ||
| expect(errorEvent).toHaveLength(1); | ||
| expect(errorEvent[0][0]).toBe("Can't select A"); | ||
|
|
||
| expect(updateEvent).toBeTruthy(); | ||
| expect(updateEvent).toHaveLength(1); | ||
| expect(updateEvent[0]).toStrictEqual([{ value: 'A', text: 'First' }]); | ||
|
|
||
| await wrapper.find('input[type=radio][value=B]').setValue(); | ||
| await wrapper.find('input[type=radio][value=B]').trigger('change'); | ||
|
|
||
| expect(errorEvent).toHaveLength(2); | ||
| expect(errorEvent[0][1]).toBeUndefined() | ||
|
|
||
| expect(updateEvent).toHaveLength(2); | ||
| expect(updateEvent[1]).toStrictEqual([{ value: 'B', text: 'Second' }]); | ||
|
|
||
| }); | ||
| }); |