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..1a557c447
--- /dev/null
+++ b/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()
+ })
+})
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`] = `
+
+`;