@instructure/ui-flex 10.19.2-snapshot-2 → 10.19.2-snapshot-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +10 -10
  3. package/tsconfig.build.tsbuildinfo +1 -1
  4. package/es/Flex/Item/__new-tests__/FlexItem.test.js +0 -62
  5. package/es/Flex/__new-tests__/Flex.test.js +0 -266
  6. package/lib/Flex/Item/__new-tests__/FlexItem.test.js +0 -63
  7. package/lib/Flex/__new-tests__/Flex.test.js +0 -267
  8. package/src/Flex/Item/__new-tests__/FlexItem.test.tsx +0 -60
  9. package/src/Flex/__new-tests__/Flex.test.tsx +0 -256
  10. package/types/Flex/Item/__new-tests__/FlexItem.test.d.ts +0 -2
  11. package/types/Flex/Item/__new-tests__/FlexItem.test.d.ts.map +0 -1
  12. package/types/Flex/__new-tests__/Flex.test.d.ts +0 -2
  13. package/types/Flex/__new-tests__/Flex.test.d.ts.map +0 -1
package/es/Flex/Item/__new-tests__/FlexItem.test.js DELETED
@@ -1,62 +0,0 @@
1
- var _Item, _Item2;
2
- /*
3
- * The MIT License (MIT)
4
- *
5
- * Copyright (c) 2015 - present Instructure, Inc.
6
- *
7
- * Permission is hereby granted, free of charge, to any person obtaining a copy
8
- * of this software and associated documentation files (the "Software"), to deal
9
- * in the Software without restriction, including without limitation the rights
10
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
- * copies of the Software, and to permit persons to whom the Software is
12
- * furnished to do so, subject to the following conditions:
13
- *
14
- * The above copyright notice and this permission notice shall be included in all
15
- * copies or substantial portions of the Software.
16
- *
17
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
- * SOFTWARE.
24
- */
25
-
26
- import { render, waitFor } from '@testing-library/react';
27
- import { vi } from 'vitest';
28
- import '@testing-library/jest-dom';
29
- import { runAxeCheck } from '@instructure/ui-axe-check';
30
- import { Item } from '../index';
31
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
32
- describe('<Item />', () => {
33
- it('should render children', async () => {
34
- const _render = render(_Item || (_Item = _jsx(Item, {
35
- children: "Flex item 1"
36
- }))),
37
- container = _render.container;
38
- const item = container.querySelector('[class*="-flexItem"]');
39
- expect(item).toBeInTheDocument();
40
- expect(item).toHaveTextContent('Flex item 1');
41
- });
42
- it('should support an elementRef prop', async () => {
43
- const elementRef = vi.fn();
44
- const _render2 = render(_jsx(Item, {
45
- elementRef: elementRef,
46
- children: "Flex item 2"
47
- })),
48
- container = _render2.container;
49
- const item = container.querySelector('[class*="-flexItem"]');
50
- await waitFor(() => {
51
- expect(elementRef).toHaveBeenCalledWith(item);
52
- });
53
- });
54
- it('should meet a11y standards', async () => {
55
- const _render3 = render(_Item2 || (_Item2 = _jsx(Item, {
56
- children: "Flex item 3"
57
- }))),
58
- container = _render3.container;
59
- const axeCheck = await runAxeCheck(container);
60
- expect(axeCheck).toBe(true);
61
- });
62
- });
package/es/Flex/__new-tests__/Flex.test.js DELETED
@@ -1,266 +0,0 @@
1
- var _Flex, _Flex2, _div, _Flex3, _Flex4, _Flex5, _Flex6, _Flex7, _Flex8, _Flex9, _Flex10, _Flex11, _Flex12, _Flex13, _Flex$Item, _Flex14;
2
- /*
3
- * The MIT License (MIT)
4
- *
5
- * Copyright (c) 2015 - present Instructure, Inc.
6
- *
7
- * Permission is hereby granted, free of charge, to any person obtaining a copy
8
- * of this software and associated documentation files (the "Software"), to deal
9
- * in the Software without restriction, including without limitation the rights
10
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
- * copies of the Software, and to permit persons to whom the Software is
12
- * furnished to do so, subject to the following conditions:
13
- *
14
- * The above copyright notice and this permission notice shall be included in all
15
- * copies or substantial portions of the Software.
16
- *
17
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
- * SOFTWARE.
24
- */
25
-
26
- import { render, screen, waitFor } from '@testing-library/react';
27
- import { vi } from 'vitest';
28
- import '@testing-library/jest-dom';
29
- import { runAxeCheck } from '@instructure/ui-axe-check';
30
- import { Flex } from '../index';
31
- import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
32
- describe('<Flex />', () => {
33
- it('should render Flex.Items as children', async () => {
34
- const _render = render(_Flex || (_Flex = _jsxs(Flex, {
35
- children: [_jsx(Flex.Item, {
36
- children: "Flex item 1"
37
- }), _jsx(Flex.Item, {
38
- children: "Flex item 2"
39
- }), _jsx(Flex.Item, {
40
- children: "Flex item 3"
41
- }), _jsx(Flex.Item, {
42
- children: "Flex item 4"
43
- })]
44
- }))),
45
- container = _render.container;
46
- const flex = container.querySelector('[class*="flex"]');
47
- expect(flex).toBeInTheDocument();
48
- const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class*="-flexItem"]');
49
- expect(items === null || items === void 0 ? void 0 : items.length).toBe(4);
50
- });
51
- it('should render other markup as children', async () => {
52
- const _render2 = render(_Flex2 || (_Flex2 = _jsxs(Flex, {
53
- children: [_jsx("div", {
54
- children: "foo"
55
- }), _jsx("div", {
56
- children: "bar"
57
- }), _jsx("div", {
58
- children: "baz"
59
- })]
60
- }))),
61
- container = _render2.container;
62
- const flex = container.querySelector('[class*="flex"]');
63
- const childs = flex === null || flex === void 0 ? void 0 : flex.childNodes;
64
- expect(childs === null || childs === void 0 ? void 0 : childs.length).toBe(3);
65
- });
66
- it('should render children when children is a function', async () => {
67
- render(_jsx(Flex, {
68
- children: () => _div || (_div = _jsx("div", {
69
- children: "hello world"
70
- }))
71
- }));
72
- const child = screen.getByText('hello world');
73
- expect(child).toBeInTheDocument();
74
- });
75
- it('should render no markup if there are no children', async () => {
76
- const _render3 = render(_Flex3 || (_Flex3 = _jsx(Flex, {}))),
77
- container = _render3.container;
78
- const flex = container.querySelector('[class*="flex"]');
79
- expect(flex).not.toBeInTheDocument();
80
- });
81
- it('should accept width and height as props', async () => {
82
- const _render4 = render(_Flex4 || (_Flex4 = _jsxs(Flex, {
83
- width: "400px",
84
- height: "200px",
85
- children: [_jsx(Flex.Item, {
86
- children: "Flex item 1"
87
- }), _jsx(Flex.Item, {
88
- children: "Flex item 2"
89
- }), _jsx(Flex.Item, {
90
- children: "Flex item 3"
91
- }), _jsx(Flex.Item, {
92
- children: "Flex item 4"
93
- })]
94
- }))),
95
- container = _render4.container;
96
- const flex = container.querySelector('[class*="flex"]');
97
- const flexStyle = window.getComputedStyle(flex);
98
- expect(flexStyle.width).toBe('400px');
99
- expect(flexStyle.height).toBe('200px');
100
- });
101
- it('should set flex-direction with the direction property', async () => {
102
- const _render5 = render(_Flex5 || (_Flex5 = _jsxs(Flex, {
103
- direction: "column",
104
- children: [_jsx(Flex.Item, {
105
- children: "Flex item 1"
106
- }), _jsx(Flex.Item, {
107
- children: "Flex item 2"
108
- })]
109
- }))),
110
- container = _render5.container;
111
- const flex = container.querySelector('[class*="flex"]');
112
- const flexStyle = window.getComputedStyle(flex);
113
- expect(flexStyle.flexDirection).toBe('column');
114
- });
115
- it('should render an inline-flex container with the display property', async () => {
116
- const _render6 = render(_Flex6 || (_Flex6 = _jsxs(Flex, {
117
- display: "inline-flex",
118
- children: [_jsx(Flex.Item, {
119
- children: "Flex item 1"
120
- }), _jsx(Flex.Item, {
121
- children: "Flex item 2"
122
- })]
123
- }))),
124
- container = _render6.container;
125
- const flex = container.querySelector('[class*="inlineFlex"][class*="flex"]');
126
- const flexStyle = window.getComputedStyle(flex);
127
- expect(flexStyle.display).toBe('inline-flex');
128
- });
129
- it('should set align-items with the alignItems property', async () => {
130
- const _render7 = render(_Flex7 || (_Flex7 = _jsxs(Flex, {
131
- alignItems: "start",
132
- children: [_jsx(Flex.Item, {
133
- children: "Flex item 1"
134
- }), _jsx(Flex.Item, {
135
- children: "Flex item 2"
136
- })]
137
- }))),
138
- container = _render7.container;
139
- const flex = container.querySelector('[class*="flex"]');
140
- const flexStyle = window.getComputedStyle(flex);
141
- expect(flexStyle.alignItems).toBe('flex-start');
142
- });
143
- it('should set justify-content with the justifyItems property', async () => {
144
- const _render8 = render(_Flex8 || (_Flex8 = _jsxs(Flex, {
145
- justifyItems: "space-between",
146
- children: [_jsx(Flex.Item, {
147
- children: "Flex item 1"
148
- }), _jsx(Flex.Item, {
149
- children: "Flex item 2"
150
- })]
151
- }))),
152
- container = _render8.container;
153
- const flex = container.querySelector('[class*="flex"]');
154
- const flexStyle = window.getComputedStyle(flex);
155
- expect(flexStyle.justifyContent).toBe('space-between');
156
- });
157
- it('should set flex-wrap with the wrap property', async () => {
158
- const _render9 = render(_Flex9 || (_Flex9 = _jsxs(Flex, {
159
- wrap: "wrap",
160
- children: [_jsx(Flex.Item, {
161
- children: "Flex item 1"
162
- }), _jsx(Flex.Item, {
163
- children: "Flex item 2"
164
- })]
165
- }))),
166
- container = _render9.container;
167
- const flex = container.querySelector('[class*="flex"]');
168
- const flexStyle = window.getComputedStyle(flex);
169
- expect(flexStyle.flexWrap).toBe('wrap');
170
- });
171
- it('should let Flex.Items align themselves with the align property', async () => {
172
- const _render10 = render(_Flex10 || (_Flex10 = _jsxs(Flex, {
173
- alignItems: "end",
174
- children: [_jsx(Flex.Item, {
175
- align: "stretch",
176
- children: "Flex item 1"
177
- }), _jsx(Flex.Item, {
178
- children: "Flex item 2"
179
- })]
180
- }))),
181
- container = _render10.container;
182
- const flex = container.querySelector('[class*="flex"]');
183
- const item = screen.getByText('Flex item 1');
184
- const flexStyle = window.getComputedStyle(flex);
185
- const itemStyle = window.getComputedStyle(item);
186
- expect(flexStyle.alignItems).toBe('flex-end');
187
- expect(itemStyle.alignSelf).toBe('stretch');
188
- });
189
- it('should let Flex.Items flex-grow with the shouldGrow property', async () => {
190
- render(_Flex11 || (_Flex11 = _jsxs(Flex, {
191
- children: [_jsx(Flex.Item, {
192
- children: "Flex item 1"
193
- }), _jsx(Flex.Item, {
194
- shouldGrow: true,
195
- children: "Flex item 2"
196
- })]
197
- })));
198
- const item1 = screen.getByText('Flex item 1');
199
- const item2 = screen.getByText('Flex item 2');
200
- const item1Style = window.getComputedStyle(item1);
201
- const item2Style = window.getComputedStyle(item2);
202
- expect(item1Style.flexGrow).toBe('');
203
- expect(item2Style.flexGrow).toBe('1');
204
- });
205
- it('should let Flex.Items flex-shrink with the shouldShrink property', async () => {
206
- render(_Flex12 || (_Flex12 = _jsxs(Flex, {
207
- children: [_jsx(Flex.Item, {
208
- children: "Flex item 1"
209
- }), _jsx(Flex.Item, {
210
- shouldShrink: true,
211
- children: "Flex item 2"
212
- })]
213
- })));
214
- const item1 = screen.getByText('Flex item 1');
215
- const item2 = screen.getByText('Flex item 2');
216
- const item1Style = window.getComputedStyle(item1);
217
- const item2Style = window.getComputedStyle(item2);
218
- expect(item1Style.flexShrink).toBe('0');
219
- expect(item2Style.flexShrink).toBe('1');
220
- });
221
- it('should set flex-basis and min-width on Flex.Items with the size property', async () => {
222
- render(_Flex13 || (_Flex13 = _jsxs(Flex, {
223
- children: [_jsx(Flex.Item, {
224
- children: "Flex item 1"
225
- }), _jsx(Flex.Item, {
226
- children: "Flex item 2"
227
- }), _jsx(Flex.Item, {
228
- size: "100px",
229
- children: "Flex item 3"
230
- })]
231
- })));
232
- const item2 = screen.getByText('Flex item 2');
233
- const item3 = screen.getByText('Flex item 3');
234
- const item2Style = window.getComputedStyle(item2);
235
- const item3Style = window.getComputedStyle(item3);
236
- expect(item2Style.flexBasis).toBe('');
237
- expect(item3Style.flexBasis).toBe('100px');
238
- expect(item3Style.minWidth).toBe('100px');
239
- });
240
- it('should support an elementRef prop', async () => {
241
- const elementRef = vi.fn();
242
- const _render11 = render(_jsx(Flex, {
243
- elementRef: elementRef,
244
- children: _Flex$Item || (_Flex$Item = _jsx(Flex.Item, {
245
- children: "Flex item"
246
- }))
247
- })),
248
- container = _render11.container;
249
- const flex = container.querySelector('[class*="flex"]');
250
- await waitFor(() => {
251
- expect(elementRef).toHaveBeenCalledWith(flex);
252
- });
253
- });
254
- it('should meet a11y standards', async () => {
255
- const _render12 = render(_Flex14 || (_Flex14 = _jsxs(Flex, {
256
- children: [_jsx(Flex.Item, {
257
- children: "Flex item 1"
258
- }), _jsx(Flex.Item, {
259
- children: "Flex item 2"
260
- })]
261
- }))),
262
- container = _render12.container;
263
- const axeCheck = await runAxeCheck(container);
264
- expect(axeCheck).toBe(true);
265
- });
266
- });
package/lib/Flex/Item/__new-tests__/FlexItem.test.js DELETED
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@testing-library/react");
4
- var _vitest = require("vitest");
5
- require("@testing-library/jest-dom");
6
- var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
7
- var _index = require("../index");
8
- var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
- var _Item, _Item2;
10
- /*
11
- * The MIT License (MIT)
12
- *
13
- * Copyright (c) 2015 - present Instructure, Inc.
14
- *
15
- * Permission is hereby granted, free of charge, to any person obtaining a copy
16
- * of this software and associated documentation files (the "Software"), to deal
17
- * in the Software without restriction, including without limitation the rights
18
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
19
- * copies of the Software, and to permit persons to whom the Software is
20
- * furnished to do so, subject to the following conditions:
21
- *
22
- * The above copyright notice and this permission notice shall be included in all
23
- * copies or substantial portions of the Software.
24
- *
25
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
26
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
27
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
28
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
29
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
30
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
31
- * SOFTWARE.
32
- */
33
- describe('<Item />', () => {
34
- it('should render children', async () => {
35
- const _render = (0, _react.render)(_Item || (_Item = (0, _jsxRuntime.jsx)(_index.Item, {
36
- children: "Flex item 1"
37
- }))),
38
- container = _render.container;
39
- const item = container.querySelector('[class*="-flexItem"]');
40
- expect(item).toBeInTheDocument();
41
- expect(item).toHaveTextContent('Flex item 1');
42
- });
43
- it('should support an elementRef prop', async () => {
44
- const elementRef = _vitest.vi.fn();
45
- const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Item, {
46
- elementRef: elementRef,
47
- children: "Flex item 2"
48
- })),
49
- container = _render2.container;
50
- const item = container.querySelector('[class*="-flexItem"]');
51
- await (0, _react.waitFor)(() => {
52
- expect(elementRef).toHaveBeenCalledWith(item);
53
- });
54
- });
55
- it('should meet a11y standards', async () => {
56
- const _render3 = (0, _react.render)(_Item2 || (_Item2 = (0, _jsxRuntime.jsx)(_index.Item, {
57
- children: "Flex item 3"
58
- }))),
59
- container = _render3.container;
60
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
61
- expect(axeCheck).toBe(true);
62
- });
63
- });
package/lib/Flex/__new-tests__/Flex.test.js DELETED
@@ -1,267 +0,0 @@
1
- "use strict";
2
-
3
- var _react = require("@testing-library/react");
4
- var _vitest = require("vitest");
5
- require("@testing-library/jest-dom");
6
- var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
7
- var _index = require("../index");
8
- var _jsxRuntime = require("@emotion/react/jsx-runtime");
9
- var _Flex, _Flex2, _div, _Flex3, _Flex4, _Flex5, _Flex6, _Flex7, _Flex8, _Flex9, _Flex10, _Flex11, _Flex12, _Flex13, _Flex$Item, _Flex14;
10
- /*
11
- * The MIT License (MIT)
12
- *
13
- * Copyright (c) 2015 - present Instructure, Inc.
14
- *
15
- * Permission is hereby granted, free of charge, to any person obtaining a copy
16
- * of this software and associated documentation files (the "Software"), to deal
17
- * in the Software without restriction, including without limitation the rights
18
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
19
- * copies of the Software, and to permit persons to whom the Software is
20
- * furnished to do so, subject to the following conditions:
21
- *
22
- * The above copyright notice and this permission notice shall be included in all
23
- * copies or substantial portions of the Software.
24
- *
25
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
26
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
27
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
28
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
29
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
30
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
31
- * SOFTWARE.
32
- */
33
- describe('<Flex />', () => {
34
- it('should render Flex.Items as children', async () => {
35
- const _render = (0, _react.render)(_Flex || (_Flex = (0, _jsxRuntime.jsxs)(_index.Flex, {
36
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
37
- children: "Flex item 1"
38
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
39
- children: "Flex item 2"
40
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
41
- children: "Flex item 3"
42
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
43
- children: "Flex item 4"
44
- })]
45
- }))),
46
- container = _render.container;
47
- const flex = container.querySelector('[class*="flex"]');
48
- expect(flex).toBeInTheDocument();
49
- const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class*="-flexItem"]');
50
- expect(items === null || items === void 0 ? void 0 : items.length).toBe(4);
51
- });
52
- it('should render other markup as children', async () => {
53
- const _render2 = (0, _react.render)(_Flex2 || (_Flex2 = (0, _jsxRuntime.jsxs)(_index.Flex, {
54
- children: [(0, _jsxRuntime.jsx)("div", {
55
- children: "foo"
56
- }), (0, _jsxRuntime.jsx)("div", {
57
- children: "bar"
58
- }), (0, _jsxRuntime.jsx)("div", {
59
- children: "baz"
60
- })]
61
- }))),
62
- container = _render2.container;
63
- const flex = container.querySelector('[class*="flex"]');
64
- const childs = flex === null || flex === void 0 ? void 0 : flex.childNodes;
65
- expect(childs === null || childs === void 0 ? void 0 : childs.length).toBe(3);
66
- });
67
- it('should render children when children is a function', async () => {
68
- (0, _react.render)((0, _jsxRuntime.jsx)(_index.Flex, {
69
- children: () => _div || (_div = (0, _jsxRuntime.jsx)("div", {
70
- children: "hello world"
71
- }))
72
- }));
73
- const child = _react.screen.getByText('hello world');
74
- expect(child).toBeInTheDocument();
75
- });
76
- it('should render no markup if there are no children', async () => {
77
- const _render3 = (0, _react.render)(_Flex3 || (_Flex3 = (0, _jsxRuntime.jsx)(_index.Flex, {}))),
78
- container = _render3.container;
79
- const flex = container.querySelector('[class*="flex"]');
80
- expect(flex).not.toBeInTheDocument();
81
- });
82
- it('should accept width and height as props', async () => {
83
- const _render4 = (0, _react.render)(_Flex4 || (_Flex4 = (0, _jsxRuntime.jsxs)(_index.Flex, {
84
- width: "400px",
85
- height: "200px",
86
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
87
- children: "Flex item 1"
88
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
89
- children: "Flex item 2"
90
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
91
- children: "Flex item 3"
92
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
93
- children: "Flex item 4"
94
- })]
95
- }))),
96
- container = _render4.container;
97
- const flex = container.querySelector('[class*="flex"]');
98
- const flexStyle = window.getComputedStyle(flex);
99
- expect(flexStyle.width).toBe('400px');
100
- expect(flexStyle.height).toBe('200px');
101
- });
102
- it('should set flex-direction with the direction property', async () => {
103
- const _render5 = (0, _react.render)(_Flex5 || (_Flex5 = (0, _jsxRuntime.jsxs)(_index.Flex, {
104
- direction: "column",
105
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
106
- children: "Flex item 1"
107
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
108
- children: "Flex item 2"
109
- })]
110
- }))),
111
- container = _render5.container;
112
- const flex = container.querySelector('[class*="flex"]');
113
- const flexStyle = window.getComputedStyle(flex);
114
- expect(flexStyle.flexDirection).toBe('column');
115
- });
116
- it('should render an inline-flex container with the display property', async () => {
117
- const _render6 = (0, _react.render)(_Flex6 || (_Flex6 = (0, _jsxRuntime.jsxs)(_index.Flex, {
118
- display: "inline-flex",
119
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
120
- children: "Flex item 1"
121
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
122
- children: "Flex item 2"
123
- })]
124
- }))),
125
- container = _render6.container;
126
- const flex = container.querySelector('[class*="inlineFlex"][class*="flex"]');
127
- const flexStyle = window.getComputedStyle(flex);
128
- expect(flexStyle.display).toBe('inline-flex');
129
- });
130
- it('should set align-items with the alignItems property', async () => {
131
- const _render7 = (0, _react.render)(_Flex7 || (_Flex7 = (0, _jsxRuntime.jsxs)(_index.Flex, {
132
- alignItems: "start",
133
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
134
- children: "Flex item 1"
135
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
136
- children: "Flex item 2"
137
- })]
138
- }))),
139
- container = _render7.container;
140
- const flex = container.querySelector('[class*="flex"]');
141
- const flexStyle = window.getComputedStyle(flex);
142
- expect(flexStyle.alignItems).toBe('flex-start');
143
- });
144
- it('should set justify-content with the justifyItems property', async () => {
145
- const _render8 = (0, _react.render)(_Flex8 || (_Flex8 = (0, _jsxRuntime.jsxs)(_index.Flex, {
146
- justifyItems: "space-between",
147
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
148
- children: "Flex item 1"
149
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
150
- children: "Flex item 2"
151
- })]
152
- }))),
153
- container = _render8.container;
154
- const flex = container.querySelector('[class*="flex"]');
155
- const flexStyle = window.getComputedStyle(flex);
156
- expect(flexStyle.justifyContent).toBe('space-between');
157
- });
158
- it('should set flex-wrap with the wrap property', async () => {
159
- const _render9 = (0, _react.render)(_Flex9 || (_Flex9 = (0, _jsxRuntime.jsxs)(_index.Flex, {
160
- wrap: "wrap",
161
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
162
- children: "Flex item 1"
163
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
164
- children: "Flex item 2"
165
- })]
166
- }))),
167
- container = _render9.container;
168
- const flex = container.querySelector('[class*="flex"]');
169
- const flexStyle = window.getComputedStyle(flex);
170
- expect(flexStyle.flexWrap).toBe('wrap');
171
- });
172
- it('should let Flex.Items align themselves with the align property', async () => {
173
- const _render10 = (0, _react.render)(_Flex10 || (_Flex10 = (0, _jsxRuntime.jsxs)(_index.Flex, {
174
- alignItems: "end",
175
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
176
- align: "stretch",
177
- children: "Flex item 1"
178
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
179
- children: "Flex item 2"
180
- })]
181
- }))),
182
- container = _render10.container;
183
- const flex = container.querySelector('[class*="flex"]');
184
- const item = _react.screen.getByText('Flex item 1');
185
- const flexStyle = window.getComputedStyle(flex);
186
- const itemStyle = window.getComputedStyle(item);
187
- expect(flexStyle.alignItems).toBe('flex-end');
188
- expect(itemStyle.alignSelf).toBe('stretch');
189
- });
190
- it('should let Flex.Items flex-grow with the shouldGrow property', async () => {
191
- (0, _react.render)(_Flex11 || (_Flex11 = (0, _jsxRuntime.jsxs)(_index.Flex, {
192
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
193
- children: "Flex item 1"
194
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
195
- shouldGrow: true,
196
- children: "Flex item 2"
197
- })]
198
- })));
199
- const item1 = _react.screen.getByText('Flex item 1');
200
- const item2 = _react.screen.getByText('Flex item 2');
201
- const item1Style = window.getComputedStyle(item1);
202
- const item2Style = window.getComputedStyle(item2);
203
- expect(item1Style.flexGrow).toBe('');
204
- expect(item2Style.flexGrow).toBe('1');
205
- });
206
- it('should let Flex.Items flex-shrink with the shouldShrink property', async () => {
207
- (0, _react.render)(_Flex12 || (_Flex12 = (0, _jsxRuntime.jsxs)(_index.Flex, {
208
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
209
- children: "Flex item 1"
210
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
211
- shouldShrink: true,
212
- children: "Flex item 2"
213
- })]
214
- })));
215
- const item1 = _react.screen.getByText('Flex item 1');
216
- const item2 = _react.screen.getByText('Flex item 2');
217
- const item1Style = window.getComputedStyle(item1);
218
- const item2Style = window.getComputedStyle(item2);
219
- expect(item1Style.flexShrink).toBe('0');
220
- expect(item2Style.flexShrink).toBe('1');
221
- });
222
- it('should set flex-basis and min-width on Flex.Items with the size property', async () => {
223
- (0, _react.render)(_Flex13 || (_Flex13 = (0, _jsxRuntime.jsxs)(_index.Flex, {
224
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
225
- children: "Flex item 1"
226
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
227
- children: "Flex item 2"
228
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
229
- size: "100px",
230
- children: "Flex item 3"
231
- })]
232
- })));
233
- const item2 = _react.screen.getByText('Flex item 2');
234
- const item3 = _react.screen.getByText('Flex item 3');
235
- const item2Style = window.getComputedStyle(item2);
236
- const item3Style = window.getComputedStyle(item3);
237
- expect(item2Style.flexBasis).toBe('');
238
- expect(item3Style.flexBasis).toBe('100px');
239
- expect(item3Style.minWidth).toBe('100px');
240
- });
241
- it('should support an elementRef prop', async () => {
242
- const elementRef = _vitest.vi.fn();
243
- const _render11 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Flex, {
244
- elementRef: elementRef,
245
- children: _Flex$Item || (_Flex$Item = (0, _jsxRuntime.jsx)(_index.Flex.Item, {
246
- children: "Flex item"
247
- }))
248
- })),
249
- container = _render11.container;
250
- const flex = container.querySelector('[class*="flex"]');
251
- await (0, _react.waitFor)(() => {
252
- expect(elementRef).toHaveBeenCalledWith(flex);
253
- });
254
- });
255
- it('should meet a11y standards', async () => {
256
- const _render12 = (0, _react.render)(_Flex14 || (_Flex14 = (0, _jsxRuntime.jsxs)(_index.Flex, {
257
- children: [(0, _jsxRuntime.jsx)(_index.Flex.Item, {
258
- children: "Flex item 1"
259
- }), (0, _jsxRuntime.jsx)(_index.Flex.Item, {
260
- children: "Flex item 2"
261
- })]
262
- }))),
263
- container = _render12.container;
264
- const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
265
- expect(axeCheck).toBe(true);
266
- });
267
- });