单元测试

1.对于组件里面有slot并且slot也是组件的测试方法
比如：

• slides.vue

<div class="lf-slides-wrapper">
                <slot></slot>
            </div>

slides组件的使用

<lf-slides :selected.sync="selected">
   <lf-slides-item name="1">
       <div class="box">1</div>
   </lf-slides-item>
   <lf-slides-item name="2">
       <div class="box">2</div>
   </lf-slides-item>
   <lf-slides-item name="3">
       <div class="box">3</div>
   </lf-slides-item>
   <lf-slides-item name="4">
       <div class="box">4</div>
   </lf-slides-item>
</lf-slides>

测试上面的slides组件
需要先引入父子组件，然后单独声明一个LFSlidesItem组件，在slots中的default中使用这个组件（也就是把使用时的html重写一遍）

• slides.spec.js

it('接受SliderItem，默认展示第一个', (done) => {
    Vue.component('LfSlidesItem', SlidesItem)
    const wrapper = mount(Slides, {
        slots: {
            default: `
                <lf-slides-item name="1">
                    <div class="box1">1</div>
                </lf-slides-item>
                <lf-slides-item name="2">
                    <div class="box2">2</div>
                </lf-slides-item>
                <lf-slides-item name="3">
                    <div class="box3">3</div>
                </lf-slides-item>
                <lf-slides-item name="4">
                    <div class="box4">4</div>
                </lf-slides-item>
            `
        }
    })
    setTimeout(()=>{
//期待第一个存在为true        
expect(wrapper.find('.box1').exists()).to.be.true
        done()
    })
})

2. 对于监听事件通过listeners来监听对应的事件
   1). 简单用法：

listeners: {
    'update:selected': (x)=>{
       setTimeout(()=>{
           expect(x).to.eq('需要等于的值')
       })
    }
}

2). 使用模拟回调的方法

import chai, {expect} from 'chai'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'
chai.use(sinonChai)
listeners: {
    'update:selected': callback
}
setTimeout(() => {
    //期待回调被调用并且回调里面的值是'2'
    expect(callback).to.have.been.calledWith('2')
    done()
},300)

3. 对于自动播放的测试
   思路：设置一个播放的时间，然后通过setTimeout在这段时间后判断对应的回调是否调用

import sinon from 'sinon'
import sinonChai from 'sinon-chai'
it('会自动播放', (done) => {
        Vue.component('LfSlidesItem', SlidesItem)
        const callback = sinon.fake()
        const wrapper = mount(Slides, {
            propsData: {
                autoPlay: true,
                selected: '1',
                autoPlayDelay: 300
            },
            slots: {
                default: `
                    <lf-slides-item name="1">
                        <div class="box1">1</div>
                    </lf-slides-item>
                    <lf-slides-item name="2">
                        <div class="box2">2</div>
                    </lf-slides-item>
                    <lf-slides-item name="3">
                        <div class="box3">3</div>
                    </lf-slides-item>
                    <lf-slides-item name="4">
                        <div class="box4">4</div>
                    </lf-slides-item>
                `
            },
            listeners: {
                'update:selected': callback
            }
        })
        setTimeout(() => {
            //300ms后期待出发了update:selected的回调并且回调里面的参数是'2'
            expect(callback).to.have.been.calledWith('2')
            done()
        },300)
    })

使用karma测试css

1). 安装依赖

yarn add -D @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

2). 创建karma.config.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']
    })
}

3）.改写package scripts

"scripts": {
      ...
    "test": "karma start --single-run",
    "test:unit": "karma start",
    "test:unit:old": "vue-cli-service test:unit",
    ...
  },

4）.在需要测试css的测试用例上加一行：

attachToDocument: true,

这样之前测不了的css就可以通过了，比如下面的

• button.spec.js

it('icon 默认的 order 是 1', () => {
        const wrapper = mount(Button, {
            attachToDocument: true,
            propsData: {
                icon: 'settings',
            }
        })
        const vm = wrapper.vm
        const icon = vm.$el.querySelector('svg')
        //使用karma就可以获取到getComputedStyle(icon)
        expect(getComputedStyle(icon).order).to.eq('1')

    })

这样上面的测试用例就通过了