/
index.spec.tsx
127 lines (111 loc) · 4.95 KB
/
index.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
import * as React from 'react';
import {render, screen, waitFor} from '@testing-library/react';
import {CustomizationProvider} from '@twilio-paste/customization';
// @ts-ignore typescript doesn't like js imports
import axe from '../../../../../.jest/axe-helper';
import {SkeletonLoader} from '../src';
import {Default} from '../stories/index.stories';
describe('SkeletonLoader', () => {
it('should render', () => {
render(<Default />);
expect(screen.getByTestId('default-skeleton')).toBeDefined();
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('background-color', 'colorBackgroundStrong');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('border-radius', 'borderRadius20');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('height', 'sizeIcon20');
});
it('should render layout prop styles', (): void => {
render(
<Default
display="block"
width="size30"
minWidth="size30"
maxWidth="size30"
height="size30"
minHeight="size30"
maxHeight="size30"
size="size30"
/>
);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('display', 'block');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('width', 'size30');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('min-width', 'size30');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('max-width', 'size30');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('height', 'size30');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('min-height', 'size30');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('max-height', 'size30');
});
it('should render size prop styles', (): void => {
render(<Default size="size30" />);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('height', 'size30');
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('width', 'size30');
});
it('should render border-radius prop styles', (): void => {
render(<Default borderRadius="borderRadiusCircle" />);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('border-radius', 'borderRadiusCircle');
});
it('should render top left border-radius prop styles', (): void => {
render(<Default borderTopLeftRadius="borderRadiusCircle" />);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('border-top-left-radius', 'borderRadiusCircle');
});
it('should render top right border-radius prop styles', (): void => {
render(<Default borderTopRightRadius="borderRadiusCircle" />);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('border-top-right-radius', 'borderRadiusCircle');
});
it('should render bottom left border-radius prop styles', (): void => {
render(<Default borderBottomLeftRadius="borderRadiusCircle" />);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('border-bottom-left-radius', 'borderRadiusCircle');
});
it('should render bottom right border-radius prop styles', (): void => {
render(<Default borderBottomRightRadius="borderRadiusCircle" />);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('border-bottom-right-radius', 'borderRadiusCircle');
});
describe('Customization', () => {
it('should have default DOM attribute present', () => {
render(<Default />);
expect(screen.getByTestId('default-skeleton').getAttribute('data-paste-element')).toEqual('SKELETON_LOADER');
});
it('should be able to create custom element dom attribute', () => {
render(<Default element="CUSTOM" />);
expect(screen.getByTestId('default-skeleton').getAttribute('data-paste-element')).toEqual('CUSTOM');
});
it('should apply custom style to default element name', () => {
render(
<CustomizationProvider
baseTheme="default"
theme={TestTheme}
elements={{
SKELETON_LOADER: {
margin: 'space80',
},
}}
>
<Default />
</CustomizationProvider>
);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('margin', '1.75rem');
});
it('should apply custom style to a custom element name', () => {
render(
<CustomizationProvider
baseTheme="default"
theme={TestTheme}
elements={{
CUSTOM_SKELETON_LOADER: {
padding: 'space30',
},
}}
>
<Default element="CUSTOM_SKELETON_LOADER" />
</CustomizationProvider>
);
expect(screen.getByTestId('default-skeleton')).toHaveStyleRule('padding', '0.5rem');
});
});
describe('Accessibility', () => {
it('Should have no accessibility violations', async () => {
const {container} = render(<SkeletonLoader />);
const results = await axe(container);
await waitFor(async () => expect(await results).toHaveNoViolations());
});
});
});