@dxc-technology/halstack-react 0.0.0-ebf4fe2 → 0.0.0-ec06b53
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.
- package/HalstackContext.js +7 -8
- package/accordion/Accordion.js +122 -103
- package/accordion/Accordion.stories.tsx +2 -3
- package/accordion/Accordion.test.js +9 -10
- package/accordion/types.d.ts +5 -4
- package/accordion-group/AccordionGroup.js +1 -21
- package/accordion-group/AccordionGroup.stories.tsx +27 -1
- package/accordion-group/AccordionGroup.test.js +20 -45
- package/accordion-group/types.d.ts +10 -3
- package/alert/Alert.js +1 -1
- package/bleed/Bleed.stories.tsx +63 -63
- package/box/Box.js +1 -1
- package/box/types.d.ts +1 -0
- package/bulleted-list/BulletedList.d.ts +7 -0
- package/bulleted-list/BulletedList.js +123 -0
- package/bulleted-list/BulletedList.stories.tsx +200 -0
- package/bulleted-list/types.d.ts +11 -0
- package/{inline → bulleted-list}/types.js +0 -0
- package/button/Button.js +43 -61
- package/button/Button.stories.tsx +9 -0
- package/button/types.d.ts +7 -7
- package/card/types.d.ts +1 -0
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +92 -99
- package/checkbox/Checkbox.stories.tsx +79 -59
- package/checkbox/Checkbox.test.js +93 -16
- package/checkbox/types.d.ts +6 -2
- package/chip/types.d.ts +1 -1
- package/common/variables.js +75 -33
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +258 -0
- package/date-input/DateInput.js +77 -222
- package/date-input/DateInput.stories.tsx +30 -17
- package/date-input/DateInput.test.js +411 -138
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +160 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +115 -0
- package/date-input/types.d.ts +53 -0
- package/dialog/Dialog.js +52 -28
- package/dialog/Dialog.stories.tsx +57 -2
- package/dialog/Dialog.test.js +34 -4
- package/dialog/types.d.ts +3 -2
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +247 -247
- package/dropdown/Dropdown.stories.tsx +126 -63
- package/dropdown/Dropdown.test.js +504 -108
- package/dropdown/DropdownMenu.d.ts +4 -0
- package/dropdown/DropdownMenu.js +80 -0
- package/dropdown/DropdownMenuItem.d.ts +4 -0
- package/dropdown/DropdownMenuItem.js +92 -0
- package/dropdown/types.d.ts +25 -5
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +177 -219
- package/file-input/FileInput.stories.tsx +38 -10
- package/file-input/FileInput.test.js +53 -12
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +38 -63
- package/file-input/types.d.ts +17 -0
- package/flex/Flex.d.ts +4 -0
- package/flex/Flex.js +69 -0
- package/flex/Flex.stories.tsx +103 -0
- package/flex/types.d.ts +32 -0
- package/{list → flex}/types.js +0 -0
- package/footer/Footer.stories.tsx +8 -1
- package/footer/types.d.ts +2 -1
- package/header/Header.js +74 -72
- package/header/Header.stories.tsx +4 -4
- package/header/Icons.js +2 -2
- package/header/types.d.ts +3 -2
- package/inset/Inset.stories.tsx +4 -4
- package/layout/ApplicationLayout.d.ts +15 -6
- package/layout/ApplicationLayout.js +36 -64
- package/layout/ApplicationLayout.stories.tsx +80 -44
- package/layout/types.d.ts +17 -27
- package/link/Link.js +2 -2
- package/link/Link.stories.tsx +13 -6
- package/link/types.d.ts +1 -1
- package/main.d.ts +5 -9
- package/main.js +27 -59
- package/number-input/NumberInput.test.js +43 -7
- package/package.json +16 -20
- package/paginator/Paginator.js +2 -2
- package/paginator/Paginator.test.js +1 -1
- package/paragraph/Paragraph.d.ts +6 -0
- package/paragraph/Paragraph.js +38 -0
- package/paragraph/Paragraph.stories.tsx +44 -0
- package/password-input/PasswordInput.test.js +13 -12
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +56 -50
- package/progress-bar/ProgressBar.stories.jsx +3 -1
- package/progress-bar/ProgressBar.test.js +67 -22
- package/progress-bar/types.d.ts +3 -4
- package/quick-nav/QuickNav.js +18 -17
- package/quick-nav/QuickNav.stories.tsx +131 -26
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +43 -28
- package/radio-group/RadioGroup.js +23 -22
- package/radio-group/RadioGroup.stories.tsx +1 -0
- package/radio-group/RadioGroup.test.js +123 -96
- package/radio-group/types.d.ts +2 -2
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +51 -0
- package/resultsetTable/ResultsetTable.js +48 -107
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +23 -41
- package/resultsetTable/types.d.ts +2 -2
- package/select/Listbox.d.ts +1 -1
- package/select/Listbox.js +25 -2
- package/select/Select.js +17 -32
- package/select/Select.stories.tsx +6 -5
- package/select/Select.test.js +321 -250
- package/select/types.d.ts +2 -4
- package/sidenav/Sidenav.d.ts +6 -5
- package/sidenav/Sidenav.js +176 -55
- package/sidenav/Sidenav.stories.tsx +154 -156
- package/sidenav/Sidenav.test.js +25 -37
- package/sidenav/types.d.ts +50 -27
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +120 -95
- package/slider/Slider.stories.tsx +7 -1
- package/slider/Slider.test.js +121 -21
- package/slider/types.d.ts +6 -2
- package/switch/Switch.d.ts +2 -2
- package/switch/Switch.js +135 -68
- package/switch/Switch.stories.tsx +8 -30
- package/switch/Switch.test.js +144 -17
- package/switch/types.d.ts +6 -2
- package/table/Table.js +1 -1
- package/table/Table.test.js +1 -1
- package/tabs/Tab.d.ts +4 -0
- package/tabs/Tab.js +135 -0
- package/tabs/Tabs.js +360 -104
- package/tabs/Tabs.stories.tsx +74 -0
- package/tabs/Tabs.test.js +217 -6
- package/tabs/types.d.ts +15 -5
- package/tabs-nav/NavTabs.js +5 -5
- package/tabs-nav/Tab.js +3 -5
- package/tabs-nav/types.d.ts +1 -1
- package/tag/Tag.js +1 -1
- package/tag/types.d.ts +1 -1
- package/text-input/Icons.d.ts +8 -0
- package/text-input/Icons.js +60 -0
- package/text-input/Suggestion.js +7 -5
- package/text-input/Suggestions.d.ts +4 -0
- package/text-input/Suggestions.js +134 -0
- package/text-input/TextInput.js +189 -282
- package/text-input/TextInput.stories.tsx +189 -182
- package/text-input/TextInput.test.js +639 -727
- package/text-input/types.d.ts +22 -3
- package/toggle-group/types.d.ts +1 -1
- package/typography/Typography.d.ts +4 -0
- package/typography/Typography.js +131 -0
- package/typography/Typography.stories.tsx +198 -0
- package/typography/types.d.ts +18 -0
- package/{row → typography}/types.js +0 -0
- package/wizard/Wizard.js +9 -16
- package/wizard/Wizard.stories.tsx +20 -1
- package/wizard/types.d.ts +5 -4
- package/inline/Inline.d.ts +0 -4
- package/inline/Inline.js +0 -60
- package/inline/Inline.stories.tsx +0 -305
- package/inline/types.d.ts +0 -36
- package/list/List.d.ts +0 -4
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -89
- package/list/types.d.ts +0 -7
- package/row/Row.d.ts +0 -3
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -237
- package/row/types.d.ts +0 -28
- package/stack/Stack.d.ts +0 -4
- package/stack/Stack.js +0 -52
- package/stack/Stack.stories.tsx +0 -225
- package/stack/types.d.ts +0 -28
- package/stack/types.js +0 -5
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
|
@@ -6,6 +6,10 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
|
|
|
6
6
|
|
|
7
7
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
8
8
|
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
|
|
11
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
+
|
|
9
13
|
var _react = _interopRequireDefault(require("react"));
|
|
10
14
|
|
|
11
15
|
var _react2 = require("@testing-library/react");
|
|
@@ -14,56 +18,54 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
|
14
18
|
|
|
15
19
|
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
|
16
20
|
|
|
21
|
+
// Mocking DOMRect for Radix Primitive Popover
|
|
22
|
+
global.globalThis = global;
|
|
23
|
+
|
|
24
|
+
global.ResizeObserver = /*#__PURE__*/function () {
|
|
25
|
+
function ResizeObserver(cb) {
|
|
26
|
+
(0, _classCallCheck2["default"])(this, ResizeObserver);
|
|
27
|
+
this.cb = cb;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
(0, _createClass2["default"])(ResizeObserver, [{
|
|
31
|
+
key: "observe",
|
|
32
|
+
value: function observe() {
|
|
33
|
+
this.cb([{
|
|
34
|
+
borderBoxSize: {
|
|
35
|
+
inlineSize: 0,
|
|
36
|
+
blockSize: 0
|
|
37
|
+
}
|
|
38
|
+
}]);
|
|
39
|
+
}
|
|
40
|
+
}, {
|
|
41
|
+
key: "unobserve",
|
|
42
|
+
value: function unobserve() {}
|
|
43
|
+
}]);
|
|
44
|
+
return ResizeObserver;
|
|
45
|
+
}();
|
|
46
|
+
|
|
47
|
+
global.DOMRect = {
|
|
48
|
+
fromRect: function fromRect() {
|
|
49
|
+
return {
|
|
50
|
+
top: 0,
|
|
51
|
+
left: 0,
|
|
52
|
+
bottom: 0,
|
|
53
|
+
right: 0,
|
|
54
|
+
width: 0,
|
|
55
|
+
height: 0
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
};
|
|
17
59
|
var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
|
|
18
60
|
describe("TextInput component tests", function () {
|
|
19
|
-
test("Renders with correct
|
|
61
|
+
test("Renders with correct error aria attributes", function () {
|
|
20
62
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
21
|
-
label: "Example label"
|
|
22
|
-
})),
|
|
23
|
-
getByText = _render.getByText;
|
|
24
|
-
|
|
25
|
-
expect(getByText("Example label")).toBeTruthy();
|
|
26
|
-
});
|
|
27
|
-
test("Renders with correct label and helper text", function () {
|
|
28
|
-
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
29
|
-
label: "Example label",
|
|
30
|
-
helperText: "Example helper text"
|
|
31
|
-
})),
|
|
32
|
-
getByText = _render2.getByText;
|
|
33
|
-
|
|
34
|
-
expect(getByText("Example label")).toBeTruthy();
|
|
35
|
-
expect(getByText("Example helper text")).toBeTruthy();
|
|
36
|
-
});
|
|
37
|
-
test("Renders with correct label and optional", function () {
|
|
38
|
-
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
39
|
-
label: "Example label",
|
|
40
|
-
helperText: "Example helper text",
|
|
41
|
-
optional: true
|
|
42
|
-
})),
|
|
43
|
-
getByText = _render3.getByText;
|
|
44
|
-
|
|
45
|
-
expect(getByText("Example label")).toBeTruthy();
|
|
46
|
-
expect(getByText("(Optional)")).toBeTruthy();
|
|
47
|
-
expect(getByText("Example helper text")).toBeTruthy();
|
|
48
|
-
});
|
|
49
|
-
test("Renders with correct placeholder", function () {
|
|
50
|
-
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
51
|
-
label: "Example label",
|
|
52
|
-
placeholder: "Placeholder"
|
|
53
|
-
})),
|
|
54
|
-
getByRole = _render4.getByRole;
|
|
55
|
-
|
|
56
|
-
var input = getByRole("textbox");
|
|
57
|
-
expect(input.getAttribute("placeholder")).toBe("Placeholder");
|
|
58
|
-
});
|
|
59
|
-
test("Renders with error message and correct aria attributes", function () {
|
|
60
|
-
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
61
63
|
label: "Error label",
|
|
62
64
|
placeholder: "Placeholder",
|
|
63
65
|
error: "Error message."
|
|
64
66
|
})),
|
|
65
|
-
getByText =
|
|
66
|
-
getByRole =
|
|
67
|
+
getByText = _render.getByText,
|
|
68
|
+
getByRole = _render.getByRole;
|
|
67
69
|
|
|
68
70
|
var input = getByRole("textbox");
|
|
69
71
|
var errorMessage = getByText("Error message.");
|
|
@@ -73,12 +75,12 @@ describe("TextInput component tests", function () {
|
|
|
73
75
|
expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
|
|
74
76
|
});
|
|
75
77
|
test("Renders with correct initial value", function () {
|
|
76
|
-
var
|
|
78
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
77
79
|
label: "Default label",
|
|
78
80
|
placeholder: "Placeholder",
|
|
79
81
|
defaultValue: "Example text"
|
|
80
82
|
})),
|
|
81
|
-
getByRole =
|
|
83
|
+
getByRole = _render2.getByRole;
|
|
82
84
|
|
|
83
85
|
var input = getByRole("textbox");
|
|
84
86
|
expect(input.value).toBe("Example text");
|
|
@@ -87,14 +89,14 @@ describe("TextInput component tests", function () {
|
|
|
87
89
|
var onChange = jest.fn();
|
|
88
90
|
var onBlur = jest.fn();
|
|
89
91
|
|
|
90
|
-
var
|
|
92
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
91
93
|
label: "Input label",
|
|
92
94
|
placeholder: "Placeholder",
|
|
93
95
|
onChange: onChange,
|
|
94
96
|
onBlur: onBlur,
|
|
95
97
|
clearable: true
|
|
96
98
|
})),
|
|
97
|
-
getByRole =
|
|
99
|
+
getByRole = _render3.getByRole;
|
|
98
100
|
|
|
99
101
|
var input = getByRole("textbox");
|
|
100
102
|
|
|
@@ -124,13 +126,13 @@ describe("TextInput component tests", function () {
|
|
|
124
126
|
test("Not optional constraint (onChange)", function () {
|
|
125
127
|
var onChange = jest.fn();
|
|
126
128
|
|
|
127
|
-
var
|
|
129
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
128
130
|
label: "Input label",
|
|
129
131
|
placeholder: "Placeholder",
|
|
130
132
|
onChange: onChange,
|
|
131
133
|
clearable: true
|
|
132
134
|
})),
|
|
133
|
-
getByRole =
|
|
135
|
+
getByRole = _render4.getByRole;
|
|
134
136
|
|
|
135
137
|
var input = getByRole("textbox");
|
|
136
138
|
|
|
@@ -157,7 +159,7 @@ describe("TextInput component tests", function () {
|
|
|
157
159
|
var onChange = jest.fn();
|
|
158
160
|
var onBlur = jest.fn();
|
|
159
161
|
|
|
160
|
-
var
|
|
162
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
161
163
|
label: "Input label",
|
|
162
164
|
placeholder: "Placeholder",
|
|
163
165
|
onChange: onChange,
|
|
@@ -169,7 +171,7 @@ describe("TextInput component tests", function () {
|
|
|
169
171
|
clearable: true,
|
|
170
172
|
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
171
173
|
})),
|
|
172
|
-
getByRole =
|
|
174
|
+
getByRole = _render5.getByRole;
|
|
173
175
|
|
|
174
176
|
var input = getByRole("textbox");
|
|
175
177
|
|
|
@@ -217,7 +219,7 @@ describe("TextInput component tests", function () {
|
|
|
217
219
|
var onChange = jest.fn();
|
|
218
220
|
var onBlur = jest.fn();
|
|
219
221
|
|
|
220
|
-
var
|
|
222
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
221
223
|
label: "Input label",
|
|
222
224
|
placeholder: "Placeholder",
|
|
223
225
|
onChange: onChange,
|
|
@@ -230,7 +232,7 @@ describe("TextInput component tests", function () {
|
|
|
230
232
|
minLength: 5,
|
|
231
233
|
maxLength: 10
|
|
232
234
|
})),
|
|
233
|
-
getByRole =
|
|
235
|
+
getByRole = _render6.getByRole;
|
|
234
236
|
|
|
235
237
|
var input = getByRole("textbox");
|
|
236
238
|
|
|
@@ -278,7 +280,7 @@ describe("TextInput component tests", function () {
|
|
|
278
280
|
var onChange = jest.fn();
|
|
279
281
|
var onBlur = jest.fn();
|
|
280
282
|
|
|
281
|
-
var
|
|
283
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
282
284
|
label: "Input label",
|
|
283
285
|
placeholder: "Placeholder",
|
|
284
286
|
onChange: onChange,
|
|
@@ -292,7 +294,7 @@ describe("TextInput component tests", function () {
|
|
|
292
294
|
minLength: 5,
|
|
293
295
|
maxLength: 10
|
|
294
296
|
})),
|
|
295
|
-
getByRole =
|
|
297
|
+
getByRole = _render7.getByRole;
|
|
296
298
|
|
|
297
299
|
var input = getByRole("textbox");
|
|
298
300
|
|
|
@@ -357,11 +359,11 @@ describe("TextInput component tests", function () {
|
|
|
357
359
|
test("onChange function is called correctly", function () {
|
|
358
360
|
var onChange = jest.fn();
|
|
359
361
|
|
|
360
|
-
var
|
|
362
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
361
363
|
label: "Input label",
|
|
362
364
|
onChange: onChange
|
|
363
365
|
})),
|
|
364
|
-
getByRole =
|
|
366
|
+
getByRole = _render8.getByRole;
|
|
365
367
|
|
|
366
368
|
var input = getByRole("textbox");
|
|
367
369
|
|
|
@@ -377,12 +379,12 @@ describe("TextInput component tests", function () {
|
|
|
377
379
|
var onBlur = jest.fn();
|
|
378
380
|
var onChange = jest.fn();
|
|
379
381
|
|
|
380
|
-
var
|
|
382
|
+
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
381
383
|
label: "Input label",
|
|
382
384
|
onChange: onChange,
|
|
383
385
|
onBlur: onBlur
|
|
384
386
|
})),
|
|
385
|
-
getByRole =
|
|
387
|
+
getByRole = _render9.getByRole;
|
|
386
388
|
|
|
387
389
|
var input = getByRole("textbox");
|
|
388
390
|
|
|
@@ -399,33 +401,22 @@ describe("TextInput component tests", function () {
|
|
|
399
401
|
value: "Blur test"
|
|
400
402
|
});
|
|
401
403
|
});
|
|
402
|
-
test("Clear action
|
|
403
|
-
var
|
|
404
|
+
test("Clear action tooltip is correct", function () {
|
|
405
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
406
|
+
label: "Input label",
|
|
407
|
+
value: "Text",
|
|
408
|
+
clearable: true
|
|
409
|
+
})),
|
|
410
|
+
getByTitle = _render10.getByTitle;
|
|
404
411
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
switch (_context.prev = _context.next) {
|
|
408
|
-
case 0:
|
|
409
|
-
_render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
410
|
-
label: "Input label",
|
|
411
|
-
value: "Text",
|
|
412
|
-
clearable: true
|
|
413
|
-
})), getByTitle = _render14.getByTitle;
|
|
414
|
-
expect(getByTitle("Clear field")).toBeTruthy();
|
|
415
|
-
|
|
416
|
-
case 2:
|
|
417
|
-
case "end":
|
|
418
|
-
return _context.stop();
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
}, _callee);
|
|
422
|
-
})));
|
|
412
|
+
expect(getByTitle("Clear field")).toBeTruthy();
|
|
413
|
+
});
|
|
423
414
|
test("Clear action onClick cleans the input", function () {
|
|
424
|
-
var
|
|
415
|
+
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
425
416
|
label: "Input label",
|
|
426
417
|
clearable: true
|
|
427
418
|
})),
|
|
428
|
-
getByRole =
|
|
419
|
+
getByRole = _render11.getByRole;
|
|
429
420
|
|
|
430
421
|
var input = getByRole("textbox");
|
|
431
422
|
|
|
@@ -440,15 +431,14 @@ describe("TextInput component tests", function () {
|
|
|
440
431
|
test("Disabled input renders with correct aria and can not be modified", function () {
|
|
441
432
|
var onChange = jest.fn();
|
|
442
433
|
|
|
443
|
-
var
|
|
434
|
+
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
444
435
|
label: "Input label",
|
|
445
436
|
onChange: onChange,
|
|
446
437
|
disabled: true
|
|
447
438
|
})),
|
|
448
|
-
getByRole =
|
|
439
|
+
getByRole = _render12.getByRole;
|
|
449
440
|
|
|
450
441
|
var input = getByRole("textbox");
|
|
451
|
-
expect(input.getAttribute("aria-disabled")).toBe("true");
|
|
452
442
|
|
|
453
443
|
_userEvent["default"].type(input, "Test");
|
|
454
444
|
|
|
@@ -473,12 +463,12 @@ describe("TextInput component tests", function () {
|
|
|
473
463
|
}))
|
|
474
464
|
};
|
|
475
465
|
|
|
476
|
-
var
|
|
466
|
+
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
477
467
|
label: "Disabled input label",
|
|
478
468
|
action: action,
|
|
479
469
|
disabled: true
|
|
480
470
|
})),
|
|
481
|
-
getByRole =
|
|
471
|
+
getByRole = _render13.getByRole;
|
|
482
472
|
|
|
483
473
|
var input = getByRole("textbox");
|
|
484
474
|
expect(input.disabled).toBeTruthy();
|
|
@@ -488,29 +478,29 @@ describe("TextInput component tests", function () {
|
|
|
488
478
|
expect(onClick).not.toHaveBeenCalled();
|
|
489
479
|
});
|
|
490
480
|
test("Disabled input (clear default action should not be displayed, even with text written on the input)", function () {
|
|
491
|
-
var
|
|
481
|
+
var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
492
482
|
label: "Disabled input label",
|
|
493
483
|
value: "Sample text",
|
|
494
484
|
disabled: true,
|
|
495
485
|
clearable: true
|
|
496
486
|
})),
|
|
497
|
-
getByRole =
|
|
498
|
-
queryByRole =
|
|
487
|
+
getByRole = _render14.getByRole,
|
|
488
|
+
queryByRole = _render14.queryByRole;
|
|
499
489
|
|
|
500
490
|
var input = getByRole("textbox");
|
|
501
491
|
expect(input.disabled).toBeTruthy();
|
|
502
492
|
expect(queryByRole("button")).toBeFalsy();
|
|
503
493
|
});
|
|
504
494
|
test("Disabled input (suffix and preffix must be displayed)", function () {
|
|
505
|
-
var
|
|
495
|
+
var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
506
496
|
label: "Disabled input label",
|
|
507
497
|
value: "Sample text",
|
|
508
498
|
prefix: "+34",
|
|
509
499
|
suffix: "USD",
|
|
510
500
|
disabled: true
|
|
511
501
|
})),
|
|
512
|
-
getByRole =
|
|
513
|
-
getByText =
|
|
502
|
+
getByRole = _render15.getByRole,
|
|
503
|
+
getByText = _render15.getByText;
|
|
514
504
|
|
|
515
505
|
var input = getByRole("textbox");
|
|
516
506
|
expect(input.disabled).toBeTruthy();
|
|
@@ -537,13 +527,13 @@ describe("TextInput component tests", function () {
|
|
|
537
527
|
title: "Search"
|
|
538
528
|
};
|
|
539
529
|
|
|
540
|
-
var
|
|
530
|
+
var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
541
531
|
label: "Input label",
|
|
542
532
|
action: action
|
|
543
533
|
})),
|
|
544
|
-
getByRole =
|
|
545
|
-
getByTestId =
|
|
546
|
-
getByTitle =
|
|
534
|
+
getByRole = _render16.getByRole,
|
|
535
|
+
getByTestId = _render16.getByTestId,
|
|
536
|
+
getByTitle = _render16.getByTitle;
|
|
547
537
|
|
|
548
538
|
expect(getByTestId("image")).toBeTruthy();
|
|
549
539
|
expect(getByTitle("Search")).toBeTruthy();
|
|
@@ -552,18 +542,75 @@ describe("TextInput component tests", function () {
|
|
|
552
542
|
|
|
553
543
|
expect(onClick).toHaveBeenCalled();
|
|
554
544
|
});
|
|
545
|
+
test("Text input submit correctly value in form", function () {
|
|
546
|
+
var onClick = jest.fn();
|
|
547
|
+
var action = {
|
|
548
|
+
onClick: onClick,
|
|
549
|
+
icon: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
550
|
+
"data-testid": "image",
|
|
551
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
552
|
+
height: "24px",
|
|
553
|
+
viewBox: "0 0 24 24",
|
|
554
|
+
width: "24px",
|
|
555
|
+
fill: "currentColor"
|
|
556
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
557
|
+
d: "M0 0h24v24H0V0z",
|
|
558
|
+
fill: "none"
|
|
559
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
560
|
+
d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
|
|
561
|
+
})),
|
|
562
|
+
title: "Search"
|
|
563
|
+
};
|
|
564
|
+
var handlerOnSubmit = jest.fn(function (e) {
|
|
565
|
+
e.preventDefault();
|
|
566
|
+
var formData = new FormData(e.target);
|
|
567
|
+
var formProps = Object.fromEntries(formData);
|
|
568
|
+
expect(formProps).toStrictEqual({
|
|
569
|
+
data: "test"
|
|
570
|
+
});
|
|
571
|
+
});
|
|
572
|
+
|
|
573
|
+
var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
|
|
574
|
+
onSubmit: handlerOnSubmit
|
|
575
|
+
}, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
576
|
+
label: "Input label",
|
|
577
|
+
name: "data",
|
|
578
|
+
action: action
|
|
579
|
+
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
580
|
+
type: "submit"
|
|
581
|
+
}, "Submit"))),
|
|
582
|
+
getByText = _render17.getByText,
|
|
583
|
+
getAllByRole = _render17.getAllByRole,
|
|
584
|
+
getByRole = _render17.getByRole;
|
|
585
|
+
|
|
586
|
+
var search = getAllByRole("button")[0];
|
|
587
|
+
var submit = getByText("Submit");
|
|
588
|
+
var input = getByRole("textbox");
|
|
589
|
+
|
|
590
|
+
_userEvent["default"].type(input, "test");
|
|
591
|
+
|
|
592
|
+
expect(input.value).toBe("test");
|
|
593
|
+
|
|
594
|
+
_userEvent["default"].click(search);
|
|
595
|
+
|
|
596
|
+
expect(handlerOnSubmit).not.toHaveBeenCalled();
|
|
597
|
+
|
|
598
|
+
_userEvent["default"].click(submit);
|
|
599
|
+
|
|
600
|
+
expect(handlerOnSubmit).toHaveBeenCalled();
|
|
601
|
+
});
|
|
555
602
|
test("Renders with correct prefix and suffix", function () {
|
|
556
|
-
var
|
|
603
|
+
var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
557
604
|
label: "Input label",
|
|
558
605
|
prefix: "+34",
|
|
559
606
|
suffix: "USD"
|
|
560
607
|
})),
|
|
561
|
-
getByText =
|
|
608
|
+
getByText = _render18.getByText;
|
|
562
609
|
|
|
563
610
|
expect(getByText("+34")).toBeTruthy();
|
|
564
611
|
expect(getByText("USD")).toBeTruthy();
|
|
565
612
|
});
|
|
566
|
-
test("Input has correct accesibility attributes", function () {
|
|
613
|
+
test("Text Input has correct aria accesibility attributes", function () {
|
|
567
614
|
var onClick = jest.fn();
|
|
568
615
|
var action = {
|
|
569
616
|
onClick: onClick,
|
|
@@ -583,18 +630,19 @@ describe("TextInput component tests", function () {
|
|
|
583
630
|
title: "Search"
|
|
584
631
|
};
|
|
585
632
|
|
|
586
|
-
var
|
|
633
|
+
var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
587
634
|
label: "Example label",
|
|
588
635
|
clearable: true,
|
|
589
636
|
action: action
|
|
590
637
|
})),
|
|
591
|
-
getByRole =
|
|
592
|
-
getAllByRole =
|
|
638
|
+
getByRole = _render19.getByRole,
|
|
639
|
+
getAllByRole = _render19.getAllByRole;
|
|
593
640
|
|
|
594
641
|
var input = getByRole("textbox");
|
|
595
642
|
expect(input.getAttribute("aria-autocomplete")).toBeNull();
|
|
596
643
|
expect(input.getAttribute("aria-controls")).toBeNull();
|
|
597
644
|
expect(input.getAttribute("aria-expanded")).toBeNull();
|
|
645
|
+
expect(input.getAttribute("aria-haspopup")).toBeNull();
|
|
598
646
|
expect(input.getAttribute("aria-activedescendant")).toBeNull();
|
|
599
647
|
expect(input.getAttribute("aria-invalid")).toBe("false");
|
|
600
648
|
expect(input.getAttribute("aria-errormessage")).toBeNull();
|
|
@@ -608,17 +656,18 @@ describe("TextInput component tests", function () {
|
|
|
608
656
|
expect(search.getAttribute("aria-label")).toBe("Search");
|
|
609
657
|
});
|
|
610
658
|
test("Autosuggest has correct accesibility attributes", function () {
|
|
611
|
-
var
|
|
659
|
+
var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
612
660
|
label: "Autocomplete Countries",
|
|
613
661
|
optional: true,
|
|
614
662
|
suggestions: countries
|
|
615
663
|
})),
|
|
616
|
-
getByRole =
|
|
617
|
-
getAllByRole =
|
|
664
|
+
getByRole = _render20.getByRole,
|
|
665
|
+
getAllByRole = _render20.getAllByRole;
|
|
618
666
|
|
|
619
667
|
var input = getByRole("combobox");
|
|
620
668
|
expect(input.getAttribute("aria-autocomplete")).toBe("list");
|
|
621
669
|
expect(input.getAttribute("aria-expanded")).toBe("false");
|
|
670
|
+
expect(input.getAttribute("aria-haspopup")).toBe("listbox");
|
|
622
671
|
expect(input.getAttribute("aria-required")).toBe("false");
|
|
623
672
|
|
|
624
673
|
_react2.fireEvent.focus(input);
|
|
@@ -626,121 +675,95 @@ describe("TextInput component tests", function () {
|
|
|
626
675
|
var list = getByRole("listbox");
|
|
627
676
|
expect(input.getAttribute("aria-controls")).toBe(list.id);
|
|
628
677
|
expect(input.getAttribute("aria-expanded")).toBe("true");
|
|
629
|
-
expect(list.getAttribute("aria-label")).toBe("Autocomplete Countries");
|
|
630
678
|
var options = getAllByRole("option");
|
|
631
679
|
expect(options[0].getAttribute("aria-selected")).toBeNull();
|
|
632
680
|
});
|
|
633
681
|
});
|
|
634
682
|
describe("TextInput component synchronous autosuggest tests", function () {
|
|
635
|
-
test("Autosuggest is displayed when the input gains focus",
|
|
636
|
-
var onChange
|
|
683
|
+
test("Autosuggest is displayed when the input gains focus", function () {
|
|
684
|
+
var onChange = jest.fn();
|
|
637
685
|
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
suggestions: countries,
|
|
646
|
-
onChange: onChange
|
|
647
|
-
})), getByRole = _render24.getByRole, getByText = _render24.getByText;
|
|
648
|
-
input = getByRole("combobox");
|
|
686
|
+
var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
687
|
+
label: "Autocomplete Countries",
|
|
688
|
+
suggestions: countries,
|
|
689
|
+
onChange: onChange
|
|
690
|
+
})),
|
|
691
|
+
getByRole = _render21.getByRole,
|
|
692
|
+
getByText = _render21.getByText;
|
|
649
693
|
|
|
650
|
-
|
|
694
|
+
var input = getByRole("combobox");
|
|
651
695
|
|
|
652
|
-
|
|
653
|
-
expect(list).toBeTruthy();
|
|
654
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
655
|
-
expect(getByText("Albania")).toBeTruthy();
|
|
656
|
-
expect(getByText("Algeria")).toBeTruthy();
|
|
657
|
-
expect(getByText("Andorra")).toBeTruthy();
|
|
696
|
+
_react2.fireEvent.focus(input);
|
|
658
697
|
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
})
|
|
666
|
-
test("Autosuggest is displayed when the user clicks the input",
|
|
667
|
-
var onChange
|
|
698
|
+
var list = getByRole("listbox");
|
|
699
|
+
expect(list).toBeTruthy();
|
|
700
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
701
|
+
expect(getByText("Albania")).toBeTruthy();
|
|
702
|
+
expect(getByText("Algeria")).toBeTruthy();
|
|
703
|
+
expect(getByText("Andorra")).toBeTruthy();
|
|
704
|
+
});
|
|
705
|
+
test("Autosuggest is displayed when the user clicks the input", function () {
|
|
706
|
+
var onChange = jest.fn();
|
|
668
707
|
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
suggestions: countries,
|
|
677
|
-
onChange: onChange
|
|
678
|
-
})), getByRole = _render25.getByRole, getByText = _render25.getByText;
|
|
679
|
-
input = getByRole("combobox");
|
|
708
|
+
var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
709
|
+
label: "Autocomplete Countries",
|
|
710
|
+
suggestions: countries,
|
|
711
|
+
onChange: onChange
|
|
712
|
+
})),
|
|
713
|
+
getByRole = _render22.getByRole,
|
|
714
|
+
getByText = _render22.getByText;
|
|
680
715
|
|
|
681
|
-
|
|
716
|
+
var input = getByRole("combobox");
|
|
682
717
|
|
|
683
|
-
|
|
684
|
-
expect(list).toBeTruthy();
|
|
685
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
686
|
-
expect(getByText("Albania")).toBeTruthy();
|
|
687
|
-
expect(getByText("Algeria")).toBeTruthy();
|
|
688
|
-
expect(getByText("Andorra")).toBeTruthy();
|
|
718
|
+
_react2.fireEvent.focus(input);
|
|
689
719
|
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
})
|
|
697
|
-
test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)",
|
|
698
|
-
var onChange
|
|
720
|
+
var list = getByRole("listbox");
|
|
721
|
+
expect(list).toBeTruthy();
|
|
722
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
723
|
+
expect(getByText("Albania")).toBeTruthy();
|
|
724
|
+
expect(getByText("Algeria")).toBeTruthy();
|
|
725
|
+
expect(getByText("Andorra")).toBeTruthy();
|
|
726
|
+
});
|
|
727
|
+
test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", function () {
|
|
728
|
+
var onChange = jest.fn();
|
|
699
729
|
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
})), getByRole = _render26.getByRole, queryByRole = _render26.queryByRole, getByText = _render26.getByText, getAllByText = _render26.getAllByText;
|
|
710
|
-
input = getByRole("combobox");
|
|
730
|
+
var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
731
|
+
label: "Autocomplete Countries",
|
|
732
|
+
suggestions: countries,
|
|
733
|
+
onChange: onChange
|
|
734
|
+
})),
|
|
735
|
+
getByRole = _render23.getByRole,
|
|
736
|
+
queryByRole = _render23.queryByRole,
|
|
737
|
+
getByText = _render23.getByText,
|
|
738
|
+
getAllByText = _render23.getAllByText;
|
|
711
739
|
|
|
712
|
-
|
|
740
|
+
var input = getByRole("combobox");
|
|
713
741
|
|
|
714
|
-
|
|
715
|
-
expect(list).toBeTruthy();
|
|
742
|
+
_react2.fireEvent.focus(input);
|
|
716
743
|
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
code: "Esc",
|
|
720
|
-
keyCode: 27,
|
|
721
|
-
charCode: 27
|
|
722
|
-
});
|
|
744
|
+
var list = getByRole("listbox");
|
|
745
|
+
expect(list).toBeTruthy();
|
|
723
746
|
|
|
724
|
-
|
|
747
|
+
_react2.fireEvent.keyDown(input, {
|
|
748
|
+
key: "Esc",
|
|
749
|
+
code: "Esc",
|
|
750
|
+
keyCode: 27,
|
|
751
|
+
charCode: 27
|
|
752
|
+
});
|
|
725
753
|
|
|
726
|
-
|
|
754
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
727
755
|
|
|
728
|
-
|
|
729
|
-
expect(getAllByText("B").length).toBe(4);
|
|
730
|
-
expect(getByText("ahamas")).toBeTruthy();
|
|
731
|
-
expect(getByText("ahrain")).toBeTruthy();
|
|
732
|
-
expect(getByText("angladesh")).toBeTruthy();
|
|
733
|
-
expect(getByText("arbados")).toBeTruthy();
|
|
756
|
+
_userEvent["default"].type(input, "B");
|
|
734
757
|
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
})
|
|
758
|
+
expect(list).toBeTruthy();
|
|
759
|
+
expect(getAllByText("B").length).toBe(4);
|
|
760
|
+
expect(getByText("ahamas")).toBeTruthy();
|
|
761
|
+
expect(getByText("ahrain")).toBeTruthy();
|
|
762
|
+
expect(getByText("angladesh")).toBeTruthy();
|
|
763
|
+
expect(getByText("arbados")).toBeTruthy();
|
|
764
|
+
});
|
|
742
765
|
test("Autosuggest displays filtered when the input has a default value", function () {
|
|
743
|
-
var
|
|
766
|
+
var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
744
767
|
label: "Uncontrolled suggestions filtered by default",
|
|
745
768
|
helperText: "Example of helper text",
|
|
746
769
|
placeholder: "Placeholder",
|
|
@@ -749,9 +772,9 @@ describe("TextInput component synchronous autosuggest tests", function () {
|
|
|
749
772
|
suggestions: ["Suggestion 11", "Suggestion 12", "Suggestion 23", "Suggestion 24"],
|
|
750
773
|
clearable: true
|
|
751
774
|
})),
|
|
752
|
-
getByRole =
|
|
753
|
-
getByText =
|
|
754
|
-
getAllByText =
|
|
775
|
+
getByRole = _render24.getByRole,
|
|
776
|
+
getByText = _render24.getByText,
|
|
777
|
+
getAllByText = _render24.getAllByText;
|
|
755
778
|
|
|
756
779
|
var input = getByRole("combobox");
|
|
757
780
|
expect(input.value).toBe("Suggestion 2");
|
|
@@ -762,517 +785,412 @@ describe("TextInput component synchronous autosuggest tests", function () {
|
|
|
762
785
|
expect(getByText("3")).toBeTruthy();
|
|
763
786
|
expect(getByText("4")).toBeTruthy();
|
|
764
787
|
});
|
|
765
|
-
test("Autosuggest is not displayed when prop suggestions is an empty array",
|
|
766
|
-
var onChange
|
|
767
|
-
|
|
768
|
-
return _regenerator["default"].wrap(function _callee5$(_context5) {
|
|
769
|
-
while (1) {
|
|
770
|
-
switch (_context5.prev = _context5.next) {
|
|
771
|
-
case 0:
|
|
772
|
-
onChange = jest.fn();
|
|
773
|
-
_render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
774
|
-
label: "Autocomplete Countries",
|
|
775
|
-
suggestions: [],
|
|
776
|
-
onChange: onChange
|
|
777
|
-
})), queryByRole = _render28.queryByRole;
|
|
778
|
-
input = queryByRole("textbox");
|
|
788
|
+
test("Autosuggest is not displayed when prop suggestions is an empty array", function () {
|
|
789
|
+
var onChange = jest.fn();
|
|
779
790
|
|
|
780
|
-
|
|
791
|
+
var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
792
|
+
label: "Autocomplete Countries",
|
|
793
|
+
suggestions: [],
|
|
794
|
+
onChange: onChange
|
|
795
|
+
})),
|
|
796
|
+
queryByRole = _render25.queryByRole;
|
|
781
797
|
|
|
782
|
-
|
|
798
|
+
var input = queryByRole("textbox");
|
|
783
799
|
|
|
784
|
-
|
|
785
|
-
case "end":
|
|
786
|
-
return _context5.stop();
|
|
787
|
-
}
|
|
788
|
-
}
|
|
789
|
-
}, _callee5);
|
|
790
|
-
})));
|
|
791
|
-
test("Autosuggest closes the listbox when there are no matches for the user's input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
|
|
792
|
-
var onChange, _render29, getByRole, queryByRole, getByText, input, list;
|
|
800
|
+
_react2.fireEvent.focus(input);
|
|
793
801
|
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
onChange = jest.fn();
|
|
799
|
-
_render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
800
|
-
label: "Autocomplete Countries",
|
|
801
|
-
suggestions: countries,
|
|
802
|
-
onChange: onChange
|
|
803
|
-
})), getByRole = _render29.getByRole, queryByRole = _render29.queryByRole, getByText = _render29.getByText;
|
|
804
|
-
input = getByRole("combobox");
|
|
802
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
803
|
+
});
|
|
804
|
+
test("Autosuggest closes the listbox when there are no matches for the user's input", function () {
|
|
805
|
+
var onChange = jest.fn();
|
|
805
806
|
|
|
806
|
-
|
|
807
|
+
var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
808
|
+
label: "Autocomplete Countries",
|
|
809
|
+
suggestions: countries,
|
|
810
|
+
onChange: onChange
|
|
811
|
+
})),
|
|
812
|
+
getByRole = _render26.getByRole,
|
|
813
|
+
queryByRole = _render26.queryByRole,
|
|
814
|
+
getByText = _render26.getByText;
|
|
807
815
|
|
|
808
|
-
|
|
809
|
-
expect(list).toBeTruthy();
|
|
810
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
816
|
+
var input = getByRole("combobox");
|
|
811
817
|
|
|
812
|
-
|
|
818
|
+
_react2.fireEvent.focus(input);
|
|
813
819
|
|
|
814
|
-
|
|
820
|
+
var list = getByRole("listbox");
|
|
821
|
+
expect(list).toBeTruthy();
|
|
822
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
815
823
|
|
|
816
|
-
|
|
817
|
-
case "end":
|
|
818
|
-
return _context6.stop();
|
|
819
|
-
}
|
|
820
|
-
}
|
|
821
|
-
}, _callee6);
|
|
822
|
-
})));
|
|
823
|
-
test("Autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
|
|
824
|
-
var onChange, _render30, getByRole, queryByRole, getByText, input, list;
|
|
824
|
+
_userEvent["default"].type(input, "x");
|
|
825
825
|
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
onChange = jest.fn();
|
|
831
|
-
_render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
832
|
-
label: "Autocomplete Countries",
|
|
833
|
-
suggestions: countries,
|
|
834
|
-
onChange: onChange
|
|
835
|
-
})), getByRole = _render30.getByRole, queryByRole = _render30.queryByRole, getByText = _render30.getByText;
|
|
836
|
-
input = getByRole("combobox");
|
|
826
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
827
|
+
});
|
|
828
|
+
test("Autosuggest with no matches founded doesn't let the listbox to be opened", function () {
|
|
829
|
+
var onChange = jest.fn();
|
|
837
830
|
|
|
838
|
-
|
|
831
|
+
var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
832
|
+
label: "Autocomplete Countries",
|
|
833
|
+
suggestions: countries,
|
|
834
|
+
onChange: onChange
|
|
835
|
+
})),
|
|
836
|
+
getByRole = _render27.getByRole,
|
|
837
|
+
queryByRole = _render27.queryByRole,
|
|
838
|
+
getByText = _render27.getByText;
|
|
839
839
|
|
|
840
|
-
|
|
841
|
-
expect(list).toBeTruthy();
|
|
842
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
840
|
+
var input = getByRole("combobox");
|
|
843
841
|
|
|
844
|
-
|
|
842
|
+
_react2.fireEvent.focus(input);
|
|
845
843
|
|
|
846
|
-
|
|
844
|
+
var list = getByRole("listbox");
|
|
845
|
+
expect(list).toBeTruthy();
|
|
846
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
847
847
|
|
|
848
|
-
|
|
848
|
+
_userEvent["default"].type(input, "x");
|
|
849
849
|
|
|
850
|
-
|
|
850
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
851
851
|
|
|
852
|
-
|
|
853
|
-
key: "ArrowUp",
|
|
854
|
-
code: "ArrowUp",
|
|
855
|
-
keyCode: 38,
|
|
856
|
-
charCode: 38
|
|
857
|
-
});
|
|
852
|
+
_react2.fireEvent.focus(input);
|
|
858
853
|
|
|
859
|
-
|
|
854
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
860
855
|
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
856
|
+
_react2.fireEvent.keyDown(input, {
|
|
857
|
+
key: "ArrowUp",
|
|
858
|
+
code: "ArrowUp",
|
|
859
|
+
keyCode: 38,
|
|
860
|
+
charCode: 38
|
|
861
|
+
});
|
|
867
862
|
|
|
868
|
-
|
|
863
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
869
864
|
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
}
|
|
876
|
-
})));
|
|
877
|
-
test("Autosuggest uncontrolled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
|
|
878
|
-
var onChange, _render31, getByRole, getByText, queryByRole, input;
|
|
865
|
+
_react2.fireEvent.keyDown(input, {
|
|
866
|
+
key: "ArrowDown",
|
|
867
|
+
code: "ArrowDown",
|
|
868
|
+
keyCode: 40,
|
|
869
|
+
charCode: 40
|
|
870
|
+
});
|
|
879
871
|
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
onChange = jest.fn();
|
|
885
|
-
_render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
886
|
-
label: "Autocomplete Countries",
|
|
887
|
-
suggestions: countries,
|
|
888
|
-
onChange: onChange
|
|
889
|
-
})), getByRole = _render31.getByRole, getByText = _render31.getByText, queryByRole = _render31.queryByRole;
|
|
890
|
-
input = getByRole("combobox");
|
|
872
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
873
|
+
});
|
|
874
|
+
test("Autosuggest uncontrolled - Suggestion selected by click", function () {
|
|
875
|
+
var onChange = jest.fn();
|
|
891
876
|
|
|
892
|
-
|
|
877
|
+
var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
878
|
+
label: "Autocomplete Countries",
|
|
879
|
+
suggestions: countries,
|
|
880
|
+
onChange: onChange
|
|
881
|
+
})),
|
|
882
|
+
getByRole = _render28.getByRole,
|
|
883
|
+
getByText = _render28.getByText,
|
|
884
|
+
queryByRole = _render28.queryByRole;
|
|
893
885
|
|
|
894
|
-
|
|
886
|
+
var input = getByRole("combobox");
|
|
895
887
|
|
|
896
|
-
|
|
897
|
-
expect(getByText("Alba")).toBeTruthy();
|
|
898
|
-
expect(getByText("nia")).toBeTruthy();
|
|
888
|
+
_react2.fireEvent.focus(input);
|
|
899
889
|
|
|
900
|
-
|
|
890
|
+
_userEvent["default"].type(input, "Alba");
|
|
901
891
|
|
|
902
|
-
|
|
903
|
-
|
|
892
|
+
expect(onChange).toHaveBeenCalled();
|
|
893
|
+
expect(getByText("Alba")).toBeTruthy();
|
|
894
|
+
expect(getByText("nia")).toBeTruthy();
|
|
904
895
|
|
|
905
|
-
|
|
906
|
-
case "end":
|
|
907
|
-
return _context8.stop();
|
|
908
|
-
}
|
|
909
|
-
}
|
|
910
|
-
}, _callee8);
|
|
911
|
-
})));
|
|
912
|
-
test("Autosuggest controlled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
|
|
913
|
-
var onChange, _render32, getByRole, getByText, queryByRole, input;
|
|
896
|
+
_userEvent["default"].click(getByRole("option"));
|
|
914
897
|
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
_render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
921
|
-
label: "Autocomplete Countries",
|
|
922
|
-
value: "Andor",
|
|
923
|
-
suggestions: countries,
|
|
924
|
-
onChange: onChange
|
|
925
|
-
})), getByRole = _render32.getByRole, getByText = _render32.getByText, queryByRole = _render32.queryByRole;
|
|
926
|
-
input = getByRole("combobox");
|
|
898
|
+
expect(input.value).toBe("Albania");
|
|
899
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
900
|
+
});
|
|
901
|
+
test("Autosuggest controlled - Suggestion selected by click", function () {
|
|
902
|
+
var onChange = jest.fn();
|
|
927
903
|
|
|
928
|
-
|
|
904
|
+
var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
905
|
+
label: "Autocomplete Countries",
|
|
906
|
+
value: "Andor",
|
|
907
|
+
suggestions: countries,
|
|
908
|
+
onChange: onChange
|
|
909
|
+
})),
|
|
910
|
+
getByRole = _render29.getByRole,
|
|
911
|
+
getByText = _render29.getByText,
|
|
912
|
+
queryByRole = _render29.queryByRole;
|
|
929
913
|
|
|
930
|
-
|
|
931
|
-
expect(getByText("Andor")).toBeTruthy();
|
|
932
|
-
expect(getByText("ra")).toBeTruthy();
|
|
914
|
+
var input = getByRole("combobox");
|
|
933
915
|
|
|
934
|
-
|
|
916
|
+
_userEvent["default"].click(getByText("Autocomplete Countries"));
|
|
935
917
|
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
918
|
+
expect(input.value).toBe("Andor");
|
|
919
|
+
expect(getByText("Andor")).toBeTruthy();
|
|
920
|
+
expect(getByText("ra")).toBeTruthy();
|
|
940
921
|
|
|
941
|
-
|
|
942
|
-
case "end":
|
|
943
|
-
return _context9.stop();
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
}, _callee9);
|
|
947
|
-
})));
|
|
948
|
-
test("Autosuggest - Pattern constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
|
|
949
|
-
var onChange, onBlur, _render33, getByRole, getByText, input;
|
|
922
|
+
_userEvent["default"].click(getByRole("option"));
|
|
950
923
|
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
suggestions: countries,
|
|
960
|
-
onChange: onChange,
|
|
961
|
-
onBlur: onBlur,
|
|
962
|
-
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
963
|
-
})), getByRole = _render33.getByRole, getByText = _render33.getByText;
|
|
964
|
-
input = getByRole("combobox");
|
|
924
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
925
|
+
value: "Andorra"
|
|
926
|
+
});
|
|
927
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
928
|
+
});
|
|
929
|
+
test("Autosuggest - Pattern constraint", function () {
|
|
930
|
+
var onChange = jest.fn();
|
|
931
|
+
var onBlur = jest.fn();
|
|
965
932
|
|
|
966
|
-
|
|
933
|
+
var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
934
|
+
label: "Autocomplete Countries",
|
|
935
|
+
suggestions: countries,
|
|
936
|
+
onChange: onChange,
|
|
937
|
+
onBlur: onBlur,
|
|
938
|
+
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
939
|
+
})),
|
|
940
|
+
getByRole = _render30.getByRole,
|
|
941
|
+
getByText = _render30.getByText;
|
|
967
942
|
|
|
968
|
-
|
|
943
|
+
var input = getByRole("combobox");
|
|
969
944
|
|
|
970
|
-
|
|
971
|
-
expect(getByText("ra")).toBeTruthy();
|
|
945
|
+
_react2.fireEvent.focus(input);
|
|
972
946
|
|
|
973
|
-
|
|
947
|
+
_userEvent["default"].type(input, "Andor");
|
|
974
948
|
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
error: "Please match the format requested."
|
|
978
|
-
});
|
|
949
|
+
expect(getByText("Andor")).toBeTruthy();
|
|
950
|
+
expect(getByText("ra")).toBeTruthy();
|
|
979
951
|
|
|
980
|
-
|
|
952
|
+
_userEvent["default"].click(getByRole("option"));
|
|
981
953
|
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
954
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
955
|
+
value: "Andorra",
|
|
956
|
+
error: "Please match the format requested."
|
|
957
|
+
});
|
|
986
958
|
|
|
987
|
-
|
|
988
|
-
case "end":
|
|
989
|
-
return _context10.stop();
|
|
990
|
-
}
|
|
991
|
-
}
|
|
992
|
-
}, _callee10);
|
|
993
|
-
})));
|
|
994
|
-
test("Autosuggest - Length constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
|
|
995
|
-
var onChange, onBlur, _render34, getByText, getByRole, input;
|
|
959
|
+
_react2.fireEvent.blur(input);
|
|
996
960
|
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
suggestions: countries,
|
|
1006
|
-
onChange: onChange,
|
|
1007
|
-
onBlur: onBlur,
|
|
1008
|
-
minLength: 5,
|
|
1009
|
-
maxLength: 10
|
|
1010
|
-
})), getByText = _render34.getByText, getByRole = _render34.getByRole;
|
|
1011
|
-
input = getByRole("combobox");
|
|
961
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
962
|
+
value: "Andorra",
|
|
963
|
+
error: "Please match the format requested."
|
|
964
|
+
});
|
|
965
|
+
});
|
|
966
|
+
test("Autosuggest - Length constraint", function () {
|
|
967
|
+
var onChange = jest.fn();
|
|
968
|
+
var onBlur = jest.fn();
|
|
1012
969
|
|
|
1013
|
-
|
|
970
|
+
var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
971
|
+
label: "Autocomplete Countries",
|
|
972
|
+
suggestions: countries,
|
|
973
|
+
onChange: onChange,
|
|
974
|
+
onBlur: onBlur,
|
|
975
|
+
minLength: 5,
|
|
976
|
+
maxLength: 10
|
|
977
|
+
})),
|
|
978
|
+
getByText = _render31.getByText,
|
|
979
|
+
getByRole = _render31.getByRole;
|
|
1014
980
|
|
|
1015
|
-
|
|
981
|
+
var input = getByRole("combobox");
|
|
1016
982
|
|
|
1017
|
-
|
|
1018
|
-
expect(getByText("d")).toBeTruthy();
|
|
983
|
+
_react2.fireEvent.focus(input);
|
|
1019
984
|
|
|
1020
|
-
|
|
985
|
+
_userEvent["default"].type(input, "Cha");
|
|
1021
986
|
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
error: "Min length 5, max length 10."
|
|
1025
|
-
});
|
|
987
|
+
expect(getByText("Cha")).toBeTruthy();
|
|
988
|
+
expect(getByText("d")).toBeTruthy();
|
|
1026
989
|
|
|
1027
|
-
|
|
990
|
+
_userEvent["default"].click(getByRole("option"));
|
|
1028
991
|
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
992
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
993
|
+
value: "Cha",
|
|
994
|
+
error: "Min length 5, max length 10."
|
|
995
|
+
});
|
|
1033
996
|
|
|
1034
|
-
|
|
1035
|
-
case "end":
|
|
1036
|
-
return _context11.stop();
|
|
1037
|
-
}
|
|
1038
|
-
}
|
|
1039
|
-
}, _callee11);
|
|
1040
|
-
})));
|
|
1041
|
-
test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
|
|
1042
|
-
var onChange, _render35, getByRole, queryByRole, input, list;
|
|
997
|
+
_react2.fireEvent.blur(input);
|
|
1043
998
|
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
suggestions: countries,
|
|
1052
|
-
onChange: onChange
|
|
1053
|
-
})), getByRole = _render35.getByRole, queryByRole = _render35.queryByRole;
|
|
1054
|
-
input = getByRole("combobox");
|
|
999
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
1000
|
+
value: "Chad",
|
|
1001
|
+
error: "Min length 5, max length 10."
|
|
1002
|
+
});
|
|
1003
|
+
});
|
|
1004
|
+
test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", function () {
|
|
1005
|
+
var onChange = jest.fn();
|
|
1055
1006
|
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1007
|
+
var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1008
|
+
label: "Autocomplete Countries",
|
|
1009
|
+
suggestions: countries,
|
|
1010
|
+
onChange: onChange
|
|
1011
|
+
})),
|
|
1012
|
+
getByRole = _render32.getByRole,
|
|
1013
|
+
queryByRole = _render32.queryByRole;
|
|
1062
1014
|
|
|
1063
|
-
|
|
1064
|
-
expect(list).toBeTruthy();
|
|
1015
|
+
var input = getByRole("combobox");
|
|
1065
1016
|
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1017
|
+
_react2.fireEvent.keyDown(input, {
|
|
1018
|
+
key: "ArrowDown",
|
|
1019
|
+
code: "ArrowDown",
|
|
1020
|
+
keyCode: 40,
|
|
1021
|
+
charCode: 40
|
|
1022
|
+
});
|
|
1072
1023
|
|
|
1073
|
-
|
|
1074
|
-
|
|
1024
|
+
var list = getByRole("listbox");
|
|
1025
|
+
expect(list).toBeTruthy();
|
|
1075
1026
|
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
}
|
|
1082
|
-
})));
|
|
1083
|
-
test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
|
|
1084
|
-
var onChange, _render36, getByRole, queryByRole, input, list;
|
|
1027
|
+
_react2.fireEvent.keyDown(input, {
|
|
1028
|
+
key: "Enter",
|
|
1029
|
+
code: "Enter",
|
|
1030
|
+
keyCode: 13,
|
|
1031
|
+
charCode: 13
|
|
1032
|
+
});
|
|
1085
1033
|
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
_render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1092
|
-
label: "Autocomplete Countries",
|
|
1093
|
-
suggestions: countries,
|
|
1094
|
-
onChange: onChange
|
|
1095
|
-
})), getByRole = _render36.getByRole, queryByRole = _render36.queryByRole;
|
|
1096
|
-
input = getByRole("combobox");
|
|
1034
|
+
expect(input.value).toBe("Afghanistan");
|
|
1035
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1036
|
+
});
|
|
1037
|
+
test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", function () {
|
|
1038
|
+
var onChange = jest.fn();
|
|
1097
1039
|
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1040
|
+
var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1041
|
+
label: "Autocomplete Countries",
|
|
1042
|
+
suggestions: countries,
|
|
1043
|
+
onChange: onChange
|
|
1044
|
+
})),
|
|
1045
|
+
getByRole = _render33.getByRole,
|
|
1046
|
+
queryByRole = _render33.queryByRole;
|
|
1104
1047
|
|
|
1105
|
-
|
|
1106
|
-
expect(list).toBeTruthy();
|
|
1048
|
+
var input = getByRole("combobox");
|
|
1107
1049
|
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1050
|
+
_react2.fireEvent.keyDown(input, {
|
|
1051
|
+
key: "ArrowUp",
|
|
1052
|
+
code: "ArrowUp",
|
|
1053
|
+
keyCode: 38,
|
|
1054
|
+
charCode: 38
|
|
1055
|
+
});
|
|
1114
1056
|
|
|
1115
|
-
|
|
1116
|
-
|
|
1057
|
+
var list = getByRole("listbox");
|
|
1058
|
+
expect(list).toBeTruthy();
|
|
1117
1059
|
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
}
|
|
1124
|
-
})));
|
|
1125
|
-
test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
|
|
1126
|
-
var onChange, _render37, getByRole, queryByRole, input, list;
|
|
1060
|
+
_react2.fireEvent.keyDown(input, {
|
|
1061
|
+
key: "Enter",
|
|
1062
|
+
code: "Enter",
|
|
1063
|
+
keyCode: 13,
|
|
1064
|
+
charCode: 13
|
|
1065
|
+
});
|
|
1127
1066
|
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
_render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1134
|
-
label: "Autocomplete Countries",
|
|
1135
|
-
suggestions: countries,
|
|
1136
|
-
onChange: onChange
|
|
1137
|
-
})), getByRole = _render37.getByRole, queryByRole = _render37.queryByRole;
|
|
1138
|
-
input = getByRole("combobox");
|
|
1067
|
+
expect(input.value).toBe("Djibouti");
|
|
1068
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1069
|
+
});
|
|
1070
|
+
test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", function () {
|
|
1071
|
+
var onChange = jest.fn();
|
|
1139
1072
|
|
|
1140
|
-
|
|
1073
|
+
var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1074
|
+
label: "Autocomplete Countries",
|
|
1075
|
+
suggestions: countries,
|
|
1076
|
+
onChange: onChange
|
|
1077
|
+
})),
|
|
1078
|
+
getByRole = _render34.getByRole,
|
|
1079
|
+
queryByRole = _render34.queryByRole;
|
|
1141
1080
|
|
|
1142
|
-
|
|
1081
|
+
var input = getByRole("combobox");
|
|
1143
1082
|
|
|
1144
|
-
|
|
1145
|
-
expect(list).toBeTruthy();
|
|
1083
|
+
_react2.fireEvent.focus(input);
|
|
1146
1084
|
|
|
1147
|
-
|
|
1148
|
-
key: "Esc",
|
|
1149
|
-
code: "Esc",
|
|
1150
|
-
keyCode: 27,
|
|
1151
|
-
charCode: 27
|
|
1152
|
-
});
|
|
1085
|
+
_userEvent["default"].type(input, "Bangla");
|
|
1153
1086
|
|
|
1154
|
-
|
|
1155
|
-
|
|
1087
|
+
var list = getByRole("listbox");
|
|
1088
|
+
expect(list).toBeTruthy();
|
|
1156
1089
|
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
}
|
|
1163
|
-
})));
|
|
1164
|
-
test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
|
|
1165
|
-
var onChange, _render38, getByRole, queryByRole, input, list;
|
|
1090
|
+
_react2.fireEvent.keyDown(input, {
|
|
1091
|
+
key: "Esc",
|
|
1092
|
+
code: "Esc",
|
|
1093
|
+
keyCode: 27,
|
|
1094
|
+
charCode: 27
|
|
1095
|
+
});
|
|
1166
1096
|
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
_render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1173
|
-
label: "Autocomplete Countries",
|
|
1174
|
-
suggestions: countries,
|
|
1175
|
-
onChange: onChange
|
|
1176
|
-
})), getByRole = _render38.getByRole, queryByRole = _render38.queryByRole;
|
|
1177
|
-
input = getByRole("combobox");
|
|
1097
|
+
expect(input.value).toBe("");
|
|
1098
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1099
|
+
});
|
|
1100
|
+
test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", function () {
|
|
1101
|
+
var onChange = jest.fn();
|
|
1178
1102
|
|
|
1179
|
-
|
|
1103
|
+
var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1104
|
+
label: "Autocomplete Countries",
|
|
1105
|
+
suggestions: countries,
|
|
1106
|
+
onChange: onChange
|
|
1107
|
+
})),
|
|
1108
|
+
getByRole = _render35.getByRole,
|
|
1109
|
+
queryByRole = _render35.queryByRole;
|
|
1180
1110
|
|
|
1181
|
-
|
|
1182
|
-
expect(list).toBeTruthy();
|
|
1111
|
+
var input = getByRole("combobox");
|
|
1183
1112
|
|
|
1184
|
-
|
|
1185
|
-
key: "Enter",
|
|
1186
|
-
code: "Enter",
|
|
1187
|
-
keyCode: 27,
|
|
1188
|
-
charCode: 27
|
|
1189
|
-
});
|
|
1113
|
+
_react2.fireEvent.focus(input);
|
|
1190
1114
|
|
|
1191
|
-
|
|
1192
|
-
|
|
1115
|
+
var list = getByRole("listbox");
|
|
1116
|
+
expect(list).toBeTruthy();
|
|
1193
1117
|
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
}
|
|
1200
|
-
})));
|
|
1201
|
-
test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
|
|
1202
|
-
var onChange, _render39, getByRole, queryByRole, input;
|
|
1118
|
+
_react2.fireEvent.keyDown(input, {
|
|
1119
|
+
key: "Enter",
|
|
1120
|
+
code: "Enter",
|
|
1121
|
+
keyCode: 27,
|
|
1122
|
+
charCode: 27
|
|
1123
|
+
});
|
|
1203
1124
|
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
_render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1210
|
-
label: "Autocomplete Countries",
|
|
1211
|
-
suggestions: countries,
|
|
1212
|
-
onChange: onChange
|
|
1213
|
-
})), getByRole = _render39.getByRole, queryByRole = _render39.queryByRole;
|
|
1214
|
-
input = getByRole("combobox");
|
|
1125
|
+
expect(input.value).toBe("");
|
|
1126
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1127
|
+
});
|
|
1128
|
+
test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", function () {
|
|
1129
|
+
var onChange = jest.fn();
|
|
1215
1130
|
|
|
1216
|
-
|
|
1131
|
+
var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1132
|
+
label: "Autocomplete Countries",
|
|
1133
|
+
suggestions: countries,
|
|
1134
|
+
onChange: onChange
|
|
1135
|
+
})),
|
|
1136
|
+
getByRole = _render36.getByRole,
|
|
1137
|
+
queryByRole = _render36.queryByRole;
|
|
1217
1138
|
|
|
1218
|
-
|
|
1139
|
+
var input = getByRole("combobox");
|
|
1219
1140
|
|
|
1220
|
-
|
|
1221
|
-
key: "ArrowUp",
|
|
1222
|
-
code: "ArrowUp",
|
|
1223
|
-
keyCode: 38,
|
|
1224
|
-
charCode: 38
|
|
1225
|
-
});
|
|
1141
|
+
_react2.fireEvent.focus(input);
|
|
1226
1142
|
|
|
1227
|
-
|
|
1228
|
-
key: "ArrowUp",
|
|
1229
|
-
code: "ArrowUpp",
|
|
1230
|
-
keyCode: 38,
|
|
1231
|
-
charCode: 38
|
|
1232
|
-
});
|
|
1143
|
+
_userEvent["default"].type(input, "Ba");
|
|
1233
1144
|
|
|
1234
|
-
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1145
|
+
_react2.fireEvent.keyDown(input, {
|
|
1146
|
+
key: "ArrowUp",
|
|
1147
|
+
code: "ArrowUp",
|
|
1148
|
+
keyCode: 38,
|
|
1149
|
+
charCode: 38
|
|
1150
|
+
});
|
|
1240
1151
|
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1152
|
+
_react2.fireEvent.keyDown(input, {
|
|
1153
|
+
key: "ArrowUp",
|
|
1154
|
+
code: "ArrowUpp",
|
|
1155
|
+
keyCode: 38,
|
|
1156
|
+
charCode: 38
|
|
1157
|
+
});
|
|
1247
1158
|
|
|
1248
|
-
|
|
1249
|
-
|
|
1159
|
+
_react2.fireEvent.keyDown(input, {
|
|
1160
|
+
key: "ArrowDown",
|
|
1161
|
+
code: "ArrowDown",
|
|
1162
|
+
keyCode: 40,
|
|
1163
|
+
charCode: 40
|
|
1164
|
+
});
|
|
1250
1165
|
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1166
|
+
_react2.fireEvent.keyDown(input, {
|
|
1167
|
+
key: "Enter",
|
|
1168
|
+
code: "Enter",
|
|
1169
|
+
keyCode: 13,
|
|
1170
|
+
charCode: 13
|
|
1171
|
+
});
|
|
1257
1172
|
|
|
1258
|
-
|
|
1259
|
-
|
|
1173
|
+
expect(input.value).toBe("Barbados");
|
|
1174
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1260
1175
|
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
}
|
|
1267
|
-
|
|
1176
|
+
_react2.fireEvent.keyDown(input, {
|
|
1177
|
+
key: "Esc",
|
|
1178
|
+
code: "Esp",
|
|
1179
|
+
keyCode: 27,
|
|
1180
|
+
charCode: 27
|
|
1181
|
+
});
|
|
1182
|
+
|
|
1183
|
+
expect(input.value).toBe("");
|
|
1184
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1185
|
+
});
|
|
1268
1186
|
});
|
|
1269
1187
|
describe("TextInput component asynchronous autosuggest tests", function () {
|
|
1270
|
-
test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1271
|
-
var callbackFunc, onChange,
|
|
1188
|
+
test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
1189
|
+
var callbackFunc, onChange, _render37, getByRole, getByText, input;
|
|
1272
1190
|
|
|
1273
|
-
return _regenerator["default"].wrap(function
|
|
1191
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
1274
1192
|
while (1) {
|
|
1275
|
-
switch (
|
|
1193
|
+
switch (_context.prev = _context.next) {
|
|
1276
1194
|
case 0:
|
|
1277
1195
|
callbackFunc = jest.fn(function (newValue) {
|
|
1278
1196
|
var result = new Promise(function (resolve) {
|
|
@@ -1285,17 +1203,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1285
1203
|
return result;
|
|
1286
1204
|
});
|
|
1287
1205
|
onChange = jest.fn();
|
|
1288
|
-
|
|
1206
|
+
_render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1289
1207
|
label: "Autosuggest Countries",
|
|
1290
1208
|
suggestions: callbackFunc,
|
|
1291
1209
|
onChange: onChange
|
|
1292
|
-
})), getByRole =
|
|
1210
|
+
})), getByRole = _render37.getByRole, getByText = _render37.getByText;
|
|
1293
1211
|
input = getByRole("combobox");
|
|
1294
1212
|
|
|
1295
1213
|
_react2.fireEvent.focus(input);
|
|
1296
1214
|
|
|
1297
1215
|
expect(getByRole("listbox")).toBeTruthy();
|
|
1298
|
-
|
|
1216
|
+
_context.next = 8;
|
|
1299
1217
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1300
1218
|
return getByText("Searching...");
|
|
1301
1219
|
});
|
|
@@ -1308,7 +1226,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1308
1226
|
|
|
1309
1227
|
_userEvent["default"].type(input, "Ab");
|
|
1310
1228
|
|
|
1311
|
-
|
|
1229
|
+
_context.next = 15;
|
|
1312
1230
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1313
1231
|
return getByText("Searching...");
|
|
1314
1232
|
});
|
|
@@ -1334,66 +1252,58 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1334
1252
|
|
|
1335
1253
|
case 19:
|
|
1336
1254
|
case "end":
|
|
1337
|
-
return
|
|
1255
|
+
return _context.stop();
|
|
1338
1256
|
}
|
|
1339
1257
|
}
|
|
1340
|
-
},
|
|
1258
|
+
}, _callee);
|
|
1341
1259
|
})));
|
|
1342
|
-
test("Autosuggest Esc key works while 'Searching...' message is shown",
|
|
1343
|
-
var callbackFunc
|
|
1260
|
+
test("Autosuggest Esc key works while 'Searching...' message is shown", function () {
|
|
1261
|
+
var callbackFunc = jest.fn(function (newValue) {
|
|
1262
|
+
var result = new Promise(function (resolve) {
|
|
1263
|
+
return setTimeout(function () {
|
|
1264
|
+
resolve(newValue ? countries.filter(function (option) {
|
|
1265
|
+
return option.toUpperCase().includes(newValue.toUpperCase());
|
|
1266
|
+
}) : countries);
|
|
1267
|
+
}, 100);
|
|
1268
|
+
});
|
|
1269
|
+
return result;
|
|
1270
|
+
});
|
|
1271
|
+
var onChange = jest.fn();
|
|
1344
1272
|
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
return option.toUpperCase().includes(newValue.toUpperCase());
|
|
1354
|
-
}) : countries);
|
|
1355
|
-
}, 100);
|
|
1356
|
-
});
|
|
1357
|
-
return result;
|
|
1358
|
-
});
|
|
1359
|
-
onChange = jest.fn();
|
|
1360
|
-
_render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1361
|
-
label: "Autosuggest Countries",
|
|
1362
|
-
suggestions: callbackFunc,
|
|
1363
|
-
onChange: onChange
|
|
1364
|
-
})), getByRole = _render41.getByRole, queryByText = _render41.queryByText, queryByRole = _render41.queryByRole;
|
|
1365
|
-
input = getByRole("combobox");
|
|
1273
|
+
var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1274
|
+
label: "Autosuggest Countries",
|
|
1275
|
+
suggestions: callbackFunc,
|
|
1276
|
+
onChange: onChange
|
|
1277
|
+
})),
|
|
1278
|
+
getByRole = _render38.getByRole,
|
|
1279
|
+
queryByText = _render38.queryByText,
|
|
1280
|
+
queryByRole = _render38.queryByRole;
|
|
1366
1281
|
|
|
1367
|
-
|
|
1282
|
+
var input = getByRole("combobox");
|
|
1368
1283
|
|
|
1369
|
-
|
|
1284
|
+
_react2.fireEvent.focus(input);
|
|
1370
1285
|
|
|
1371
|
-
|
|
1286
|
+
expect(getByRole("listbox")).toBeTruthy();
|
|
1372
1287
|
|
|
1373
|
-
|
|
1374
|
-
key: "Esc",
|
|
1375
|
-
code: "Esc",
|
|
1376
|
-
keyCode: 27,
|
|
1377
|
-
charCode: 27
|
|
1378
|
-
});
|
|
1288
|
+
_userEvent["default"].type(input, "Ab");
|
|
1379
1289
|
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1290
|
+
_react2.fireEvent.keyDown(input, {
|
|
1291
|
+
key: "Esc",
|
|
1292
|
+
code: "Esc",
|
|
1293
|
+
keyCode: 27,
|
|
1294
|
+
charCode: 27
|
|
1295
|
+
});
|
|
1383
1296
|
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
})));
|
|
1391
|
-
test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
|
|
1392
|
-
var callbackFunc, onChange, _render42, getByRole, getByText, queryByText, queryByRole, input, list;
|
|
1297
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1298
|
+
expect(queryByText("Searching...")).toBeFalsy();
|
|
1299
|
+
expect(input.value).toBe("");
|
|
1300
|
+
});
|
|
1301
|
+
test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
1302
|
+
var callbackFunc, onChange, _render39, getByRole, getByText, queryByText, queryByRole, input, list;
|
|
1393
1303
|
|
|
1394
|
-
return _regenerator["default"].wrap(function
|
|
1304
|
+
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
1395
1305
|
while (1) {
|
|
1396
|
-
switch (
|
|
1306
|
+
switch (_context2.prev = _context2.next) {
|
|
1397
1307
|
case 0:
|
|
1398
1308
|
callbackFunc = jest.fn(function (newValue) {
|
|
1399
1309
|
var result = new Promise(function (resolve) {
|
|
@@ -1406,11 +1316,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1406
1316
|
return result;
|
|
1407
1317
|
});
|
|
1408
1318
|
onChange = jest.fn();
|
|
1409
|
-
|
|
1319
|
+
_render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1410
1320
|
label: "Autosuggest Countries",
|
|
1411
1321
|
suggestions: callbackFunc,
|
|
1412
1322
|
onChange: onChange
|
|
1413
|
-
})), getByRole =
|
|
1323
|
+
})), getByRole = _render39.getByRole, getByText = _render39.getByText, queryByText = _render39.queryByText, queryByRole = _render39.queryByRole;
|
|
1414
1324
|
input = getByRole("combobox");
|
|
1415
1325
|
|
|
1416
1326
|
_react2.fireEvent.focus(input);
|
|
@@ -1439,7 +1349,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1439
1349
|
});
|
|
1440
1350
|
|
|
1441
1351
|
expect(list).toBeTruthy();
|
|
1442
|
-
|
|
1352
|
+
_context2.next = 16;
|
|
1443
1353
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1444
1354
|
return getByText("Searching...");
|
|
1445
1355
|
});
|
|
@@ -1452,17 +1362,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1452
1362
|
|
|
1453
1363
|
case 20:
|
|
1454
1364
|
case "end":
|
|
1455
|
-
return
|
|
1365
|
+
return _context2.stop();
|
|
1456
1366
|
}
|
|
1457
1367
|
}
|
|
1458
|
-
},
|
|
1368
|
+
}, _callee2);
|
|
1459
1369
|
})));
|
|
1460
|
-
test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1461
|
-
var callbackFunc, onChange,
|
|
1370
|
+
test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
|
|
1371
|
+
var callbackFunc, onChange, _render40, getByRole, getByText, input;
|
|
1462
1372
|
|
|
1463
|
-
return _regenerator["default"].wrap(function
|
|
1373
|
+
return _regenerator["default"].wrap(function _callee3$(_context3) {
|
|
1464
1374
|
while (1) {
|
|
1465
|
-
switch (
|
|
1375
|
+
switch (_context3.prev = _context3.next) {
|
|
1466
1376
|
case 0:
|
|
1467
1377
|
callbackFunc = jest.fn(function (newValue) {
|
|
1468
1378
|
var result = new Promise(function (resolve) {
|
|
@@ -1475,18 +1385,18 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1475
1385
|
return result;
|
|
1476
1386
|
});
|
|
1477
1387
|
onChange = jest.fn();
|
|
1478
|
-
|
|
1388
|
+
_render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1479
1389
|
label: "Autosuggest Countries",
|
|
1480
1390
|
onChange: onChange,
|
|
1481
1391
|
suggestions: callbackFunc
|
|
1482
|
-
})), getByRole =
|
|
1392
|
+
})), getByRole = _render40.getByRole, getByText = _render40.getByText;
|
|
1483
1393
|
input = getByRole("combobox");
|
|
1484
1394
|
|
|
1485
1395
|
_react2.fireEvent.focus(input);
|
|
1486
1396
|
|
|
1487
1397
|
_userEvent["default"].type(input, "Den");
|
|
1488
1398
|
|
|
1489
|
-
|
|
1399
|
+
_context3.next = 8;
|
|
1490
1400
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1491
1401
|
return getByText("Searching...");
|
|
1492
1402
|
});
|
|
@@ -1503,17 +1413,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1503
1413
|
|
|
1504
1414
|
case 12:
|
|
1505
1415
|
case "end":
|
|
1506
|
-
return
|
|
1416
|
+
return _context3.stop();
|
|
1507
1417
|
}
|
|
1508
1418
|
}
|
|
1509
|
-
},
|
|
1419
|
+
}, _callee3);
|
|
1510
1420
|
})));
|
|
1511
|
-
test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1512
|
-
var callbackFunc, onChange,
|
|
1421
|
+
test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
|
|
1422
|
+
var callbackFunc, onChange, _render41, getByRole, getByText, queryByRole, input;
|
|
1513
1423
|
|
|
1514
|
-
return _regenerator["default"].wrap(function
|
|
1424
|
+
return _regenerator["default"].wrap(function _callee4$(_context4) {
|
|
1515
1425
|
while (1) {
|
|
1516
|
-
switch (
|
|
1426
|
+
switch (_context4.prev = _context4.next) {
|
|
1517
1427
|
case 0:
|
|
1518
1428
|
callbackFunc = jest.fn(function (newValue) {
|
|
1519
1429
|
var result = new Promise(function (resolve) {
|
|
@@ -1526,45 +1436,47 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1526
1436
|
return result;
|
|
1527
1437
|
});
|
|
1528
1438
|
onChange = jest.fn();
|
|
1529
|
-
|
|
1439
|
+
_render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1530
1440
|
label: "Autosuggest Countries",
|
|
1531
1441
|
value: "Denm",
|
|
1532
1442
|
onChange: onChange,
|
|
1533
1443
|
suggestions: callbackFunc
|
|
1534
|
-
})), getByRole =
|
|
1444
|
+
})), getByRole = _render41.getByRole, getByText = _render41.getByText, queryByRole = _render41.queryByRole;
|
|
1535
1445
|
input = getByRole("combobox");
|
|
1446
|
+
expect(input.value).toBe("Denm");
|
|
1536
1447
|
|
|
1537
|
-
|
|
1448
|
+
_userEvent["default"].click(getByText("Autosuggest Countries"));
|
|
1538
1449
|
|
|
1539
|
-
|
|
1450
|
+
_context4.next = 8;
|
|
1540
1451
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1541
1452
|
return getByText("Searching...");
|
|
1542
1453
|
});
|
|
1543
1454
|
|
|
1544
|
-
case
|
|
1545
|
-
expect(input.value).toBe("Denm");
|
|
1455
|
+
case 8:
|
|
1546
1456
|
expect(getByText("Denmark")).toBeTruthy();
|
|
1547
1457
|
|
|
1548
|
-
|
|
1458
|
+
_react2.fireEvent.focus(getByRole("option"));
|
|
1459
|
+
|
|
1460
|
+
_userEvent["default"].click(getByText("Denmark"));
|
|
1549
1461
|
|
|
1550
1462
|
expect(onChange).toHaveBeenCalledWith({
|
|
1551
1463
|
value: "Denmark"
|
|
1552
1464
|
});
|
|
1553
1465
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
1554
1466
|
|
|
1555
|
-
case
|
|
1467
|
+
case 13:
|
|
1556
1468
|
case "end":
|
|
1557
|
-
return
|
|
1469
|
+
return _context4.stop();
|
|
1558
1470
|
}
|
|
1559
1471
|
}
|
|
1560
|
-
},
|
|
1472
|
+
}, _callee4);
|
|
1561
1473
|
})));
|
|
1562
|
-
test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1563
|
-
var callbackFunc, onChange,
|
|
1474
|
+
test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
|
|
1475
|
+
var callbackFunc, onChange, _render42, getByText, getByRole, queryByRole, input;
|
|
1564
1476
|
|
|
1565
|
-
return _regenerator["default"].wrap(function
|
|
1477
|
+
return _regenerator["default"].wrap(function _callee5$(_context5) {
|
|
1566
1478
|
while (1) {
|
|
1567
|
-
switch (
|
|
1479
|
+
switch (_context5.prev = _context5.next) {
|
|
1568
1480
|
case 0:
|
|
1569
1481
|
callbackFunc = jest.fn(function (newValue) {
|
|
1570
1482
|
var result = new Promise(function (resolve) {
|
|
@@ -1577,18 +1489,18 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1577
1489
|
return result;
|
|
1578
1490
|
});
|
|
1579
1491
|
onChange = jest.fn();
|
|
1580
|
-
|
|
1492
|
+
_render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1581
1493
|
label: "Autosuggest Countries",
|
|
1582
1494
|
onChange: onChange,
|
|
1583
1495
|
suggestions: callbackFunc
|
|
1584
|
-
})), getByText =
|
|
1496
|
+
})), getByText = _render42.getByText, getByRole = _render42.getByRole, queryByRole = _render42.queryByRole;
|
|
1585
1497
|
input = getByRole("combobox");
|
|
1586
1498
|
|
|
1587
1499
|
_react2.fireEvent.focus(input);
|
|
1588
1500
|
|
|
1589
1501
|
_userEvent["default"].type(input, "Example text");
|
|
1590
1502
|
|
|
1591
|
-
|
|
1503
|
+
_context5.next = 8;
|
|
1592
1504
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1593
1505
|
return getByText("Searching...");
|
|
1594
1506
|
});
|
|
@@ -1598,17 +1510,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1598
1510
|
|
|
1599
1511
|
case 9:
|
|
1600
1512
|
case "end":
|
|
1601
|
-
return
|
|
1513
|
+
return _context5.stop();
|
|
1602
1514
|
}
|
|
1603
1515
|
}
|
|
1604
|
-
},
|
|
1516
|
+
}, _callee5);
|
|
1605
1517
|
})));
|
|
1606
|
-
test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1607
|
-
var callbackFunc, onChange,
|
|
1518
|
+
test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
|
|
1519
|
+
var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
|
|
1608
1520
|
|
|
1609
|
-
return _regenerator["default"].wrap(function
|
|
1521
|
+
return _regenerator["default"].wrap(function _callee6$(_context6) {
|
|
1610
1522
|
while (1) {
|
|
1611
|
-
switch (
|
|
1523
|
+
switch (_context6.prev = _context6.next) {
|
|
1612
1524
|
case 0:
|
|
1613
1525
|
callbackFunc = jest.fn(function (newValue) {
|
|
1614
1526
|
var result = new Promise(function (resolve) {
|
|
@@ -1621,18 +1533,18 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1621
1533
|
return result;
|
|
1622
1534
|
});
|
|
1623
1535
|
onChange = jest.fn();
|
|
1624
|
-
|
|
1536
|
+
_render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1625
1537
|
label: "Autosuggest Countries",
|
|
1626
1538
|
onChange: onChange,
|
|
1627
1539
|
suggestions: callbackFunc
|
|
1628
|
-
})), getByText =
|
|
1540
|
+
})), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
|
|
1629
1541
|
input = getByRole("combobox");
|
|
1630
1542
|
|
|
1631
1543
|
_react2.fireEvent.focus(input);
|
|
1632
1544
|
|
|
1633
1545
|
_userEvent["default"].type(input, "wrong");
|
|
1634
1546
|
|
|
1635
|
-
|
|
1547
|
+
_context6.next = 8;
|
|
1636
1548
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1637
1549
|
return getByText("Searching...");
|
|
1638
1550
|
});
|
|
@@ -1664,17 +1576,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1664
1576
|
|
|
1665
1577
|
case 15:
|
|
1666
1578
|
case "end":
|
|
1667
|
-
return
|
|
1579
|
+
return _context6.stop();
|
|
1668
1580
|
}
|
|
1669
1581
|
}
|
|
1670
|
-
},
|
|
1582
|
+
}, _callee6);
|
|
1671
1583
|
})));
|
|
1672
|
-
test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1673
|
-
var errorCallbackFunc, onChange,
|
|
1584
|
+
test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
|
|
1585
|
+
var errorCallbackFunc, onChange, _render44, getByRole, getByText, input;
|
|
1674
1586
|
|
|
1675
|
-
return _regenerator["default"].wrap(function
|
|
1587
|
+
return _regenerator["default"].wrap(function _callee7$(_context7) {
|
|
1676
1588
|
while (1) {
|
|
1677
|
-
switch (
|
|
1589
|
+
switch (_context7.prev = _context7.next) {
|
|
1678
1590
|
case 0:
|
|
1679
1591
|
errorCallbackFunc = jest.fn(function () {
|
|
1680
1592
|
var result = new Promise(function (resolve, reject) {
|
|
@@ -1685,16 +1597,16 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1685
1597
|
return result;
|
|
1686
1598
|
});
|
|
1687
1599
|
onChange = jest.fn();
|
|
1688
|
-
|
|
1600
|
+
_render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1689
1601
|
label: "Autosuggest Countries",
|
|
1690
1602
|
onChange: onChange,
|
|
1691
1603
|
suggestions: errorCallbackFunc
|
|
1692
|
-
})), getByRole =
|
|
1604
|
+
})), getByRole = _render44.getByRole, getByText = _render44.getByText;
|
|
1693
1605
|
input = getByRole("combobox");
|
|
1694
1606
|
|
|
1695
1607
|
_react2.fireEvent.focus(input);
|
|
1696
1608
|
|
|
1697
|
-
|
|
1609
|
+
_context7.next = 7;
|
|
1698
1610
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1699
1611
|
return getByText("Searching...");
|
|
1700
1612
|
});
|
|
@@ -1704,9 +1616,9 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1704
1616
|
|
|
1705
1617
|
case 8:
|
|
1706
1618
|
case "end":
|
|
1707
|
-
return
|
|
1619
|
+
return _context7.stop();
|
|
1708
1620
|
}
|
|
1709
1621
|
}
|
|
1710
|
-
},
|
|
1622
|
+
}, _callee7);
|
|
1711
1623
|
})));
|
|
1712
1624
|
});
|