Skip to content

Commit

Permalink
fix(VsCheckbox, VsCheckboxSet): fix before-change input checked bug (#…
Browse files Browse the repository at this point in the history 
…179)
  • Loading branch information
@smithoo
smithoo authored May 14, 2024
1 parent 39f812d commit 422791d
Show file tree
Hide file tree
Showing 23 changed files with 119 additions and 226 deletions.
15 changes: 12 additions & 3 deletions packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
import { VsCheckboxNode } from '@/nodes';
import type { VsCheckboxSetStyleSet } from './types';
import { VsCheckboxStyleSet } from '../vs-checkbox/types';
import type { VsCheckboxStyleSet } from '@/components/vs-checkbox/types';
const name = VsComponent.VsCheckboxSet;
Expand All @@ -90,7 +90,10 @@ export default defineComponent({
},
vertical: { type: Boolean, default: false },
// v-model
modelValue: { type: Array as PropType<any[]>, default: () => [] },
modelValue: {
type: Array as PropType<any[]>,
default: () => [],
},
},
emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'],
expose: ['clear', 'validate'],
Expand Down Expand Up @@ -149,6 +152,11 @@ export default defineComponent({
messages,
rules: allRules,
callbacks: {
onMounted: () => {
if (!inputValue.value) {
inputValue.value = [];
}
},
onClear: () => {
inputValue.value = [];
},
Expand All @@ -160,11 +168,12 @@ 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));
const beforeChangeFn = beforeChange.value;
if (beforeChangeFn) {
const result = await beforeChangeFn(inputValue.value, toValue, option);
if (!result) {
Expand Down
18 changes: 11 additions & 7 deletions packages/vlossom/src/components/vs-checkbox-set/__tests__/vs-checkbox-set.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@ describe('vs-checkbox-set', () => {
});

// when
await wrapper.find('input[value="B"]').setValue(true);
await wrapper.find('input[value="B"]').trigger('click');
await nextTick();

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand All @@ -131,6 +132,7 @@ describe('vs-checkbox-set', () => {

// when
await wrapper.setProps({ modelValue: ['B'] });
await nextTick();

// then
const checked = wrapper.findAll('input').filter((e) => e.element.checked);
Expand Down Expand Up @@ -177,7 +179,8 @@ describe('vs-checkbox-set', () => {
});

// when
await wrapper.find('input[value="b"]').setValue(true);
await wrapper.find('input[value="b"]').trigger('click');
await nextTick();

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand All @@ -197,6 +200,7 @@ describe('vs-checkbox-set', () => {

// when
await wrapper.setProps({ modelValue: ['b'] });
await nextTick();

// then
const checked = wrapper.findAll('input').filter((e) => e.element.checked);
Expand Down Expand Up @@ -241,7 +245,7 @@ describe('vs-checkbox-set', () => {

// when
await nextTick();
await wrapper.find('input[value="A"]').setValue(false);
await wrapper.find('input[value="A"]').trigger('click');

// then
expect(wrapper.vm.computedMessages).toHaveLength(1);
Expand Down Expand Up @@ -278,7 +282,7 @@ describe('vs-checkbox-set', () => {

// when
await nextTick();
await wrapper.find('input[value="A"]').setValue(false);
await wrapper.find('input[value="A"]').trigger('click');

// then
expect(wrapper.vm.validate()).toBe(false);
Expand All @@ -303,7 +307,7 @@ describe('vs-checkbox-set', () => {
});

// when
await wrapper.find('input[value="B"]').setValue(true);
await wrapper.find('input[value="B"]').trigger('click');

// then
expect(beforeChange).toHaveBeenCalledWith(['A'], ['A', 'B'], 'B');
Expand All @@ -321,7 +325,7 @@ describe('vs-checkbox-set', () => {
});

// when
await wrapper.find('input[value="B"]').setValue(true);
await wrapper.find('input[value="B"]').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand All @@ -341,7 +345,7 @@ describe('vs-checkbox-set', () => {
});

// when
await wrapper.find('input[value="B"]').setValue(true);
await wrapper.find('input[value="B"]').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand Down
5 changes: 3 additions & 2 deletions packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default defineComponent({
getInitialValue,
getClearedValue,
getUpdatedValue,
} = useValueMatcher(multiple, modelValue, inputValue, trueValue, falseValue);
} = useValueMatcher(multiple, inputValue, trueValue, falseValue);
function requiredCheck() {
return required.value && !isChecked.value ? 'required' : '';
Expand All @@ -142,8 +142,9 @@ export default defineComponent({
});
async function onToggle(c: boolean) {
const beforeChangeFn = beforeChange.value;
const toValue = getUpdatedValue(c, inputValue.value);
const beforeChangeFn = beforeChange.value;
if (beforeChangeFn) {
const result = await beforeChangeFn(inputValue.value, toValue);
if (!result) {
Expand Down
39 changes: 27 additions & 12 deletions packages/vlossom/src/components/vs-checkbox/__tests__/vs-checkbox.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});

it('modelValue를 업데이트 할 수 있다', async () => {
Expand All @@ -32,12 +33,13 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
expect(updateModelValueEvent).toHaveLength(1);
expect(updateModelValueEvent?.[0][0]).toEqual(true);
expect(wrapper.find('input').element.checked).toBe(true);
});

it('modelValue를 바꿔서 checkbox 값을 업데이트 할 수 있다', async () => {
Expand All @@ -54,6 +56,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});

it('modelValue가 null이면 false로 가공해준다', async () => {
Expand Down Expand Up @@ -88,6 +91,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});

it('checkbox를 true로 업데이트하면 modelValue를 true-value 값으로 업데이트 한다', async () => {
Expand All @@ -102,7 +106,7 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand All @@ -122,12 +126,13 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(false);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
expect(updateModelValueEvent).toHaveLength(1);
expect(updateModelValueEvent?.[0][0]).toEqual('B');
expect(wrapper.find('input').element.checked).toBe(false);
});

it('object 타입 true-value, false-value를 설정할 수 있다', () => {
Expand All @@ -143,6 +148,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});
});

Expand All @@ -161,6 +167,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});

it('인풋 값을 true로 업데이트하면 true-value가 modelValue배열에 포함된다', async () => {
Expand All @@ -175,12 +182,13 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
expect(updateModelValueEvent).toHaveLength(1);
expect(updateModelValueEvent?.[0][0]).toEqual(['A']);
expect(wrapper.find('input').element.checked).toBe(true);
});
});

Expand Down Expand Up @@ -212,12 +220,13 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
expect(updateModelValueEvent).toHaveLength(1);
expect(updateModelValueEvent?.[0][0]).toEqual('A');
expect(wrapper.find('input').element.checked).toBe(true);
});
});

Expand All @@ -237,9 +246,10 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});

it('object array 타입으로 modelValue의 초깃값을 설정할 수 있다', () => {
it('object array 타입으로 modelValue의 초깃값을 설정할 수 있다', async () => {
// given
const wrapper: ReturnType<typeof mountComponent> = mount(VsCheckbox, {
props: {
Expand All @@ -250,8 +260,11 @@ describe('vs-checkbox', () => {
},
});

await nextTick();

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});

it('object array 타입으로 modelValue 를 업데이트 할 수 있다', async () => {
Expand All @@ -266,7 +279,7 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand All @@ -290,6 +303,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(true);
expect(wrapper.vm.isChecked).toBe(true);
});
});

Expand All @@ -311,7 +325,7 @@ describe('vs-checkbox', () => {
await nextTick();

// then
expect(wrapper.find('input').element.checked).toBe(false);
expect(wrapper.vm.isChecked).toBe(false);
expect(wrapper.props('modelValue')).toEqual(['B']);
});
});
Expand All @@ -332,6 +346,7 @@ describe('vs-checkbox', () => {

// then
expect(wrapper.find('input').element.checked).toBe(false);
expect(wrapper.vm.isChecked).toBe(false);
expect(wrapper.props('modelValue')).toBe(false);
});
});
Expand All @@ -350,7 +365,7 @@ describe('vs-checkbox', () => {

// when
await nextTick();
await wrapper.find('input').setValue(false);
await wrapper.find('input').trigger('click');

// then
expect(wrapper.vm.computedMessages).toHaveLength(1);
Expand Down Expand Up @@ -405,7 +420,7 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue('A');
await wrapper.find('input').trigger('click');

// then
expect(beforeChange).toHaveBeenCalledWith('B', 'A');
Expand All @@ -422,7 +437,7 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand All @@ -441,7 +456,7 @@ describe('vs-checkbox', () => {
});

// when
await wrapper.find('input').setValue(true);
await wrapper.find('input').trigger('click');

// then
const updateModelValueEvent = wrapper.emitted('update:modelValue');
Expand Down
2 changes: 1 addition & 1 deletion packages/vlossom/src/components/vs-notice/VsNotice.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { PropType, defineComponent, ref, toRefs, watch, computed } from 'vue';
import { useColorScheme, useStyleSet } from '@/composables';
import { VsComponent, type ColorScheme } from '@/declaration';
import { VsIcon } from '@/icons';
import VsDivider from '../vs-divider/VsDivider.vue';
import VsDivider from '@/components/vs-divider/VsDivider.vue';
import type { VsNoticeStyleSet } from './types';
Expand Down
Loading

0 comments on commit 422791d

Please sign in to comment.