test(MdCheckbox): fix test script (#1737)

Author: VdustR

src/components/MdCheckbox/MdCheckbox.test.js

@@ -43,13 +43,6 @@ test('should create a fallback id if not given', async () => {
   expect(label.getAttribute('for')).toBe(createdId)
 })
 
-test('should create a fallback value if not given', async () => {
-  const wrapper = await mountStringSlot(MdCheckbox, 'Label')
-  const createdValue = wrapper.vm.$props.value
-
-  expect(createdValue).toBe('on')
-})
-
 test('should create disabled and required classes', async () => {
   const wrapper = await mountStringSlot(MdCheckbox, 'Label', {
     propsData: {
@@ -150,7 +143,7 @@ test('should toggle a checked class when checked', async () => {
   expect(checkbox.hasClass('md-checked')).toBe(false)
 })
 
-test('should bind "on" value when no value attribute is given', async () => {
+test('should bind true / false when no value attribute is given', async () => {
   const template = `
     <div>
       <md-checkbox v-model="model"></md-checkbox>
@@ -168,69 +161,67 @@ test('should bind "on" value when no value attribute is given', async () => {
 
   container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(true)
-  expect(wrapper.data().model).toBe('on')
+  expect(wrapper.data().model).toBe(true)
 
   container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(false)
-  expect(wrapper.data().model).toBe(null)
+  expect(wrapper.data().model).toBe(false)
 })
 
-test('should toggle string values on model', async () => {
+test('true-value / false-value should works', async () => {
   const template = `
     <div>
-      <md-checkbox v-model="model" value="1"></md-checkbox>
+      <md-checkbox v-model="model" true-value="true" false-value="false"></md-checkbox>
     </div>
   `
   const wrapper = await mountTemplate(MdCheckbox, template, {
     data: {
-      model: '1'
+      model: null
     }
   })
   const checkbox = wrapper.find(MdCheckbox)[0]
   const container = wrapper.find('.md-checkbox-container')[0]
 
-  expect(checkbox.vm.isSelected).toBe(true)
-
-  container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(false)
-  expect(wrapper.data().model).toBe(null)
 
   container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(true)
-  expect(wrapper.data().model).toBe('1')
+  expect(wrapper.data().model).toBe('true')
+
+  container.trigger('click')
+  expect(checkbox.vm.isSelected).toBe(false)
+  expect(wrapper.data().model).toBe('false')
 })
 
-test('should toggle boolean model when checkbox do not have a value', async () => {
+test('should toggle string values on model', async () => {
   const template = `
     <div>
-      <md-checkbox v-model="model"></md-checkbox>
+      <md-checkbox v-model="model" value="1"></md-checkbox>
     </div>
   `
   const wrapper = await mountTemplate(MdCheckbox, template, {
     data: {
-      model: false
+      model: '1'
     }
   })
   const checkbox = wrapper.find(MdCheckbox)[0]
   const container = wrapper.find('.md-checkbox-container')[0]
 
-  await checkbox.vm.$nextTick()
+  expect(checkbox.vm.isSelected).toBe(true)
 
+  container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(false)
+  expect(wrapper.data().model).toBe(null)
 
   container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(true)
-  expect(wrapper.data().model).toBe(true)
-
-  container.trigger('click')
-  expect(checkbox.vm.isSelected).toBe(false)
-  expect(wrapper.data().model).toBe(false)
+  expect(wrapper.data().model).toBe('1')
 })
 
-test('should toggle boolean model when checkbox have true value', async () => {
+test('should toggle boolean model when checkbox do not have a value', async () => {
   const template = `
     <div>
-      <md-checkbox v-model="model" :value="true"></md-checkbox>
+      <md-checkbox v-model="model"></md-checkbox>
     </div>
   `
   const wrapper = await mountTemplate(MdCheckbox, template, {
@@ -254,10 +245,10 @@ test('should toggle boolean model when checkbox have true value', async () => {
   expect(wrapper.data().model).toBe(false)
 })
 
-test('should toggle boolean model when checkbox have false value', async () => {
+test('should toggle null / value while checkbox has been set value', async () => {
   const template = `
     <div>
-      <md-checkbox v-model="model" :value="false"></md-checkbox>
+      <md-checkbox v-model="model" value="val"></md-checkbox>
     </div>
   `
   const wrapper = await mountTemplate(MdCheckbox, template, {
@@ -270,13 +261,13 @@ test('should toggle boolean model when checkbox have false value', async () => {
 
   await checkbox.vm.$nextTick()
 
-  expect(checkbox.vm.isSelected).toBe(true)
-
-  container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(false)
-  expect(wrapper.data().model).toBe(true)
 
   container.trigger('click')
   expect(checkbox.vm.isSelected).toBe(true)
-  expect(wrapper.data().model).toBe(false)
+  expect(wrapper.data().model).toBe('val')
+
+  container.trigger('click')
+  expect(checkbox.vm.isSelected).toBe(false)
+  expect(wrapper.data().model).toBe(null)
 })

src/components/MdCheckbox/MdCheckbox.vue

@@ -2,7 +2,7 @@
   <div class="md-checkbox" :class="[$mdActiveTheme, checkClasses]">
     <div class="md-checkbox-container" @click.stop="toggleCheck">
       <md-ripple md-centered :md-active.sync="rippleActive" :md-disabled="disabled">
-        <input type="checkbox" v-bind="attrs" :indeterminate.prop="indeterminate">
+        <input :id="id" type="checkbox" v-bind="attrs" :indeterminate.prop="indeterminate">
       </md-ripple>
     </div>
 

test/utils/mountStringSlot.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import deepmerge from 'deepmerge'
 import { mount } from 'avoriaz'
 
-export default async (component, template, options = {}) => {
+export default async (component, template, options = { propsData: {} }) => {
   const wrapper = mount(component, deepmerge(options, {
     slots: {
       default: [template]