test(gradient-text): add unit test for gradient text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.71",
+  "version": "0.1.72",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/GradientText/index.js

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 import GradientText from './src/main.vue'
 
 GradientText.install = function (Vue) {

packages/common/GradientText/src/main.vue

@@ -1,16 +1,12 @@
 <template>
   <div
     class="n-gradient-text"
+    :class="{
+      [`n-gradient-text--${type}-type`]: true
+    }"
     :style="style"
   >
-    <div
-      class="n-gradient-text__content"
-      :class="{
-        [`is-${type}`]: true
-      }"
-    >
-      <slot />
-    </div>
+    <slot />
   </div>
 </template>
 
@@ -18,9 +14,13 @@
 export default {
   name: 'NGradientText',
   props: {
-    'fontSize': {
-      type: Number,
-      default: 16
+    size: {
+      type: [String, Number],
+      default: null
+    },
+    fontSize: {
+      type: [String, Number],
+      default: null
     },
     type: {
       type: String,
@@ -29,9 +29,10 @@ export default {
   },
   computed: {
     style () {
-      return {
-        fontSize: this.fontSize + 'px'
-      }
+      const style = {}
+      const fontSize = this.size || this.fontSize
+      if (fontSize) style.fontSize = fontSize + 'px'
+      return style
     }
   }
 }

styles/GradientText.scss

@@ -6,30 +6,28 @@
   position: relative;
   font-weight: 700;
   font-size: 16px;
-  .n-gradient-text__content {
+  background: $default-text-gradient;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  &.n-gradient-text--default-type {
     background: $default-text-gradient;
-    background-clip: text;
     -webkit-background-clip: text;
-    color: transparent;
-    &.is-default {
-      background: $default-text-gradient;
-      -webkit-background-clip: text;
-      background-clip: text;
-    }
-    &.is-warning {
-      background: $default-text-gradient-warning;
-      -webkit-background-clip: text;
-      background-clip: text;
-    }
-    &.is-danger {
-      background: $default-text-gradient-danger;
-      -webkit-background-clip: text;
-      background-clip: text;
-    }
-    &.is-success {
-      background: $default-text-gradient-success;
-      -webkit-background-clip: text;
-      background-clip: text;
-    }
+    background-clip: text;
+  }
+  &.n-gradient-text--warning-type {
+    background: $default-text-gradient-warning;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  &.n-gradient-text--danger-type {
+    background: $default-text-gradient-danger;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  &.n-gradient-text--success-type {
+    background: $default-text-gradient-success;
+    -webkit-background-clip: text;
+    background-clip: text;
   }
 }

test/unit/specs/packages/common/GradientText/index.spec.js

@@ -0,0 +1,78 @@
+import NGradientText from 'packages/common/GradientText'
+import { mount, createLocalVue } from '@vue/test-utils'
+import { expect } from 'chai'
+import { existsInClassList } from '../../utils'
+
+describe('GradientText', function () {
+  const localVue = createLocalVue()
+
+  it('should show content', function () {
+    const NGradientTextTestContext = {
+      localVue,
+      components: {
+        NGradientText
+      },
+      template: `<n-gradient-text>{{ content }}</n-gradient-text>`,
+      data () {
+        return {
+          content: 'hello'
+        }
+      }
+    }
+    const wrapper = mount(NGradientTextTestContext)
+    expect(wrapper.contains('hello'))
+  })
+  describe('props.type', function () {
+    it('should exist in one of class names', function () {
+      const type = 'danger'
+      const NGradientTextTestContext = {
+        localVue,
+        components: {
+          NGradientText
+        },
+        template: `<n-gradient-text type="${type}">{{ content }}</n-gradient-text>`,
+        data () {
+          return {
+            content: 'hello'
+          }
+        }
+      }
+      const wrapper = mount(NGradientTextTestContext)
+      expect(existsInClassList(wrapper.element, type))
+    })
+  })
+  describe('props.size', function () {
+    it('should work with string input', function () {
+      const NGradientTextTestContext = {
+        localVue,
+        components: {
+          NGradientText
+        },
+        template: `<n-gradient-text size="40">{{ content }}</n-gradient-text>`,
+        data () {
+          return {
+            content: 'hello'
+          }
+        }
+      }
+      const wrapper = mount(NGradientTextTestContext)
+      expect(window.getComputedStyle(wrapper.element).fontSize).to.equal('40px')
+    })
+    it('should work with number input', function () {
+      const NGradientTextTestContext = {
+        localVue,
+        components: {
+          NGradientText
+        },
+        template: `<n-gradient-text :size="40">{{ content }}</n-gradient-text>`,
+        data () {
+          return {
+            content: 'hello'
+          }
+        }
+      }
+      const wrapper = mount(NGradientTextTestContext)
+      expect(window.getComputedStyle(wrapper.element).fontSize).to.equal('40px')
+    })
+  })
+})

test/unit/specs/packages/common/Icon/index.spec.js

@@ -1,6 +1,7 @@
 import NIcon from 'packages/common/Icon'
 import { mount, createLocalVue } from '@vue/test-utils'
 import { expect } from 'chai'
+import { existsInClassList } from '../../utils'
 
 describe('Icon', function () {
   const localVue = createLocalVue()
@@ -20,7 +21,7 @@ describe('Icon', function () {
         }
       }
       const wrapper = mount(NIconTestContext)
-      expect(Array.from(wrapper.element.classList).some(className => 1 + className.search(type)))
+      expect(existsInClassList(wrapper.element, type))
     })
   })
   describe('props.size', function () {

test/unit/specs/packages/utils.js

@@ -0,0 +1,5 @@
+function existsInClassList (el, string) {
+  return Array.from(el.classList).some(className => 1 + className.search(string))
+}
+
+export { existsInClassList }