@dxc-technology/halstack-react 0.0.0-4ee80da → 0.0.0-4fe81f7

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