myfirst-color

v1.0.0

Published

2 years ago

基于 Vue 的颜色选择器

Downloads

0High
0Medium
0Low

dev-shen

vColorPicker 组件（带测试模块）

基于Vue的颜色选择器插件

安装

npm install

开发环境

npm run dev

快速打包

npm run build

打包并打印信息

npm run build --report

单元测试

npm run test

测试步骤

把vue组件放到 packages 目录下，文件目录结构参照color-picker
在 examples/App.vue 引用该组件
在 test/unit/specs/ 目录下新建文件 [组件名].spec.js，编写测试用例（可参照已有测试用例）
执行 npm run test
执行完毕会在 test/unit 下生成 coverage 文件夹，点开 coverage/Icov-report ，浏览器打开 index.html 可以看到图形界面的报告

注意

测试脚本都放在 test/unit/specs/ 目录下
脚本命名方式是[组件名].spec.js
单元测试默认测试 examples 目录下除了 main.js 之外的所有文件，可在 test/unit/index.js 文件中修改
测试脚本里面应该包括一个或多个describe块，每个describe块应该包括一个或多个it块。 describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。 it块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"1 加 1 应该等于 2"），第二个参数是一个实际执行的函数。

color-picker组件带了单元测试的几种类型

组件中DOM内容测试


// 校验dom结构内的文字内容
it('color-picker 初始化的内容与预期一致', () => {
  const Constructor = Vue.extend(colorPicker)
  const vm = new Constructor().$mount()
  expect(vm.$el.querySelector('.m-colorPicker h2').textContent)
  .to.equal('颜色选择器')
})

组件中data变量测试


it('setData()方法', () => {
  // 挂载组件
  const wrapper = mount(colorPicker);
  // setData
  wrapper.setData({ hoveColor: '#c21401' });
  // 断言：hoverColor值为#c21401
  expect(wrapper.vm.hoveColor).to.equal('#c21401');
})

组件中props变量测试


// 模拟传值
function getRenderedText (Component, propsDataMsg) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData: propsDataMsg}).$mount()
  return vm.value
}
it('props传值#ff0000', () => {
  // 断言：传值后value值为#ff0000
  expect(getRenderedText(colorPicker, {
    value: '#ff0000'
  })).to.eql('#ff0000')
})

组件中的方法测试

点击事件


// 校验点击事件后，data的值
it('点击默认颜色', () => {
  // 挂载组件
  const wrapper = mount(colorPicker);
  // 获取点击dom
  const button = wrapper.find('.defaultColor');
  // 模拟点击一次
  button.trigger('click');
  // 断言：defaultColor值为#000000
  expect(wrapper.vm.defaultColor).to.equal('#000000')
})

it('点击页面其他地方，弹窗关闭', () => {
  // 挂载组件
  const wrapper = mount(colorPicker);
  //新建点击事件
  const clickEvent = new window.Event('click');
  // 触发点击事件
  window.document.dispatchEvent(clickEvent)
  // 断言：openStatus值为false
  expect(wrapper.vm.openStatus).to.equal(false)
})

单元测试应该测试哪些内容

一个组件，dom展现的内容是通过data来获得的。而data是可以通过methods被改变

要测试的内容

测试去修改data，看看dom是否对应变化，或者一些依赖变量是否变化
测试触发methods里面的函数，看看data是否改变，dom内容是否改变。

因实际业务开发限制，可以不对所有的data内容做测试用例，可以针对关键性功能，添加测试用例。

用例生成

color-picker.vue
    √ color-picker 初始化的内容与预期一致
    √ 未使用Vue-test-utils: 正确渲染h2的文字为颜色选择器
    √ 使用Vue-test-Utils: 正确渲染h2的文字为颜色选择器
    √ setData()方法
    √ props传值后value为#ff0000
    √ 点击更多颜色
    √ 点击默认颜色
    √ 点击页面其他地方，弹窗关闭

Chrome 73.0.3683 (Windows 7 0.0.0): Executed 9 of 9 SUCCESS (0.55 secs / 0.369 secs)
TOTAL: 9 SUCCESS


=============================== Coverage summary ===============================
Statements   : 94.87% ( 37/39 )
Branches     : 83.33% ( 5/6 )
Functions    : 100% ( 1/1 )
Lines        : 94.87% ( 37/39 )
================================================================================

打包发布你的组件到 npm 仓库

在package.json文件中，修改name、version、description、repository。在npm仓库中不能有相同的name
在发布之前首先要有npm账号 -> 注册npm账号
本地登录，执行：npm login，查看是否登录成功：npm whoami
发布组件：npm publish
撤销发布：npm unpublish 组件名 --force

安装

$ npm install vcolorpicker -S

使用

在 main.js 文件中引入插件并注册

# main.js
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)

在项目中使用 vcolorpicker

<template>
  <colorPicker v-model="color" />
</template>
<script>
  export default {
    data () {
      return {
        color: '#ff0000'
      }
    }
  }
</script>

特点

简单易用，UI在原插件基础上优化增加了圆角和过渡动画
提供以 npm 的形式安装提供全局组件
在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能

选项

你可以通过在所在的元素上设置以下属性来配置color-picker

defaultColor：默认颜色，如defaultColor="#ff0000"
disabled：禁用状态，如disabled=true

事件

change颜色值改变的时候触发

<colorPicker v-model="color" v-on:change="headleChangeColor" />

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme