feat(switch): bind all attributes to inner input (#426)

* feat(switch): bind attributes to inner input element

Previously only id bind to it using `id` prop, which may be a limitation in a11y.

* test(switch): add snapshots

* test(switch): add snapshots

components/switch/README.md

@@ -11,7 +11,7 @@
 ```javascript
 data() {
     return {
-        switchValue: null
+        switchValue: false
     }
 }
 ```
@@ -20,9 +20,10 @@ data() {
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
-| checked | Boolean | - | false | switch state |
+| checked | Boolean | - | false | switch state, can be `v-model` |
 | disabled | Boolean | - | false | whether the switch should be disabled |
 
+Non prop attributes are mapped to the inner input element.
 
 ### Reference
 

components/switch/Switch.vue

@@ -1,14 +1,13 @@
 <template>
   <div
-    :class="classes"
     class="mdc-switch"
   >
     <div class="mdc-switch__track" />
     <div class="mdc-switch__thumb-underlay">
       <div class="mdc-switch__thumb">
         <input
-          :id="id"
           v-model="model"
+          v-bind="$attrs"
           :disabled="disabled"
           class="mdc-switch__native-control"
           role="switch"
@@ -37,10 +36,6 @@ export default {
     disabled: {
       type: Boolean,
       default: false
-    },
-    id: {
-      type: String,
-      default: ''
     }
   },
   data () {
@@ -49,11 +44,6 @@ export default {
     }
   },
   computed: {
-    classes () {
-      return {
-        'mdc-switch--disabled': this.disabled
-      }
-    },
     model: {
       get () {
         return this.checked
@@ -63,6 +53,14 @@ export default {
       }
     }
   },
+  watch: {
+    disabled (newVal) {
+      this.mdcSwitch.disabled = newVal
+    },
+    checked (newVal) {
+      this.mdcSwitch.checked = newVal
+    }
+  },
   mounted () {
     this.mdcSwitch = MDCSwitch.attachTo(this.$el)
     this.mdcSwitch.checked = this.checked

components/switch/__test__/Switch.spec.js

@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import Switch from '../Switch.vue'
+
+describe('Switch', () => {
+  it('should mount', () => {
+    const wrapper = mount(Switch)
+    expect(wrapper.isVueInstance()).toBeTruthy()
+    expect(wrapper.vm.$data.mdcSwitch).toBeDefined()
+  })
+
+  it('should render with no prop', () => {
+    const wrapper = mount(Switch)
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-switch')
+    expect(wrapper.find('input').attributes('disabled')).toBeUndefined()
+  })
+
+  it('should render as disabled', () => {
+    const wrapper = mount(Switch, {
+      propsData: {
+        disabled: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.classes()).toContain('mdc-switch--disabled')
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('should render as checked', () => {
+    const wrapper = mount(Switch, {
+      propsData: {
+        checked: true
+      }
+    })
+    expect(wrapper).toMatchSnapshot()
+    expect(wrapper.vm.$data.mdcSwitch.checked).toBeTruthy()
+    expect(wrapper.find('input').element.checked).toBeTruthy()
+  })
+
+  it('should render and emit', () => {
+    const wrapper = mount(Switch)
+
+    const input = wrapper.find('input')
+
+    input.setChecked()
+    expect(wrapper.emitted().change).toBeTruthy()
+    expect(wrapper.vm.$data.mdcSwitch.checked).toBeTruthy()
+    expect(wrapper.find('input').element.checked).toBeTruthy()
+
+    input.setChecked(false)
+    expect(wrapper.emitted().change).toBeTruthy()
+    expect(wrapper.vm.$data.mdcSwitch.checked).toBeFalsy()
+    expect(wrapper.find('input').element.checked).toBeFalsy()
+  })
+})

components/switch/__test__/__snapshots__/Switch.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch should render as checked 1`] = `
+<div class="mdc-switch mdc-switch--checked">
+  <div class="mdc-switch__track"></div>
+  <div class="mdc-switch__thumb-underlay">
+    <div class="mdc-switch__thumb"><input role="switch" type="checkbox" class="mdc-switch__native-control"></div>
+  </div>
+</div>
+`;
+
+exports[`Switch should render as disabled 1`] = `
+<div class="mdc-switch mdc-switch--disabled">
+  <div class="mdc-switch__track"></div>
+  <div class="mdc-switch__thumb-underlay">
+    <div class="mdc-switch__thumb"><input disabled="" role="switch" type="checkbox" class="mdc-switch__native-control"></div>
+  </div>
+</div>
+`;
+
+exports[`Switch should render with no prop 1`] = `
+<div class="mdc-switch">
+  <div class="mdc-switch__track"></div>
+  <div class="mdc-switch__thumb-underlay">
+    <div class="mdc-switch__thumb"><input role="switch" type="checkbox" class="mdc-switch__native-control"></div>
+  </div>
+</div>
+`;

docs/.vuepress/components/SwitchDemo.vue

@@ -2,7 +2,7 @@
     <div>
         <ComponentSection>
             <div>
-                <m-switch :disabled="checkboxProps[0].value" id="basic-switch"></m-switch>
+                <m-switch :disabled="checkboxProps[0].value" id="basic-switch" v-model="value"></m-switch>
                 <label for="basic-switch">off/on</label>
             </div>
         </ComponentSection>