fix(MdDivider): create divider as <li> tag when direct inside lists

Author: marcosmoura

src/components/MdDivider/MdDivider.test.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import mountTemplate from 'test/utils/mountTemplate'
 import MdDivider from './MdDivider.vue'
 
@@ -9,8 +10,30 @@ test('should render the divider', async () => {
 })
 
 test('should render the theme class', async () => {
-  const template = '<md-divider md-theme="alt">Lorem ipsum</md-divider>'
+  const template = '<md-divider md-theme="alt"></md-divider>'
   const wrapper = await mountTemplate(MdDivider, template)
 
   expect(wrapper.hasClass('md-theme-alt')).toBe(true)
 })
+
+test('should render a <li> tag when inside lists', async () => {
+  Vue.component('MdList', {
+    template: '<div><slot></slot></div>'
+  })
+  const template = `
+    <md-list>
+      <md-divider></md-divider>
+    </md-list>`
+  const wrapper = await mountTemplate(MdDivider, template)
+  const divider = wrapper.find(MdDivider)[0]
+
+  expect(divider.vm.$el.tagName.toLowerCase()).toBe('li')
+})
+
+test('should render a <hr> tag when inside any other element', async () => {
+  const template = `<md-divider></md-divider>`
+  const wrapper = await mountTemplate(MdDivider, template)
+  const divider = wrapper.find(MdDivider)[0]
+
+  expect(divider.vm.$el.tagName.toLowerCase()).toBe('hr')
+})

src/components/MdDivider/MdDivider.vue

@@ -1,12 +1,18 @@
 <template>
-  <hr class="md-divider" :class="[$mdActiveTheme]">
+  <li class="md-divider" :class="[$mdActiveTheme]" v-if="insideList"></li>
+  <hr class="md-divider" :class="[$mdActiveTheme]" v-else>
 </template>
 
 <script>
   import MdComponent from 'core/MdComponent'
 
   export default new MdComponent({
-    name: 'MdDivider'
+    name: 'MdDivider',
+    computed: {
+      insideList () {
+        return this.$parent.$options._componentTag === 'md-list'
+      }
+    }
   })
 </script>