@dxc-technology/halstack-react 0.0.0-996618c → 0.0.0-99a5c3c

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 (320) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6548 -0
  3. package/dist/index.d.ts +6548 -0
  4. package/dist/index.js +12942 -0
  5. package/dist/index.mjs +12885 -0
  6. package/package.json +73 -74
  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/RequiredComponent.js +0 -32
  76. package/common/fonts/OpenSans-Bold.ttf +0 -0
  77. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  79. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-Italic.ttf +0 -0
  81. package/common/fonts/OpenSans-Light.ttf +0 -0
  82. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  83. package/common/fonts/OpenSans-Regular.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  85. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  86. package/common/utils.js +0 -22
  87. package/common/variables.js +0 -1508
  88. package/date-input/DateInput.d.ts +0 -4
  89. package/date-input/DateInput.js +0 -372
  90. package/date-input/DateInput.stories.tsx +0 -138
  91. package/date-input/DateInput.test.js +0 -543
  92. package/date-input/types.d.ts +0 -107
  93. package/date-input/types.js +0 -5
  94. package/dialog/Dialog.d.ts +0 -4
  95. package/dialog/Dialog.js +0 -162
  96. package/dialog/Dialog.stories.tsx +0 -267
  97. package/dialog/Dialog.test.js +0 -70
  98. package/dialog/types.d.ts +0 -44
  99. package/dialog/types.js +0 -5
  100. package/dropdown/Dropdown.d.ts +0 -4
  101. package/dropdown/Dropdown.js +0 -391
  102. package/dropdown/Dropdown.stories.tsx +0 -312
  103. package/dropdown/Dropdown.test.js +0 -585
  104. package/dropdown/DropdownMenu.d.ts +0 -4
  105. package/dropdown/DropdownMenu.js +0 -80
  106. package/dropdown/DropdownMenuItem.d.ts +0 -4
  107. package/dropdown/DropdownMenuItem.js +0 -92
  108. package/dropdown/types.d.ts +0 -100
  109. package/dropdown/types.js +0 -5
  110. package/file-input/FileInput.d.ts +0 -4
  111. package/file-input/FileInput.js +0 -551
  112. package/file-input/FileInput.stories.tsx +0 -535
  113. package/file-input/FileInput.test.js +0 -498
  114. package/file-input/FileItem.d.ts +0 -4
  115. package/file-input/FileItem.js +0 -161
  116. package/file-input/types.d.ts +0 -129
  117. package/file-input/types.js +0 -5
  118. package/flex/Flex.d.ts +0 -4
  119. package/flex/Flex.js +0 -69
  120. package/flex/Flex.stories.tsx +0 -103
  121. package/flex/types.d.ts +0 -32
  122. package/flex/types.js +0 -5
  123. package/footer/Footer.d.ts +0 -4
  124. package/footer/Footer.js +0 -185
  125. package/footer/Footer.stories.tsx +0 -137
  126. package/footer/Footer.test.js +0 -109
  127. package/footer/Icons.d.ts +0 -2
  128. package/footer/Icons.js +0 -77
  129. package/footer/types.d.ts +0 -66
  130. package/footer/types.js +0 -5
  131. package/header/Header.d.ts +0 -7
  132. package/header/Header.js +0 -305
  133. package/header/Header.stories.tsx +0 -172
  134. package/header/Header.test.js +0 -79
  135. package/header/Icons.d.ts +0 -2
  136. package/header/Icons.js +0 -34
  137. package/header/types.d.ts +0 -48
  138. package/header/types.js +0 -5
  139. package/heading/Heading.d.ts +0 -4
  140. package/heading/Heading.js +0 -159
  141. package/heading/Heading.stories.tsx +0 -54
  142. package/heading/Heading.test.js +0 -186
  143. package/heading/types.d.ts +0 -33
  144. package/heading/types.js +0 -5
  145. package/inset/Inset.d.ts +0 -3
  146. package/inset/Inset.js +0 -51
  147. package/inset/Inset.stories.tsx +0 -229
  148. package/inset/types.d.ts +0 -37
  149. package/inset/types.js +0 -5
  150. package/layout/ApplicationLayout.d.ts +0 -20
  151. package/layout/ApplicationLayout.js +0 -171
  152. package/layout/ApplicationLayout.stories.tsx +0 -162
  153. package/layout/Icons.d.ts +0 -5
  154. package/layout/Icons.js +0 -66
  155. package/layout/SidenavContext.d.ts +0 -5
  156. package/layout/SidenavContext.js +0 -19
  157. package/layout/types.d.ts +0 -42
  158. package/layout/types.js +0 -5
  159. package/link/Link.d.ts +0 -4
  160. package/link/Link.js +0 -136
  161. package/link/Link.stories.tsx +0 -193
  162. package/link/Link.test.js +0 -83
  163. package/link/types.d.ts +0 -54
  164. package/link/types.js +0 -5
  165. package/main.d.ts +0 -44
  166. package/main.js +0 -369
  167. package/number-input/NumberInput.d.ts +0 -4
  168. package/number-input/NumberInput.js +0 -76
  169. package/number-input/NumberInput.stories.tsx +0 -115
  170. package/number-input/NumberInput.test.js +0 -542
  171. package/number-input/NumberInputContext.d.ts +0 -4
  172. package/number-input/NumberInputContext.js +0 -19
  173. package/number-input/numberInputContextTypes.d.ts +0 -19
  174. package/number-input/numberInputContextTypes.js +0 -5
  175. package/number-input/types.d.ts +0 -124
  176. package/number-input/types.js +0 -5
  177. package/paginator/Icons.js +0 -66
  178. package/paginator/Paginator.d.ts +0 -4
  179. package/paginator/Paginator.js +0 -171
  180. package/paginator/Paginator.stories.tsx +0 -63
  181. package/paginator/Paginator.test.js +0 -308
  182. package/paginator/types.d.ts +0 -38
  183. package/paginator/types.js +0 -5
  184. package/paragraph/Paragraph.d.ts +0 -6
  185. package/paragraph/Paragraph.js +0 -38
  186. package/paragraph/Paragraph.stories.tsx +0 -44
  187. package/password-input/PasswordInput.d.ts +0 -4
  188. package/password-input/PasswordInput.js +0 -166
  189. package/password-input/PasswordInput.stories.tsx +0 -131
  190. package/password-input/PasswordInput.test.js +0 -181
  191. package/password-input/types.d.ts +0 -110
  192. package/password-input/types.js +0 -5
  193. package/progress-bar/ProgressBar.d.ts +0 -4
  194. package/progress-bar/ProgressBar.js +0 -176
  195. package/progress-bar/ProgressBar.stories.jsx +0 -60
  196. package/progress-bar/ProgressBar.test.js +0 -110
  197. package/progress-bar/types.d.ts +0 -36
  198. package/progress-bar/types.js +0 -5
  199. package/quick-nav/QuickNav.d.ts +0 -4
  200. package/quick-nav/QuickNav.js +0 -117
  201. package/quick-nav/QuickNav.stories.tsx +0 -342
  202. package/quick-nav/types.d.ts +0 -21
  203. package/quick-nav/types.js +0 -5
  204. package/radio-group/Radio.d.ts +0 -4
  205. package/radio-group/Radio.js +0 -156
  206. package/radio-group/RadioGroup.d.ts +0 -4
  207. package/radio-group/RadioGroup.js +0 -283
  208. package/radio-group/RadioGroup.stories.tsx +0 -101
  209. package/radio-group/RadioGroup.test.js +0 -722
  210. package/radio-group/types.d.ts +0 -114
  211. package/radio-group/types.js +0 -5
  212. package/resultsetTable/ResultsetTable.d.ts +0 -4
  213. package/resultsetTable/ResultsetTable.js +0 -252
  214. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  215. package/resultsetTable/ResultsetTable.test.js +0 -348
  216. package/resultsetTable/types.d.ts +0 -67
  217. package/resultsetTable/types.js +0 -5
  218. package/select/Icons.d.ts +0 -10
  219. package/select/Icons.js +0 -93
  220. package/select/Listbox.d.ts +0 -4
  221. package/select/Listbox.js +0 -198
  222. package/select/Option.d.ts +0 -4
  223. package/select/Option.js +0 -110
  224. package/select/Select.d.ts +0 -4
  225. package/select/Select.js +0 -645
  226. package/select/Select.stories.tsx +0 -627
  227. package/select/Select.test.js +0 -2233
  228. package/select/types.d.ts +0 -210
  229. package/select/types.js +0 -5
  230. package/sidenav/Sidenav.d.ts +0 -10
  231. package/sidenav/Sidenav.js +0 -268
  232. package/sidenav/Sidenav.stories.tsx +0 -180
  233. package/sidenav/Sidenav.test.js +0 -44
  234. package/sidenav/types.d.ts +0 -73
  235. package/sidenav/types.js +0 -5
  236. package/slider/Slider.d.ts +0 -4
  237. package/slider/Slider.js +0 -343
  238. package/slider/Slider.stories.tsx +0 -183
  239. package/slider/Slider.test.js +0 -250
  240. package/slider/types.d.ts +0 -86
  241. package/slider/types.js +0 -5
  242. package/spinner/Spinner.d.ts +0 -4
  243. package/spinner/Spinner.js +0 -250
  244. package/spinner/Spinner.stories.jsx +0 -103
  245. package/spinner/Spinner.test.js +0 -64
  246. package/spinner/types.d.ts +0 -32
  247. package/spinner/types.js +0 -5
  248. package/switch/Switch.d.ts +0 -4
  249. package/switch/Switch.js +0 -262
  250. package/switch/Switch.stories.tsx +0 -138
  251. package/switch/Switch.test.js +0 -225
  252. package/switch/types.d.ts +0 -66
  253. package/switch/types.js +0 -5
  254. package/table/Table.d.ts +0 -4
  255. package/table/Table.js +0 -118
  256. package/table/Table.stories.jsx +0 -277
  257. package/table/Table.test.js +0 -26
  258. package/table/types.d.ts +0 -21
  259. package/table/types.js +0 -5
  260. package/tabs/Tab.d.ts +0 -4
  261. package/tabs/Tab.js +0 -135
  262. package/tabs/Tabs.d.ts +0 -4
  263. package/tabs/Tabs.js +0 -467
  264. package/tabs/Tabs.stories.tsx +0 -186
  265. package/tabs/Tabs.test.js +0 -351
  266. package/tabs/types.d.ts +0 -92
  267. package/tabs/types.js +0 -5
  268. package/tabs-nav/NavTabs.d.ts +0 -8
  269. package/tabs-nav/NavTabs.js +0 -125
  270. package/tabs-nav/NavTabs.stories.tsx +0 -170
  271. package/tabs-nav/NavTabs.test.js +0 -82
  272. package/tabs-nav/Tab.d.ts +0 -4
  273. package/tabs-nav/Tab.js +0 -130
  274. package/tabs-nav/types.d.ts +0 -53
  275. package/tabs-nav/types.js +0 -5
  276. package/tag/Tag.d.ts +0 -4
  277. package/tag/Tag.js +0 -183
  278. package/tag/Tag.stories.tsx +0 -142
  279. package/tag/Tag.test.js +0 -60
  280. package/tag/types.d.ts +0 -69
  281. package/tag/types.js +0 -5
  282. package/text-input/Icons.d.ts +0 -8
  283. package/text-input/Icons.js +0 -60
  284. package/text-input/Suggestion.d.ts +0 -4
  285. package/text-input/Suggestion.js +0 -57
  286. package/text-input/Suggestions.d.ts +0 -4
  287. package/text-input/Suggestions.js +0 -134
  288. package/text-input/TextInput.d.ts +0 -4
  289. package/text-input/TextInput.js +0 -677
  290. package/text-input/TextInput.stories.tsx +0 -481
  291. package/text-input/TextInput.test.js +0 -1624
  292. package/text-input/types.d.ts +0 -197
  293. package/text-input/types.js +0 -5
  294. package/textarea/Textarea.d.ts +0 -4
  295. package/textarea/Textarea.js +0 -277
  296. package/textarea/Textarea.stories.jsx +0 -157
  297. package/textarea/Textarea.test.js +0 -437
  298. package/textarea/types.d.ts +0 -137
  299. package/textarea/types.js +0 -5
  300. package/toggle-group/ToggleGroup.d.ts +0 -4
  301. package/toggle-group/ToggleGroup.js +0 -215
  302. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  303. package/toggle-group/ToggleGroup.test.js +0 -156
  304. package/toggle-group/types.d.ts +0 -105
  305. package/toggle-group/types.js +0 -5
  306. package/typography/Typography.d.ts +0 -4
  307. package/typography/Typography.js +0 -131
  308. package/typography/Typography.stories.tsx +0 -198
  309. package/typography/types.d.ts +0 -18
  310. package/typography/types.js +0 -5
  311. package/useTheme.d.ts +0 -2
  312. package/useTheme.js +0 -22
  313. package/useTranslatedLabels.d.ts +0 -2
  314. package/useTranslatedLabels.js +0 -20
  315. package/wizard/Wizard.d.ts +0 -4
  316. package/wizard/Wizard.js +0 -285
  317. package/wizard/Wizard.stories.tsx +0 -233
  318. package/wizard/Wizard.test.js +0 -141
  319. package/wizard/types.d.ts +0 -65
  320. 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
- });