/
Avatar.test.tsx
142 lines (120 loc) · 4.26 KB
/
Avatar.test.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 React from 'react';
import {mountWithApp} from 'tests/utilities';
import {Image} from '../../Image';
import {Avatar} from '../Avatar';
describe('<Avatar />', () => {
describe('intials', () => {
it('renders initials if the image is not provided', () => {
const avatar = mountWithApp(<Avatar initials="DL" />);
expect(avatar).toContainReactComponent('span', {
className: 'Initials',
});
expect(avatar).toContainReactText('DL');
expect(avatar).not.toContainReactComponent(Image);
});
});
describe('source', () => {
it('renders an Image component with the Avatar source if one is provided', () => {
const src = 'image/path/';
const avatar = mountWithApp(<Avatar source={src} />);
expect(avatar).toContainReactComponent(Image, {source: src});
});
it('safely updates', () => {
const src = 'image/path/';
const avatar = mountWithApp(<Avatar source={src} />);
expect(() => {
avatar.setProps({source: 'image/new/path'});
}).not.toThrow();
});
});
describe('customer', () => {
it('renders an inline svg', () => {
const avatar = mountWithApp(<Avatar customer />);
expect(avatar).toContainReactComponentTimes('svg', 1);
});
it('does not render a customer Avatar if a source is provided', () => {
const src = 'image/path/';
const avatar = mountWithApp(<Avatar customer source={src} />);
expect(avatar).not.toContainReactComponent('svg');
});
});
describe('Initials', () => {
it('renders initials if the Image onError prop is triggered and the Intials are provided', () => {
const avatar = mountWithApp(
<Avatar size="large" initials="DL" source="image/path/" />,
);
expect(avatar).toContainReactComponent(Image);
expect(avatar).not.toContainReactComponent('span', {
className: 'Initials',
});
avatar.find(Image)!.trigger('onError');
expect(avatar).not.toContainReactComponent(Image);
expect(avatar).toContainReactComponent('span', {
className: 'Initials',
});
});
it('renders an inline svg if initials are blank', () => {
const avatar = mountWithApp(<Avatar initials="" />);
expect(avatar).toContainReactComponentTimes('svg', 1);
});
});
describe('consumer-specified "onError" hook', () => {
it('gets invoked in the event of an error', () => {
const spy = jest.fn();
const avatar = mountWithApp(
<Avatar
size="large"
initials="DL"
source="image/path/"
onError={spy}
/>,
);
avatar.find(Image)!.trigger('onError');
expect(spy).toHaveBeenCalledTimes(1);
});
});
describe('on Error with changed props', () => {
it('re-renders the image if a the source prop is changed after an error', () => {
const workingSrc = 'image/goodPath/';
const avatar = mountWithApp(
<Avatar size="large" initials="DL" source="image/path/" />,
);
avatar.find(Image)!.trigger('onError');
expect(avatar).not.toContainReactComponent(Image);
avatar.setProps({source: workingSrc});
expect(avatar).toContainReactComponent(Image);
});
});
describe('on Load', () => {
it('safely triggers onLoad', () => {
const avatar = mountWithApp(<Avatar source="image/path/" />);
expect(() => {
avatar.find(Image)!.trigger('onLoad');
}).not.toThrow();
});
});
describe('accessibilityLabel', () => {
it('is passed to the aria-label', () => {
const avatar = mountWithApp(<Avatar accessibilityLabel="Hello World" />);
expect(avatar).toContainReactComponent('span', {
'aria-label': 'Hello World',
});
});
});
describe('name', () => {
it('is passed to the aria-label', () => {
const avatar = mountWithApp(<Avatar name="Hello World" />);
expect(avatar).toContainReactComponent('span', {
'aria-label': 'Hello World',
});
});
});
describe('shape', () => {
it('renders a square background when square is passed to shape', () => {
const avatar = mountWithApp(<Avatar initials="DL" shape="square" />);
expect(avatar).toContainReactComponent('span', {
className: expect.stringContaining('shapeSquare'),
});
});
});
});