refactor: CHeaderBrand, CSidebarBrand - tag render mechanism change

Author: woothu

src/components/header/CHeaderBrand.vue

@@ -1,9 +1,22 @@
-<template>
-  <img class="c-header-brand"/>
-</template>
-
 <script>
+import CLink, { propsFactory } from '../link/CLink'
+import { mergeData } from 'vue-functional-data-merge'
+const props = Object.assign(propsFactory(),  { tag: { type: String, default: 'div' }})
+
 export default {
-  name: 'CHeaderBrand'
+  functional: true,
+  name: 'CHeaderBrand',
+  props,
+  render (h, { props, data, children }) {
+    const isLink = props.href || props.to
+    return h(
+      isLink ? CLink : props.tag,
+      mergeData(data, {
+        staticClass: 'c-header-brand',
+        props: isLink ? props : {}
+      }),
+      children
+    )
+  }
 }
 </script>

src/components/header/tests/CHeaderBrand.spec.js

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import Component from '../CHeaderBrand'
+
+const ComponentName = 'CHeaderBrand'
+const wrapper = mount(Component)
+const linkWrapper = mount(Component, {
+  propsData: {
+    href: 'https://coreui.io'
+  }
+})
+
+describe(`${ComponentName} .vue`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  it('renders correctly as div', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('renders correctly as link', () => {
+    expect(linkWrapper.element).toMatchSnapshot()
+  })
+})

src/components/header/tests/__snapshots__/CHeaderBrand.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CHeaderBrand .vue renders correctly as div 1`] = `
+<div
+  class="c-header-brand"
+/>
+`;
+
+exports[`CHeaderBrand .vue renders correctly as link 1`] = `
+<a
+  class="c-header-brand"
+  href="https://coreui.io"
+  target="_self"
+/>
+`;

src/components/sidebar/CSidebarBrand.vue

@@ -1,58 +1,24 @@
-<template>
-  <div class="c-sidebar-brand">
-    <slot>
-      <CLink v-if="wrappedInLink" v-bind="linkProps">
-        <img
-          class="c-sidebar-brand-full" 
-          v-bind="fullAttributes" 
-        >
-        <img 
-          class="c-sidebar-brand-minimized" 
-          v-bind="minimizedAttributes"
-        >
-      </CLink>
-      <template v-else>
-        <img 
-          class="c-sidebar-brand-full"
-          v-bind="fullAttributes"
-        >
-        <img 
-          class="c-sidebar-brand-minimized" 
-          v-bind="minimizedAttributes"
-        >
-      </template>
-    </slot>
-  </div>
-</template>
+
 
 <script>
-import CLink from '../link/CLink'
+import CLink, { propsFactory } from '../link/CLink'
+import { mergeData } from 'vue-functional-data-merge'
+const props = Object.assign(propsFactory(), { tag: { type: String, default: 'div' }})
+
 export default {
+  functional: true,
   name: 'CSidebarBrand',
-  components: {
-    CLink
-  },
-  props: {
-    img: [String, Object],
-    imgFull: [String, Object],
-    imgMinimized: [String, Object],
-    wrappedInLink: [String, Object]
-  },
-  computed: {
-    linkProps () {
-      return this.getObject(this.wrappedInLink, 'href')
-    },
-    minimizedAttributes () {
-      return this.getObject(this.imgMinimized || this.img, 'src')
-    },
-    fullAttributes () {
-      return this.getObject(this.imgFull || this.img, 'src')
-    }
-  },
-  methods: {
-    getObject (prop, key) {
-      return typeof prop === 'object' ? prop : { [`${key}`]: prop }
-    }
+  props,
+  render (h, { props, data, children }) {
+    const isLink = props.href || props.to
+    return h(
+      isLink ? CLink : props.tag,
+      mergeData(data, {
+        staticClass: 'c-sidebar-brand',
+        props: isLink ? props : {}
+      }),
+      children
+    )
   }
 }
-</script>
+</script>

src/components/sidebar/tests/CSidebarBrand.spec.js

@@ -1,17 +1,21 @@
 import { mount } from '@vue/test-utils'
 import Component from '../CSidebarBrand'
 const ComponentName = 'CSidebarBrand'
-const wrapper = mount(Component, {
+const wrapper = mount(Component)
+const linkWrapper = mount(Component, {
   propsData: {
-    wrappedInLink: { href: 'https://coreui.io' }
+    href: 'https://coreui.io'
   }
 })
 
 describe(ComponentName, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
   })
-  it('renders correctly', () => {
+  it('renders correctly as div', () => {
     expect(wrapper.element).toMatchSnapshot()
   })
+  it('renders correctly as link', () => {
+    expect(linkWrapper.element).toMatchSnapshot()
+  })
 })

src/components/sidebar/tests/__snapshots__/CSidebarBrand.spec.js.snap

@@ -1,21 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CSidebarBrand renders correctly 1`] = `
+<a
+  class="c-sidebar-brand"
+  href="https://coreui.io"
+  target="_self"
+/>
+`;
+
+exports[`CSidebarBrand renders correctly as div 1`] = `
 <div
   class="c-sidebar-brand"
->
-  <a
-    class=""
-    href="https://coreui.io"
-    target="_self"
-  >
-    <img
-      class="c-sidebar-brand-full"
-    />
-     
-    <img
-      class="c-sidebar-brand-minimized"
-    />
-  </a>
-</div>
+/>
+`;
+
+exports[`CSidebarBrand renders correctly as link 1`] = `
+<a
+  class="c-sidebar-brand"
+  href="https://coreui.io"
+  target="_self"
+/>
 `;