forked from IDuxFE/idux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp: checkbox): add checkbox component
fix IDuxFE#120
- Loading branch information
1 parent
b4f21c8
commit ddab3d8
Showing
25 changed files
with
1,234 additions
and
178 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
packages/components/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap
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,3 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Checkbox.vue render work 1`] = `"<label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" truevalue=\\"true\\" falsevalue=\\"false\\"></span><span class=\\"ix-checkbox-label\\">option</span></label>"`; |
3 changes: 3 additions & 0 deletions
3
packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap
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,3 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`CheckboxGroup.vue and Checkbox.vue render work 1`] = `"<div class=\\"ix-checkbox-group\\" role=\\"group\\" aria-label=\\"checkbox-group\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option1\\"></span><span class=\\"ix-checkbox-label\\"> option1 </span></label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option2\\"></span><span class=\\"ix-checkbox-label\\"> option2 </span></label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option3\\"></span><span class=\\"ix-checkbox-label\\"> option3 </span></label></div>"`; |
158 changes: 158 additions & 0 deletions
158
packages/components/checkbox/__tests__/checkbox.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,158 @@ | ||
import { mount } from '@vue/test-utils' | ||
import { ref, nextTick } from 'vue' | ||
import IxCheckbox from '../src/Checkbox.vue' | ||
|
||
describe('Checkbox.vue', () => { | ||
test('render work', () => { | ||
const checked = ref(false) | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox v-model:checked="checked">option</ix-checkbox>`, | ||
setup() { | ||
return { checked } | ||
}, | ||
}) | ||
expect(wrapper.html()).toMatchSnapshot() | ||
}) | ||
|
||
test('checked(v-model) work', async () => { | ||
const checked = ref(false) | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox v-model:checked="checked">option</ix-checkbox>`, | ||
setup() { | ||
return { checked } | ||
}, | ||
}) | ||
|
||
expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(false) | ||
|
||
checked.value = true | ||
|
||
await nextTick() | ||
expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(true) | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(checked.value).toBe(false) | ||
expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(false) | ||
}) | ||
|
||
test('no checked(v-model) work', async () => { | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox>option</ix-checkbox>`, | ||
}) | ||
|
||
expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(false) | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(true) | ||
}) | ||
|
||
test('trueValue and falseValue work', async () => { | ||
const checked = ref('yes') | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox v-model:checked="checked" trueValue="yes" falseValue="no">option</ix-checkbox>`, | ||
setup() { | ||
return { checked } | ||
}, | ||
}) | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(checked.value).toBe('no') | ||
}) | ||
|
||
test('disabled work', async () => { | ||
const checked = ref(true) | ||
const disabled = ref(true) | ||
const mockFn = jest.fn() | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox v-model:checked="checked" :disabled="disabled" @change="mockFn">option</ix-checkbox>`, | ||
setup() { | ||
return { checked, disabled, mockFn } | ||
}, | ||
}) | ||
|
||
expect(wrapper.classes()).toContain('ix-checkbox-disabled') | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(wrapper.classes()).toContain('ix-checkbox-disabled') | ||
expect(checked.value).toBe(true) | ||
expect(mockFn).toBeCalledTimes(0) | ||
|
||
disabled.value = false | ||
|
||
await nextTick() | ||
|
||
expect(wrapper.classes()).not.toContain('ix-checkbox-disabled') | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(checked.value).toBe(false) | ||
expect(mockFn).toBeCalledTimes(1) | ||
}) | ||
|
||
test('indeterminate work', async () => { | ||
const checked = ref(true) | ||
const indeterminate = ref(true) | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox v-model:checked="checked" :indeterminate="indeterminate">option</ix-checkbox>`, | ||
setup() { | ||
return { checked, indeterminate } | ||
}, | ||
}) | ||
|
||
expect(wrapper.classes()).toContain('ix-checkbox-indeterminate') | ||
expect(wrapper.classes()).not.toContain('ix-checkbox-checked') | ||
|
||
indeterminate.value = false | ||
|
||
await nextTick() | ||
|
||
expect(wrapper.classes()).not.toContain('ix-checkbox-indeterminate') | ||
expect(wrapper.classes()).toContain('ix-checkbox-checked') | ||
}) | ||
|
||
test('change event work', async () => { | ||
const checked = ref(true) | ||
const mockFn = jest.fn() | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox v-model:checked="checked" @change="mockFn">option</ix-checkbox>`, | ||
setup() { | ||
return { checked, mockFn } | ||
}, | ||
}) | ||
|
||
expect(mockFn).toBeCalledTimes(0) | ||
|
||
await wrapper.trigger('click') | ||
|
||
expect(mockFn).toBeCalledTimes(1) | ||
}) | ||
|
||
test('original checkbox attributes work', async () => { | ||
const wrapper = mount({ | ||
components: { IxCheckbox }, | ||
template: `<ix-checkbox name="checkboxName" value="checkboxValue" tabindex="1">option</ix-checkbox>`, | ||
}) | ||
|
||
const checkboxWrapper = wrapper.find('.ix-checkbox') | ||
const originalInput = wrapper.find("input[type='checkbox']") | ||
const input = wrapper.find('.ix-checkbox-inner') | ||
|
||
expect(checkboxWrapper.attributes()['name']).not.toBeDefined() | ||
expect(checkboxWrapper.attributes()['value']).not.toBeDefined() | ||
expect(checkboxWrapper.attributes()['tabindex']).not.toBeDefined() | ||
expect(originalInput.attributes()['name']).toEqual('checkboxName') | ||
expect(originalInput.attributes()['value']).toEqual('checkboxValue') | ||
expect(input.attributes()['tabindex']).toEqual('1') | ||
}) | ||
}) |
148 changes: 148 additions & 0 deletions
148
packages/components/checkbox/__tests__/checkboxGroup.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,148 @@ | ||
import { mount } from '@vue/test-utils' | ||
import CheckboxGroup from '../src/CheckboxGroup.vue' | ||
import Checkbox from '../src/Checkbox.vue' | ||
import { nextTick, Ref, ref } from 'vue' | ||
|
||
describe('CheckboxGroup.vue and Checkbox.vue', () => { | ||
test('render work', () => { | ||
const wrapper = mount({ | ||
components: { CheckboxGroup, Checkbox }, | ||
template: ` | ||
<checkbox-group> | ||
<checkbox value="option1"> option1 </checkbox> | ||
<checkbox value="option2"> option2 </checkbox> | ||
<checkbox value="option3"> option3 </checkbox> | ||
</checkbox-group> | ||
`, | ||
}) | ||
expect(wrapper.findAll('.ix-checkbox').length).toBe(3) | ||
expect(wrapper.html()).toMatchSnapshot() | ||
}) | ||
|
||
test('value(v-model) work', async () => { | ||
const value = ref([]) as Ref<string[]> | ||
const wrapper = mount({ | ||
components: { CheckboxGroup, Checkbox }, | ||
template: ` | ||
<checkbox-group v-model:value="value"> | ||
<checkbox value="option1"> option1 </checkbox> | ||
<checkbox value="option2"> option2 </checkbox> | ||
<checkbox value="option3"> option3 </checkbox> | ||
</checkbox-group> | ||
`, | ||
setup() { | ||
return { value } | ||
}, | ||
}) | ||
|
||
expect(wrapper.findAll('.ix-checkbox-checked').length).toBe(0) | ||
|
||
value.value = ['option1'] | ||
|
||
await nextTick() | ||
|
||
expect(wrapper.findAllComponents({ name: 'IxCheckbox' })[0].classes()).toContain('ix-checkbox-checked') | ||
|
||
await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click') | ||
|
||
expect(value.value).toEqual([]) | ||
}) | ||
|
||
test('no value(v-model) work', async () => { | ||
const wrapper = mount({ | ||
components: { CheckboxGroup, Checkbox }, | ||
template: ` | ||
<checkbox-group> | ||
<checkbox value="option1"> option1 </checkbox> | ||
<checkbox value="option2"> option2 </checkbox> | ||
<checkbox value="option3"> option3 </checkbox> | ||
</checkbox-group> | ||
`, | ||
setup() { | ||
return {} | ||
}, | ||
}) | ||
|
||
expect(wrapper.findAll('.ix-checkbox-checked').length).toBe(0) | ||
|
||
await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click') | ||
|
||
expect(wrapper.findAllComponents({ name: 'IxCheckbox' })[0].classes()).toContain('ix-checkbox-checked') | ||
}) | ||
|
||
test('change event work', async () => { | ||
const mockFn = jest.fn() | ||
const wrapper = mount({ | ||
components: { CheckboxGroup, Checkbox }, | ||
template: ` | ||
<checkbox-group @change="mockFn"> | ||
<checkbox value="option1"> option1 </checkbox> | ||
<checkbox value="option2"> option2 </checkbox> | ||
<checkbox value="option3"> option3 </checkbox> | ||
</checkbox-group> | ||
`, | ||
setup() { | ||
return { mockFn } | ||
}, | ||
}) | ||
|
||
expect(mockFn).toBeCalledTimes(0) | ||
|
||
await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click') | ||
|
||
expect(mockFn).toBeCalledTimes(1) | ||
}) | ||
|
||
test('disabled work', async () => { | ||
const value = ref([]) as Ref<string[]> | ||
const disabled = ref(true) | ||
const mockFn = jest.fn() | ||
const wrapper = mount({ | ||
components: { CheckboxGroup, Checkbox }, | ||
template: ` | ||
<checkbox-group v-model:value="value" :disabled="disabled" @change="mockFn"> | ||
<checkbox value="option1"> option1 </checkbox> | ||
<checkbox value="option2"> option2 </checkbox> | ||
<checkbox value="option3"> option3 </checkbox> | ||
</checkbox-group> | ||
`, | ||
setup() { | ||
return { value, disabled, mockFn } | ||
}, | ||
}) | ||
|
||
expect(wrapper.findAll('.ix-checkbox-disabled').length).toBe(3) | ||
await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click') | ||
expect(value.value).toEqual([]) | ||
expect(mockFn).toBeCalledTimes(0) | ||
|
||
disabled.value = false | ||
|
||
await nextTick() | ||
|
||
expect(wrapper.findAll('.ix-checkbox-disabled').length).toBe(0) | ||
|
||
await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click') | ||
expect(value.value).toEqual(['option1']) | ||
expect(mockFn).toBeCalledTimes(1) | ||
}) | ||
|
||
test('name work', async () => { | ||
const wrapper = mount({ | ||
components: { CheckboxGroup, Checkbox }, | ||
template: ` | ||
<checkbox-group name="group"> | ||
<checkbox value="option1" name="child"> option1 </checkbox> | ||
<checkbox value="option2"> option2 </checkbox> | ||
<checkbox value="option3"> option3 </checkbox> | ||
</checkbox-group> | ||
`, | ||
setup() { | ||
return {} | ||
}, | ||
}) | ||
|
||
expect(wrapper.findAll('input[name=group]').length).toBe(2) | ||
expect(wrapper.findAll('input[name=child]').length).toBe(1) | ||
}) | ||
}) |
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,20 @@ | ||
<template> | ||
<div> | ||
<ix-checkbox v-model:checked="checked"> option </ix-checkbox> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, ref } from 'vue' | ||
export default defineComponent({ | ||
setup() { | ||
const checked = ref(true) | ||
return { | ||
checked, | ||
} | ||
}, | ||
}) | ||
</script> | ||
<style lang="less" scoped></style> |
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,43 @@ | ||
<template> | ||
<div> | ||
<ix-checkbox v-model:checked="checked" :disabled="disabled"> option </ix-checkbox> | ||
<div class="operation-area"> | ||
<ix-button mode="primary" @click="changeChecked()">checked: {{ checked }}</ix-button> | ||
<ix-button mode="primary" @click="changeDisabled()">disabled: {{ disabled }}</ix-button> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent, ref } from 'vue' | ||
export default defineComponent({ | ||
setup() { | ||
const checked = ref(true) | ||
const disabled = ref(true) | ||
const changeChecked = () => { | ||
checked.value = !checked.value | ||
} | ||
const changeDisabled = () => { | ||
disabled.value = !disabled.value | ||
} | ||
return { | ||
checked, | ||
disabled, | ||
changeChecked, | ||
changeDisabled, | ||
} | ||
}, | ||
}) | ||
</script> | ||
<style lang="less" scoped> | ||
.operation-area { | ||
margin-top: 30px; | ||
/deep/.ix-button { | ||
margin-right: 10px; | ||
} | ||
} | ||
</style> |
Oops, something went wrong.