单元测试(二)

栏目: 编程工具 · 发布时间: 6年前

内容简介:上次谈了用那么,有没有一种方法,使这些流程自动化,自动将测试的结果输出到某个可见的地方(例如:终端)?这次就来尝试完成这个过程。这次我们需要用到:

上次谈了用 chaichai-spies 来进行单元测试,但是这种测试方法存在着一些不方便之处,每次改动代码之后都需要刷新浏览器,打开开发者工具,来查看有没有报错。

那么,有没有一种方法,使这些流程自动化,自动将测试的结果输出到某个可见的地方(例如:终端)?这次就来尝试完成这个过程。

用到的工具

这次我们需要用到:

  • Karma:卡玛是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例。
  • Mocha:摩卡是一个单元测试框架/库,它可以用来写测试用例。
  • Sinon:西农是一个 spy / stub / mock 库,用以辅助测试。

安装

执行下面的命令安装工具。别一个一个地看包名了,全都安装就完事了。 npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

配置 Karma

新建一个 karma.conf.js,并将下面的内容复制进去。

module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],
    client: {
      chai: {
        includeStack: true
      }
    },

    // list of files / patterns to load in the browser
    files: ['dist/**/*.test.js', 'dist/**/*.test.css'],

    // list of files / patterns to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {},

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['ChromeHeadless'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  });
};
复制代码

重写测试用例

新建一个 test 文件夹,并在里面建立一个 button.test.js 的文件,接下来将在这个文件里面重写测试用例。

const expect = chai.expect;
import Vue from 'vue';
import Button from '../src/button';

Vue.config.productionTip = false;
Vue.config.devtools = false;

describe('Button', () => {
  it('存在.', () => {
    expect(Button).to.be.ok;
  });

  it('可以接受 color 作为类名', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'red'
      }
    }).$mount(div);
    const element = vm.$el;
    //我断言这个生成的 button 有一个类名叫 'red' 为真
    expect(element.classList.contains('red')).to.eq(true);
    vm.$el.remove();
    vm.$destroy();
  });

  it('点击 button 触发 click 事件', () => {
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'red'
      }
    }).$mount();
    //间谍函数
    const callback = sinon.fake();
    vm.$on('click', callback);
    vm.$el.click();
    expect(callback).to.have.been.called;
  });
});
复制代码

和之前的测试用例类似,就稍微改变了结构。

创建测试脚本

为了方便启动,我们将启动命令写到 package.json 里面。

"scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-minify && karma start --single-run"
 }
复制代码

谈谈两个命令中的两个参数的意义。

parcel
<slot></slot>

使用

运行一次查看结果

如果只想看看测试用例的结果就运行下面的命令。 npm run test

单元测试(二)

从图中的运行结果可以看出,在输入这个命令之后,会进行组件打包、读取测试用例文件、开启服务器、启动浏览器、运行测试用例等等一系列操作,最后将运行结果输出。图中显示一共有3个测试,通过了3个,也就是测试用例全部通过。

监测测试结果

如果想随时地监测测试用例文件的运行结果就用这个命令。 npm run dec-test

单元测试(二)

它启动之后,会先输入当前测试用例的运行结果,然后进行监测,当测试用例文件发送变化时,它就会再一次的运行并输入结果。

我们尝试将测试颜色作为类名的测试改一下。

it('可以接受 color 作为类名', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const Constructor = Vue.extend(Button);
    const vm = new Constructor({
      propsData: {
        color: 'black'
      }
    }).$mount(div);
    const element = vm.$el;
    //我断言这个生成的 button 有一个类名叫 'red' 为真
    expect(element.classList.contains('red')).to.eq(true);
    vm.$el.remove();
    vm.$destroy();
  });
复制代码

来看看终端有什么变化。

单元测试(二)

这里我们看到又运行了一次测试用例,显示有一个测试失败了,也就是我们刚刚改的那一个。

我们可以利用这个功能,来协助我们来写测试用例。

如何更自动化?

虽然我们现在能够在本地开启监听服务,随时检查测试用例的通过情况,但是还是要手动地开启服务。

那么,有没有一种办法,在云端自动进行测试呢?下次来讲讲将代码上传至 Github 后,利用云服务自动测试代码,并将结果通知给我们。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Design systems

Design systems

Not all design systems are equally effective. Some can generate coherent user experiences, others produce confusing patchwork designs. Some inspire teams to contribute to them, others are neglected. S......一起来看看 《Design systems》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

html转js在线工具
html转js在线工具

html转js在线工具