/
Button.spec.js
137 lines (100 loc) · 4.65 KB
/
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
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
134
135
136
137
import React from 'react';
import { shallow, mount } from 'enzyme';
import { Button } from '../';
describe('Button', () => {
it('should render children', () => {
const wrapper = shallow(<Button>Ello world</Button>);
expect(wrapper.text()).toBe('Ello world');
});
it('should render custom element', () => {
const Link = props => <a href="/home" {...props}>{props.children}</a>;
const wrapper = mount(<Button tag={Link}>Home</Button>);
expect(wrapper.find('a').hostNodes().length).toBe(1);
expect(wrapper.text()).toBe('Home');
});
it('should render an anchor element if href exists', () => {
const wrapper = mount(<Button href="/home">Home</Button>);
expect(wrapper.find('a').hostNodes().length).toBe(1);
expect(wrapper.text()).toBe('Home');
});
it('should render type as undefined by default when tag is "button"', () => {
const wrapper = mount(<Button>Home</Button>);
expect(wrapper.find('button').hostNodes().prop('type')).toBe(undefined);
expect(wrapper.text()).toBe('Home');
});
it('should render type as "button" by default when tag is "button" and onClick is provided', () => {
const wrapper = mount(<Button onClick={() => {}}>Home</Button>);
expect(wrapper.find('button').hostNodes().prop('type')).toBe('button');
expect(wrapper.text()).toBe('Home');
});
it('should render type as user defined when defined by the user', () => {
const wrapper = mount(<Button type="submit">Home</Button>);
expect(wrapper.find('button').hostNodes().prop('type')).toBe('submit');
expect(wrapper.text()).toBe('Home');
});
it('should not render type by default when the type is not defined and the tag is not "button"', () => {
const wrapper = mount(<Button tag="a">Home</Button>);
expect(wrapper.find('a').hostNodes().prop('type')).toBe(undefined);
expect(wrapper.text()).toBe('Home');
});
it('should not render type by default when the type is not defined and the href is defined', () => {
const wrapper = mount(<Button href="#">Home</Button>);
expect(wrapper.find('a').hostNodes().prop('type')).toBe(undefined);
expect(wrapper.text()).toBe('Home');
});
it('should render buttons with default color', () => {
const wrapper = shallow(<Button>Default Button</Button>);
expect(wrapper.hasClass('btn-secondary')).toBe(true);
});
it('should render buttons with other colors', () => {
const wrapper = shallow(<Button color="danger">Default Button</Button>);
expect(wrapper.hasClass('btn-danger')).toBe(true);
});
it('should render buttons with outline variant', () => {
const wrapper = shallow(<Button outline>Default Button</Button>);
expect(wrapper.hasClass('btn-outline-secondary')).toBe(true);
});
it('should render buttons with outline variant with different colors', () => {
const wrapper = shallow(<Button outline color="info">Default Button</Button>);
expect(wrapper.hasClass('btn-outline-info')).toBe(true);
});
it('should render buttons at different sizes', () => {
const small = shallow(<Button size="sm">Small Button</Button>);
const large = shallow(<Button size="lg">Large Button</Button>);
expect(small.hasClass('btn-sm')).toBe(true);
expect(large.hasClass('btn-lg')).toBe(true);
});
it('should render block level buttons', () => {
const block = shallow(<Button block>Block Level Button</Button>);
expect(block.hasClass('d-block w-100')).toBe(true);
});
it('should render close icon with custom child and props', () => {
const testChild = 'close this thing';
const wrapper = shallow(<Button close>{testChild}</Button>);
expect(wrapper.contains(testChild));
});
describe('onClick', () => {
it('calls props.onClick if it exists', () => {
const onClick = jest.fn();
const wrapper = mount(<Button onClick={onClick}>Testing Click</Button>);
wrapper.find('button').hostNodes().simulate('click');
expect(onClick).toHaveBeenCalled();
});
it('returns the value returned by props.onClick', () => {
const onClick = jest.fn(() => 1234);
const wrapper = mount(<Button onClick={onClick}>Testing Click</Button>);
const result = wrapper.find('button').props().onClick();
expect(onClick).toHaveBeenCalled();
expect(result).toEqual(1234);
});
it('is not called when disabled', () => {
const e = createSpyObj('e', ['preventDefault']);
const wrapper = mount(<Button>Testing Click</Button>);
wrapper.instance().onClick(e);
expect(e.preventDefault).not.toHaveBeenCalled();
wrapper.setProps({ disabled: true });
wrapper.instance().onClick(e);
expect(e.preventDefault).toHaveBeenCalled();
});
});
});