/
index.spec.js
101 lines (80 loc) · 3.91 KB
/
index.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
96
97
98
99
100
101
import Vue from 'vue';
import sinon from 'sinon';
import VueRouter from 'vue-router';
import { createLocalVue, mount } from '@vue/test-utils';
import Login from '@/login/index.vue';
import Service from '@/login/service';
import router from '@/router';
describe('Login Page', () => {
it('When 用户访问登录页面,Then 看到用户名、密码输入框和提交按钮', () => {
const wrapper = mount(Login);
expect(wrapper.find('input.username').exists()).toBeTruthy();
expect(wrapper.find('input.password').exists()).toBeTruthy();
expect(wrapper.find('button.submit').exists()).toBeTruthy();
});
it('Given 用户访问登录页面,When 用户输入用户名为 谢小呆, 密码为 123,Then 页面中的 user 为 {username: "谢小呆", password: "123"}', () => {
const wrapper = mount(Login);
wrapper.find('input.username').setValue('谢小呆');
wrapper.find('input.password').setValue('123');
const expectedResult = { username: '谢小呆', password: '123' };
expect(wrapper.vm.user).toEqual(expectedResult);
});
it('Given 用户访问登录页面 And 用户输入用户名、密码,When 点击 submit,Then onSubmit 方法被调用', async () => {
const wrapper = mount(Login);
const onSubmit = sinon.stub(wrapper.vm, 'onSubmit');
wrapper.find('input.username').setValue('谢小呆');
wrapper.find('input.password').setValue('123');
// @vue/test-utils 更新到 1.0.3 之后 setValue 不能及时反映到 dom 的 disabled 属性上,需要异步
await Vue.nextTick();
wrapper.find('button.submit').trigger('click');
expect(onSubmit.called).toBeTruthy();
});
it('Given 用户访问登录页面,When 用户未输入登录信息,Then submit 按钮为 disabled And 点击 submit 不会调用 onSubmit', async () => {
const wrapper = mount(Login);
const onSubmit = sinon.stub(wrapper.vm, 'onSubmit');
const submitBtn = wrapper.find('button.submit');
await Vue.nextTick();
submitBtn.trigger('click');
expect(submitBtn.attributes('disabled')).toEqual('disabled');
expect(onSubmit.called).toBeFalsy();
});
it('Given 用户访问登录页面 And 用户输入用户名、密码,When 点击 submit,Then 调用 Service.login() 后返回 200 And 调用 loginSuccess 方法', async () => {
const stub = sinon.stub(Service, 'login');
stub.resolves({ status: 200 });
const wrapper = mount(Login);
const loginSuccess = sinon.stub(wrapper.vm, 'loginSuccess');
const expectedUser = { username: '谢小呆', password: '123' };
wrapper.find('input.username').setValue(expectedUser.username);
wrapper.find('input.password').setValue(expectedUser.password);
await Vue.nextTick();
wrapper.find('button.submit').trigger('click');
await Vue.nextTick();
expect(loginSuccess.called).toBeTruthy();
expect(stub.alwaysCalledWith(expectedUser)).toBeTruthy();
stub.restore();
});
it('Given 用户访问登录页面 And 用户输入用户名、密码,When 点击 submit,Then 调用 Service.login() 后返回不等于 200 And 调用 loginFailure 方法', async () => {
const stub = sinon.stub(Service, 'login');
stub.resolves({ status: 404 });
const wrapper = mount(Login);
const loginFailure = sinon.stub(wrapper.vm, 'loginFailure');
const user = { username: '谢小呆', password: '123' };
wrapper.find('input.username').setValue(user.username);
wrapper.find('input.password').setValue(user.password);
await Vue.nextTick();
wrapper.find('button.submit').trigger('click');
await Vue.nextTick();
expect(loginFailure.called).toBeTruthy();
stub.restore();
});
it('When 执行 loginSuccess(),Then $route.path 为 /', async () => {
const localVue = createLocalVue();
localVue.use(VueRouter);
const wrapper = mount(Login, {
localVue,
router,
});
wrapper.vm.loginSuccess();
expect(wrapper.vm.$route.path).toEqual('/');
});
});