feat(beforeChange): change beforeChange function parameters (#161)

pubg · Apr 11, 2024 · ca64bce · ca64bce
1 parent 8922843
commit ca64bce
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 34 deletions.
diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
@@ -85,7 +85,7 @@ export default defineComponent({
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsCheckboxSetStyleSet> },
         beforeChange: {
-            type: Function as PropType<(checked: boolean, target: any) => Promise<boolean> | null>,
+            type: Function as PropType<(from: any, to: any, option: any) => Promise<boolean> | null>,
             default: null,
         },
         vertical: { type: Boolean, default: false },
@@ -131,10 +131,6 @@ export default defineComponent({
 
         const inputValue = ref(modelValue.value);
 
-        function onClear() {
-            inputValue.value = [];
-        }
-
         const { getOptionLabel, getOptionValue } = useInputOption(
             inputValue,
             options,
@@ -153,7 +149,9 @@ export default defineComponent({
             messages,
             rules: allRules,
             callbacks: {
-                onClear,
+                onClear: () => {
+                    inputValue.value = [];
+                },
             },
         });
 
@@ -163,20 +161,18 @@ export default defineComponent({
 
         async function onToggle(option: any, checked: boolean) {
             const beforeChangeFn = beforeChange.value;
+            const targetOptionValue = getOptionValue(option);
+            const toValue = checked
+                ? [...inputValue.value, targetOptionValue]
+                : inputValue.value.filter((v: any) => !utils.object.isEqual(v, targetOptionValue));
             if (beforeChangeFn) {
-                const result = await beforeChangeFn(isChecked(option), option);
+                const result = await beforeChangeFn(inputValue.value, toValue, option);
                 if (!result) {
                     return;
                 }
             }
 
-            const targetValue = getOptionValue(option);
-
-            if (checked) {
-                inputValue.value = [...inputValue.value, targetValue];
-            } else {
-                inputValue.value = inputValue.value.filter((v: any) => !utils.object.isEqual(v, targetValue));
-            }
+            inputValue.value = toValue;
         }
 
         function onFocus(option: any, e: FocusEvent) {

diff --git a/packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts b/packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VsCheckboxSet from '../VsCheckboxSet.vue';
@@ -286,6 +286,29 @@ describe('vs-checkbox-set', () => {
     });
 
     describe('before change', () => {
+        afterEach(() => {
+            vi.restoreAllMocks();
+        });
+
+        it('beforeChange 함수에 from, to, option 인자가 전달된다', async () => {
+            // given
+            const beforeChange = vi.fn().mockResolvedValue(true);
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsCheckboxSet, {
+                props: {
+                    modelValue: ['A'],
+                    'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+                    options: ['A', 'B', 'C'],
+                    beforeChange,
+                },
+            });
+
+            // when
+            await wrapper.find('input[value="B"]').setValue(true);
+
+            // then
+            expect(beforeChange).toHaveBeenCalledWith(['A'], ['A', 'B'], 'B');
+        });
+
         it('beforeChange 함수가 Promise<true>를 리턴하면 값이 업데이트 된다', async () => {
             // given
             const wrapper: ReturnType<typeof mountComponent> = mount(VsCheckboxSet, {

diff --git a/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue b/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue
@@ -73,7 +73,7 @@ export default defineComponent({
         styleSet: { type: [String, Object] as PropType<string | VsCheckboxStyleSet> },
         ariaLabel: { type: String, default: '' },
         beforeChange: {
-            type: Function as PropType<(value: any) => Promise<boolean> | null>,
+            type: Function as PropType<(from: any, to: any) => Promise<boolean> | null>,
             default: null,
         },
         checked: { type: Boolean, default: false },
@@ -143,14 +143,15 @@ export default defineComponent({
 
         async function onToggle(c: boolean) {
             const beforeChangeFn = beforeChange.value;
+            const toValue = getUpdatedValue(c, inputValue.value);
             if (beforeChangeFn) {
-                const result = await beforeChangeFn(inputValue.value);
+                const result = await beforeChangeFn(inputValue.value, toValue);
                 if (!result) {
                     return;
                 }
             }
 
-            inputValue.value = getUpdatedValue(c, inputValue.value);
+            inputValue.value = toValue;
         }
 
         function onFocus(e: FocusEvent) {

diff --git a/packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts b/packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VsCheckbox from './../VsCheckbox.vue';
@@ -389,6 +389,28 @@ describe('vs-checkbox', () => {
     });
 
     describe('before change', () => {
+        afterEach(() => {
+            vi.restoreAllMocks();
+        });
+
+        it('beforeChange 함수에 from, to 인자가 전달된다', async () => {
+            // given
+            const beforeChange = vi.fn().mockResolvedValue(true);
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsCheckbox, {
+                props: {
+                    trueValue: 'A',
+                    falseValue: 'B',
+                    beforeChange,
+                },
+            });
+
+            // when
+            await wrapper.find('input').setValue('A');
+
+            // then
+            expect(beforeChange).toHaveBeenCalledWith('B', 'A');
+        });
+
         it('beforeChange 함수가 Promise<true>를 리턴하면 값이 업데이트 된다', async () => {
             // given
             const wrapper: ReturnType<typeof mountComponent> = mount(VsCheckbox, {

diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
@@ -83,7 +83,7 @@ export default defineComponent({
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsRadioSetStyleSet> },
         beforeChange: {
-            type: Function as PropType<(option: any) => Promise<boolean> | null>,
+            type: Function as PropType<(from: any, to: any, option: any) => Promise<boolean> | null>,
             default: null,
         },
         name: { type: String, required: true },
@@ -156,15 +156,17 @@ export default defineComponent({
         });
 
         async function onToggle(option: any) {
+            // radio change event value is always true
             const beforeChangeFn = beforeChange.value;
+            const toValue = getOptionValue(option);
             if (beforeChangeFn) {
-                const result = await beforeChangeFn(option);
+                const result = await beforeChangeFn(inputValue.value, toValue, option);
                 if (!result) {
                     return;
                 }
             }
 
-            inputValue.value = getOptionValue(option);
+            inputValue.value = toValue;
         }
 
         function onFocus(option: any, e: FocusEvent) {

diff --git a/packages/vlossom/src/components/vs-radio-set/__tests__/vs-radio-set.test.ts b/packages/vlossom/src/components/vs-radio-set/__tests__/vs-radio-set.test.ts
@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VsRadioSet from './../VsRadioSet.vue';
@@ -327,6 +327,26 @@ describe('vs-radio-set', () => {
     });
 
     describe('before change', () => {
+        it('beforeChange 함수에 from, to 인자가 전달된다 ', async () => {
+            // given
+            const beforeChange = vi.fn().mockResolvedValue(true);
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsRadioSet, {
+                props: {
+                    name: 'radio',
+                    modelValue: 'A',
+                    'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+                    options: ['A', 'B', 'C'],
+                    beforeChange,
+                },
+            });
+
+            // when
+            await wrapper.find('input[value="C"]').trigger('change');
+
+            // then
+            expect(beforeChange).toHaveBeenCalledWith('A', 'C', 'C');
+        });
+
         it('beforeChange 함수가 Promise<true>를 리턴하면 값이 업데이트 된다', async () => {
             // given
             const wrapper: ReturnType<typeof mountComponent> = mount(VsRadioSet, {

diff --git a/packages/vlossom/src/components/vs-radio/VsRadio.vue b/packages/vlossom/src/components/vs-radio/VsRadio.vue
@@ -65,7 +65,7 @@ export default defineComponent({
         styleSet: { type: [String, Object] as PropType<string | VsRadioStyleSet> },
         ariaLabel: { type: String, default: '' },
         beforeChange: {
-            type: Function as PropType<(value: any) => Promise<boolean> | null>,
+            type: Function as PropType<(from: any, to: any) => Promise<boolean> | null>,
             default: null,
         },
         checked: { type: Boolean, default: false },
@@ -131,16 +131,17 @@ export default defineComponent({
         });
 
         async function onToggle() {
-            // radio changed value is always true
+            // radio change event value is always true
             const beforeChangeFn = beforeChange.value;
+            const toValue = radioValue.value;
             if (beforeChangeFn) {
-                const result = await beforeChangeFn(inputValue.value);
+                const result = await beforeChangeFn(inputValue.value, toValue);
                 if (!result) {
                     return;
                 }
             }
 
-            inputValue.value = radioValue.value;
+            inputValue.value = toValue;
         }
 
         function onFocus(e: FocusEvent) {

diff --git a/packages/vlossom/src/components/vs-radio/__tests__/vs-radio.test.ts b/packages/vlossom/src/components/vs-radio/__tests__/vs-radio.test.ts
@@ -1,4 +1,4 @@
-import { beforeEach, afterEach, describe, expect, it } from 'vitest';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VsRadio from './../VsRadio.vue';
@@ -274,6 +274,10 @@ describe('vs-radio (multiple inputs)', () => {
         });
     });
 
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
     it('처음에는 아무 radio도 선택되어 있지 않다', () => {
         // then
         expect(radio1.vm.isChecked).toBe(false);
@@ -334,4 +338,24 @@ describe('vs-radio (multiple inputs)', () => {
         expect(radio2.vm.computedMessages).toHaveLength(1);
         expect(radio2.html()).toContain('required');
     });
+
+    it('beforeChange 함수에 from, to 인자가 전달된다 ', async () => {
+        // given
+        const beforeChange = vi.fn().mockResolvedValue(true);
+        const radio3: ReturnType<typeof mountComponent> = mount(VsRadio, {
+            props: {
+                name: 'radio',
+                radioValue: 'C',
+                modelValue: 'A',
+                'onUpdate:modelValue': (e) => radio3.setProps({ modelValue: e }),
+                beforeChange,
+            },
+        });
+
+        // when
+        await radio3.find('input').trigger('change');
+
+        // then
+        expect(beforeChange).toHaveBeenCalledWith('A', 'C');
+    });
 });
diff --git a/packages/vlossom/src/components/vs-switch/VsSwitch.vue b/packages/vlossom/src/components/vs-switch/VsSwitch.vue
@@ -90,7 +90,7 @@ export default defineComponent({
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsSwitchStyleSet> },
         beforeChange: {
-            type: Function as PropType<(value: any) => Promise<boolean> | null>,
+            type: Function as PropType<(from: any, to: any) => Promise<boolean> | null>,
             default: null,
         },
         multiple: { type: Boolean, default: false },
@@ -164,14 +164,15 @@ export default defineComponent({
             }
 
             const beforeChangeFn = beforeChange.value;
+            const toValue = getUpdatedValue(!isChecked.value, inputValue.value);
             if (beforeChangeFn) {
-                const result = await beforeChangeFn(inputValue.value);
+                const result = await beforeChangeFn(inputValue.value, toValue);
                 if (!result) {
                     return;
                 }
             }
 
-            inputValue.value = getUpdatedValue(!isChecked.value, inputValue.value);
+            inputValue.value = toValue;
         }
 
         function onFocus(e: FocusEvent) {

diff --git a/packages/vlossom/src/components/vs-switch/__tests__/vs-switch.test.ts b/packages/vlossom/src/components/vs-switch/__tests__/vs-switch.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VsSwitch from '../VsSwitch.vue';
@@ -544,6 +544,28 @@ describe('vs-switch', () => {
     });
 
     describe('before change', () => {
+        afterEach(() => {
+            vi.restoreAllMocks();
+        });
+
+        it('beforeChange 함수에 from, to 인자가 전달된다', async () => {
+            // given
+            const beforeChange = vi.fn().mockResolvedValue(true);
+            const wrapper: ReturnType<typeof mountComponent> = mount(VsSwitch, {
+                props: {
+                    modelValue: false,
+                    'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+                    beforeChange,
+                },
+            });
+
+            // when
+            await wrapper.find('input').setValue(true);
+
+            // then
+            expect(beforeChange).toHaveBeenCalledWith(false, true);
+        });
+
         it('beforeChange 함수가 Promise<true>를 리턴하면 값이 업데이트 된다', async () => {
             // given
             const wrapper: ReturnType<typeof mountComponent> = mount(VsSwitch, {

diff --git a/packages/vlossom/src/composables/input-option-composable.ts b/packages/vlossom/src/composables/input-option-composable.ts
@@ -43,8 +43,11 @@ export function useInputOption(
         if (utils.object.isPlainObject(option) && optionValue.value) {
             const value = _.at(option, [optionValue.value])[0];
 
-            if (!value) {
-                console.error(`optionValue: ${optionValue.value} is not found in option: ${JSON.stringify(option)}`);
+            if (value === undefined || value === null) {
+                logUtil.logError(
+                    'optionValue',
+                    `${optionValue.value} is not found in option: ${JSON.stringify(option)}`,
+                );
             }
 
             return value;