@dxc-technology/halstack-react 0.0.0-75be8bf → 0.0.0-75cb2b9

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