1 | import '@testing-library/jest-dom/extend-expect'
|
2 | import { render } from '@testing-library/svelte'
|
3 | import Flex from '../Flex'
|
4 |
|
5 |
|
6 | function renderFlex(props) {
|
7 | const { container } = render(Flex, props);
|
8 | return container.firstChild.firstChild;
|
9 | }
|
10 |
|
11 | describe('<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 |
|
37 | test('row', () => {
|
38 | const container = renderFlex({ direction: 'column' });
|
39 | expect(container).toHaveStyle('flex-direction: column');
|
40 | expect(container).not.toHaveStyle('flex-direction: row');
|
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');
|
47 | });
|
48 |
|
49 | test('bad value', () => {
|
50 | const container = renderFlex({ direction: 'oops' });
|
51 | expect(container).not.toHaveStyle('flex-direction: row');
|
52 | expect(container).not.toHaveStyle('flex-direction: column');
|
53 | });
|
54 | });
|
55 |
|
56 | describe('align prop', () => {
|
57 |
|
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');
|
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');
|
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');
|
79 | });
|
80 |
|
81 | test('bad value', () => {
|
82 | const container = renderFlex({ align: 'oops' });
|
83 | expect(container).not.toHaveStyle('align-items: center');
|
84 | });
|
85 | });
|
86 |
|
87 | describe('justify prop', () => {
|
88 |
|
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');
|
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');
|
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');
|
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');
|
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');
|
122 | });
|
123 |
|
124 | test('bad value', () => {
|
125 | const container = renderFlex({ justify: 'oops' });
|
126 | expect(container).not.toHaveStyle('justify-content: center');
|
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');
|
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');
|
141 | });
|
142 | });
|
143 | });
|