all files / tests/unit/ button.spec.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
 
 
1×
 
 
1×
1×
1×
 
1×
1×
1×
 
 
 
 
1×
1×
1×
 
1×
1×
1×
 
 
 
 
 
1×
 
 
 
 
 
1×
1×
 
 
1×
1×
1×
1×
1×
 
 
 
 
1×
1×
1×
1×
 
 
 
 
 
 
 
 
 
 
1×
1×
1×
1×
1×
 
 
 
 
 
1×
1×
1×
1×
 
1×
 
1×
 
 
 
 
1×
 
1×
1×
1×
1×
 
 
 
 
import chai, { expect } from "chai";
import Vue from 'vue'
import sinon from 'sinon'
import sinonChai from 'sinon-chai'
chai.use(sinonChai)
import { shallowMount, mount } from "@vue/test-utils"
import Button from "@/button/button.vue";
describe("Button.vue", () => {
    it('存在.', () => {
        expect(Button).to.exist
    })
    it('可以设置icon.', () => {
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
            propsData: {
                icon: 'up'
            }
        }).$mount()
        const useElement = vm.$el.querySelector('use')
        expect(useElement.getAttribute('xlink:href')).to.equal('#i-up')
        vm.$destroy()
    })
    it('可以设置loading.', () => {
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
            propsData: {
                icon: 'up',
                loading: true
            }
        }).$mount()
        const wrapper = mount(Button, {
            propsData: {
                icon: 'up',
                loading: true
            }
        })
        const useElements = wrapper.find('use')
        expect(useElements.attributes().href).to.equal('#i-loading')
    })
 
    it('icon 默认的 order 是 1', () => {
        const div = document.createElement('div')
        document.body.appendChild(div)
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
            propsData: {
                icon: 'up'
            }
        }).$mount(div)
        const icon = vm.$el.querySelector('svg')
        expect(getComputedStyle(icon).order).to.eq('1')
        vm.$el.remove()
        vm.$destroy()
        // const wrapper = mount(Button, {
        //     attachToDocument:true,
        //     propsData: {
        //         icon: 'up'
        //     }
        // })
        // const svg = wrapper.find('svg')
        // expect(getComputedStyle(svg).order).to.eq('1')
    })
 
    it('设置 position 可以改变 order', () => {
        const div = document.createElement('div')
        document.body.appendChild(div)
        const Constructor = Vue.extend(Button)
        const vm = new Constructor({
            propsData: {
                icon: 'up',
                position: 'right'
            }
        }).$mount(div)
        const icon = vm.$el.querySelector('svg')
        expect(getComputedStyle(icon).order).to.eq('2')
        vm.$el.remove()
        vm.$destroy()
    })
    it('点击 button 触发 click 事件', () => {
 
        const wrapper = mount(Button, {
            propsData: {
                icon: 'up',
            }
        })
        const { vm } = wrapper
 
        const callback = sinon.fake();
        vm.$on('click', callback)
        vm.$el.click()
        expect(callback).to.have.been.called
 
    })
});