feat: Refactor Link component

hug-sun · Dec 7, 2020 · 2a0bc80 · 2a0bc80
1 parent f5b4c3a
commit 2a0bc80
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 39 deletions.
diff --git a/packages/link/Link.vue b/packages/link/Link.vue
@@ -1,54 +1,59 @@
 <template>
   <a
-    :class="[
-      'el-link',
-      type ? `el-link--${type}` : '',
-      disabled && 'is-disabled',
-      underline && !disabled && 'is-underline'
-    ]"
+    :class="classes"
     :href="disabled ? null : href"
     v-bind="$attrs"
     @click="handleClick"
   >
-    <i :class="icon" v-if="icon"></i>
-
+    <i v-if="icon" :class="icon"></i>
     <span v-if="$slots.default" class="el-link--inner">
       <slot></slot>
     </span>
-
-    <slot v-if="$slots.icon" name="icon"></slot>
   </a>
 </template>
 
 <script>
 export default {
   name: 'ElLink',
-
   props: {
     type: {
       type: String,
       default: 'default'
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     underline: {
       type: Boolean,
       default: true
     },
-    disabled: Boolean,
     href: String,
     icon: String
   },
   emits: ['click'],
   setup(props, { emit }) {
-    const handleClick = (evt) => {
+    const classes = useClasses(props)
+
+    const handleClick = (event) => {
       if (props.disabled) return
       if (props.href) return
 
-      emit('click', evt)
+      emit('click', event)
     }
-
     return {
+      classes,
       handleClick
     }
   }
 }
+const useClasses = (props) => {
+  return [
+    props.type ? `el-link--${props.type}` : '',
+    props.disabled && 'is-disabled',
+    props.underline && !props.disabled && 'is-underline'
+  ]
+}
 </script>
+
+<style></style>
diff --git a/packages/link/__tests__/Link.spec.js b/packages/link/__tests__/Link.spec.js
@@ -2,68 +2,93 @@ import { mount } from '@vue/test-utils'
 import Link from '../Link.vue'
 describe('Link', () => {
   describe('props', () => {
-    it('type', () => {
+    it('initialize the Link component', () => {
+      const wrapper = mount(Link)
+      expect(wrapper.find('i').exists()).toBe(false)
+      expect(wrapper.find('span').exists()).toBe(false)
+    })
+    it('should show content', () => {
+      const content = 'Link'
       const wrapper = mount(Link, {
-        props: {
-          type: 'primary'
+        slots: {
+          default: content
         }
       })
-
-      expect(wrapper.classes()).toContain('el-link--primary')
+      expect(wrapper.text()).toContain('Link')
     })
 
-    it('icon', () => {
+    it('set the type, link displays the corresponding style', () => {
+      const type = 'primary'
       const wrapper = mount(Link, {
         props: {
-          icon: 'el-icon-search'
+          type
         }
       })
-
-      expect(wrapper.find('.el-icon-search').exists()).toBe(true)
+      expect(wrapper.classes()).toContain(`el-link--${type}`)
     })
 
-    it('href', () => {
+    it('set the disabled, link displays the corresponding style', () => {
+      const disabled = true
       const wrapper = mount(Link, {
         props: {
-          href: 'https://element3-ui.com/'
+          disabled
         }
       })
-
-      expect(wrapper.attributes('href')).toBe('https://element3-ui.com/')
+      expect(wrapper.classes()).toContain('is-disabled')
     })
 
-    it('should get target attr value', () => {
-      // because set v-bind='$attrs' to a element
+    it('set the underline, link displays the corresponding style', () => {
+      const underline = true
       const wrapper = mount(Link, {
         props: {
-          target: '_blank'
+          underline
         }
       })
+      console.log(wrapper.vm)
+      expect(wrapper.classes()).toContain('is-underline')
+    })
 
-      expect(wrapper.attributes('target')).toBe('_blank')
+    it('set the href', () => {
+      const href = 'https://element3-ui.com/'
+      const wrapper = mount(Link, {
+        props: {
+          href
+        }
+      })
+      expect(wrapper.attributes('href')).toBe(href)
     })
 
-    it('should link is disabled when set disabled prop to be true', () => {
+    it('set the icon, link displays the corresponding style', () => {
+      const icon = 'el-icon-search'
       const wrapper = mount(Link, {
         props: {
-          disabled: true
+          icon
         }
       })
+      const i = wrapper.find('i')
+      expect(i.exists()).toBe(true)
+      expect(i.classes()).toContain(icon)
+    })
 
-      expect(wrapper.classes()).toContain('is-disabled')
+    it('should get target attr value', () => {
+      const wrapper = mount(Link, {
+        props: {
+          target: '_blank'
+        }
+      })
+      expect(wrapper.attributes('target')).toBe('_blank')
     })
   })
 
   describe('click', () => {
     it('should captured click events emitted via click', () => {
       const wrapper = mount(Link)
       wrapper.trigger('click')
-
       expect(wrapper.emitted('click')).toBeTruthy()
     })
 
     describe("can't captured click event emitted", () => {
-      it('when disabled prop is equal to true ', () => {
+      it('when disabled prop is equal to true', () => {
         const wrapper = mount(Link, {
           props: {
             disabled: true
@@ -73,10 +98,10 @@ describe('Link', () => {
         expect(wrapper.emitted('click')).toBeFalsy()
       })
 
-      it('when href prop is to be truthy ', () => {
+      it('when href prop is to be truthy', () => {
         const wrapper = mount(Link, {
           props: {
-            href: 'http://www.baidu.com'
+            href: 'https://element3-ui.com/'
           }
         })
         wrapper.trigger('click')