-
Notifications
You must be signed in to change notification settings - Fork 91
/
StyledAvatar.spec.tsx
106 lines (77 loc) · 3.37 KB
/
StyledAvatar.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
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import React from 'react';
import { render, renderRtl } from 'garden-test-utils';
import { StyledAvatar } from './StyledAvatar';
import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
describe('StyledAvatar', () => {
it('renders the expected element', () => {
const { container } = render(<StyledAvatar />);
expect(container.firstChild!.nodeName).toBe('FIGURE');
});
it('renders avatar styling by default', () => {
const { container } = render(<StyledAvatar />);
expect(container.firstChild).toHaveStyleRule('border-radius', '50%');
});
it('renders system styling if provided', () => {
const { container } = render(<StyledAvatar isSystem />);
expect(container.firstChild).toHaveStyleRule('border-radius', DEFAULT_THEME.borderRadii.md);
});
describe('color', () => {
it('renders surface color as expected', () => {
const { container } = render(<StyledAvatar status="away" surfaceColor="red" />);
expect(container.firstChild).toHaveStyleRule('color', 'red');
});
it('renders background color as expected', () => {
const { container } = render(<StyledAvatar backgroundColor="red" />);
expect(container.firstChild).toHaveStyleRule('background-color', 'red');
});
it('renders foreground color as expected', () => {
const { container } = render(<StyledAvatar foregroundColor="red" />);
expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '> svg' });
});
});
describe('size', () => {
it('renders extrasmall', () => {
const { container } = render(<StyledAvatar size="extrasmall" />);
expect(container.firstChild).toHaveStyleRule('width', '24px');
});
it('renders small', () => {
const { container } = render(<StyledAvatar size="small" />);
expect(container.firstChild).toHaveStyleRule('width', '32px');
});
it('renders medium', () => {
const { container } = render(<StyledAvatar size="medium" />);
expect(container.firstChild).toHaveStyleRule('width', '40px');
});
it('renders large', () => {
const { container } = render(<StyledAvatar size="large" />);
expect(container.firstChild).toHaveStyleRule('width', '48px');
});
});
describe('status', () => {
it('renders away', () => {
const { container } = render(<StyledAvatar status="away" />);
const color = getColor('yellow', 400);
expect(container.firstChild).toHaveStyleRule('box-shadow', DEFAULT_THEME.shadows.sm(color!));
});
it('renders available', () => {
const { container } = render(<StyledAvatar status="available" />);
const color = getColor('mint', 400);
expect(container.firstChild).toHaveStyleRule('box-shadow', DEFAULT_THEME.shadows.sm(color!));
});
it('renders active', () => {
const { container } = render(<StyledAvatar status="active" />);
const color = getColor('crimson', 400);
expect(container.firstChild).toHaveStyleRule('box-shadow', DEFAULT_THEME.shadows.sm(color!));
});
});
it('renders RTL styling if provided', () => {
const { container } = renderRtl(<StyledAvatar />);
expect(container.firstChild).toHaveStyleRule('left', '2px', { modifier: '::after' });
});
});