@dxc-technology/halstack-react 0.0.0-74ba970 → 0.0.0-752ca0a
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/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +1 -1
- package/HalstackContext.d.ts +1349 -5
- package/HalstackContext.js +117 -77
- package/README.md +47 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +14 -37
- package/accordion/Accordion.stories.tsx +104 -113
- package/accordion/Accordion.test.js +1 -1
- package/accordion/types.d.ts +2 -13
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +23 -44
- package/accordion-group/AccordionGroup.stories.tsx +77 -76
- package/accordion-group/AccordionGroup.test.js +7 -17
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +43 -0
- package/accordion-group/types.d.ts +2 -13
- package/alert/Alert.js +4 -8
- package/alert/Alert.stories.tsx +28 -0
- package/alert/Alert.test.js +1 -1
- package/bleed/Bleed.stories.tsx +1 -0
- package/box/Box.d.ts +1 -1
- package/box/Box.js +7 -26
- package/box/Box.stories.tsx +38 -51
- package/box/Box.test.js +1 -1
- package/box/types.d.ts +0 -11
- package/bulleted-list/BulletedList.js +4 -2
- package/bulleted-list/BulletedList.stories.tsx +7 -1
- package/bulleted-list/types.d.ts +31 -4
- package/button/Button.d.ts +1 -1
- package/button/Button.js +48 -60
- package/button/Button.stories.tsx +151 -9
- package/button/Button.test.js +12 -1
- package/button/types.d.ts +7 -3
- package/card/Card.d.ts +1 -1
- package/card/Card.js +27 -45
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +1 -1
- package/card/types.d.ts +1 -6
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +71 -51
- package/checkbox/Checkbox.stories.tsx +146 -58
- package/checkbox/Checkbox.test.js +84 -11
- package/checkbox/types.d.ts +10 -2
- package/chip/Chip.js +28 -49
- package/chip/Chip.stories.tsx +121 -26
- package/chip/Chip.test.js +3 -5
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +146 -0
- package/common/coreTokens.js +167 -0
- package/common/utils.d.ts +1 -0
- package/common/utils.js +4 -4
- package/common/variables.d.ts +1499 -0
- package/common/variables.js +1004 -1134
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +258 -0
- package/date-input/DateInput.js +138 -239
- package/date-input/DateInput.stories.tsx +209 -33
- package/date-input/DateInput.test.js +519 -149
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +146 -0
- package/date-input/Icons.d.ts +6 -0
- package/date-input/Icons.js +75 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +126 -0
- package/date-input/types.d.ts +55 -0
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +54 -85
- package/dialog/Dialog.stories.tsx +154 -170
- package/dialog/Dialog.test.js +302 -3
- package/dialog/types.d.ts +0 -12
- package/dropdown/Dropdown.js +40 -39
- package/dropdown/Dropdown.stories.tsx +210 -84
- package/dropdown/Dropdown.test.js +21 -26
- package/dropdown/DropdownMenu.js +12 -18
- package/dropdown/DropdownMenuItem.js +4 -17
- package/dropdown/types.d.ts +3 -3
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +174 -220
- package/file-input/FileInput.stories.tsx +122 -11
- package/file-input/FileInput.test.js +14 -14
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +39 -63
- package/file-input/types.d.ts +18 -1
- package/flex/Flex.d.ts +1 -1
- package/flex/Flex.js +33 -19
- package/flex/Flex.stories.tsx +35 -26
- package/flex/types.d.ts +83 -7
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +44 -64
- package/footer/Footer.stories.tsx +36 -21
- package/footer/Footer.test.js +16 -26
- package/footer/types.d.ts +10 -11
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +91 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/header/Header.d.ts +4 -3
- package/header/Header.js +20 -49
- package/header/Header.stories.tsx +115 -36
- package/header/Header.test.js +2 -2
- package/header/types.d.ts +1 -14
- package/heading/Heading.js +1 -1
- package/heading/Heading.test.js +1 -1
- package/image/Image.d.ts +4 -0
- package/image/Image.js +85 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/inset/Inset.stories.tsx +2 -1
- package/layout/ApplicationLayout.d.ts +5 -5
- package/layout/ApplicationLayout.js +15 -12
- package/layout/ApplicationLayout.stories.tsx +1 -1
- package/layout/Icons.d.ts +7 -4
- package/layout/Icons.js +52 -56
- package/layout/types.d.ts +2 -3
- package/link/Link.js +4 -4
- package/link/Link.stories.tsx +60 -0
- package/link/Link.test.js +2 -4
- package/link/types.d.ts +2 -2
- package/main.d.ts +4 -2
- package/main.js +17 -1
- package/{tabs-nav → nav-tabs}/NavTabs.d.ts +2 -2
- package/{tabs-nav → nav-tabs}/NavTabs.js +8 -11
- package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +110 -6
- package/{tabs-nav → nav-tabs}/NavTabs.test.js +1 -1
- package/{tabs-nav → nav-tabs}/Tab.js +48 -32
- package/{tabs-nav → nav-tabs}/types.d.ts +8 -9
- package/nav-tabs/types.js +5 -0
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +6 -4
- package/number-input/NumberInput.test.js +317 -98
- package/package.json +9 -14
- package/paginator/Icons.d.ts +5 -0
- package/paginator/Icons.js +16 -28
- package/paginator/Paginator.js +8 -16
- package/paginator/Paginator.stories.tsx +24 -0
- package/paginator/Paginator.test.js +58 -48
- package/paragraph/Paragraph.d.ts +3 -4
- package/paragraph/Paragraph.js +5 -5
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +39 -0
- package/password-input/PasswordInput.js +35 -82
- package/password-input/PasswordInput.stories.tsx +1 -0
- package/password-input/PasswordInput.test.js +34 -40
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +5 -5
- package/progress-bar/ProgressBar.stories.jsx +35 -2
- package/progress-bar/ProgressBar.test.js +1 -1
- package/progress-bar/types.d.ts +4 -3
- package/quick-nav/QuickNav.js +11 -12
- package/quick-nav/QuickNav.stories.tsx +111 -19
- package/radio-group/Radio.js +10 -10
- package/radio-group/RadioGroup.js +15 -13
- package/radio-group/RadioGroup.stories.tsx +131 -18
- package/radio-group/RadioGroup.test.js +117 -60
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +51 -0
- package/resultsetTable/ResultsetTable.js +49 -108
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +41 -64
- package/resultsetTable/types.d.ts +1 -1
- package/select/Listbox.d.ts +1 -1
- package/select/Listbox.js +5 -34
- package/select/Option.js +11 -24
- package/select/Select.js +59 -36
- package/select/Select.stories.tsx +497 -153
- package/select/Select.test.js +345 -292
- package/select/types.d.ts +2 -2
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +51 -0
- package/sidenav/Sidenav.d.ts +2 -2
- package/sidenav/Sidenav.js +66 -96
- package/sidenav/Sidenav.stories.tsx +165 -63
- package/sidenav/types.d.ts +21 -18
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +17 -14
- package/slider/Slider.stories.tsx +57 -0
- package/slider/Slider.test.js +1 -1
- package/slider/types.d.ts +6 -2
- package/spinner/Spinner.js +17 -23
- package/spinner/Spinner.stories.jsx +53 -27
- package/spinner/Spinner.test.js +1 -1
- package/switch/Switch.d.ts +3 -3
- package/switch/Switch.js +7 -6
- package/switch/Switch.stories.tsx +33 -0
- package/switch/Switch.test.js +1 -1
- package/switch/types.d.ts +8 -3
- package/table/Table.js +3 -3
- package/table/Table.stories.jsx +80 -1
- package/table/Table.test.js +2 -2
- package/tabs/Tab.js +12 -15
- package/tabs/Tabs.js +11 -17
- package/tabs/Tabs.stories.tsx +45 -5
- package/tabs/Tabs.test.js +4 -5
- package/tabs/types.d.ts +2 -2
- package/tag/Tag.js +7 -9
- package/tag/Tag.stories.tsx +14 -1
- package/tag/Tag.test.js +1 -1
- package/text-input/Suggestion.js +34 -7
- package/text-input/TextInput.js +224 -228
- package/text-input/TextInput.stories.tsx +132 -5
- package/text-input/TextInput.test.js +757 -658
- package/text-input/types.d.ts +9 -0
- package/textarea/Textarea.js +27 -26
- package/textarea/Textarea.stories.jsx +68 -1
- package/textarea/Textarea.test.js +61 -19
- package/textarea/types.d.ts +4 -0
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +85 -59
- package/toggle-group/ToggleGroup.stories.tsx +48 -3
- package/toggle-group/ToggleGroup.test.js +38 -24
- package/toggle-group/types.d.ts +22 -13
- package/typography/Typography.d.ts +2 -2
- package/typography/Typography.js +14 -113
- package/typography/Typography.stories.tsx +1 -1
- package/useTheme.d.ts +1251 -1
- package/useTheme.js +1 -1
- package/useTranslatedLabels.d.ts +84 -1
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +108 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +138 -0
- package/wizard/Wizard.js +2 -2
- package/wizard/Wizard.stories.tsx +20 -0
- package/wizard/Wizard.test.js +1 -1
- package/wizard/types.d.ts +5 -6
- package/card/ice-cream.jpg +0 -0
- package/common/RequiredComponent.js +0 -32
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- /package/{tabs-nav → grid}/types.js +0 -0
- /package/{number-input/numberInputContextTypes.js → image/types.js} +0 -0
- /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
|
@@ -16,7 +16,7 @@ var _react2 = require("@testing-library/react");
|
|
|
16
16
|
|
|
17
17
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
18
18
|
|
|
19
|
-
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
|
19
|
+
var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
|
|
20
20
|
|
|
21
21
|
// Mocking DOMRect for Radix Primitive Popover
|
|
22
22
|
global.globalThis = global;
|
|
@@ -57,6 +57,7 @@ global.DOMRect = {
|
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
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"];
|
|
60
|
+
var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
|
|
60
61
|
describe("TextInput component tests", function () {
|
|
61
62
|
test("Renders with correct error aria attributes", function () {
|
|
62
63
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
@@ -401,27 +402,16 @@ describe("TextInput component tests", function () {
|
|
|
401
402
|
value: "Blur test"
|
|
402
403
|
});
|
|
403
404
|
});
|
|
404
|
-
test("Clear action tooltip is correct",
|
|
405
|
-
var _render10,
|
|
405
|
+
test("Clear action tooltip is correct", function () {
|
|
406
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
407
|
+
label: "Input label",
|
|
408
|
+
value: "Text",
|
|
409
|
+
clearable: true
|
|
410
|
+
})),
|
|
411
|
+
getByTitle = _render10.getByTitle;
|
|
406
412
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
switch (_context.prev = _context.next) {
|
|
410
|
-
case 0:
|
|
411
|
-
_render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
412
|
-
label: "Input label",
|
|
413
|
-
value: "Text",
|
|
414
|
-
clearable: true
|
|
415
|
-
})), getByTitle = _render10.getByTitle;
|
|
416
|
-
expect(getByTitle("Clear field")).toBeTruthy();
|
|
417
|
-
|
|
418
|
-
case 2:
|
|
419
|
-
case "end":
|
|
420
|
-
return _context.stop();
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
}, _callee);
|
|
424
|
-
})));
|
|
413
|
+
expect(getByTitle("Clear field")).toBeTruthy();
|
|
414
|
+
});
|
|
425
415
|
test("Clear action onClick cleans the input", function () {
|
|
426
416
|
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
427
417
|
label: "Input label",
|
|
@@ -439,7 +429,7 @@ describe("TextInput component tests", function () {
|
|
|
439
429
|
|
|
440
430
|
expect(input.value).toBe("");
|
|
441
431
|
});
|
|
442
|
-
test("Disabled input renders with correct aria and can not be modified", function () {
|
|
432
|
+
test("Disabled text input renders with correct aria and can not be modified", function () {
|
|
443
433
|
var onChange = jest.fn();
|
|
444
434
|
|
|
445
435
|
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
@@ -450,13 +440,12 @@ describe("TextInput component tests", function () {
|
|
|
450
440
|
getByRole = _render12.getByRole;
|
|
451
441
|
|
|
452
442
|
var input = getByRole("textbox");
|
|
453
|
-
expect(input.getAttribute("aria-disabled")).toBe("true");
|
|
454
443
|
|
|
455
444
|
_userEvent["default"].type(input, "Test");
|
|
456
445
|
|
|
457
446
|
expect(onChange).not.toHaveBeenCalled();
|
|
458
447
|
});
|
|
459
|
-
test("Disabled input (action must be shown but not clickable)", function () {
|
|
448
|
+
test("Disabled text input (action must be shown but not clickable)", function () {
|
|
460
449
|
var onClick = jest.fn();
|
|
461
450
|
var action = {
|
|
462
451
|
onClick: onClick,
|
|
@@ -489,7 +478,7 @@ describe("TextInput component tests", function () {
|
|
|
489
478
|
|
|
490
479
|
expect(onClick).not.toHaveBeenCalled();
|
|
491
480
|
});
|
|
492
|
-
test("Disabled input (clear default action should not be displayed, even with text written on the input)", function () {
|
|
481
|
+
test("Disabled text input (clear default action should not be displayed, even with text written on the input)", function () {
|
|
493
482
|
var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
494
483
|
label: "Disabled input label",
|
|
495
484
|
value: "Sample text",
|
|
@@ -503,7 +492,7 @@ describe("TextInput component tests", function () {
|
|
|
503
492
|
expect(input.disabled).toBeTruthy();
|
|
504
493
|
expect(queryByRole("button")).toBeFalsy();
|
|
505
494
|
});
|
|
506
|
-
test("Disabled input (suffix and
|
|
495
|
+
test("Disabled text input (suffix and prefix must be displayed)", function () {
|
|
507
496
|
var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
508
497
|
label: "Disabled input label",
|
|
509
498
|
value: "Sample text",
|
|
@@ -519,6 +508,95 @@ describe("TextInput component tests", function () {
|
|
|
519
508
|
expect(getByText("+34")).toBeTruthy();
|
|
520
509
|
expect(getByText("USD")).toBeTruthy();
|
|
521
510
|
});
|
|
511
|
+
test("Read-only text input doesn't render the clear action", function () {
|
|
512
|
+
var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
513
|
+
label: "Disabled input label",
|
|
514
|
+
defaultValue: "Sample text",
|
|
515
|
+
readOnly: true,
|
|
516
|
+
clearable: true
|
|
517
|
+
})),
|
|
518
|
+
getByRole = _render16.getByRole,
|
|
519
|
+
queryByRole = _render16.queryByRole;
|
|
520
|
+
|
|
521
|
+
var input = getByRole("textbox");
|
|
522
|
+
expect(input.readOnly).toBeTruthy();
|
|
523
|
+
expect(queryByRole("button")).toBeFalsy();
|
|
524
|
+
});
|
|
525
|
+
test("Read-only text input does not trigger onChange function", function () {
|
|
526
|
+
var onChange = jest.fn();
|
|
527
|
+
|
|
528
|
+
var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
529
|
+
label: "Example label",
|
|
530
|
+
onChange: onChange,
|
|
531
|
+
readOnly: true
|
|
532
|
+
})),
|
|
533
|
+
getByLabelText = _render17.getByLabelText;
|
|
534
|
+
|
|
535
|
+
var textInput = getByLabelText("Example label");
|
|
536
|
+
|
|
537
|
+
_userEvent["default"].type(textInput, "Test");
|
|
538
|
+
|
|
539
|
+
expect(onChange).not.toHaveBeenCalled();
|
|
540
|
+
});
|
|
541
|
+
test("Read-only text input sends its value on submit", function () {
|
|
542
|
+
var handlerOnSubmit = jest.fn(function (e) {
|
|
543
|
+
e.preventDefault();
|
|
544
|
+
var formData = new FormData(e.target);
|
|
545
|
+
var formProps = Object.fromEntries(formData);
|
|
546
|
+
expect(formProps).toStrictEqual({
|
|
547
|
+
data: "Text"
|
|
548
|
+
});
|
|
549
|
+
});
|
|
550
|
+
|
|
551
|
+
var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
|
|
552
|
+
onSubmit: handlerOnSubmit
|
|
553
|
+
}, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
554
|
+
label: "Example label",
|
|
555
|
+
name: "data",
|
|
556
|
+
defaultValue: "Text",
|
|
557
|
+
readOnly: true
|
|
558
|
+
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
559
|
+
type: "submit"
|
|
560
|
+
}, "Submit"))),
|
|
561
|
+
getByText = _render18.getByText;
|
|
562
|
+
|
|
563
|
+
var submit = getByText("Submit");
|
|
564
|
+
|
|
565
|
+
_userEvent["default"].click(submit);
|
|
566
|
+
|
|
567
|
+
expect(handlerOnSubmit).toHaveBeenCalled();
|
|
568
|
+
});
|
|
569
|
+
test("Read-only text input doesn't trigger custom action's onClick event", function () {
|
|
570
|
+
var onClick = jest.fn();
|
|
571
|
+
var action = {
|
|
572
|
+
onClick: onClick,
|
|
573
|
+
icon: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
574
|
+
"data-testid": "image",
|
|
575
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
576
|
+
height: "24px",
|
|
577
|
+
viewBox: "0 0 24 24",
|
|
578
|
+
width: "24px",
|
|
579
|
+
fill: "currentColor"
|
|
580
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
581
|
+
d: "M0 0h24v24H0V0z",
|
|
582
|
+
fill: "none"
|
|
583
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
584
|
+
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"
|
|
585
|
+
})),
|
|
586
|
+
title: "Search"
|
|
587
|
+
};
|
|
588
|
+
|
|
589
|
+
var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
590
|
+
label: "Input label",
|
|
591
|
+
action: action,
|
|
592
|
+
readOnly: true
|
|
593
|
+
})),
|
|
594
|
+
getByRole = _render19.getByRole;
|
|
595
|
+
|
|
596
|
+
_userEvent["default"].click(getByRole("button"));
|
|
597
|
+
|
|
598
|
+
expect(onClick).not.toHaveBeenCalled();
|
|
599
|
+
});
|
|
522
600
|
test("Action prop: image displayed with title and onClick event", function () {
|
|
523
601
|
var onClick = jest.fn();
|
|
524
602
|
var action = {
|
|
@@ -539,13 +617,13 @@ describe("TextInput component tests", function () {
|
|
|
539
617
|
title: "Search"
|
|
540
618
|
};
|
|
541
619
|
|
|
542
|
-
var
|
|
620
|
+
var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
543
621
|
label: "Input label",
|
|
544
622
|
action: action
|
|
545
623
|
})),
|
|
546
|
-
getByRole =
|
|
547
|
-
getByTestId =
|
|
548
|
-
getByTitle =
|
|
624
|
+
getByRole = _render20.getByRole,
|
|
625
|
+
getByTestId = _render20.getByTestId,
|
|
626
|
+
getByTitle = _render20.getByTitle;
|
|
549
627
|
|
|
550
628
|
expect(getByTestId("image")).toBeTruthy();
|
|
551
629
|
expect(getByTitle("Search")).toBeTruthy();
|
|
@@ -554,18 +632,75 @@ describe("TextInput component tests", function () {
|
|
|
554
632
|
|
|
555
633
|
expect(onClick).toHaveBeenCalled();
|
|
556
634
|
});
|
|
635
|
+
test("Text input submit correctly value in form", function () {
|
|
636
|
+
var onClick = jest.fn();
|
|
637
|
+
var action = {
|
|
638
|
+
onClick: onClick,
|
|
639
|
+
icon: /*#__PURE__*/_react["default"].createElement("svg", {
|
|
640
|
+
"data-testid": "image",
|
|
641
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
642
|
+
height: "24px",
|
|
643
|
+
viewBox: "0 0 24 24",
|
|
644
|
+
width: "24px",
|
|
645
|
+
fill: "currentColor"
|
|
646
|
+
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
647
|
+
d: "M0 0h24v24H0V0z",
|
|
648
|
+
fill: "none"
|
|
649
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
650
|
+
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"
|
|
651
|
+
})),
|
|
652
|
+
title: "Search"
|
|
653
|
+
};
|
|
654
|
+
var handlerOnSubmit = jest.fn(function (e) {
|
|
655
|
+
e.preventDefault();
|
|
656
|
+
var formData = new FormData(e.target);
|
|
657
|
+
var formProps = Object.fromEntries(formData);
|
|
658
|
+
expect(formProps).toStrictEqual({
|
|
659
|
+
data: "test"
|
|
660
|
+
});
|
|
661
|
+
});
|
|
662
|
+
|
|
663
|
+
var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
|
|
664
|
+
onSubmit: handlerOnSubmit
|
|
665
|
+
}, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
666
|
+
label: "Input label",
|
|
667
|
+
name: "data",
|
|
668
|
+
action: action
|
|
669
|
+
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
670
|
+
type: "submit"
|
|
671
|
+
}, "Submit"))),
|
|
672
|
+
getByText = _render21.getByText,
|
|
673
|
+
getAllByRole = _render21.getAllByRole,
|
|
674
|
+
getByRole = _render21.getByRole;
|
|
675
|
+
|
|
676
|
+
var search = getAllByRole("button")[0];
|
|
677
|
+
var submit = getByText("Submit");
|
|
678
|
+
var input = getByRole("textbox");
|
|
679
|
+
|
|
680
|
+
_userEvent["default"].type(input, "test");
|
|
681
|
+
|
|
682
|
+
expect(input.value).toBe("test");
|
|
683
|
+
|
|
684
|
+
_userEvent["default"].click(search);
|
|
685
|
+
|
|
686
|
+
expect(handlerOnSubmit).not.toHaveBeenCalled();
|
|
687
|
+
|
|
688
|
+
_userEvent["default"].click(submit);
|
|
689
|
+
|
|
690
|
+
expect(handlerOnSubmit).toHaveBeenCalled();
|
|
691
|
+
});
|
|
557
692
|
test("Renders with correct prefix and suffix", function () {
|
|
558
|
-
var
|
|
693
|
+
var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
559
694
|
label: "Input label",
|
|
560
695
|
prefix: "+34",
|
|
561
696
|
suffix: "USD"
|
|
562
697
|
})),
|
|
563
|
-
getByText =
|
|
698
|
+
getByText = _render22.getByText;
|
|
564
699
|
|
|
565
700
|
expect(getByText("+34")).toBeTruthy();
|
|
566
701
|
expect(getByText("USD")).toBeTruthy();
|
|
567
702
|
});
|
|
568
|
-
test("Text Input has correct aria
|
|
703
|
+
test("Text Input has correct aria accessibility attributes", function () {
|
|
569
704
|
var onClick = jest.fn();
|
|
570
705
|
var action = {
|
|
571
706
|
onClick: onClick,
|
|
@@ -585,18 +720,19 @@ describe("TextInput component tests", function () {
|
|
|
585
720
|
title: "Search"
|
|
586
721
|
};
|
|
587
722
|
|
|
588
|
-
var
|
|
723
|
+
var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
589
724
|
label: "Example label",
|
|
590
725
|
clearable: true,
|
|
591
726
|
action: action
|
|
592
727
|
})),
|
|
593
|
-
getByRole =
|
|
594
|
-
getAllByRole =
|
|
728
|
+
getByRole = _render23.getByRole,
|
|
729
|
+
getAllByRole = _render23.getAllByRole;
|
|
595
730
|
|
|
596
731
|
var input = getByRole("textbox");
|
|
597
732
|
expect(input.getAttribute("aria-autocomplete")).toBeNull();
|
|
598
733
|
expect(input.getAttribute("aria-controls")).toBeNull();
|
|
599
734
|
expect(input.getAttribute("aria-expanded")).toBeNull();
|
|
735
|
+
expect(input.getAttribute("aria-haspopup")).toBeNull();
|
|
600
736
|
expect(input.getAttribute("aria-activedescendant")).toBeNull();
|
|
601
737
|
expect(input.getAttribute("aria-invalid")).toBe("false");
|
|
602
738
|
expect(input.getAttribute("aria-errormessage")).toBeNull();
|
|
@@ -609,18 +745,19 @@ describe("TextInput component tests", function () {
|
|
|
609
745
|
var search = getAllByRole("button")[1];
|
|
610
746
|
expect(search.getAttribute("aria-label")).toBe("Search");
|
|
611
747
|
});
|
|
612
|
-
test("Autosuggest has correct
|
|
613
|
-
var
|
|
748
|
+
test("Autosuggest has correct accessibility attributes", function () {
|
|
749
|
+
var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
614
750
|
label: "Autocomplete Countries",
|
|
615
751
|
optional: true,
|
|
616
752
|
suggestions: countries
|
|
617
753
|
})),
|
|
618
|
-
getByRole =
|
|
619
|
-
getAllByRole =
|
|
754
|
+
getByRole = _render24.getByRole,
|
|
755
|
+
getAllByRole = _render24.getAllByRole;
|
|
620
756
|
|
|
621
757
|
var input = getByRole("combobox");
|
|
622
758
|
expect(input.getAttribute("aria-autocomplete")).toBe("list");
|
|
623
759
|
expect(input.getAttribute("aria-expanded")).toBe("false");
|
|
760
|
+
expect(input.getAttribute("aria-haspopup")).toBe("listbox");
|
|
624
761
|
expect(input.getAttribute("aria-required")).toBe("false");
|
|
625
762
|
|
|
626
763
|
_react2.fireEvent.focus(input);
|
|
@@ -633,115 +770,90 @@ describe("TextInput component tests", function () {
|
|
|
633
770
|
});
|
|
634
771
|
});
|
|
635
772
|
describe("TextInput component synchronous autosuggest tests", function () {
|
|
636
|
-
test("Autosuggest is displayed when the input gains focus",
|
|
637
|
-
var onChange
|
|
773
|
+
test("Autosuggest is displayed when the input gains focus", function () {
|
|
774
|
+
var onChange = jest.fn();
|
|
638
775
|
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
suggestions: countries,
|
|
647
|
-
onChange: onChange
|
|
648
|
-
})), getByRole = _render20.getByRole, getByText = _render20.getByText;
|
|
649
|
-
input = getByRole("combobox");
|
|
776
|
+
var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
777
|
+
label: "Autocomplete Countries",
|
|
778
|
+
suggestions: countries,
|
|
779
|
+
onChange: onChange
|
|
780
|
+
})),
|
|
781
|
+
getByRole = _render25.getByRole,
|
|
782
|
+
getByText = _render25.getByText;
|
|
650
783
|
|
|
651
|
-
|
|
784
|
+
var input = getByRole("combobox");
|
|
652
785
|
|
|
653
|
-
|
|
654
|
-
expect(list).toBeTruthy();
|
|
655
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
656
|
-
expect(getByText("Albania")).toBeTruthy();
|
|
657
|
-
expect(getByText("Algeria")).toBeTruthy();
|
|
658
|
-
expect(getByText("Andorra")).toBeTruthy();
|
|
786
|
+
_react2.fireEvent.focus(input);
|
|
659
787
|
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
})
|
|
667
|
-
test("Autosuggest is displayed when the user clicks the input",
|
|
668
|
-
var onChange
|
|
788
|
+
var list = getByRole("listbox");
|
|
789
|
+
expect(list).toBeTruthy();
|
|
790
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
791
|
+
expect(getByText("Albania")).toBeTruthy();
|
|
792
|
+
expect(getByText("Algeria")).toBeTruthy();
|
|
793
|
+
expect(getByText("Andorra")).toBeTruthy();
|
|
794
|
+
});
|
|
795
|
+
test("Autosuggest is displayed when the user clicks the input", function () {
|
|
796
|
+
var onChange = jest.fn();
|
|
669
797
|
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
suggestions: countries,
|
|
678
|
-
onChange: onChange
|
|
679
|
-
})), getByRole = _render21.getByRole, getByText = _render21.getByText;
|
|
680
|
-
input = getByRole("combobox");
|
|
798
|
+
var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
799
|
+
label: "Autocomplete Countries",
|
|
800
|
+
suggestions: countries,
|
|
801
|
+
onChange: onChange
|
|
802
|
+
})),
|
|
803
|
+
getByRole = _render26.getByRole,
|
|
804
|
+
getByText = _render26.getByText;
|
|
681
805
|
|
|
682
|
-
|
|
806
|
+
var input = getByRole("combobox");
|
|
683
807
|
|
|
684
|
-
|
|
685
|
-
expect(list).toBeTruthy();
|
|
686
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
687
|
-
expect(getByText("Albania")).toBeTruthy();
|
|
688
|
-
expect(getByText("Algeria")).toBeTruthy();
|
|
689
|
-
expect(getByText("Andorra")).toBeTruthy();
|
|
808
|
+
_react2.fireEvent.focus(input);
|
|
690
809
|
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
})
|
|
698
|
-
test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)",
|
|
699
|
-
var onChange
|
|
810
|
+
var list = getByRole("listbox");
|
|
811
|
+
expect(list).toBeTruthy();
|
|
812
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
813
|
+
expect(getByText("Albania")).toBeTruthy();
|
|
814
|
+
expect(getByText("Algeria")).toBeTruthy();
|
|
815
|
+
expect(getByText("Andorra")).toBeTruthy();
|
|
816
|
+
});
|
|
817
|
+
test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", function () {
|
|
818
|
+
var onChange = jest.fn();
|
|
700
819
|
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
})), getByRole = _render22.getByRole, queryByRole = _render22.queryByRole, getByText = _render22.getByText, getAllByText = _render22.getAllByText;
|
|
711
|
-
input = getByRole("combobox");
|
|
820
|
+
var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
821
|
+
label: "Autocomplete Countries",
|
|
822
|
+
suggestions: countries,
|
|
823
|
+
onChange: onChange
|
|
824
|
+
})),
|
|
825
|
+
getByRole = _render27.getByRole,
|
|
826
|
+
queryByRole = _render27.queryByRole,
|
|
827
|
+
getByText = _render27.getByText,
|
|
828
|
+
getAllByText = _render27.getAllByText;
|
|
712
829
|
|
|
713
|
-
|
|
830
|
+
var input = getByRole("combobox");
|
|
714
831
|
|
|
715
|
-
|
|
716
|
-
expect(list).toBeTruthy();
|
|
832
|
+
_react2.fireEvent.focus(input);
|
|
717
833
|
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
code: "Esc",
|
|
721
|
-
keyCode: 27,
|
|
722
|
-
charCode: 27
|
|
723
|
-
});
|
|
834
|
+
var list = getByRole("listbox");
|
|
835
|
+
expect(list).toBeTruthy();
|
|
724
836
|
|
|
725
|
-
|
|
837
|
+
_react2.fireEvent.keyDown(input, {
|
|
838
|
+
key: "Esc",
|
|
839
|
+
code: "Esc",
|
|
840
|
+
keyCode: 27,
|
|
841
|
+
charCode: 27
|
|
842
|
+
});
|
|
726
843
|
|
|
727
|
-
|
|
844
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
728
845
|
|
|
729
|
-
|
|
730
|
-
expect(getAllByText("B").length).toBe(4);
|
|
731
|
-
expect(getByText("ahamas")).toBeTruthy();
|
|
732
|
-
expect(getByText("ahrain")).toBeTruthy();
|
|
733
|
-
expect(getByText("angladesh")).toBeTruthy();
|
|
734
|
-
expect(getByText("arbados")).toBeTruthy();
|
|
846
|
+
_userEvent["default"].type(input, "B");
|
|
735
847
|
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
})
|
|
848
|
+
expect(list).toBeTruthy();
|
|
849
|
+
expect(getAllByText("B").length).toBe(4);
|
|
850
|
+
expect(getByText("ahamas")).toBeTruthy();
|
|
851
|
+
expect(getByText("ahrain")).toBeTruthy();
|
|
852
|
+
expect(getByText("angladesh")).toBeTruthy();
|
|
853
|
+
expect(getByText("arbados")).toBeTruthy();
|
|
854
|
+
});
|
|
743
855
|
test("Autosuggest displays filtered when the input has a default value", function () {
|
|
744
|
-
var
|
|
856
|
+
var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
745
857
|
label: "Uncontrolled suggestions filtered by default",
|
|
746
858
|
helperText: "Example of helper text",
|
|
747
859
|
placeholder: "Placeholder",
|
|
@@ -750,9 +862,9 @@ describe("TextInput component synchronous autosuggest tests", function () {
|
|
|
750
862
|
suggestions: ["Suggestion 11", "Suggestion 12", "Suggestion 23", "Suggestion 24"],
|
|
751
863
|
clearable: true
|
|
752
864
|
})),
|
|
753
|
-
getByRole =
|
|
754
|
-
getByText =
|
|
755
|
-
getAllByText =
|
|
865
|
+
getByRole = _render28.getByRole,
|
|
866
|
+
getByText = _render28.getByText,
|
|
867
|
+
getAllByText = _render28.getAllByText;
|
|
756
868
|
|
|
757
869
|
var input = getByRole("combobox");
|
|
758
870
|
expect(input.value).toBe("Suggestion 2");
|
|
@@ -763,517 +875,510 @@ describe("TextInput component synchronous autosuggest tests", function () {
|
|
|
763
875
|
expect(getByText("3")).toBeTruthy();
|
|
764
876
|
expect(getByText("4")).toBeTruthy();
|
|
765
877
|
});
|
|
766
|
-
test("Autosuggest is not displayed when prop suggestions is an empty array",
|
|
767
|
-
var onChange
|
|
878
|
+
test("Autosuggest is not displayed when prop suggestions is an empty array", function () {
|
|
879
|
+
var onChange = jest.fn();
|
|
768
880
|
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
label: "Autocomplete Countries",
|
|
776
|
-
suggestions: [],
|
|
777
|
-
onChange: onChange
|
|
778
|
-
})), queryByRole = _render24.queryByRole;
|
|
779
|
-
input = queryByRole("textbox");
|
|
881
|
+
var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
882
|
+
label: "Autocomplete Countries",
|
|
883
|
+
suggestions: [],
|
|
884
|
+
onChange: onChange
|
|
885
|
+
})),
|
|
886
|
+
queryByRole = _render29.queryByRole;
|
|
780
887
|
|
|
781
|
-
|
|
888
|
+
var input = queryByRole("textbox");
|
|
782
889
|
|
|
783
|
-
|
|
890
|
+
_react2.fireEvent.focus(input);
|
|
784
891
|
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
}
|
|
790
|
-
}, _callee5);
|
|
791
|
-
})));
|
|
792
|
-
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() {
|
|
793
|
-
var onChange, _render25, getByRole, queryByRole, getByText, input, list;
|
|
892
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
893
|
+
});
|
|
894
|
+
test("Autosuggest closes the listbox when there are no matches for the user's input", function () {
|
|
895
|
+
var onChange = jest.fn();
|
|
794
896
|
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
onChange: onChange
|
|
804
|
-
})), getByRole = _render25.getByRole, queryByRole = _render25.queryByRole, getByText = _render25.getByText;
|
|
805
|
-
input = getByRole("combobox");
|
|
897
|
+
var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
898
|
+
label: "Autocomplete Countries",
|
|
899
|
+
suggestions: countries,
|
|
900
|
+
onChange: onChange
|
|
901
|
+
})),
|
|
902
|
+
getByRole = _render30.getByRole,
|
|
903
|
+
queryByRole = _render30.queryByRole,
|
|
904
|
+
getByText = _render30.getByText;
|
|
806
905
|
|
|
807
|
-
|
|
906
|
+
var input = getByRole("combobox");
|
|
808
907
|
|
|
809
|
-
|
|
810
|
-
expect(list).toBeTruthy();
|
|
811
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
908
|
+
_react2.fireEvent.focus(input);
|
|
812
909
|
|
|
813
|
-
|
|
910
|
+
var list = getByRole("listbox");
|
|
911
|
+
expect(list).toBeTruthy();
|
|
912
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
814
913
|
|
|
815
|
-
|
|
914
|
+
_userEvent["default"].type(input, "x");
|
|
816
915
|
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
}
|
|
822
|
-
}, _callee6);
|
|
823
|
-
})));
|
|
824
|
-
test("Autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
|
|
825
|
-
var onChange, _render26, getByRole, queryByRole, getByText, input, list;
|
|
916
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
917
|
+
});
|
|
918
|
+
test("Autosuggest with no matches founded doesn't let the listbox to be opened", function () {
|
|
919
|
+
var onChange = jest.fn();
|
|
826
920
|
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
onChange: onChange
|
|
836
|
-
})), getByRole = _render26.getByRole, queryByRole = _render26.queryByRole, getByText = _render26.getByText;
|
|
837
|
-
input = getByRole("combobox");
|
|
921
|
+
var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
922
|
+
label: "Autocomplete Countries",
|
|
923
|
+
suggestions: countries,
|
|
924
|
+
onChange: onChange
|
|
925
|
+
})),
|
|
926
|
+
getByRole = _render31.getByRole,
|
|
927
|
+
queryByRole = _render31.queryByRole,
|
|
928
|
+
getByText = _render31.getByText;
|
|
838
929
|
|
|
839
|
-
|
|
930
|
+
var input = getByRole("combobox");
|
|
840
931
|
|
|
841
|
-
|
|
842
|
-
expect(list).toBeTruthy();
|
|
843
|
-
expect(getByText("Afghanistan")).toBeTruthy();
|
|
932
|
+
_react2.fireEvent.focus(input);
|
|
844
933
|
|
|
845
|
-
|
|
934
|
+
var list = getByRole("listbox");
|
|
935
|
+
expect(list).toBeTruthy();
|
|
936
|
+
expect(getByText("Afghanistan")).toBeTruthy();
|
|
846
937
|
|
|
847
|
-
|
|
938
|
+
_userEvent["default"].type(input, "x");
|
|
848
939
|
|
|
849
|
-
|
|
940
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
850
941
|
|
|
851
|
-
|
|
942
|
+
_react2.fireEvent.focus(input);
|
|
852
943
|
|
|
853
|
-
|
|
854
|
-
key: "ArrowUp",
|
|
855
|
-
code: "ArrowUp",
|
|
856
|
-
keyCode: 38,
|
|
857
|
-
charCode: 38
|
|
858
|
-
});
|
|
944
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
859
945
|
|
|
860
|
-
|
|
946
|
+
_react2.fireEvent.keyDown(input, {
|
|
947
|
+
key: "ArrowUp",
|
|
948
|
+
code: "ArrowUp",
|
|
949
|
+
keyCode: 38,
|
|
950
|
+
charCode: 38
|
|
951
|
+
});
|
|
861
952
|
|
|
862
|
-
|
|
863
|
-
key: "ArrowDown",
|
|
864
|
-
code: "ArrowDown",
|
|
865
|
-
keyCode: 40,
|
|
866
|
-
charCode: 40
|
|
867
|
-
});
|
|
953
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
868
954
|
|
|
869
|
-
|
|
955
|
+
_react2.fireEvent.keyDown(input, {
|
|
956
|
+
key: "ArrowDown",
|
|
957
|
+
code: "ArrowDown",
|
|
958
|
+
keyCode: 40,
|
|
959
|
+
charCode: 40
|
|
960
|
+
});
|
|
870
961
|
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
}
|
|
876
|
-
}, _callee7);
|
|
877
|
-
})));
|
|
878
|
-
test("Autosuggest uncontrolled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
|
|
879
|
-
var onChange, _render27, getByRole, getByText, queryByRole, input;
|
|
962
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
963
|
+
});
|
|
964
|
+
test("Autosuggest uncontrolled - Suggestion selected by click", function () {
|
|
965
|
+
var onChange = jest.fn();
|
|
880
966
|
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
onChange: onChange
|
|
890
|
-
})), getByRole = _render27.getByRole, getByText = _render27.getByText, queryByRole = _render27.queryByRole;
|
|
891
|
-
input = getByRole("combobox");
|
|
967
|
+
var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
968
|
+
label: "Autocomplete Countries",
|
|
969
|
+
suggestions: countries,
|
|
970
|
+
onChange: onChange
|
|
971
|
+
})),
|
|
972
|
+
getByRole = _render32.getByRole,
|
|
973
|
+
getByText = _render32.getByText,
|
|
974
|
+
queryByRole = _render32.queryByRole;
|
|
892
975
|
|
|
893
|
-
|
|
976
|
+
var input = getByRole("combobox");
|
|
894
977
|
|
|
895
|
-
|
|
978
|
+
_react2.fireEvent.focus(input);
|
|
896
979
|
|
|
897
|
-
|
|
898
|
-
expect(getByText("Alba")).toBeTruthy();
|
|
899
|
-
expect(getByText("nia")).toBeTruthy();
|
|
980
|
+
_userEvent["default"].type(input, "Alba");
|
|
900
981
|
|
|
901
|
-
|
|
982
|
+
expect(onChange).toHaveBeenCalled();
|
|
983
|
+
expect(getByText("Alba")).toBeTruthy();
|
|
984
|
+
expect(getByText("nia")).toBeTruthy();
|
|
902
985
|
|
|
903
|
-
|
|
904
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
986
|
+
_userEvent["default"].click(getByRole("option"));
|
|
905
987
|
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
}, _callee8);
|
|
912
|
-
})));
|
|
913
|
-
test("Autosuggest controlled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
|
|
914
|
-
var onChange, _render28, getByRole, getByText, queryByRole, input;
|
|
988
|
+
expect(input.value).toBe("Albania");
|
|
989
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
990
|
+
});
|
|
991
|
+
test("Autosuggest controlled - Suggestion selected by click", function () {
|
|
992
|
+
var onChange = jest.fn();
|
|
915
993
|
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
onChange: onChange
|
|
926
|
-
})), getByRole = _render28.getByRole, getByText = _render28.getByText, queryByRole = _render28.queryByRole;
|
|
927
|
-
input = getByRole("combobox");
|
|
994
|
+
var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
995
|
+
label: "Autocomplete Countries",
|
|
996
|
+
value: "Andor",
|
|
997
|
+
suggestions: countries,
|
|
998
|
+
onChange: onChange
|
|
999
|
+
})),
|
|
1000
|
+
getByRole = _render33.getByRole,
|
|
1001
|
+
getByText = _render33.getByText,
|
|
1002
|
+
queryByRole = _render33.queryByRole;
|
|
928
1003
|
|
|
929
|
-
|
|
1004
|
+
var input = getByRole("combobox");
|
|
930
1005
|
|
|
931
|
-
|
|
932
|
-
expect(getByText("Andor")).toBeTruthy();
|
|
933
|
-
expect(getByText("ra")).toBeTruthy();
|
|
1006
|
+
_userEvent["default"].click(getByText("Autocomplete Countries"));
|
|
934
1007
|
|
|
935
|
-
|
|
1008
|
+
expect(input.value).toBe("Andor");
|
|
1009
|
+
expect(getByText("Andor")).toBeTruthy();
|
|
1010
|
+
expect(getByText("ra")).toBeTruthy();
|
|
936
1011
|
|
|
937
|
-
|
|
938
|
-
value: "Andorra"
|
|
939
|
-
});
|
|
940
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
1012
|
+
_userEvent["default"].click(getByRole("option"));
|
|
941
1013
|
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
var onChange, onBlur, _render29, getByRole, getByText, input;
|
|
1014
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1015
|
+
value: "Andorra"
|
|
1016
|
+
});
|
|
1017
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1018
|
+
});
|
|
1019
|
+
test("Autosuggest - Pattern constraint", function () {
|
|
1020
|
+
var onChange = jest.fn();
|
|
1021
|
+
var onBlur = jest.fn();
|
|
951
1022
|
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
onChange: onChange,
|
|
962
|
-
onBlur: onBlur,
|
|
963
|
-
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
964
|
-
})), getByRole = _render29.getByRole, getByText = _render29.getByText;
|
|
965
|
-
input = getByRole("combobox");
|
|
1023
|
+
var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1024
|
+
label: "Autocomplete Countries",
|
|
1025
|
+
suggestions: countries,
|
|
1026
|
+
onChange: onChange,
|
|
1027
|
+
onBlur: onBlur,
|
|
1028
|
+
pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
|
|
1029
|
+
})),
|
|
1030
|
+
getByRole = _render34.getByRole,
|
|
1031
|
+
getByText = _render34.getByText;
|
|
966
1032
|
|
|
967
|
-
|
|
1033
|
+
var input = getByRole("combobox");
|
|
968
1034
|
|
|
969
|
-
|
|
1035
|
+
_react2.fireEvent.focus(input);
|
|
970
1036
|
|
|
971
|
-
|
|
972
|
-
expect(getByText("ra")).toBeTruthy();
|
|
1037
|
+
_userEvent["default"].type(input, "Andor");
|
|
973
1038
|
|
|
974
|
-
|
|
1039
|
+
expect(getByText("Andor")).toBeTruthy();
|
|
1040
|
+
expect(getByText("ra")).toBeTruthy();
|
|
975
1041
|
|
|
976
|
-
|
|
977
|
-
value: "Andorra",
|
|
978
|
-
error: "Please match the format requested."
|
|
979
|
-
});
|
|
1042
|
+
_userEvent["default"].click(getByRole("option"));
|
|
980
1043
|
|
|
981
|
-
|
|
1044
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1045
|
+
value: "Andorra",
|
|
1046
|
+
error: "Please match the format requested."
|
|
1047
|
+
});
|
|
982
1048
|
|
|
983
|
-
|
|
984
|
-
value: "Andorra",
|
|
985
|
-
error: "Please match the format requested."
|
|
986
|
-
});
|
|
1049
|
+
_react2.fireEvent.blur(input);
|
|
987
1050
|
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
var onChange, onBlur, _render30, getByText, getByRole, input;
|
|
1051
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
1052
|
+
value: "Andorra",
|
|
1053
|
+
error: "Please match the format requested."
|
|
1054
|
+
});
|
|
1055
|
+
});
|
|
1056
|
+
test("Autosuggest - Length constraint", function () {
|
|
1057
|
+
var onChange = jest.fn();
|
|
1058
|
+
var onBlur = jest.fn();
|
|
997
1059
|
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
onBlur: onBlur,
|
|
1009
|
-
minLength: 5,
|
|
1010
|
-
maxLength: 10
|
|
1011
|
-
})), getByText = _render30.getByText, getByRole = _render30.getByRole;
|
|
1012
|
-
input = getByRole("combobox");
|
|
1060
|
+
var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1061
|
+
label: "Autocomplete Countries",
|
|
1062
|
+
suggestions: countries,
|
|
1063
|
+
onChange: onChange,
|
|
1064
|
+
onBlur: onBlur,
|
|
1065
|
+
minLength: 5,
|
|
1066
|
+
maxLength: 10
|
|
1067
|
+
})),
|
|
1068
|
+
getByText = _render35.getByText,
|
|
1069
|
+
getByRole = _render35.getByRole;
|
|
1013
1070
|
|
|
1014
|
-
|
|
1071
|
+
var input = getByRole("combobox");
|
|
1015
1072
|
|
|
1016
|
-
|
|
1073
|
+
_react2.fireEvent.focus(input);
|
|
1017
1074
|
|
|
1018
|
-
|
|
1019
|
-
expect(getByText("d")).toBeTruthy();
|
|
1075
|
+
_userEvent["default"].type(input, "Cha");
|
|
1020
1076
|
|
|
1021
|
-
|
|
1077
|
+
expect(getByText("Cha")).toBeTruthy();
|
|
1078
|
+
expect(getByText("d")).toBeTruthy();
|
|
1022
1079
|
|
|
1023
|
-
|
|
1024
|
-
value: "Cha",
|
|
1025
|
-
error: "Min length 5, max length 10."
|
|
1026
|
-
});
|
|
1080
|
+
_userEvent["default"].click(getByRole("option"));
|
|
1027
1081
|
|
|
1028
|
-
|
|
1082
|
+
expect(onChange).toHaveBeenCalledWith({
|
|
1083
|
+
value: "Cha",
|
|
1084
|
+
error: "Min length 5, max length 10."
|
|
1085
|
+
});
|
|
1029
1086
|
|
|
1030
|
-
|
|
1031
|
-
value: "Chad",
|
|
1032
|
-
error: "Min length 5, max length 10."
|
|
1033
|
-
});
|
|
1087
|
+
_react2.fireEvent.blur(input);
|
|
1034
1088
|
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
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() {
|
|
1043
|
-
var onChange, _render31, getByRole, queryByRole, input, list;
|
|
1089
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
1090
|
+
value: "Chad",
|
|
1091
|
+
error: "Min length 5, max length 10."
|
|
1092
|
+
});
|
|
1093
|
+
});
|
|
1094
|
+
test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", function () {
|
|
1095
|
+
var onChange = jest.fn();
|
|
1044
1096
|
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
suggestions: countries,
|
|
1053
|
-
onChange: onChange
|
|
1054
|
-
})), getByRole = _render31.getByRole, queryByRole = _render31.queryByRole;
|
|
1055
|
-
input = getByRole("combobox");
|
|
1097
|
+
var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1098
|
+
label: "Autocomplete Countries",
|
|
1099
|
+
suggestions: countries,
|
|
1100
|
+
onChange: onChange
|
|
1101
|
+
})),
|
|
1102
|
+
getByRole = _render36.getByRole,
|
|
1103
|
+
queryByRole = _render36.queryByRole;
|
|
1056
1104
|
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1105
|
+
var input = getByRole("combobox");
|
|
1106
|
+
|
|
1107
|
+
_react2.fireEvent.keyDown(input, {
|
|
1108
|
+
key: "ArrowDown",
|
|
1109
|
+
code: "ArrowDown",
|
|
1110
|
+
keyCode: 40,
|
|
1111
|
+
charCode: 40
|
|
1112
|
+
});
|
|
1113
|
+
|
|
1114
|
+
var list = getByRole("listbox");
|
|
1115
|
+
expect(list).toBeTruthy();
|
|
1116
|
+
|
|
1117
|
+
_react2.fireEvent.keyDown(input, {
|
|
1118
|
+
key: "Enter",
|
|
1119
|
+
code: "Enter",
|
|
1120
|
+
keyCode: 13,
|
|
1121
|
+
charCode: 13
|
|
1122
|
+
});
|
|
1123
|
+
|
|
1124
|
+
expect(input.value).toBe("Afghanistan");
|
|
1125
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1126
|
+
});
|
|
1127
|
+
test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", function () {
|
|
1128
|
+
var onChange = jest.fn();
|
|
1129
|
+
|
|
1130
|
+
var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1131
|
+
label: "Autocomplete Countries",
|
|
1132
|
+
suggestions: countries,
|
|
1133
|
+
onChange: onChange
|
|
1134
|
+
})),
|
|
1135
|
+
getByRole = _render37.getByRole,
|
|
1136
|
+
queryByRole = _render37.queryByRole;
|
|
1137
|
+
|
|
1138
|
+
var input = getByRole("combobox");
|
|
1139
|
+
|
|
1140
|
+
_react2.fireEvent.keyDown(input, {
|
|
1141
|
+
key: "ArrowUp",
|
|
1142
|
+
code: "ArrowUp",
|
|
1143
|
+
keyCode: 38,
|
|
1144
|
+
charCode: 38
|
|
1145
|
+
});
|
|
1146
|
+
|
|
1147
|
+
var list = getByRole("listbox");
|
|
1148
|
+
expect(list).toBeTruthy();
|
|
1149
|
+
|
|
1150
|
+
_react2.fireEvent.keyDown(input, {
|
|
1151
|
+
key: "Enter",
|
|
1152
|
+
code: "Enter",
|
|
1153
|
+
keyCode: 13,
|
|
1154
|
+
charCode: 13
|
|
1155
|
+
});
|
|
1156
|
+
|
|
1157
|
+
expect(input.value).toBe("Djibouti");
|
|
1158
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1159
|
+
});
|
|
1160
|
+
test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", function () {
|
|
1161
|
+
var onChange = jest.fn();
|
|
1162
|
+
|
|
1163
|
+
var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1164
|
+
label: "Autocomplete Countries",
|
|
1165
|
+
suggestions: countries,
|
|
1166
|
+
onChange: onChange
|
|
1167
|
+
})),
|
|
1168
|
+
getByRole = _render38.getByRole,
|
|
1169
|
+
queryByRole = _render38.queryByRole;
|
|
1170
|
+
|
|
1171
|
+
var input = getByRole("combobox");
|
|
1172
|
+
|
|
1173
|
+
_react2.fireEvent.focus(input);
|
|
1174
|
+
|
|
1175
|
+
_userEvent["default"].type(input, "Bangla");
|
|
1176
|
+
|
|
1177
|
+
var list = getByRole("listbox");
|
|
1178
|
+
expect(list).toBeTruthy();
|
|
1179
|
+
|
|
1180
|
+
_react2.fireEvent.keyDown(input, {
|
|
1181
|
+
key: "Esc",
|
|
1182
|
+
code: "Esc",
|
|
1183
|
+
keyCode: 27,
|
|
1184
|
+
charCode: 27
|
|
1185
|
+
});
|
|
1186
|
+
|
|
1187
|
+
expect(input.value).toBe("");
|
|
1188
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1189
|
+
});
|
|
1190
|
+
test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", function () {
|
|
1191
|
+
var onChange = jest.fn();
|
|
1192
|
+
|
|
1193
|
+
var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1194
|
+
label: "Autocomplete Countries",
|
|
1195
|
+
suggestions: countries,
|
|
1196
|
+
onChange: onChange
|
|
1197
|
+
})),
|
|
1198
|
+
getByRole = _render39.getByRole,
|
|
1199
|
+
queryByRole = _render39.queryByRole;
|
|
1200
|
+
|
|
1201
|
+
var input = getByRole("combobox");
|
|
1202
|
+
|
|
1203
|
+
_react2.fireEvent.focus(input);
|
|
1204
|
+
|
|
1205
|
+
var list = getByRole("listbox");
|
|
1206
|
+
expect(list).toBeTruthy();
|
|
1063
1207
|
|
|
1064
|
-
|
|
1065
|
-
|
|
1208
|
+
_react2.fireEvent.keyDown(input, {
|
|
1209
|
+
key: "Enter",
|
|
1210
|
+
code: "Enter",
|
|
1211
|
+
keyCode: 27,
|
|
1212
|
+
charCode: 27
|
|
1213
|
+
});
|
|
1066
1214
|
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
});
|
|
1215
|
+
expect(input.value).toBe("");
|
|
1216
|
+
expect(queryByRole("list")).toBeFalsy();
|
|
1217
|
+
});
|
|
1218
|
+
test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", function () {
|
|
1219
|
+
var onChange = jest.fn();
|
|
1073
1220
|
|
|
1074
|
-
|
|
1075
|
-
|
|
1221
|
+
var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1222
|
+
label: "Autocomplete Countries",
|
|
1223
|
+
suggestions: countries,
|
|
1224
|
+
onChange: onChange
|
|
1225
|
+
})),
|
|
1226
|
+
getByRole = _render40.getByRole,
|
|
1227
|
+
queryByRole = _render40.queryByRole;
|
|
1076
1228
|
|
|
1077
|
-
|
|
1078
|
-
case "end":
|
|
1079
|
-
return _context12.stop();
|
|
1080
|
-
}
|
|
1081
|
-
}
|
|
1082
|
-
}, _callee12);
|
|
1083
|
-
})));
|
|
1084
|
-
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() {
|
|
1085
|
-
var onChange, _render32, getByRole, queryByRole, input, list;
|
|
1229
|
+
var input = getByRole("combobox");
|
|
1086
1230
|
|
|
1087
|
-
|
|
1088
|
-
while (1) {
|
|
1089
|
-
switch (_context13.prev = _context13.next) {
|
|
1090
|
-
case 0:
|
|
1091
|
-
onChange = jest.fn();
|
|
1092
|
-
_render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1093
|
-
label: "Autocomplete Countries",
|
|
1094
|
-
suggestions: countries,
|
|
1095
|
-
onChange: onChange
|
|
1096
|
-
})), getByRole = _render32.getByRole, queryByRole = _render32.queryByRole;
|
|
1097
|
-
input = getByRole("combobox");
|
|
1231
|
+
_react2.fireEvent.focus(input);
|
|
1098
1232
|
|
|
1099
|
-
|
|
1100
|
-
key: "ArrowUp",
|
|
1101
|
-
code: "ArrowUp",
|
|
1102
|
-
keyCode: 38,
|
|
1103
|
-
charCode: 38
|
|
1104
|
-
});
|
|
1233
|
+
_userEvent["default"].type(input, "Ba");
|
|
1105
1234
|
|
|
1106
|
-
|
|
1107
|
-
|
|
1235
|
+
_react2.fireEvent.keyDown(input, {
|
|
1236
|
+
key: "ArrowUp",
|
|
1237
|
+
code: "ArrowUp",
|
|
1238
|
+
keyCode: 38,
|
|
1239
|
+
charCode: 38
|
|
1240
|
+
});
|
|
1108
1241
|
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1242
|
+
_react2.fireEvent.keyDown(input, {
|
|
1243
|
+
key: "ArrowUp",
|
|
1244
|
+
code: "ArrowUpp",
|
|
1245
|
+
keyCode: 38,
|
|
1246
|
+
charCode: 38
|
|
1247
|
+
});
|
|
1115
1248
|
|
|
1116
|
-
|
|
1117
|
-
|
|
1249
|
+
_react2.fireEvent.keyDown(input, {
|
|
1250
|
+
key: "ArrowDown",
|
|
1251
|
+
code: "ArrowDown",
|
|
1252
|
+
keyCode: 40,
|
|
1253
|
+
charCode: 40
|
|
1254
|
+
});
|
|
1118
1255
|
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
}
|
|
1125
|
-
})));
|
|
1126
|
-
test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
|
|
1127
|
-
var onChange, _render33, getByRole, queryByRole, input, list;
|
|
1256
|
+
_react2.fireEvent.keyDown(input, {
|
|
1257
|
+
key: "Enter",
|
|
1258
|
+
code: "Enter",
|
|
1259
|
+
keyCode: 13,
|
|
1260
|
+
charCode: 13
|
|
1261
|
+
});
|
|
1128
1262
|
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
switch (_context14.prev = _context14.next) {
|
|
1132
|
-
case 0:
|
|
1133
|
-
onChange = jest.fn();
|
|
1134
|
-
_render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1135
|
-
label: "Autocomplete Countries",
|
|
1136
|
-
suggestions: countries,
|
|
1137
|
-
onChange: onChange
|
|
1138
|
-
})), getByRole = _render33.getByRole, queryByRole = _render33.queryByRole;
|
|
1139
|
-
input = getByRole("combobox");
|
|
1263
|
+
expect(input.value).toBe("Barbados");
|
|
1264
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1140
1265
|
|
|
1141
|
-
|
|
1266
|
+
_react2.fireEvent.keyDown(input, {
|
|
1267
|
+
key: "Esc",
|
|
1268
|
+
code: "Esp",
|
|
1269
|
+
keyCode: 27,
|
|
1270
|
+
charCode: 27
|
|
1271
|
+
});
|
|
1142
1272
|
|
|
1143
|
-
|
|
1273
|
+
expect(input.value).toBe("");
|
|
1274
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1275
|
+
});
|
|
1276
|
+
test("Autosuggest escapes special characters", function () {
|
|
1277
|
+
var onChange = jest.fn();
|
|
1144
1278
|
|
|
1145
|
-
|
|
1146
|
-
|
|
1279
|
+
var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1280
|
+
label: "Autocomplete Countries",
|
|
1281
|
+
suggestions: specialCharacters,
|
|
1282
|
+
onChange: onChange
|
|
1283
|
+
})),
|
|
1284
|
+
getAllByText = _render41.getAllByText,
|
|
1285
|
+
getByRole = _render41.getByRole;
|
|
1147
1286
|
|
|
1148
|
-
|
|
1149
|
-
key: "Esc",
|
|
1150
|
-
code: "Esc",
|
|
1151
|
-
keyCode: 27,
|
|
1152
|
-
charCode: 27
|
|
1153
|
-
});
|
|
1287
|
+
var input = getByRole("combobox");
|
|
1154
1288
|
|
|
1155
|
-
|
|
1156
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
1289
|
+
_react2.fireEvent.focus(input);
|
|
1157
1290
|
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1291
|
+
var list = getByRole("listbox");
|
|
1292
|
+
|
|
1293
|
+
_react2.fireEvent.change(input, {
|
|
1294
|
+
target: {
|
|
1295
|
+
value: "/"
|
|
1162
1296
|
}
|
|
1163
|
-
}
|
|
1164
|
-
})));
|
|
1165
|
-
test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
|
|
1166
|
-
var onChange, _render34, getByRole, queryByRole, input, list;
|
|
1297
|
+
});
|
|
1167
1298
|
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
switch (_context15.prev = _context15.next) {
|
|
1171
|
-
case 0:
|
|
1172
|
-
onChange = jest.fn();
|
|
1173
|
-
_render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1174
|
-
label: "Autocomplete Countries",
|
|
1175
|
-
suggestions: countries,
|
|
1176
|
-
onChange: onChange
|
|
1177
|
-
})), getByRole = _render34.getByRole, queryByRole = _render34.queryByRole;
|
|
1178
|
-
input = getByRole("combobox");
|
|
1299
|
+
expect(list).toBeTruthy();
|
|
1300
|
+
expect(getAllByText("/").length).toBe(1);
|
|
1179
1301
|
|
|
1180
|
-
|
|
1302
|
+
_react2.fireEvent.change(input, {
|
|
1303
|
+
target: {
|
|
1304
|
+
value: "\\"
|
|
1305
|
+
}
|
|
1306
|
+
});
|
|
1181
1307
|
|
|
1182
|
-
|
|
1183
|
-
|
|
1308
|
+
expect(list).toBeTruthy();
|
|
1309
|
+
expect(getAllByText("\\").length).toBe(1);
|
|
1184
1310
|
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
});
|
|
1311
|
+
_react2.fireEvent.change(input, {
|
|
1312
|
+
target: {
|
|
1313
|
+
value: "*"
|
|
1314
|
+
}
|
|
1315
|
+
});
|
|
1191
1316
|
|
|
1192
|
-
|
|
1193
|
-
|
|
1317
|
+
expect(list).toBeTruthy();
|
|
1318
|
+
expect(getAllByText("*").length).toBe(2);
|
|
1194
1319
|
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
}
|
|
1320
|
+
_react2.fireEvent.change(input, {
|
|
1321
|
+
target: {
|
|
1322
|
+
value: "("
|
|
1199
1323
|
}
|
|
1200
|
-
}
|
|
1201
|
-
})));
|
|
1202
|
-
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() {
|
|
1203
|
-
var onChange, _render35, getByRole, queryByRole, input;
|
|
1204
|
-
|
|
1205
|
-
return _regenerator["default"].wrap(function _callee16$(_context16) {
|
|
1206
|
-
while (1) {
|
|
1207
|
-
switch (_context16.prev = _context16.next) {
|
|
1208
|
-
case 0:
|
|
1209
|
-
onChange = jest.fn();
|
|
1210
|
-
_render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1211
|
-
label: "Autocomplete Countries",
|
|
1212
|
-
suggestions: countries,
|
|
1213
|
-
onChange: onChange
|
|
1214
|
-
})), getByRole = _render35.getByRole, queryByRole = _render35.queryByRole;
|
|
1215
|
-
input = getByRole("combobox");
|
|
1324
|
+
});
|
|
1216
1325
|
|
|
1217
|
-
|
|
1326
|
+
expect(list).toBeTruthy();
|
|
1327
|
+
expect(getAllByText("(").length).toBe(1);
|
|
1218
1328
|
|
|
1219
|
-
|
|
1329
|
+
_react2.fireEvent.change(input, {
|
|
1330
|
+
target: {
|
|
1331
|
+
value: ")"
|
|
1332
|
+
}
|
|
1333
|
+
});
|
|
1220
1334
|
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
code: "ArrowUp",
|
|
1224
|
-
keyCode: 38,
|
|
1225
|
-
charCode: 38
|
|
1226
|
-
});
|
|
1335
|
+
expect(list).toBeTruthy();
|
|
1336
|
+
expect(getAllByText(")").length).toBe(1);
|
|
1227
1337
|
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
});
|
|
1338
|
+
_react2.fireEvent.change(input, {
|
|
1339
|
+
target: {
|
|
1340
|
+
value: "["
|
|
1341
|
+
}
|
|
1342
|
+
});
|
|
1234
1343
|
|
|
1235
|
-
|
|
1236
|
-
|
|
1237
|
-
code: "ArrowDown",
|
|
1238
|
-
keyCode: 40,
|
|
1239
|
-
charCode: 40
|
|
1240
|
-
});
|
|
1344
|
+
expect(list).toBeTruthy();
|
|
1345
|
+
expect(getAllByText("[").length).toBe(1);
|
|
1241
1346
|
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
});
|
|
1347
|
+
_react2.fireEvent.change(input, {
|
|
1348
|
+
target: {
|
|
1349
|
+
value: "]"
|
|
1350
|
+
}
|
|
1351
|
+
});
|
|
1248
1352
|
|
|
1249
|
-
|
|
1250
|
-
|
|
1353
|
+
expect(list).toBeTruthy();
|
|
1354
|
+
expect(getAllByText("]").length).toBe(1);
|
|
1251
1355
|
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
});
|
|
1356
|
+
_react2.fireEvent.change(input, {
|
|
1357
|
+
target: {
|
|
1358
|
+
value: "+"
|
|
1359
|
+
}
|
|
1360
|
+
});
|
|
1258
1361
|
|
|
1259
|
-
|
|
1260
|
-
|
|
1362
|
+
expect(list).toBeTruthy();
|
|
1363
|
+
expect(getAllByText("+").length).toBe(1);
|
|
1261
1364
|
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
}
|
|
1365
|
+
_react2.fireEvent.change(input, {
|
|
1366
|
+
target: {
|
|
1367
|
+
value: "?"
|
|
1266
1368
|
}
|
|
1267
|
-
}
|
|
1268
|
-
|
|
1369
|
+
});
|
|
1370
|
+
|
|
1371
|
+
expect(list).toBeTruthy();
|
|
1372
|
+
expect(getAllByText("?").length).toBe(1);
|
|
1373
|
+
});
|
|
1269
1374
|
});
|
|
1270
1375
|
describe("TextInput component asynchronous autosuggest tests", function () {
|
|
1271
|
-
test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1272
|
-
var callbackFunc, onChange,
|
|
1376
|
+
test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
|
1377
|
+
var callbackFunc, onChange, _render42, getByRole, getByText, input;
|
|
1273
1378
|
|
|
1274
|
-
return _regenerator["default"].wrap(function
|
|
1379
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
1275
1380
|
while (1) {
|
|
1276
|
-
switch (
|
|
1381
|
+
switch (_context.prev = _context.next) {
|
|
1277
1382
|
case 0:
|
|
1278
1383
|
callbackFunc = jest.fn(function (newValue) {
|
|
1279
1384
|
var result = new Promise(function (resolve) {
|
|
@@ -1286,17 +1391,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1286
1391
|
return result;
|
|
1287
1392
|
});
|
|
1288
1393
|
onChange = jest.fn();
|
|
1289
|
-
|
|
1394
|
+
_render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1290
1395
|
label: "Autosuggest Countries",
|
|
1291
1396
|
suggestions: callbackFunc,
|
|
1292
1397
|
onChange: onChange
|
|
1293
|
-
})), getByRole =
|
|
1398
|
+
})), getByRole = _render42.getByRole, getByText = _render42.getByText;
|
|
1294
1399
|
input = getByRole("combobox");
|
|
1295
1400
|
|
|
1296
1401
|
_react2.fireEvent.focus(input);
|
|
1297
1402
|
|
|
1298
1403
|
expect(getByRole("listbox")).toBeTruthy();
|
|
1299
|
-
|
|
1404
|
+
_context.next = 8;
|
|
1300
1405
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1301
1406
|
return getByText("Searching...");
|
|
1302
1407
|
});
|
|
@@ -1309,7 +1414,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1309
1414
|
|
|
1310
1415
|
_userEvent["default"].type(input, "Ab");
|
|
1311
1416
|
|
|
1312
|
-
|
|
1417
|
+
_context.next = 15;
|
|
1313
1418
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1314
1419
|
return getByText("Searching...");
|
|
1315
1420
|
});
|
|
@@ -1335,66 +1440,58 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1335
1440
|
|
|
1336
1441
|
case 19:
|
|
1337
1442
|
case "end":
|
|
1338
|
-
return
|
|
1443
|
+
return _context.stop();
|
|
1339
1444
|
}
|
|
1340
1445
|
}
|
|
1341
|
-
},
|
|
1446
|
+
}, _callee);
|
|
1342
1447
|
})));
|
|
1343
|
-
test("Autosuggest Esc key works while 'Searching...' message is shown",
|
|
1344
|
-
var callbackFunc
|
|
1448
|
+
test("Autosuggest Esc key works while 'Searching...' message is shown", function () {
|
|
1449
|
+
var callbackFunc = jest.fn(function (newValue) {
|
|
1450
|
+
var result = new Promise(function (resolve) {
|
|
1451
|
+
return setTimeout(function () {
|
|
1452
|
+
resolve(newValue ? countries.filter(function (option) {
|
|
1453
|
+
return option.toUpperCase().includes(newValue.toUpperCase());
|
|
1454
|
+
}) : countries);
|
|
1455
|
+
}, 100);
|
|
1456
|
+
});
|
|
1457
|
+
return result;
|
|
1458
|
+
});
|
|
1459
|
+
var onChange = jest.fn();
|
|
1345
1460
|
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
return option.toUpperCase().includes(newValue.toUpperCase());
|
|
1355
|
-
}) : countries);
|
|
1356
|
-
}, 100);
|
|
1357
|
-
});
|
|
1358
|
-
return result;
|
|
1359
|
-
});
|
|
1360
|
-
onChange = jest.fn();
|
|
1361
|
-
_render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1362
|
-
label: "Autosuggest Countries",
|
|
1363
|
-
suggestions: callbackFunc,
|
|
1364
|
-
onChange: onChange
|
|
1365
|
-
})), getByRole = _render37.getByRole, queryByText = _render37.queryByText, queryByRole = _render37.queryByRole;
|
|
1366
|
-
input = getByRole("combobox");
|
|
1461
|
+
var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1462
|
+
label: "Autosuggest Countries",
|
|
1463
|
+
suggestions: callbackFunc,
|
|
1464
|
+
onChange: onChange
|
|
1465
|
+
})),
|
|
1466
|
+
getByRole = _render43.getByRole,
|
|
1467
|
+
queryByText = _render43.queryByText,
|
|
1468
|
+
queryByRole = _render43.queryByRole;
|
|
1367
1469
|
|
|
1368
|
-
|
|
1470
|
+
var input = getByRole("combobox");
|
|
1369
1471
|
|
|
1370
|
-
|
|
1472
|
+
_react2.fireEvent.focus(input);
|
|
1371
1473
|
|
|
1372
|
-
|
|
1474
|
+
expect(getByRole("listbox")).toBeTruthy();
|
|
1373
1475
|
|
|
1374
|
-
|
|
1375
|
-
key: "Esc",
|
|
1376
|
-
code: "Esc",
|
|
1377
|
-
keyCode: 27,
|
|
1378
|
-
charCode: 27
|
|
1379
|
-
});
|
|
1476
|
+
_userEvent["default"].type(input, "Ab");
|
|
1380
1477
|
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1478
|
+
_react2.fireEvent.keyDown(input, {
|
|
1479
|
+
key: "Esc",
|
|
1480
|
+
code: "Esc",
|
|
1481
|
+
keyCode: 27,
|
|
1482
|
+
charCode: 27
|
|
1483
|
+
});
|
|
1384
1484
|
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
})));
|
|
1392
|
-
test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
|
|
1393
|
-
var callbackFunc, onChange, _render38, getByRole, getByText, queryByText, queryByRole, input, list;
|
|
1485
|
+
expect(queryByRole("listbox")).toBeFalsy();
|
|
1486
|
+
expect(queryByText("Searching...")).toBeFalsy();
|
|
1487
|
+
expect(input.value).toBe("");
|
|
1488
|
+
});
|
|
1489
|
+
test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
|
|
1490
|
+
var callbackFunc, onChange, _render44, getByRole, getByText, queryByText, queryByRole, input, list;
|
|
1394
1491
|
|
|
1395
|
-
return _regenerator["default"].wrap(function
|
|
1492
|
+
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
1396
1493
|
while (1) {
|
|
1397
|
-
switch (
|
|
1494
|
+
switch (_context2.prev = _context2.next) {
|
|
1398
1495
|
case 0:
|
|
1399
1496
|
callbackFunc = jest.fn(function (newValue) {
|
|
1400
1497
|
var result = new Promise(function (resolve) {
|
|
@@ -1407,11 +1504,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1407
1504
|
return result;
|
|
1408
1505
|
});
|
|
1409
1506
|
onChange = jest.fn();
|
|
1410
|
-
|
|
1507
|
+
_render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1411
1508
|
label: "Autosuggest Countries",
|
|
1412
1509
|
suggestions: callbackFunc,
|
|
1413
1510
|
onChange: onChange
|
|
1414
|
-
})), getByRole =
|
|
1511
|
+
})), getByRole = _render44.getByRole, getByText = _render44.getByText, queryByText = _render44.queryByText, queryByRole = _render44.queryByRole;
|
|
1415
1512
|
input = getByRole("combobox");
|
|
1416
1513
|
|
|
1417
1514
|
_react2.fireEvent.focus(input);
|
|
@@ -1440,7 +1537,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1440
1537
|
});
|
|
1441
1538
|
|
|
1442
1539
|
expect(list).toBeTruthy();
|
|
1443
|
-
|
|
1540
|
+
_context2.next = 16;
|
|
1444
1541
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1445
1542
|
return getByText("Searching...");
|
|
1446
1543
|
});
|
|
@@ -1453,17 +1550,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1453
1550
|
|
|
1454
1551
|
case 20:
|
|
1455
1552
|
case "end":
|
|
1456
|
-
return
|
|
1553
|
+
return _context2.stop();
|
|
1457
1554
|
}
|
|
1458
1555
|
}
|
|
1459
|
-
},
|
|
1556
|
+
}, _callee2);
|
|
1460
1557
|
})));
|
|
1461
|
-
test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1462
|
-
var callbackFunc, onChange,
|
|
1558
|
+
test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
|
|
1559
|
+
var callbackFunc, onChange, _render45, getByRole, getByText, input;
|
|
1463
1560
|
|
|
1464
|
-
return _regenerator["default"].wrap(function
|
|
1561
|
+
return _regenerator["default"].wrap(function _callee3$(_context3) {
|
|
1465
1562
|
while (1) {
|
|
1466
|
-
switch (
|
|
1563
|
+
switch (_context3.prev = _context3.next) {
|
|
1467
1564
|
case 0:
|
|
1468
1565
|
callbackFunc = jest.fn(function (newValue) {
|
|
1469
1566
|
var result = new Promise(function (resolve) {
|
|
@@ -1476,18 +1573,18 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1476
1573
|
return result;
|
|
1477
1574
|
});
|
|
1478
1575
|
onChange = jest.fn();
|
|
1479
|
-
|
|
1576
|
+
_render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1480
1577
|
label: "Autosuggest Countries",
|
|
1481
1578
|
onChange: onChange,
|
|
1482
1579
|
suggestions: callbackFunc
|
|
1483
|
-
})), getByRole =
|
|
1580
|
+
})), getByRole = _render45.getByRole, getByText = _render45.getByText;
|
|
1484
1581
|
input = getByRole("combobox");
|
|
1485
1582
|
|
|
1486
1583
|
_react2.fireEvent.focus(input);
|
|
1487
1584
|
|
|
1488
1585
|
_userEvent["default"].type(input, "Den");
|
|
1489
1586
|
|
|
1490
|
-
|
|
1587
|
+
_context3.next = 8;
|
|
1491
1588
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1492
1589
|
return getByText("Searching...");
|
|
1493
1590
|
});
|
|
@@ -1504,17 +1601,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1504
1601
|
|
|
1505
1602
|
case 12:
|
|
1506
1603
|
case "end":
|
|
1507
|
-
return
|
|
1604
|
+
return _context3.stop();
|
|
1508
1605
|
}
|
|
1509
1606
|
}
|
|
1510
|
-
},
|
|
1607
|
+
}, _callee3);
|
|
1511
1608
|
})));
|
|
1512
|
-
test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1513
|
-
var callbackFunc, onChange,
|
|
1609
|
+
test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
|
|
1610
|
+
var callbackFunc, onChange, _render46, getByRole, getByText, queryByRole, input;
|
|
1514
1611
|
|
|
1515
|
-
return _regenerator["default"].wrap(function
|
|
1612
|
+
return _regenerator["default"].wrap(function _callee4$(_context4) {
|
|
1516
1613
|
while (1) {
|
|
1517
|
-
switch (
|
|
1614
|
+
switch (_context4.prev = _context4.next) {
|
|
1518
1615
|
case 0:
|
|
1519
1616
|
callbackFunc = jest.fn(function (newValue) {
|
|
1520
1617
|
var result = new Promise(function (resolve) {
|
|
@@ -1527,45 +1624,47 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1527
1624
|
return result;
|
|
1528
1625
|
});
|
|
1529
1626
|
onChange = jest.fn();
|
|
1530
|
-
|
|
1627
|
+
_render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1531
1628
|
label: "Autosuggest Countries",
|
|
1532
1629
|
value: "Denm",
|
|
1533
1630
|
onChange: onChange,
|
|
1534
1631
|
suggestions: callbackFunc
|
|
1535
|
-
})), getByRole =
|
|
1632
|
+
})), getByRole = _render46.getByRole, getByText = _render46.getByText, queryByRole = _render46.queryByRole;
|
|
1536
1633
|
input = getByRole("combobox");
|
|
1634
|
+
expect(input.value).toBe("Denm");
|
|
1537
1635
|
|
|
1538
|
-
|
|
1636
|
+
_userEvent["default"].click(getByText("Autosuggest Countries"));
|
|
1539
1637
|
|
|
1540
|
-
|
|
1638
|
+
_context4.next = 8;
|
|
1541
1639
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1542
1640
|
return getByText("Searching...");
|
|
1543
1641
|
});
|
|
1544
1642
|
|
|
1545
|
-
case
|
|
1546
|
-
expect(input.value).toBe("Denm");
|
|
1643
|
+
case 8:
|
|
1547
1644
|
expect(getByText("Denmark")).toBeTruthy();
|
|
1548
1645
|
|
|
1549
|
-
|
|
1646
|
+
_react2.fireEvent.focus(getByRole("option"));
|
|
1647
|
+
|
|
1648
|
+
_userEvent["default"].click(getByText("Denmark"));
|
|
1550
1649
|
|
|
1551
1650
|
expect(onChange).toHaveBeenCalledWith({
|
|
1552
1651
|
value: "Denmark"
|
|
1553
1652
|
});
|
|
1554
1653
|
expect(queryByRole("listbox")).toBeFalsy();
|
|
1555
1654
|
|
|
1556
|
-
case
|
|
1655
|
+
case 13:
|
|
1557
1656
|
case "end":
|
|
1558
|
-
return
|
|
1657
|
+
return _context4.stop();
|
|
1559
1658
|
}
|
|
1560
1659
|
}
|
|
1561
|
-
},
|
|
1660
|
+
}, _callee4);
|
|
1562
1661
|
})));
|
|
1563
|
-
test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1564
|
-
var callbackFunc, onChange,
|
|
1662
|
+
test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
|
|
1663
|
+
var callbackFunc, onChange, _render47, getByText, getByRole, queryByRole, input;
|
|
1565
1664
|
|
|
1566
|
-
return _regenerator["default"].wrap(function
|
|
1665
|
+
return _regenerator["default"].wrap(function _callee5$(_context5) {
|
|
1567
1666
|
while (1) {
|
|
1568
|
-
switch (
|
|
1667
|
+
switch (_context5.prev = _context5.next) {
|
|
1569
1668
|
case 0:
|
|
1570
1669
|
callbackFunc = jest.fn(function (newValue) {
|
|
1571
1670
|
var result = new Promise(function (resolve) {
|
|
@@ -1578,18 +1677,18 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1578
1677
|
return result;
|
|
1579
1678
|
});
|
|
1580
1679
|
onChange = jest.fn();
|
|
1581
|
-
|
|
1680
|
+
_render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1582
1681
|
label: "Autosuggest Countries",
|
|
1583
1682
|
onChange: onChange,
|
|
1584
1683
|
suggestions: callbackFunc
|
|
1585
|
-
})), getByText =
|
|
1684
|
+
})), getByText = _render47.getByText, getByRole = _render47.getByRole, queryByRole = _render47.queryByRole;
|
|
1586
1685
|
input = getByRole("combobox");
|
|
1587
1686
|
|
|
1588
1687
|
_react2.fireEvent.focus(input);
|
|
1589
1688
|
|
|
1590
1689
|
_userEvent["default"].type(input, "Example text");
|
|
1591
1690
|
|
|
1592
|
-
|
|
1691
|
+
_context5.next = 8;
|
|
1593
1692
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1594
1693
|
return getByText("Searching...");
|
|
1595
1694
|
});
|
|
@@ -1599,17 +1698,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1599
1698
|
|
|
1600
1699
|
case 9:
|
|
1601
1700
|
case "end":
|
|
1602
|
-
return
|
|
1701
|
+
return _context5.stop();
|
|
1603
1702
|
}
|
|
1604
1703
|
}
|
|
1605
|
-
},
|
|
1704
|
+
}, _callee5);
|
|
1606
1705
|
})));
|
|
1607
|
-
test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1608
|
-
var callbackFunc, onChange,
|
|
1706
|
+
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() {
|
|
1707
|
+
var callbackFunc, onChange, _render48, getByText, getByRole, queryByRole, input;
|
|
1609
1708
|
|
|
1610
|
-
return _regenerator["default"].wrap(function
|
|
1709
|
+
return _regenerator["default"].wrap(function _callee6$(_context6) {
|
|
1611
1710
|
while (1) {
|
|
1612
|
-
switch (
|
|
1711
|
+
switch (_context6.prev = _context6.next) {
|
|
1613
1712
|
case 0:
|
|
1614
1713
|
callbackFunc = jest.fn(function (newValue) {
|
|
1615
1714
|
var result = new Promise(function (resolve) {
|
|
@@ -1622,18 +1721,18 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1622
1721
|
return result;
|
|
1623
1722
|
});
|
|
1624
1723
|
onChange = jest.fn();
|
|
1625
|
-
|
|
1724
|
+
_render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1626
1725
|
label: "Autosuggest Countries",
|
|
1627
1726
|
onChange: onChange,
|
|
1628
1727
|
suggestions: callbackFunc
|
|
1629
|
-
})), getByText =
|
|
1728
|
+
})), getByText = _render48.getByText, getByRole = _render48.getByRole, queryByRole = _render48.queryByRole;
|
|
1630
1729
|
input = getByRole("combobox");
|
|
1631
1730
|
|
|
1632
1731
|
_react2.fireEvent.focus(input);
|
|
1633
1732
|
|
|
1634
1733
|
_userEvent["default"].type(input, "wrong");
|
|
1635
1734
|
|
|
1636
|
-
|
|
1735
|
+
_context6.next = 8;
|
|
1637
1736
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1638
1737
|
return getByText("Searching...");
|
|
1639
1738
|
});
|
|
@@ -1665,17 +1764,17 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1665
1764
|
|
|
1666
1765
|
case 15:
|
|
1667
1766
|
case "end":
|
|
1668
|
-
return
|
|
1767
|
+
return _context6.stop();
|
|
1669
1768
|
}
|
|
1670
1769
|
}
|
|
1671
|
-
},
|
|
1770
|
+
}, _callee6);
|
|
1672
1771
|
})));
|
|
1673
|
-
test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function
|
|
1674
|
-
var errorCallbackFunc, onChange,
|
|
1772
|
+
test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
|
|
1773
|
+
var errorCallbackFunc, onChange, _render49, getByRole, getByText, input;
|
|
1675
1774
|
|
|
1676
|
-
return _regenerator["default"].wrap(function
|
|
1775
|
+
return _regenerator["default"].wrap(function _callee7$(_context7) {
|
|
1677
1776
|
while (1) {
|
|
1678
|
-
switch (
|
|
1777
|
+
switch (_context7.prev = _context7.next) {
|
|
1679
1778
|
case 0:
|
|
1680
1779
|
errorCallbackFunc = jest.fn(function () {
|
|
1681
1780
|
var result = new Promise(function (resolve, reject) {
|
|
@@ -1686,16 +1785,16 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1686
1785
|
return result;
|
|
1687
1786
|
});
|
|
1688
1787
|
onChange = jest.fn();
|
|
1689
|
-
|
|
1788
|
+
_render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
|
|
1690
1789
|
label: "Autosuggest Countries",
|
|
1691
1790
|
onChange: onChange,
|
|
1692
1791
|
suggestions: errorCallbackFunc
|
|
1693
|
-
})), getByRole =
|
|
1792
|
+
})), getByRole = _render49.getByRole, getByText = _render49.getByText;
|
|
1694
1793
|
input = getByRole("combobox");
|
|
1695
1794
|
|
|
1696
1795
|
_react2.fireEvent.focus(input);
|
|
1697
1796
|
|
|
1698
|
-
|
|
1797
|
+
_context7.next = 7;
|
|
1699
1798
|
return (0, _react2.waitForElementToBeRemoved)(function () {
|
|
1700
1799
|
return getByText("Searching...");
|
|
1701
1800
|
});
|
|
@@ -1705,9 +1804,9 @@ describe("TextInput component asynchronous autosuggest tests", function () {
|
|
|
1705
1804
|
|
|
1706
1805
|
case 8:
|
|
1707
1806
|
case "end":
|
|
1708
|
-
return
|
|
1807
|
+
return _context7.stop();
|
|
1709
1808
|
}
|
|
1710
1809
|
}
|
|
1711
|
-
},
|
|
1810
|
+
}, _callee7);
|
|
1712
1811
|
})));
|
|
1713
1812
|
});
|