From c52a0f06ad578c91ff0673eb9069e86edcc89bed Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Fri, 28 Jun 2019 16:56:57 +0800 Subject: [PATCH] test(gradient-text): add unit test for gradient text --- package.json | 2 +- packages/common/GradientText/index.js | 1 + packages/common/GradientText/src/main.vue | 29 +++---- styles/GradientText.scss | 44 +++++------ .../common/GradientText/index.spec.js | 78 +++++++++++++++++++ .../specs/packages/common/Icon/index.spec.js | 3 +- test/unit/specs/packages/utils.js | 5 ++ 7 files changed, 123 insertions(+), 39 deletions(-) create mode 100644 test/unit/specs/packages/common/GradientText/index.spec.js create mode 100644 test/unit/specs/packages/utils.js diff --git a/package.json b/package.json index 24308565e..66cac96e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "naive-ui", - "version": "0.1.71", + "version": "0.1.72", "description": "", "main": "index.js", "scripts": { diff --git a/packages/common/GradientText/index.js b/packages/common/GradientText/index.js index 771fcf07c..a45592c3b 100644 --- a/packages/common/GradientText/index.js +++ b/packages/common/GradientText/index.js @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import GradientText from './src/main.vue' GradientText.install = function (Vue) { diff --git a/packages/common/GradientText/src/main.vue b/packages/common/GradientText/src/main.vue index 8a9639ebe..81ec1c9d7 100644 --- a/packages/common/GradientText/src/main.vue +++ b/packages/common/GradientText/src/main.vue @@ -1,16 +1,12 @@ @@ -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 } } } diff --git a/styles/GradientText.scss b/styles/GradientText.scss index 8049e2da5..6c96fcd58 100644 --- a/styles/GradientText.scss +++ b/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; } } \ No newline at end of file diff --git a/test/unit/specs/packages/common/GradientText/index.spec.js b/test/unit/specs/packages/common/GradientText/index.spec.js new file mode 100644 index 000000000..25a5afdfb --- /dev/null +++ b/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: `{{ content }}`, + 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: `{{ content }}`, + 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: `{{ content }}`, + 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: `{{ content }}`, + data () { + return { + content: 'hello' + } + } + } + const wrapper = mount(NGradientTextTestContext) + expect(window.getComputedStyle(wrapper.element).fontSize).to.equal('40px') + }) + }) +}) diff --git a/test/unit/specs/packages/common/Icon/index.spec.js b/test/unit/specs/packages/common/Icon/index.spec.js index 5e2e2f49a..ef74fd102 100644 --- a/test/unit/specs/packages/common/Icon/index.spec.js +++ b/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 () { diff --git a/test/unit/specs/packages/utils.js b/test/unit/specs/packages/utils.js new file mode 100644 index 000000000..680fed330 --- /dev/null +++ b/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 }