记一次简单的vue组件单元测试

测试框架：mocha
抹平环境：karma
断言库：chai
BDD库：jsmine

const chai = require('chai');
const assert = chai.assert;
const expect = chai.expect();
const should = chai.should();

function once(fn) {
    var returnValue, called = false;
    return function () {
        if (!called) {
            called = true;
            returnValue = fn.apply(this, arguments);
        }
        return returnValue;
    };
}

it('calls the original function', function () {
    var callback = sinon.fake();
    var proxy = once(callback);
    proxy();
    assert(callback.called);
});

it('calls the original function only once', function () {
    var callback = sinon.fake();
    var proxy = once(callback);
    proxy();
    proxy();
    assert(callback.calledOnce);
    // ...or:
    // assert.equals(callback.callCount, 1);
});

it('calls original function with right this and args', function () {
    var callback = sinon.fake();
    var proxy = once(callback);
    var obj = {};
    proxy.call(obj, 1, 2, 3);
    assert(callback.calledOn(obj));
    assert(callback.calledWith(1, 2, 3));
});

it("returns the return value from the original function", function () {
    var callback = sinon.fake.returns(42);
    var proxy = once(callback);
    assert.equals(proxy(), 42);
});

"test should call subscribers on publish": function() {
    var callback = sinon.spy();
    PubSub.subscribe("message", callback);
    PubSub.publishSync("message");
    assertTrue(callback.called);
}

{
    setUp: function () {
        sinon.spy(jQuery, "ajax");
    },
    tearDown: function () {
        jQuery.ajax.restore();// 释放出spy
    },
}

const webpackConfig = require('../../build/webpack.test.conf');
module.exports = function karmaConfig(config) {
  config.set({
    browsers: ['PhantomJS'],// Chrome,ChromeCanary,PhantomJS,Firefox,Opera,IE,Safari，Chrome和PhantomJS已经在karma中内置，其余需要插件
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],// ['jasmine','mocha','qunit']等等，需要额外通过NPM安装
    reporters: ['spec', 'coverage'],//  默认值为progress，也可以是dots；growl，junit，teamcity或者coverage需要插件。spec需要安装karma-spec-reporter插件。
    files: ['./index.js'],// 浏览器加载的文件，  `'test/unit/*.spec.js',`等价于 `{pattern: 'test/unit/*.spec.js', watched: true, served: true, included: true}`。
    preprocessors: {
      './index.js': ['webpack', 'sourcemap'],// 预处理加载的文件
    },
    webpack: webpackConfig,// webpack配置，karma会自动监控test的entry points
    webpackMiddleware: {
      noInfo: true, // webpack-dev-middleware配置
    },
    // 配置reporter 
    coverageReporter: {
      dir: './coverage',
      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }],
    },
  });
};

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack
const webpackConfig = require('../../build/webpack.test.conf');
module.exports = function karmaConfig(config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['Chrome'],
    frameworks: ['mocha'],
    reporters: ['spec', 'coverage'],
    files: ['./specs/*.spec.js'],
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap'],
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true,
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [{ type: 'lcov', subdir: '.' }, { type: 'text-summary' }],
    },
  });
};

import { mount } from '@vue/test-utils';
import { expect } from 'chai';
import ChatText from '@/pages/chat/chatroom/view/components/text';
describe('ChatText.vue', () => {
  it('人生中第一次单元测试：', () => {
    const wrapper = mount(ChatText);
    console.log(wrapper.html());
    const subfix = '</p> <p>默认文字</p></div>';
    expect(wrapper.html()).contain(subfix);
  });
});

var page = require('webpage').create();
page.open('http://www.google.com', function() {
    setTimeout(function() {
        page.render('google.png');
        phantom.exit();
    }, 200);
});

phantomjs foo.js

this.vm.$options.propsData // 组件的自定义属性，是因为2.1.x版本中没有$props对象，https://vue-test-utils.vuejs.org/zh/api/wrapper/#setprops-props
const elm = options.attachToDocument ? createElement() : undefined // "<div>" or undefined
slots // 传递一个slots对象到组件，用来测试slot是否生效的，值可以是组件，组件数组或者字符串，key是slot的name
mocks // 模拟全局注入
stubs // 存根子组件

/*
  title: vue插件eventbus单测
  author：frankkai
  target: 1.Vue.use(eventBus)是否可以正确注入$bus到prototype
          2.注入的$bus是否可以成功挂载到组件实例
          3.$bus是否可以正常订阅消息($on)和广播消息($emit)
 */
import eventbusPlugin from '@/plugins/bus';
import { createLocalVue, createWrapper } from '@vue/test-utils';
import { expect } from 'chai';
const localVue = createLocalVue();
localVue.use(eventbusPlugin);
const localVueInstance = (() =>
  localVue.component('empty-vue-component', {
    render(createElement) {
      return createElement('div');
    },
  }))();
const Constructor = localVue.extend(localVueInstance);
const vm = new Constructor().$mount();
const wrapper = createWrapper(vm);
describe('/plugins/bus.js', () => {
  it('Vue.use(eventBus)是否可以正确注入$bus到prototype:', () => {
    expect('$bus' in localVue.prototype).to.equal(true);
  });
  it('注入的$bus是否可以成功挂载到组件实例:', () => {
    expect('$bus' in wrapper.vm).to.equal(true);
  });
  it('$bus是否可以正常订阅消息($on)和广播消息($emit):', () => {
    wrapper.vm.$bus.$on('foo', (payload) => {
      expect(payload).to.equal('$bus emitted an foo event');
    });
    wrapper.vm.$bus.$on('bar', (payload) => {
      expect(payload).to.equal('$bus emitted an bar event');
    });
    expect(Object.keys(vm.$bus._events).length).to.equal(2);
    wrapper.vm.$bus.$emit('foo', '$bus emitted an foo event');
    wrapper.vm.$bus.$emit('bar', '$bus emitted an bar event');
  });
});