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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// @flow
import { expect } from 'chai';
import React from 'react';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import Login from '../../app/components/Login';
import AccountInput from '../../app/components/AccountInput';
import type { ShallowWrapper } from 'enzyme';
describe('components/Login', () => {
it('notifies on the first change after failure', () => {
let callback = sinon.spy();
const props = {
onFirstChangeAfterFailure: callback,
};
const component = renderWithProps( props );
const accountInput = component.find(AccountInput);
// Change the props to a failed state
component.setProps({ account: {
status: 'failed',
}});
// Write something in the input field
setInputText(accountInput, 'foo');
expect(callback.calledOnce).to.be.true;
// Reset the test state
callback.reset();
// Write some other thing in the input field
setInputText(accountInput, 'bar');
expect(callback.calledOnce).to.be.false;
});
it('doesn\'t show the footer when logging in', () => {
const component = renderLoggingIn();
const footer = component.find('.login-footer');
expect(footer.hasClass('login-footer--invisible')).to.be.true;
});
it('shows the footer and account input when not logged in', () => {
const component = renderNotLoggedIn();
const footer = component.find('.login-footer');
expect(footer.hasClass('login-footer--invisible')).to.be.false;
expect(component.find(AccountInput).exists()).to.be.true;
});
it('doesn\'t show the footer nor account input when logged in', () => {
const component = renderLoggedIn();
const footer = component.find('.login-footer');
expect(footer.hasClass('login-footer--invisible')).to.be.true;
expect(component.find('.login-form__fields').hasClass('login-form__fields--invisible')).to.be.true;
});
it('logs in with the entered account number when clicking the login icon', (done) => {
const component = renderNotLoggedIn();
component.setProps({
onLogin: (an) => {
try {
expect(an).to.equal('12345');
done();
} catch (e) {
done(e);
}
},
});
const accountInput = component.find(AccountInput);
setInputText(accountInput, '12345');
component.find('.login-form__submit').simulate('click');
});
});
const defaultAccount = {
accountToken: null,
expiry: null,
status: 'none',
error: null,
};
const defaultProps = {
account: defaultAccount,
onLogin: () => {},
onSettings: () => {},
onChange: () => {},
onFirstChangeAfterFailure: () => {},
onExternalLink: () => {},
};
function renderLoggedIn() {
return renderWithProps({
account: Object.assign(defaultAccount, {
status: 'ok',
}),
});
}
function renderLoggingIn() {
return renderWithProps({
account: Object.assign(defaultAccount, {
status: 'logging in',
}),
});
}
function renderNotLoggedIn() {
return renderWithProps({
account: Object.assign(defaultAccount, {
status: 'none',
}),
});
}
function renderWithProps(customProps): ShallowWrapper {
const props = Object.assign({}, defaultProps, customProps);
return shallow( <Login { ...props } /> );
}
function setInputText(input: ShallowWrapper, text: string) {
input.simulate('change', text);
}
|
