/
IconButton.spec.tsx
142 lines (127 loc) · 4.26 KB
/
IconButton.spec.tsx
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
138
139
140
141
142
import * as React from 'react';
import {mount} from 'enzyme';
import {render} from '@testing-library/react';
import IconButton, {iconButtonIdentifier} from '../lib/IconButton';
import {SystemIcon} from '@workday/canvas-kit-react-icon';
import {activityStreamIcon} from '@workday/canvas-system-icons-web';
import ReactDOMServer from 'react-dom/server';
import {axe} from 'jest-axe';
describe('Icon Button', () => {
const cb = jest.fn();
afterEach(() => {
cb.mockReset();
});
test('render an icon button with id', () => {
const component = mount(
<IconButton id="myBtn" aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />
</IconButton>
);
expect(component.find('button').props().id).toBe('myBtn');
component.unmount();
});
it('should have an identifier class', () => {
const {getByRole} = render(
<IconButton aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />
</IconButton>
);
expect(getByRole('button').className).toContain(iconButtonIdentifier);
});
it('should compose custom classNames with the identifier class', () => {
const testClassName = 'test classname';
const {getByRole} = render(
<IconButton className={testClassName} aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />
</IconButton>
);
expect(getByRole('button').className).toContain(`${iconButtonIdentifier} ${testClassName}`);
});
test('should call a callback function', () => {
const component = mount(
<IconButton onClick={cb} aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />
</IconButton>
);
const button = component.find('button');
button.simulate('click');
expect(cb.mock.calls.length).toBe(1);
component.unmount();
});
test('should not call a callback function when disabled', () => {
const component = mount(
<IconButton onClick={cb} disabled={true} aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />
</IconButton>
);
const button = component.find('button');
button.simulate('click');
expect(cb.mock.calls.length).toBe(0);
component.unmount();
});
test('should call onToggleChange when toggle prop changes', () => {
const wrapper = mount(
<IconButton toggled={false} onToggleChange={cb} aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />
</IconButton>
);
wrapper.setProps({toggled: true});
wrapper.update();
wrapper.setProps({toggled: true});
wrapper.update();
wrapper.setProps({toggled: undefined});
wrapper.update();
expect(cb.mock.calls.length).toBe(2);
});
});
describe('Icon Button Accessibility', () => {
const cb = jest.fn();
afterEach(() => {
cb.mockReset();
});
test('icon button should be using HTML5 <button> tag', () => {
const component = mount(
<IconButton aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />{' '}
</IconButton>
);
expect(component.getDOMNode().tagName.toLowerCase()).toEqual('button');
component.unmount();
});
test('enabled icon button should NOT have disabled attribute set', () => {
const component = mount(
<IconButton disabled={false} aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />{' '}
</IconButton>
);
expect(
component
.find('button')
.getDOMNode()
.hasAttribute('disabled')
).toEqual(false);
component.unmount();
});
test('disabled icon button should have disabled attribute set', () => {
const component = mount(
<IconButton disabled={true} aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />{' '}
</IconButton>
);
expect(
component
.find('button')
.getDOMNode()
.hasAttribute('disabled')
).toEqual(true);
component.unmount();
});
test('IconButton should pass axe DOM accessibility guidelines', async () => {
const html = ReactDOMServer.renderToString(
<IconButton title="Activity Stream" aria-label="Activity Stream">
<SystemIcon icon={activityStreamIcon} />{' '}
</IconButton>
);
expect(await axe(html)).toHaveNoViolations();
});
});