实现一个Vue ui 库(单元测试，自动化测试，集成测试)

github

demo

涉及

常用Vue ui组件的实现
Vue单元测试实战
用karma做自动化测试
travis集成测试

1.用[email protected]初始化项目

下载

npm i @vue/cli -g

初始化

vue create vue-test-demo(文件名)

选择 manually select features

2.jpeg

3.jpeg

4.jpeg

初始化后项目目录如下

5.jpeg

一开始有一个helloWorld组件
启动项目

npm run server

测试

npm run test:unit

7.jpeg

6.jpeg

2. 第一个组件

先写了一个简单的button组件代码
实现的功能：

自定义文字
添加icon
icon左右位置定义-
点击出现loading

然后根据实现的功能对其进行单元测试Vue Test Utils

这里用的是测试框架mocha + 断言库 chai

测试代码

describe块称为"测试套件"(test suite), 表示一组相关的测试. 它是一个函数, 第一个参数是测试套件的名称, 第二个参数是一个实际执行的函数.

it块称为"测试用例"(test case), 表示一个单独的测试, 是测试的最小单位. 它也是一个函数, 第一个参数是测试用例的名称(通常描述你的断言结果), 第二个参数是一个实际执行的函数.

我们在最后一个测试例子中用到了sinon sinon入门
最后一个例子中我们测试点击按钮，然后知道函数被调用（单纯用js很难做到）

   it('点击 button 触发 click 事件', () => {
        const wrapper = mount(Button, {
            propsData: {
                icon: 'settings',
            }
        })
        const vm = wrapper.vm


        const callback = sinon.fake();  // 创建间谍函数
        vm.$on('click', callback)
        vm.$el.click()
        expect(callback).to.have.been.called

    })

3. 添加karma做自动化测试

添加如下依赖

npm i -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack chai sinon sinon-chai

在项目根目录创建karma.conf.js文件

var webpackConfig = require('@vue/cli-service/webpack.config.js')

module.exports = function (config) {
    config.set({
        frameworks: ['mocha'],

        files: [
            'tests/**/*.spec.js'
        ],

        preprocessors: {
            '**/*.spec.js': ['webpack', 'sourcemap']
        },

        webpack: webpackConfig,

        reporters: ['spec'],

        browsers: ['ChromeHeadless']  //没有界面的浏览器，为了后面配合travis使用
    })
}

改写 package scripts

  "scripts": {
      ...
    "test": "karma start --single-run",
    ...
  },

single-run 标识告诉了 Karma 一次性运行该测试套件。
运行

npm run test

9.jpeg

4. 添加集成测试

推荐阮一峰教程

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
addons:
  chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

创建github仓库后每次远程推送都会进行测试