/
LoadingSpinner.test.js
92 lines (80 loc) · 2.64 KB
/
LoadingSpinner.test.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
import React from 'react';
import renderer from 'react-test-renderer';
import { shallow, mount } from 'enzyme';
import LoadingSpinner from '../../src/loading-spinner';
describe('LoadingSpinner', () => {
it('renders correctly', () => {
const component = mount(
<div style={{ position: 'relative' }}>
<LoadingSpinner />
</div>
);
expect(component.html()).toMatchSnapshot();
});
it('renders correctly with a message', () => {
const component = mount(
<div style={{ position: 'relative' }}>
<LoadingSpinner message={{ content: 'loading awesome content' }} />
</div>
);
expect(component.html()).toMatchSnapshot();
});
it('renders with a warning when parent is not relative or absolute', () => {
const warn = jest.fn();
const originalWarn = console.warn;
console.warn = warn;
mount(
<div style={{ position: 'static' }}>
<LoadingSpinner />
</div>
);
expect(warn).toHaveBeenCalledTimes(1);
const warnArguments = warn.mock.calls[0];
expect(warnArguments[0]).toMatchSnapshot();
console.warn = originalWarn;
});
it('computes message content and style', () => {
const message = {
content: 'loading awesome content',
size: 14,
color: 'blue'
};
const size = '5em';
const spinner = shallow(
<LoadingSpinner message={message} size={size} />
);
const messageNode = spinner.find('.message');
expect(messageNode.text()).toBe(message.content);
expect(messageNode.prop('style').marginTop).toBe(size);
expect(messageNode.prop('style').fontSize).toBe(message.size);
expect(messageNode.prop('style').color).toBe(message.color);
});
it('computes overlay style', () => {
const overlayColor = 'green';
const spinner = shallow(
<LoadingSpinner overlayColor={overlayColor} />
);
const overlayNode = spinner.find('.loading-spinner-overlay');
expect(overlayNode.prop('style').backgroundColor).toBe(overlayColor);
});
it('computes spinner style', () => {
const size = '5em';
const color = 'green';
const spinner = shallow(
<LoadingSpinner size={size} color={color} />
);
const overlayNode = spinner.find('.spinner');
expect(overlayNode.prop('style').fontSize).toBe(size);
expect(overlayNode.prop('style').color).toBe(color);
});
describe('getLocals', () => {
it('computes className', () => {
const spinner = new LoadingSpinner({
className: 'some-class'
});
const { className } = spinner.getLocals();
expect(className).toContain('loading-spinner');
expect(className).toContain('some-class');
});
});
});