一、测试有哪些分类

1、黑白测试

  • 根据代码的思路写测试叫白盒测试
  • 不知道代码的思路测试叫黑盒测试（大部分人工测试都是这个）

2、规模（小->大）

  • 单元测试（最小的测试是函数，也是白盒测试）
  • 模块测试（根据API测试）
  • 功能测试
  • 集成测试（多个系统端对端测试E2E，也是黑盒测试）

二、单元测试的必要性

  • 你不一定一辈子当前端
  • 开发库（公司里的库必须要有），没有单元测试公司很难有优质代码的积累
  • 测试驱动开发

三、前端业务代码是否需要测试

  • 不需要
  • 业务代码中的共用代码才需要测试：比如表单验证（抽离出组件，测组件）
  • 然后做高质量的组件，输出给团队用

四、什么才算是好的单元测试

  • 测试覆盖率>90%，基本上都是好的测试
  • 测试内容：语句、分支、函数、行

五、测试工具介绍

  • 这里使用Karma + Mocha做单元测试，TravisCI做持续集成
  • Karma（[ˈkɑrmə] 卡玛）是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例
  • Mocha（[ˈmoʊkə] 摩卡）是一个单元测试框架/库，它可以用来写测试用例
  • Sinon（西农）是一个 spy / stub / mock 库，用以辅助测试
  • karma-coverage 来设置 Karma 的代码覆盖率
  • chaijs 提供了dscribe it断言

除此之外了解两个词语：

  • BDD 行为驱动开发 Behavior Driven Development
  • TDD 测试驱动开发 Test Driven Development

五、安装工具及配置

1、创建karma 配置

  • 安装依赖
npm add -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack chai sinon sinon-chai

安装成功： 安装成功

  • 创建 karma.config.js
//frameworks引入'mocha', 就会拥有descibe it函数，frameworks引入'sinon-chai'，就会有sinon.fake()，expect函数
//files 检索 tests/**/*.spec.js文件
//browsers 使用的是ChromeHeadless,无头浏览器

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'],
    autoWatch: true,

    browsers: ['ChromeHeadless']
  })
}
  • 修改package.json 中scripts
  "scripts": {
      ...
    "test": "karma start --single-run",
    "test:unit": "karma start",
    "test:unit:old": "vue-cli-service test:unit",//vue原有提供的代码
    ...
  },

2、创建单元测试覆盖率

  • 安装依赖

vue-test-utils:vue-test-utils官网配置覆盖率

npm install --save-dev karma-coverage cross-env
npm install --save-dev babel-plugin-istanbul
  • 更新.babelrc 文件
{
  ……
  env: {
    test: {
      "plugins": ["istanbul"]
    }
  }
  ……
}
  • 更新 karma.conf.js文件
module.exports = function (config) {
  config.set({
  // ...

    reporters: ['spec', 'coverage'],

    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}
  • 更新test脚本
// 加上cross-env BABEL_ENV=test
{
  "scripts": {
    "test": "cross-env BABEL_ENV=test karma start --single-run"
  }
}

六、如何写单元测试

  • 在vue脚手架中，不同的单元测试写在tests/unit/**.spec.js

  • vue-test-utils提供的API：官网教你怎么写代码

  • 举例button组件

vue/test-utils
//引入chai，所以有dscribe it expect 函数
import chai, {expect} from 'chai'

//sinon（西农）是一个 spy / stub / mock 库，用以辅助测试
import sinon from 'sinon'
import sinonChai from 'sinon-chai'

//vue-test-utils 提供的工具
import {shallowMount, mount} from '@vue/test-utils'

//引入要测试的组件
import Button from '../../src/button/button'

chai.use(sinonChai)


describe('Button.vue', () => {
    it('存在.', () => {
        expect(Button).to.exist
    })
    it('可以设置icon.', () => {
        const wrapper = mount(Button, {
            propsData: {
                icon: 'settings'
            }
        })
        const useElement = wrapper.find('use')
        expect(useElement.attributes()['href']).to.equal('#i-settings')
    })
    it('可以设置loading.', () => {
        const wrapper = mount(Button, {
            propsData: {
                icon: 'settings',
                loading: true
            }
        })
        const vm = wrapper.vm
        const useElements = vm.$el.querySelectorAll('use')
        expect(useElements.length).to.equal(1)
        expect(useElements[0].getAttribute('xlink:href')).to.equal('#i-loading')
    })

    it('icon 默认的 order 是 1', () => {
        const wrapper = mount(Button, {
            attachToDocument: true,
            propsData: {
                icon: 'settings',
            }
        })
        const vm = wrapper.vm
        const icon = vm.$el.querySelector('svg')
        expect(getComputedStyle(icon).order).to.eq('1')
    })

    it('设置 iconPosition 可以改变 order', () => {
        const wrapper = mount(Button, {
            attachToDocument: true,
            propsData: {
                icon: 'settings',
                iconPosition: 'right'
            }
        })
        const vm = wrapper.vm
        const icon = vm.$el.querySelector('svg')
        expect(getComputedStyle(icon).order).to.eq('2')
    })
    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

    })
})
  • 运行
npm run test:unit

运行成功：单元测试及测试覆盖率

单元测试及测试覆盖率

七、TravisCI 持续集成

  • 每次都需要输入npm run test:unit来测试，如果用TravisCI写好测试用例文件配置相关配置就会自动化测试。
  • 阮一峰文章：http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html
  • 在根目录下配置.travis.yml文件
//nodejs环境，版本为8，选用稳定版本的chrome测试
language: node_js
node_js:
  - "8"
addons:
    chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"
  • 使用github登录官网：https://travis-ci.org/
  • 选中测试项目，且测试项目需要有测试脚本
  • 每次github提交代码都会进行测试