UNPKG

5.27 kBJavaScriptView Raw
1import '@testing-library/jest-dom/extend-expect'
2import { render } from '@testing-library/svelte'
3import Flex from '../Flex'
4
5// Get around some of the stupidity of this testing library
6function renderFlex(props) {
7 const { container } = render(Flex, props);
8 return container.firstChild.firstChild;
9}
10
11describe('<Flex /> component', () => {
12
13 test('returns an element with the "flex" class', () => {
14 const container = renderFlex();
15 expect(container).toHaveStyle('display: flex');
16 });
17
18 test('the default values work', () => {
19 const container = renderFlex();
20 expect(container).toHaveStyle('flex-direction: row');
21 expect(container).toHaveStyle('align-items: center');
22 expect(container).toHaveStyle('justify-content: center');
23 });
24
25 test('additional props are spread onto the element', () => {
26 const container = renderFlex({ label: 'flexy-mcflexbox' });
27 expect(container).toHaveAttribute('label', 'flexy-mcflexbox');
28 });
29
30 test('custom classNames will be applied to the element', () => {
31 const container = renderFlex({ class: 'custom-class' });
32 expect(container.classList.contains('custom-class')).toBe(true);
33 });
34
35 describe('direction prop', () => {
36 // 'row' | 'column'
37 test('row', () => {
38 const container = renderFlex({ direction: 'column' });
39 expect(container).toHaveStyle('flex-direction: column');
40 expect(container).not.toHaveStyle('flex-direction: row'); // default
41 });
42
43 test('column', () => {
44 const container = renderFlex({ direction: 'column' });
45 expect(container).toHaveStyle('flex-direction: column');
46 expect(container).not.toHaveStyle('flex-direction: row'); // default
47 });
48
49 test('bad value', () => {
50 const container = renderFlex({ direction: 'oops' });
51 expect(container).not.toHaveStyle('flex-direction: row'); // default
52 expect(container).not.toHaveStyle('flex-direction: column');
53 });
54 });
55
56 describe('align prop', () => {
57 // 'start' | 'center' | 'end' | 'stretch'
58 test('start', () => {
59 const container = renderFlex({ align: 'start' });
60 expect(container).toHaveStyle('align-items: flex-start');
61 expect(container).not.toHaveStyle('align-items: center'); // default
62 });
63
64 test('center', () => {
65 const container = renderFlex({ align: 'center' });
66 expect(container).toHaveStyle('align-items: center');
67 });
68
69 test('end', () => {
70 const container = renderFlex({ align: 'end' });
71 expect(container).toHaveStyle('align-items: flex-end');
72 expect(container).not.toHaveStyle('align-items: center'); // default
73 });
74
75 test('stretch', () => {
76 const container = renderFlex({ align: 'stretch' });
77 expect(container).toHaveStyle('align-items: stretch');
78 expect(container).not.toHaveStyle('align-items: center'); // default
79 });
80
81 test('bad value', () => {
82 const container = renderFlex({ align: 'oops' });
83 expect(container).not.toHaveStyle('align-items: center'); // default
84 });
85 });
86
87 describe('justify prop', () => {
88 // 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'
89 test('start', () => {
90 const container = renderFlex({ justify: 'start' });
91 expect(container).toHaveStyle('justify-content: flex-start');
92 expect(container).not.toHaveStyle('justify-content: center'); // default
93 });
94
95 test('center', () => {
96 const container = renderFlex({ justify: 'center' });
97 expect(container).toHaveStyle('justify-content: center');
98 });
99
100 test('end', () => {
101 const container = renderFlex({ justify: 'end' });
102 expect(container).toHaveStyle('justify-content: flex-end');
103 expect(container).not.toHaveStyle('justify-content: center'); // default
104 });
105
106 test('around', () => {
107 const container = renderFlex({ justify: 'around' });
108 expect(container).toHaveStyle('justify-content: space-around');
109 expect(container).not.toHaveStyle('justify-content: center'); // default
110 });
111
112 test('between', () => {
113 const container = renderFlex({ justify: 'between' });
114 expect(container).toHaveStyle('justify-content: space-between');
115 expect(container).not.toHaveStyle('justify-content: center'); // default
116 });
117
118 test('evenly', () => {
119 const container = renderFlex({ justify: 'evenly' });
120 expect(container).toHaveStyle('justify-content: space-evenly');
121 expect(container).not.toHaveStyle('justify-content: center'); // default
122 });
123
124 test('bad value', () => {
125 const container = renderFlex({ justify: 'oops' });
126 expect(container).not.toHaveStyle('justify-content: center'); // default
127 });
128 });
129
130 describe('reverse prop', () => {
131 test('row-reverse', () => {
132 const container = renderFlex({ direction: 'row', reverse: true });
133 expect(container).toHaveStyle('flex-direction: row-reverse');
134 expect(container).not.toHaveStyle('flex-direction: row'); // default/fallback
135 });
136
137 test('column-reverse', () => {
138 const container = renderFlex({ direction: 'column', reverse: true });
139 expect(container).toHaveStyle('flex-direction: column-reverse');
140 expect(container).not.toHaveStyle('flex-direction: column'); // default/fallback
141 });
142 });
143});