button.spec.js
1.74 KB
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
import { createVue, destroyVM } from '../util';
describe('Button.vue', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('should render as <a>', done => {
vm = createVue(`
<Button to="http://www.thinkinfe.tech/">Think in FE</Button>
`);
expect(vm.$el.tagName).to.equal('A');
done();
});
it('should render as <button>', done => {
vm = createVue(`
<Button>Think in FE</Button>
`);
expect(vm.$el.tagName).to.equal('BUTTON');
done();
});
it('handle with `type` attribute', done => {
// should render with `type` attribute
// if it is a <button>
vm = createVue(`
<Button htmlType="reset">Think in FE</Button>
`);
expect(vm.$el.getAttribute('type')).to.equal('reset');
// should't render with `type` attribute
// if it is a <button>
vm = createVue(`
<Button to="http://www.thinkinfe.tech/" htmlType="reset">Think in FE</Button>
`);
expect(vm.$el.getAttribute('type')).to.equal(null);
done();
});
it('should change loading state', done => {
vm = createVue({
template: `
<Button :loading="loading" @click="fetch">Think in FE</Button>
`,
data() {
return {loading: false};
},
methods: {
fetch() {
this.loading = true;
}
}
});
vm.$el.click();
vm.$nextTick(() => {
expect(vm.$el.classList.contains('ivu-btn-loading')).to.equal(true);
const $icons = vm.$el.querySelectorAll('.ivu-icon');
expect($icons.length).to.equal(1);
expect($icons[0].classList.contains('ivu-load-loop')).to.equal(true);
expect($icons[0].classList.contains('ivu-icon-ios-loading')).to.equal(true);
done();
});
});
});