From 182f59d56424a9bc9c9b12f75ee5b700076875f6 Mon Sep 17 00:00:00 2001 From: jjchen1 Date: Tue, 21 May 2019 17:44:20 +0800 Subject: [PATCH 1/3] fix(checkbox): lack of disabled prop --- components/checkbox/Checkbox.vue | 8 +++ components/checkbox/__test__/Checkbox.spec.js | 64 +++++++++++++++++++ 2 files changed, 72 insertions(+) create mode 100644 components/checkbox/__test__/Checkbox.spec.js diff --git a/components/checkbox/Checkbox.vue b/components/checkbox/Checkbox.vue index 1c1ae27d3..cd9f5d9e5 100644 --- a/components/checkbox/Checkbox.vue +++ b/components/checkbox/Checkbox.vue @@ -41,6 +41,10 @@ export default { indeterminate: { type: Boolean, default: false + }, + disabled: { + type: Boolean, + default: false } }, data () { @@ -69,11 +73,15 @@ export default { if (this.model && value) { this.model = false } + }, + disabled (value) { + this.mdcCheckbox.disabled = true } }, mounted () { this.mdcCheckbox = MDCCheckbox.attachTo(this.$el) this.mdcCheckbox.indeterminate = this.indeterminate + this.mdcCheckbox.disabled = this.disabled }, beforeDestroy () { this.mdcCheckbox.destroy() diff --git a/components/checkbox/__test__/Checkbox.spec.js b/components/checkbox/__test__/Checkbox.spec.js new file mode 100644 index 000000000..2ff1f64e0 --- /dev/null +++ b/components/checkbox/__test__/Checkbox.spec.js @@ -0,0 +1,64 @@ +import 'mutationobserver-shim' +import { mount } from '@vue/test-utils' +import Checkbox from '../Checkbox.vue' + +describe('Checkbox', () => { + it('should mount', () => { + let wrapper = mount(Checkbox) + expect(wrapper.isVueInstance()).toBeTruthy() + expect(wrapper.vm.$data.mdcCheckbox).toBeDefined() + }) + + it('should render with no prop', () => { + let wrapper = mount(Checkbox) + expect(wrapper).toMatchSnapshot() + expect(wrapper.classes()).toContain('mdc-checkbox') + expect(wrapper.find('input').attributes('disabled')).toBeUndefined() + }) + + it('should render as disabled', () => { + let wrapper = mount(Checkbox, { + propsData: { + disabled: true + } + }) + expect(wrapper).toMatchSnapshot() + expect(wrapper.classes()).toContain('mdc-checkbox--disabled') + expect(wrapper.find('input').attributes('disabled')).toBeDefined() + }) + + it('should render as indeterminate', () => { + let wrapper = mount(Checkbox, { + propsData: { + indeterminate: true + } + }) + expect(wrapper).toMatchSnapshot() + expect(wrapper.vm.$data.mdcCheckbox.indeterminate).toBeTruthy() + expect(wrapper.find('input').element.checked).toBeFalsy() + expect(wrapper.find('input').element.indeterminate).toBeTruthy() + }) + + it('should render as checked', () => { + let wrapper = mount(Checkbox, { + propsData: { + checked: true + } + }) + expect(wrapper).toMatchSnapshot() + expect(wrapper.vm.$data.mdcCheckbox.checked).toBeTruthy() + expect(wrapper.find('input').element.checked).toBeTruthy() + }) + + it('should render and emit', () => { + let wrapper = mount(Checkbox) + + const input = wrapper.find('input') + input.setChecked() + expect(wrapper.vm.$data.mdcCheckbox.checked).toBeTruthy() + expect(wrapper.find('input').element.checked).toBeTruthy() + input.setChecked(false) + expect(wrapper.vm.$data.mdcCheckbox.checked).toBeFalsy() + expect(wrapper.find('input').element.checked).toBeFalsy() + }) +}) From fe2b50e29704a4b68757c15aa2cade5d9fd15d0d Mon Sep 17 00:00:00 2001 From: jjchen1 Date: Tue, 21 May 2019 17:44:52 +0800 Subject: [PATCH 2/3] test(checkbox): add snapshot --- .../__snapshots__/Checkbox.spec.js.snap | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 components/checkbox/__test__/__snapshots__/Checkbox.spec.js.snap diff --git a/components/checkbox/__test__/__snapshots__/Checkbox.spec.js.snap b/components/checkbox/__test__/__snapshots__/Checkbox.spec.js.snap new file mode 100644 index 000000000..7cbe15a77 --- /dev/null +++ b/components/checkbox/__test__/__snapshots__/Checkbox.spec.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox should render as checked 1`] = ` +
+
+ + +
+
+
+`; + +exports[`Checkbox should render as disabled 1`] = ` +
+
+ + +
+
+
+`; + +exports[`Checkbox should render as indeterminate 1`] = ` +
+
+ + +
+
+
+`; + +exports[`Checkbox should render with no prop 1`] = ` +
+
+ + +
+
+
+`; From 2f6e28f6a216c2a28fac8c26afa07038ae5dae1d Mon Sep 17 00:00:00 2001 From: Jiajun Chen Date: Tue, 21 May 2019 18:48:46 +0800 Subject: [PATCH 3/3] test(checkbox): update event test --- components/checkbox/__test__/Checkbox.spec.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/checkbox/__test__/Checkbox.spec.js b/components/checkbox/__test__/Checkbox.spec.js index 2ff1f64e0..1a557c447 100644 --- a/components/checkbox/__test__/Checkbox.spec.js +++ b/components/checkbox/__test__/Checkbox.spec.js @@ -54,10 +54,18 @@ describe('Checkbox', () => { let wrapper = mount(Checkbox) const input = wrapper.find('input') + input.setChecked() + expect(wrapper.emitted().change).toBeTruthy() + expect(wrapper.emitted().change.length).toBe(1) + expect(wrapper.emitted().change[0]).toEqual([true]) expect(wrapper.vm.$data.mdcCheckbox.checked).toBeTruthy() expect(wrapper.find('input').element.checked).toBeTruthy() + input.setChecked(false) + expect(wrapper.emitted().change).toBeTruthy() + expect(wrapper.emitted().change.length).toBe(2) + expect(wrapper.emitted().change[1]).toEqual([false]) expect(wrapper.vm.$data.mdcCheckbox.checked).toBeFalsy() expect(wrapper.find('input').element.checked).toBeFalsy() })