Skip to content

Commit

Permalink
feat(comp: checkbox): add checkbox component
Browse files Browse the repository at this point in the history
  • Loading branch information
liuzaijiang committed Jan 26, 2021
1 parent 7f7c908 commit d668998
Show file tree
Hide file tree
Showing 904 changed files with 9,404 additions and 0 deletions.
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\\" name=\\"\\" truevalue=\\"true\\" falsevalue=\\"false\\"></span><span class=\\"ix-checkbox-label\\">option</span></label>"`;
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\\" name=\\"\\" 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\\" name=\\"\\" 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\\" name=\\"\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option3\\"></span><span class=\\"ix-checkbox-label\\"> option3 </span></label></div>"`;
164 changes: 164 additions & 0 deletions packages/components/checkbox/__tests__/checkbox.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
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" class="checkox" style="color: red;">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.classes()).toContain('checkox')
expect(checkboxWrapper.attributes()['style']).toEqual('color: red;')
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(originalInput.classes()).not.toContain('checkox')
expect(originalInput.attributes()['style']).not.toEqual('color: red;')

expect(input.attributes()['tabindex']).toEqual('1')
})
})
148 changes: 148 additions & 0 deletions packages/components/checkbox/__tests__/checkboxGroup.spec.ts
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)
})
})
20 changes: 20 additions & 0 deletions packages/components/checkbox/demo/Basic.vue
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>
48 changes: 48 additions & 0 deletions packages/components/checkbox/demo/Disabled.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<template>
<div>
<ix-checkbox v-model:checked="checked" :disabled="disabled" @change="onChange"> 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
}
const onChange = () => {
console.log('onChange')
}
return {
checked,
disabled,
changeChecked,
changeDisabled,
onChange,
}
},
})
</script>
<style lang="less" scoped>
.operation-area {
margin-top: 30px;
.ix-button {
margin-right: 10px;
}
}
</style>
Loading

0 comments on commit d668998

Please sign in to comment.