fix(checkbox): lack of disabled prop (#251)

Author: tychenjiajun

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()

components/checkbox/__test__/Checkbox.spec.js

@@ -0,0 +1,72 @@
+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.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()
+  })
+})

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`] = `
+<div class="mdc-checkbox mdc-checkbox--upgraded"><input type="checkbox" class="mdc-checkbox__native-control">
+  <div class="mdc-checkbox__background"><svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
+      <path fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-checkbox__checkmark-path"></path>
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+</div>
+`;
+
+exports[`Checkbox should render as disabled 1`] = `
+<div class="mdc-checkbox mdc-checkbox--upgraded mdc-checkbox--disabled"><input type="checkbox" class="mdc-checkbox__native-control" disabled="">
+  <div class="mdc-checkbox__background"><svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
+      <path fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-checkbox__checkmark-path"></path>
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+</div>
+`;
+
+exports[`Checkbox should render as indeterminate 1`] = `
+<div class="mdc-checkbox mdc-checkbox--upgraded mdc-checkbox--selected"><input type="checkbox" class="mdc-checkbox__native-control" aria-checked="mixed">
+  <div class="mdc-checkbox__background"><svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
+      <path fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-checkbox__checkmark-path"></path>
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+</div>
+`;
+
+exports[`Checkbox should render with no prop 1`] = `
+<div class="mdc-checkbox mdc-checkbox--upgraded"><input type="checkbox" class="mdc-checkbox__native-control">
+  <div class="mdc-checkbox__background"><svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
+      <path fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" class="mdc-checkbox__checkmark-path"></path>
+    </svg>
+    <div class="mdc-checkbox__mixedmark"></div>
+  </div>
+</div>
+`;