Merge remote-tracking branch 'origin/dev'

* origin/dev:
  test(MdSwitch): fix test script (#1739)
  test(MdCheckbox): fix test script (#1737)
  test(MdBadge): fix test script (#1736)
  fix(MdTable): fix table rendering default slot twice (#1731)

Author: marcosmoura

src/components/MdBadge/MdBadge.test.js

@@ -1,10 +1,26 @@
 import mountTemplate from 'test/utils/mountTemplate'
 import MdBadge from './MdBadge.vue'
+import MdBadgeStandalone from './MdBadgeStandalone.vue'
 
 test('should render the badge', async () => {
-  const template = '<md-badge>Lorem ipsum</md-badge>'
+  const template = '<md-badge md-content="3">Lorem ipsum</md-badge>'
+  const wrapper = await mountTemplate(MdBadge, template)
+
+  expect(wrapper.hasClass('md-badge-content')).toBe(true)
+  const badges = wrapper.find(MdBadgeStandalone)
+  expect(badges.length).toBe(1)
+  const badge = badges[0]
+  expect(badge.hasClass('md-badge')).toBe(true)
+  const badgeContent = badge.text().trim();
+  expect(badgeContent).toBe('3')
+  const slotText = wrapper.text().replace(badgeContent, '').trim()
+  expect(slotText).toBe('Lorem ipsum')
+})
+
+test('should render the badge', async () => {
+  const template = '<md-badge md-content="3"></md-badge>'
   const wrapper = await mountTemplate(MdBadge, template)
 
   expect(wrapper.hasClass('md-badge')).toBe(true)
-  expect(wrapper.text()).toBe('Lorem ipsum')
+  expect(wrapper.text().trim()).toBe('3')
 })

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>
 

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

src/components/MdSwitch/MdSwitch.vue

@@ -3,7 +3,7 @@
     <div class="md-switch-container" @click.stop="toggleCheck">
       <div class="md-switch-thumb">
         <md-ripple md-centered :md-active.sync="rippleActive" :md-disabled="disabled">
-          <input type="checkbox" v-bind="{ id, name, disabled, required, value }">
+          <input :id="id" type="checkbox" v-bind="{ id, name, disabled, required, value }">
         </md-ripple>
       </div>
     </div>

src/components/MdTable/MdTable.vue

@@ -47,7 +47,7 @@
       <slot name="md-table-pagination" />
     </md-content>
 
-    <slot v-if="!hasValue" />
+    <slot v-if="!hasValue && $scopedSlots['md-table-row']" />
   </md-tag-switcher>
 </template>
 

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]