@dxc-technology/halstack-react 0.0.0-5b2ad05 → 0.0.0-5b43b04

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 (429) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +335 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +239 -0
  7. package/accordion/Accordion.stories.tsx +395 -0
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +69 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +149 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  14. package/accordion-group/AccordionGroup.test.js +126 -0
  15. package/accordion-group/types.d.ts +79 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +44 -154
  19. package/alert/Alert.stories.tsx +198 -0
  20. package/alert/Alert.test.js +92 -0
  21. package/alert/types.d.ts +49 -0
  22. package/alert/types.js +5 -0
  23. package/badge/Badge.d.ts +4 -0
  24. package/badge/Badge.js +61 -0
  25. package/badge/types.d.ts +5 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +51 -0
  29. package/bleed/Bleed.stories.tsx +341 -0
  30. package/bleed/types.d.ts +37 -0
  31. package/bleed/types.js +5 -0
  32. package/box/Box.d.ts +4 -0
  33. package/box/Box.js +116 -0
  34. package/box/Box.stories.tsx +147 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +44 -0
  37. package/box/types.js +5 -0
  38. package/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +123 -0
  40. package/bulleted-list/BulletedList.stories.tsx +200 -0
  41. package/bulleted-list/types.d.ts +11 -0
  42. package/bulleted-list/types.js +5 -0
  43. package/button/Button.d.ts +4 -0
  44. package/button/Button.js +154 -0
  45. package/button/Button.stories.tsx +425 -0
  46. package/button/Button.test.js +35 -0
  47. package/button/types.d.ts +53 -0
  48. package/button/types.js +5 -0
  49. package/card/Card.d.ts +4 -0
  50. package/card/Card.js +161 -0
  51. package/card/Card.stories.tsx +201 -0
  52. package/card/Card.test.js +50 -0
  53. package/card/ice-cream.jpg +0 -0
  54. package/card/types.d.ts +68 -0
  55. package/card/types.js +5 -0
  56. package/checkbox/Checkbox.d.ts +4 -0
  57. package/checkbox/Checkbox.js +250 -0
  58. package/checkbox/Checkbox.stories.tsx +260 -0
  59. package/checkbox/Checkbox.test.js +155 -0
  60. package/checkbox/types.d.ts +68 -0
  61. package/checkbox/types.js +5 -0
  62. package/chip/Chip.d.ts +4 -0
  63. package/chip/Chip.js +155 -0
  64. package/chip/Chip.stories.tsx +206 -0
  65. package/chip/Chip.test.js +56 -0
  66. package/chip/types.d.ts +45 -0
  67. package/chip/types.js +5 -0
  68. package/{dist/common → common}/OpenSans.css +0 -0
  69. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  75. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  76. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  77. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  78. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  79. package/{dist/common → common}/utils.js +0 -0
  80. package/{dist/common → common}/variables.js +598 -638
  81. package/date-input/Calendar.d.ts +4 -0
  82. package/date-input/Calendar.js +258 -0
  83. package/date-input/DateInput.d.ts +4 -0
  84. package/date-input/DateInput.js +269 -0
  85. package/date-input/DateInput.stories.tsx +304 -0
  86. package/date-input/DateInput.test.js +835 -0
  87. package/date-input/DatePicker.d.ts +4 -0
  88. package/date-input/DatePicker.js +146 -0
  89. package/date-input/Icons.d.ts +6 -0
  90. package/date-input/Icons.js +75 -0
  91. package/date-input/YearPicker.d.ts +4 -0
  92. package/date-input/YearPicker.js +126 -0
  93. package/date-input/types.d.ts +158 -0
  94. package/date-input/types.js +5 -0
  95. package/dialog/Dialog.d.ts +4 -0
  96. package/dialog/Dialog.js +160 -0
  97. package/dialog/Dialog.stories.tsx +289 -0
  98. package/dialog/Dialog.test.js +70 -0
  99. package/dialog/types.d.ts +44 -0
  100. package/dialog/types.js +5 -0
  101. package/dropdown/Dropdown.d.ts +4 -0
  102. package/dropdown/Dropdown.js +388 -0
  103. package/dropdown/Dropdown.stories.tsx +438 -0
  104. package/dropdown/Dropdown.test.js +585 -0
  105. package/dropdown/DropdownMenu.d.ts +4 -0
  106. package/dropdown/DropdownMenu.js +70 -0
  107. package/dropdown/DropdownMenuItem.d.ts +4 -0
  108. package/dropdown/DropdownMenuItem.js +81 -0
  109. package/dropdown/types.d.ts +100 -0
  110. package/dropdown/types.js +5 -0
  111. package/file-input/FileInput.d.ts +4 -0
  112. package/file-input/FileInput.js +551 -0
  113. package/file-input/FileInput.stories.tsx +618 -0
  114. package/file-input/FileInput.test.js +498 -0
  115. package/file-input/FileItem.d.ts +4 -0
  116. package/file-input/FileItem.js +161 -0
  117. package/file-input/types.d.ts +129 -0
  118. package/file-input/types.js +5 -0
  119. package/flex/Flex.d.ts +4 -0
  120. package/flex/Flex.js +69 -0
  121. package/flex/Flex.stories.tsx +103 -0
  122. package/flex/types.d.ts +32 -0
  123. package/flex/types.js +5 -0
  124. package/footer/Footer.d.ts +4 -0
  125. package/footer/Footer.js +185 -0
  126. package/footer/Footer.stories.tsx +228 -0
  127. package/footer/Footer.test.js +109 -0
  128. package/footer/Icons.d.ts +2 -0
  129. package/{dist/footer → footer}/Icons.js +16 -16
  130. package/footer/types.d.ts +66 -0
  131. package/footer/types.js +5 -0
  132. package/header/Header.d.ts +7 -0
  133. package/header/Header.js +303 -0
  134. package/header/Header.stories.tsx +315 -0
  135. package/header/Header.test.js +79 -0
  136. package/header/Icons.d.ts +2 -0
  137. package/{dist/header → header}/Icons.js +9 -34
  138. package/header/types.d.ts +48 -0
  139. package/header/types.js +5 -0
  140. package/heading/Heading.d.ts +4 -0
  141. package/{dist/heading → heading}/Heading.js +25 -96
  142. package/heading/Heading.stories.tsx +54 -0
  143. package/heading/Heading.test.js +186 -0
  144. package/heading/types.d.ts +33 -0
  145. package/heading/types.js +5 -0
  146. package/inset/Inset.d.ts +3 -0
  147. package/inset/Inset.js +51 -0
  148. package/inset/Inset.stories.tsx +229 -0
  149. package/inset/types.d.ts +37 -0
  150. package/inset/types.js +5 -0
  151. package/layout/ApplicationLayout.d.ts +20 -0
  152. package/layout/ApplicationLayout.js +171 -0
  153. package/layout/ApplicationLayout.stories.tsx +162 -0
  154. package/layout/Icons.d.ts +5 -0
  155. package/{dist/layout → layout}/Icons.js +19 -8
  156. package/layout/SidenavContext.d.ts +5 -0
  157. package/layout/SidenavContext.js +19 -0
  158. package/layout/types.d.ts +42 -0
  159. package/layout/types.js +5 -0
  160. package/link/Link.d.ts +4 -0
  161. package/link/Link.js +136 -0
  162. package/link/Link.stories.tsx +253 -0
  163. package/link/Link.test.js +83 -0
  164. package/link/types.d.ts +54 -0
  165. package/link/types.js +5 -0
  166. package/main.d.ts +44 -0
  167. package/{dist/main.js → main.js} +114 -104
  168. package/number-input/NumberInput.d.ts +4 -0
  169. package/number-input/NumberInput.js +76 -0
  170. package/number-input/NumberInput.stories.tsx +115 -0
  171. package/number-input/NumberInput.test.js +542 -0
  172. package/number-input/NumberInputContext.d.ts +4 -0
  173. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  174. package/number-input/numberInputContextTypes.d.ts +19 -0
  175. package/number-input/numberInputContextTypes.js +5 -0
  176. package/number-input/types.d.ts +124 -0
  177. package/number-input/types.js +5 -0
  178. package/package.json +44 -34
  179. package/paginator/Icons.d.ts +5 -0
  180. package/paginator/Icons.js +54 -0
  181. package/paginator/Paginator.d.ts +4 -0
  182. package/paginator/Paginator.js +165 -0
  183. package/paginator/Paginator.stories.tsx +87 -0
  184. package/paginator/Paginator.test.js +315 -0
  185. package/paginator/types.d.ts +38 -0
  186. package/paginator/types.js +5 -0
  187. package/paragraph/Paragraph.d.ts +6 -0
  188. package/paragraph/Paragraph.js +38 -0
  189. package/paragraph/Paragraph.stories.tsx +44 -0
  190. package/password-input/PasswordInput.d.ts +4 -0
  191. package/{dist/password-input → password-input}/PasswordInput.js +45 -77
  192. package/password-input/PasswordInput.stories.tsx +131 -0
  193. package/password-input/PasswordInput.test.js +181 -0
  194. package/password-input/types.d.ts +110 -0
  195. package/password-input/types.js +5 -0
  196. package/progress-bar/ProgressBar.d.ts +4 -0
  197. package/progress-bar/ProgressBar.js +176 -0
  198. package/progress-bar/ProgressBar.stories.jsx +93 -0
  199. package/progress-bar/ProgressBar.test.js +110 -0
  200. package/progress-bar/types.d.ts +36 -0
  201. package/progress-bar/types.js +5 -0
  202. package/quick-nav/QuickNav.d.ts +4 -0
  203. package/quick-nav/QuickNav.js +117 -0
  204. package/quick-nav/QuickNav.stories.tsx +356 -0
  205. package/quick-nav/types.d.ts +21 -0
  206. package/quick-nav/types.js +5 -0
  207. package/radio-group/Radio.d.ts +4 -0
  208. package/radio-group/Radio.js +156 -0
  209. package/radio-group/RadioGroup.d.ts +4 -0
  210. package/radio-group/RadioGroup.js +283 -0
  211. package/radio-group/RadioGroup.stories.tsx +214 -0
  212. package/radio-group/RadioGroup.test.js +722 -0
  213. package/radio-group/types.d.ts +114 -0
  214. package/radio-group/types.js +5 -0
  215. package/resultsetTable/Icons.d.ts +7 -0
  216. package/resultsetTable/Icons.js +51 -0
  217. package/resultsetTable/ResultsetTable.d.ts +4 -0
  218. package/resultsetTable/ResultsetTable.js +195 -0
  219. package/resultsetTable/ResultsetTable.stories.tsx +300 -0
  220. package/resultsetTable/ResultsetTable.test.js +325 -0
  221. package/resultsetTable/types.d.ts +67 -0
  222. package/resultsetTable/types.js +5 -0
  223. package/select/Icons.d.ts +10 -0
  224. package/select/Icons.js +93 -0
  225. package/select/Listbox.d.ts +4 -0
  226. package/select/Listbox.js +169 -0
  227. package/select/Option.d.ts +4 -0
  228. package/select/Option.js +97 -0
  229. package/select/Select.d.ts +4 -0
  230. package/select/Select.js +664 -0
  231. package/select/Select.stories.tsx +971 -0
  232. package/select/Select.test.js +2228 -0
  233. package/select/types.d.ts +210 -0
  234. package/select/types.js +5 -0
  235. package/sidenav/Sidenav.d.ts +10 -0
  236. package/sidenav/Sidenav.js +266 -0
  237. package/sidenav/Sidenav.stories.tsx +282 -0
  238. package/sidenav/Sidenav.test.js +44 -0
  239. package/sidenav/types.d.ts +73 -0
  240. package/sidenav/types.js +5 -0
  241. package/slider/Slider.d.ts +4 -0
  242. package/slider/Slider.js +343 -0
  243. package/slider/Slider.stories.tsx +240 -0
  244. package/slider/Slider.test.js +250 -0
  245. package/slider/types.d.ts +86 -0
  246. package/slider/types.js +5 -0
  247. package/spinner/Spinner.d.ts +4 -0
  248. package/spinner/Spinner.js +250 -0
  249. package/spinner/Spinner.stories.jsx +129 -0
  250. package/spinner/Spinner.test.js +64 -0
  251. package/spinner/types.d.ts +32 -0
  252. package/spinner/types.js +5 -0
  253. package/switch/Switch.d.ts +4 -0
  254. package/switch/Switch.js +262 -0
  255. package/switch/Switch.stories.tsx +171 -0
  256. package/switch/Switch.test.js +225 -0
  257. package/switch/types.d.ts +66 -0
  258. package/switch/types.js +5 -0
  259. package/table/Table.d.ts +4 -0
  260. package/{dist/table → table}/Table.js +12 -26
  261. package/table/Table.stories.jsx +356 -0
  262. package/table/Table.test.js +26 -0
  263. package/table/types.d.ts +21 -0
  264. package/table/types.js +5 -0
  265. package/tabs/Tab.d.ts +4 -0
  266. package/tabs/Tab.js +133 -0
  267. package/tabs/Tabs.d.ts +4 -0
  268. package/tabs/Tabs.js +467 -0
  269. package/tabs/Tabs.stories.tsx +226 -0
  270. package/tabs/Tabs.test.js +351 -0
  271. package/tabs/types.d.ts +92 -0
  272. package/tabs/types.js +5 -0
  273. package/tabs-nav/NavTabs.d.ts +8 -0
  274. package/tabs-nav/NavTabs.js +125 -0
  275. package/tabs-nav/NavTabs.stories.tsx +172 -0
  276. package/tabs-nav/NavTabs.test.js +82 -0
  277. package/tabs-nav/Tab.d.ts +4 -0
  278. package/tabs-nav/Tab.js +149 -0
  279. package/tabs-nav/types.d.ts +53 -0
  280. package/tabs-nav/types.js +5 -0
  281. package/tag/Tag.d.ts +4 -0
  282. package/tag/Tag.js +183 -0
  283. package/tag/Tag.stories.tsx +155 -0
  284. package/tag/Tag.test.js +60 -0
  285. package/tag/types.d.ts +69 -0
  286. package/tag/types.js +5 -0
  287. package/text-input/Icons.d.ts +8 -0
  288. package/text-input/Icons.js +60 -0
  289. package/text-input/Suggestion.d.ts +4 -0
  290. package/text-input/Suggestion.js +84 -0
  291. package/text-input/Suggestions.d.ts +4 -0
  292. package/text-input/Suggestions.js +134 -0
  293. package/text-input/TextInput.d.ts +4 -0
  294. package/text-input/TextInput.js +673 -0
  295. package/text-input/TextInput.stories.tsx +569 -0
  296. package/text-input/TextInput.test.js +1724 -0
  297. package/text-input/types.d.ts +197 -0
  298. package/text-input/types.js +5 -0
  299. package/textarea/Textarea.d.ts +4 -0
  300. package/{dist/textarea → textarea}/Textarea.js +50 -142
  301. package/textarea/Textarea.stories.jsx +216 -0
  302. package/textarea/Textarea.test.js +437 -0
  303. package/textarea/types.d.ts +137 -0
  304. package/textarea/types.js +5 -0
  305. package/toggle-group/ToggleGroup.d.ts +4 -0
  306. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +36 -148
  307. package/toggle-group/ToggleGroup.stories.tsx +215 -0
  308. package/toggle-group/ToggleGroup.test.js +156 -0
  309. package/toggle-group/types.d.ts +105 -0
  310. package/toggle-group/types.js +5 -0
  311. package/typography/Typography.d.ts +4 -0
  312. package/typography/Typography.js +131 -0
  313. package/typography/Typography.stories.tsx +198 -0
  314. package/typography/types.d.ts +18 -0
  315. package/typography/types.js +5 -0
  316. package/useTheme.d.ts +2 -0
  317. package/{dist/useTheme.js → useTheme.js} +2 -2
  318. package/useTranslatedLabels.d.ts +2 -0
  319. package/useTranslatedLabels.js +20 -0
  320. package/wizard/Wizard.d.ts +4 -0
  321. package/wizard/Wizard.js +285 -0
  322. package/wizard/Wizard.stories.tsx +253 -0
  323. package/wizard/Wizard.test.js +141 -0
  324. package/wizard/types.d.ts +65 -0
  325. package/wizard/types.js +5 -0
  326. package/README.md +0 -66
  327. package/babel.config.js +0 -8
  328. package/dist/BackgroundColorContext.js +0 -46
  329. package/dist/ThemeContext.js +0 -250
  330. package/dist/V3Select/V3Select.js +0 -549
  331. package/dist/V3Textarea/V3Textarea.js +0 -264
  332. package/dist/accordion/Accordion.js +0 -353
  333. package/dist/accordion-group/AccordionGroup.js +0 -186
  334. package/dist/alert/index.d.ts +0 -51
  335. package/dist/badge/Badge.js +0 -63
  336. package/dist/box/Box.js +0 -156
  337. package/dist/button/Button.js +0 -238
  338. package/dist/card/Card.js +0 -254
  339. package/dist/checkbox/Checkbox.js +0 -299
  340. package/dist/chip/Chip.js +0 -265
  341. package/dist/common/RequiredComponent.js +0 -40
  342. package/dist/date/Date.js +0 -379
  343. package/dist/date-input/DateInput.js +0 -400
  344. package/dist/date-input/index.d.ts +0 -95
  345. package/dist/dialog/Dialog.js +0 -218
  346. package/dist/dropdown/Dropdown.js +0 -544
  347. package/dist/file-input/FileInput.js +0 -644
  348. package/dist/file-input/FileItem.js +0 -280
  349. package/dist/file-input/index.d.ts +0 -81
  350. package/dist/footer/Footer.js +0 -421
  351. package/dist/header/Header.js +0 -470
  352. package/dist/input-text/Icons.js +0 -22
  353. package/dist/input-text/InputText.js +0 -705
  354. package/dist/layout/ApplicationLayout.js +0 -327
  355. package/dist/link/Link.js +0 -237
  356. package/dist/main.d.ts +0 -8
  357. package/dist/number-input/NumberInput.js +0 -136
  358. package/dist/number-input/index.d.ts +0 -113
  359. package/dist/paginator/Icons.js +0 -66
  360. package/dist/paginator/Paginator.js +0 -283
  361. package/dist/password-input/index.d.ts +0 -94
  362. package/dist/progress-bar/ProgressBar.js +0 -242
  363. package/dist/radio/Radio.js +0 -209
  364. package/dist/resultsetTable/ResultsetTable.js +0 -358
  365. package/dist/select/Select.js +0 -1085
  366. package/dist/select/index.d.ts +0 -53
  367. package/dist/sidenav/Sidenav.js +0 -179
  368. package/dist/slider/Slider.js +0 -404
  369. package/dist/spinner/Spinner.js +0 -381
  370. package/dist/switch/Switch.js +0 -222
  371. package/dist/tabs/Tabs.js +0 -343
  372. package/dist/tag/Tag.js +0 -282
  373. package/dist/text-input/TextInput.js +0 -971
  374. package/dist/text-input/index.d.ts +0 -135
  375. package/dist/textarea/index.d.ts +0 -117
  376. package/dist/toggle/Toggle.js +0 -220
  377. package/dist/upload/Upload.js +0 -205
  378. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  379. package/dist/upload/buttons-upload/Icons.js +0 -40
  380. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  381. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  382. package/dist/upload/file-upload/FileToUpload.js +0 -189
  383. package/dist/upload/file-upload/Icons.js +0 -66
  384. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  385. package/dist/upload/transaction/Icons.js +0 -160
  386. package/dist/upload/transaction/Transaction.js +0 -148
  387. package/dist/upload/transactions/Transactions.js +0 -138
  388. package/dist/wizard/Icons.js +0 -65
  389. package/dist/wizard/Wizard.js +0 -405
  390. package/test/Accordion.test.js +0 -33
  391. package/test/AccordionGroup.test.js +0 -125
  392. package/test/Alert.test.js +0 -53
  393. package/test/Box.test.js +0 -10
  394. package/test/Button.test.js +0 -18
  395. package/test/Card.test.js +0 -30
  396. package/test/Checkbox.test.js +0 -45
  397. package/test/Chip.test.js +0 -25
  398. package/test/Date.test.js +0 -397
  399. package/test/DateInput.test.js +0 -242
  400. package/test/Dialog.test.js +0 -23
  401. package/test/Dropdown.test.js +0 -145
  402. package/test/FileInput.test.js +0 -201
  403. package/test/Footer.test.js +0 -94
  404. package/test/Header.test.js +0 -34
  405. package/test/Heading.test.js +0 -83
  406. package/test/InputText.test.js +0 -248
  407. package/test/Link.test.js +0 -43
  408. package/test/NumberInput.test.js +0 -259
  409. package/test/Paginator.test.js +0 -177
  410. package/test/PasswordInput.test.js +0 -83
  411. package/test/ProgressBar.test.js +0 -35
  412. package/test/Radio.test.js +0 -37
  413. package/test/ResultsetTable.test.js +0 -329
  414. package/test/Sidenav.test.js +0 -45
  415. package/test/Slider.test.js +0 -74
  416. package/test/Spinner.test.js +0 -32
  417. package/test/Switch.test.js +0 -45
  418. package/test/Table.test.js +0 -36
  419. package/test/Tabs.test.js +0 -109
  420. package/test/Tag.test.js +0 -32
  421. package/test/TextInput.test.js +0 -732
  422. package/test/Textarea.test.js +0 -193
  423. package/test/ToggleGroup.test.js +0 -85
  424. package/test/Upload.test.js +0 -60
  425. package/test/V3Select.test.js +0 -212
  426. package/test/V3TextArea.test.js +0 -51
  427. package/test/Wizard.test.js +0 -130
  428. package/test/mocks/pngMock.js +0 -1
  429. package/test/mocks/svgMock.js +0 -1
package/test/Date.test.js DELETED
@@ -1,397 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import V3DxcDate from "../src/date/Date";
4
-
5
- const defaultFormat = "DD-MM-YYYY";
6
-
7
- describe("Date component general tests", () => {
8
- test("Date renders correctly", () => {
9
- const { getByPlaceholderText } = render(<V3DxcDate label="Birthdate" placeholder />);
10
- // const input = getByPlaceholderText('DD-MM-YYYY');
11
- expect(getByPlaceholderText(defaultFormat)).toBeTruthy();
12
- });
13
- });
14
-
15
- describe("Controlled Date Component", () => {
16
- const date = new Date("2020-10-16 00:00:00");
17
-
18
- test("Changing the input value and after this deleting its content input´s value should be ''", () => {
19
- const onChange = jest.fn((returnedValue) => {
20
- expect(returnedValue.dateValue).toBeNull();
21
- expect(returnedValue.stringValue).toBe("something");
22
- });
23
-
24
- const { getByRole, getByPlaceholderText, rerender } = render(
25
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
26
- );
27
- const input = getByPlaceholderText(defaultFormat);
28
-
29
- fireEvent.change(input, { target: { value: "something" } });
30
- expect(onChange).toHaveBeenCalled();
31
- fireEvent.blur(input);
32
- rerender(<V3DxcDate label="Birthdate" value="" placeholder />);
33
- // expect(getByRole("textbox").value).toBe('');
34
- });
35
-
36
- test("The input´s value is the same as the one received as a parameter (Default format)", () => {
37
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" value="30/03/1981" placeholder />);
38
- // const input = getByRole("textbox");
39
- const input = getByPlaceholderText(defaultFormat);
40
- expect(input.value).toBe("30/03/1981");
41
- });
42
-
43
- test("The input´s value is the same as the one received as a parameter (Custom format)", () => {
44
- const { getByRole, getByPlaceholderText } = render(
45
- <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
46
- );
47
- // const input = getByRole("textbox");
48
- const input = getByPlaceholderText("DD/MM/YY");
49
- expect(input.value).toBe("30/03/81");
50
- });
51
-
52
- test("Calendar´s value is the same as the input´s date if it´s right (Depending on the format)", () => {
53
- const { getByRole, getByText, getByTestId } = render(<V3DxcDate label="Birthdate" value="16-10-2020" />);
54
- fireEvent.click(getByTestId("calendarIcon"));
55
- expect(getByText("Fri, Oct 16")).toBeTruthy();
56
- });
57
-
58
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
59
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
60
- <V3DxcDate label="Birthdate" value="30-03-1981" placeholder />
61
- );
62
- // const input = getByRole("textbox");
63
- const input = getByPlaceholderText(defaultFormat);
64
- fireEvent.change(input, { target: { value: "10-02-2020" } });
65
-
66
- rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
67
- const calendarButton = getByTestId("calendarIcon");
68
- fireEvent.click(calendarButton);
69
- expect(getByText("Mon, Feb 10")).toBeTruthy();
70
- });
71
-
72
- test("onChange function is called when the user types something in the input", () => {
73
- const onChange = jest.fn((returnedValue) => {
74
- expect(returnedValue.dateValue).toBeNull();
75
- expect(returnedValue.stringValue).toBe("something");
76
- });
77
-
78
- const { getByRole, getByPlaceholderText } = render(
79
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
80
- );
81
- // const input = getByRole("textbox");
82
- const input = getByPlaceholderText(defaultFormat);
83
-
84
- fireEvent.change(input, { target: { value: "something" } });
85
- expect(onChange).toHaveBeenCalled();
86
- });
87
-
88
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(DEFAULT FORMAT)", () => {
89
- const onChange = jest.fn((returnedValue) => {
90
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
91
- expect(returnedValue.stringValue).toBe("16-10-2020");
92
- });
93
-
94
- const { getByRole, getByPlaceholderText } = render(
95
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
96
- );
97
- // const input = getByRole("textbox");
98
- const input = getByPlaceholderText(defaultFormat);
99
- fireEvent.change(input, { target: { value: "16-10-2020" } });
100
- expect(onChange).toHaveBeenCalled();
101
- });
102
-
103
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(CUSTOM FORMAT)", () => {
104
- const onChange = jest.fn((returnedValue) => {
105
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
106
- expect(returnedValue.stringValue).toBe("16-10-20");
107
- });
108
-
109
- const { getByRole, getByPlaceholderText } = render(
110
- <V3DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
111
- );
112
- // const input = getByRole("textbox");
113
- const input = getByPlaceholderText("DD-MM-YY");
114
-
115
- fireEvent.change(input, { target: { value: "16-10-20" } });
116
- expect(onChange).toHaveBeenCalled();
117
- });
118
-
119
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(DEFAULT FORMAT)", () => {
120
- const onChange = jest.fn((returnedValue) => {
121
- expect(returnedValue.dateValue).toBeNull();
122
- expect(returnedValue.stringValue).toBe("11-15-2020");
123
- });
124
-
125
- const { getByRole, getByPlaceholderText } = render(
126
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
127
- );
128
- // const input = getByRole("textbox");
129
- const input = getByPlaceholderText(defaultFormat);
130
-
131
- fireEvent.change(input, { target: { value: "11-15-2020" } });
132
- expect(onChange).toHaveBeenCalled();
133
- });
134
-
135
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(CUSTOM FORMAT)", () => {
136
- const onChange = jest.fn((returnedValue) => {
137
- expect(returnedValue.dateValue).toBeNull();
138
- expect(returnedValue.stringValue).toBe("15/11/2020");
139
- });
140
-
141
- const { getByRole, getByPlaceholderText } = render(
142
- <V3DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
143
- );
144
- // const input = getByRole("textbox");
145
- const input = getByPlaceholderText("MM/DD/YYYY");
146
-
147
- fireEvent.change(input, { target: { value: "15/11/2020" } });
148
- expect(onChange).toHaveBeenCalled();
149
- });
150
-
151
- test("onChange function is called when the user selects from the calendar", () => {
152
- const onChange = jest.fn();
153
-
154
- const component = render(<V3DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
155
- const calendarButton = component.getByTestId("calendarIcon");
156
- fireEvent.click(calendarButton);
157
- const dayButton = component.getByRole("button", { name: "10" });
158
- fireEvent.click(dayButton);
159
- expect(dayButton).toBeTruthy();
160
- expect(onChange).toHaveBeenCalled();
161
- });
162
-
163
- test("onChange function is called when the user selects from the calendar, the dateValue received by the onChange function is the selected date", () => {
164
- const onChange = jest.fn((returnedValue) => {
165
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
166
- });
167
-
168
- const component = render(<V3DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
169
- const calendarButton = component.getByTestId("calendarIcon");
170
- fireEvent.click(calendarButton);
171
- const dayButton = component.getByRole("button", { name: "16" });
172
- fireEvent.click(dayButton);
173
- expect(dayButton).toBeTruthy();
174
- });
175
-
176
- test("onChange function is called when the user selects from the calendar, the stringValue received by the onChange function is the date with the correct format (DEFAULT FORMAT)", () => {
177
- const onChange = jest.fn((returnedValue) => {
178
- expect(returnedValue.stringValue).toBe("16-10-2020");
179
- });
180
-
181
- const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
182
- const calendarButton = component.getByTestId("calendarIcon");
183
- fireEvent.click(calendarButton);
184
- const dayButton = component.getByRole("button", { name: "16" });
185
- fireEvent.click(dayButton);
186
- expect(dayButton).toBeTruthy();
187
- });
188
-
189
- test("onChange function is called when the user selects from the calendar, the stringValue received by the onChange function is the date with the correct format (CUSTOM FORMAT)", () => {
190
- const onChange = jest.fn((returnedValue) => {
191
- expect(returnedValue.stringValue).toBe("2020/10/16");
192
- });
193
-
194
- const component = render(
195
- <V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
196
- );
197
- const calendarButton = component.getByTestId("calendarIcon");
198
- fireEvent.click(calendarButton);
199
- const dayButton = component.getByRole("button", { name: "16" });
200
- fireEvent.click(dayButton);
201
- expect(dayButton).toBeTruthy();
202
- });
203
-
204
- test("Check selected date on calendar is the same date as the one on the input", () => {
205
- const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" />);
206
- const calendarButton = component.getByTestId("calendarIcon");
207
- fireEvent.click(calendarButton);
208
- const dayButton = component.getByRole("button", { name: "1" });
209
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
210
- });
211
- test("onBlur function is called", () => {
212
- const onBlur = jest.fn();
213
- const { getByRole, getByPlaceholderText } = render(
214
- <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
215
- );
216
- // const input = getByRole("textbox");
217
- const input = getByPlaceholderText(defaultFormat);
218
-
219
- fireEvent.blur(input);
220
- expect(onBlur).toHaveBeenCalled();
221
- });
222
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
223
- const onBlur = jest.fn((returnedValue) => {
224
- expect(returnedValue).toBe("30-03-81");
225
- });
226
- const { getByRole, getByPlaceholderText } = render(
227
- <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
228
- );
229
- // const input = getByRole("textbox");
230
- const input = getByPlaceholderText(defaultFormat);
231
-
232
- fireEvent.blur(input);
233
- expect(onBlur).toHaveBeenCalled();
234
- });
235
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
236
- const onBlur = jest.fn((returnedValue) => {
237
- expect(returnedValue).toBe("30/03/81");
238
- });
239
- const { getByRole, getByPlaceholderText } = render(
240
- <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
241
- );
242
- // const input = getByRole("textbox");
243
- const input = getByPlaceholderText("DD/MM/YY");
244
-
245
- fireEvent.blur(input);
246
- expect(onBlur).toHaveBeenCalled();
247
- });
248
- });
249
-
250
- describe("Uncontrolled Date Component", () => {
251
- const date = new Date("2020-10-16 00:00:00");
252
-
253
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
254
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
255
- <V3DxcDate label="Birthdate" placeholder />
256
- );
257
- // const input = getByRole("textbox");
258
- const input = getByPlaceholderText(defaultFormat);
259
-
260
- fireEvent.change(input, { target: { value: "10-02-2020" } });
261
-
262
- rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
263
- const calendarButton = getByTestId("calendarIcon");
264
- fireEvent.click(calendarButton);
265
- expect(getByText("Mon, Feb 10")).toBeTruthy();
266
- });
267
-
268
- test("onChange function is called when the user types something in the input", () => {
269
- const onChange = jest.fn((returnedValue) => {
270
- expect(returnedValue.dateValue).toBeNull();
271
- expect(returnedValue.stringValue).toBe("something");
272
- });
273
-
274
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
275
- // const input = getByRole("textbox");
276
- const input = getByPlaceholderText(defaultFormat);
277
-
278
- fireEvent.change(input, { target: { value: "something" } });
279
- expect(onChange).toHaveBeenCalled();
280
- });
281
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(DEFAULT FORMAT)", () => {
282
- const onChange = jest.fn((returnedValue) => {
283
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
284
- expect(returnedValue.stringValue).toBe("16-10-2020");
285
- });
286
-
287
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
288
- // const input = getByRole("textbox");
289
- const input = getByPlaceholderText(defaultFormat);
290
-
291
- fireEvent.change(input, { target: { value: "16-10-2020" } });
292
- expect(onChange).toHaveBeenCalled();
293
- });
294
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(CUSTOM FORMAT)", () => {
295
- const onChange = jest.fn((returnedValue) => {
296
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
297
- expect(returnedValue.stringValue).toBe("16-10-20");
298
- });
299
-
300
- const { getByRole, getByPlaceholderText } = render(
301
- <V3DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
302
- );
303
- // const input = getByRole("textbox");
304
- const input = getByPlaceholderText("DD-MM-YY");
305
-
306
- fireEvent.change(input, { target: { value: "16-10-20" } });
307
- expect(onChange).toHaveBeenCalled();
308
- });
309
-
310
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(DEFAULT FORMAT)", () => {
311
- const onChange = jest.fn((returnedValue) => {
312
- expect(returnedValue.dateValue).toBeNull();
313
- expect(returnedValue.stringValue).toBe("11-15-2020");
314
- });
315
-
316
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
317
- // const input = getByRole("textbox");
318
- const input = getByPlaceholderText(defaultFormat);
319
-
320
- fireEvent.change(input, { target: { value: "11-15-2020" } });
321
- expect(onChange).toHaveBeenCalled();
322
- });
323
-
324
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(CUSTOM FORMAT)", () => {
325
- const onChange = jest.fn((returnedValue) => {
326
- expect(returnedValue.dateValue).toBeNull();
327
- expect(returnedValue.stringValue).toBe("15/11/2020");
328
- });
329
-
330
- const { getByRole, getByPlaceholderText } = render(
331
- <V3DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
332
- );
333
- // const input = getByRole("textbox");
334
- const input = getByPlaceholderText("MM/DD/YYYY");
335
-
336
- fireEvent.change(input, { target: { value: "15/11/2020" } });
337
- expect(onChange).toHaveBeenCalled();
338
- });
339
- test("onChange function is called when the user selects from the calendar", () => {
340
- const onChange = jest.fn();
341
-
342
- const component = render(<V3DxcDate label="Birthdate" onChange={onChange} />);
343
- const calendarButton = component.getByTestId("calendarIcon");
344
- fireEvent.click(calendarButton);
345
- const dayButton = component.getByRole("button", { name: "10" });
346
- fireEvent.click(dayButton);
347
- expect(dayButton).toBeTruthy();
348
- expect(onChange).toHaveBeenCalled();
349
- });
350
-
351
- test("Check selected date on calendar is the same date as the one on the input", () => {
352
- const component = render(<V3DxcDate label="Birthdate" placeholder />);
353
- // const input = component.getByRole("textbox");
354
- const input = component.getByPlaceholderText(defaultFormat);
355
-
356
- fireEvent.change(input, { target: { value: "10-02-2020" } });
357
- const calendarButton = component.getByTestId("calendarIcon");
358
- fireEvent.click(calendarButton);
359
- const dayButton = component.getByRole("button", { name: "10" });
360
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
361
- });
362
- test("onBlur function is called", () => {
363
- const onBlur = jest.fn();
364
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
365
- // const input = getByRole("textbox");
366
- const input = getByPlaceholderText(defaultFormat);
367
-
368
- fireEvent.blur(input);
369
- expect(onBlur).toHaveBeenCalled();
370
- });
371
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
372
- const onBlur = jest.fn((returnedValue) => {
373
- expect(returnedValue).toBe("10-02-2020");
374
- });
375
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
376
- // const input = getByRole("textbox");
377
- const input = getByPlaceholderText("DD-MM-YYYY");
378
-
379
- fireEvent.change(input, { target: { value: "10-02-2020" } });
380
- fireEvent.blur(input);
381
- expect(onBlur).toHaveBeenCalled();
382
- });
383
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
384
- const onBlur = jest.fn((returnedValue) => {
385
- expect(returnedValue).toBe("10/02/20");
386
- });
387
- const { getByRole, getByPlaceholderText } = render(
388
- <V3DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
389
- );
390
- // const input = getByRole("textbox");
391
- const input = getByPlaceholderText("DD/MM/YY");
392
-
393
- fireEvent.change(input, { target: { value: "10/02/20" } });
394
- fireEvent.blur(input);
395
- expect(onBlur).toHaveBeenCalled();
396
- });
397
- });
@@ -1,242 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
-
5
- import DxcDateInput from "../src/date-input/DateInput";
6
-
7
- describe("DateInput component tests", () => {
8
- test("Renders with correct label, helper text, optional, placeholder and clearable action", () => {
9
- const { getByText, getByRole, getAllByRole } = render(
10
- <DxcDateInput label="Example label" helperText="Example of helper text" placeholder optional clearable />
11
- );
12
- const input = getByRole("textbox");
13
- expect(getByText("Example label")).toBeTruthy();
14
- expect(getByText("Example of helper text")).toBeTruthy();
15
- expect(getByText("(Optional)")).toBeTruthy();
16
- expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
17
- userEvent.type(input, "10/10/2010");
18
- const closeAction = getAllByRole("button")[0];
19
- userEvent.click(closeAction);
20
- expect(input.value).toBe("");
21
- });
22
-
23
- test("Renders with personalized error", () => {
24
- const { getByText } = render(<DxcDateInput error="Personalized error." />);
25
- expect(getByText("Personalized error.")).toBeTruthy();
26
- });
27
-
28
- test("Renders with correct format: user typed date but it's invalid, onBlur error", () => {
29
- const onBlur = jest.fn(({ value, error }) => {
30
- expect(value).toBe("10/90/2010");
31
- expect(error).toBe("Invalid date.");
32
- });
33
- const { getByRole } = render(<DxcDateInput label="With format MM/dd/yyyy" format="MM/dd/yyyy" onBlur={onBlur} />);
34
- const input = getByRole("textbox");
35
-
36
- userEvent.type(input, "10/90/2010");
37
- fireEvent.blur(input);
38
- });
39
-
40
- test("Renders with correct format: user typed date but it's invalid, onChange error", () => {
41
- const onChange = jest.fn();
42
- const { getByRole } = render(
43
- <DxcDateInput label="With format MM/dd/yyyy" format="MM/dd/yyyy" onChange={onChange} />
44
- );
45
- const input = getByRole("textbox");
46
-
47
- userEvent.type(input, "10/90/2010");
48
- expect(onChange).toHaveBeenCalledTimes(10);
49
- expect(onChange).toHaveBeenCalledWith({ value: "10/90/2010", error: "Invalid date.", date: null });
50
- });
51
-
52
- test("Calendar renders with correct date: today's date", () => {
53
- const { getByText, getByRole } = render(<DxcDateInput />);
54
- const calendarAction = getByRole("button");
55
- const d = new Date();
56
- const options = { weekday: "short", month: "short", day: "numeric" };
57
-
58
- userEvent.click(calendarAction);
59
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
60
- });
61
-
62
- test("Calendar renders with correct date: value prop", () => {
63
- const { getByText, getByRole } = render(<DxcDateInput value="20-10-2019" />);
64
- const calendarAction = getByRole("button");
65
- const d = new Date(2019, 9, 20);
66
- const options = { weekday: "short", month: "short", day: "numeric" };
67
-
68
- userEvent.click(calendarAction);
69
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
70
- });
71
-
72
- test("Calendar renders with correct date: user typed value", () => {
73
- const { getByText, getByRole } = render(<DxcDateInput />);
74
- const calendarAction = getByRole("button");
75
- const d = new Date(2010, 0, 1);
76
- const options = { weekday: "short", month: "short", day: "numeric" };
77
- const input = getByRole("textbox");
78
-
79
- userEvent.type(input, "01-01-2010");
80
- userEvent.click(calendarAction);
81
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
82
- });
83
-
84
- test("Calendar renders with correct date: invalid date, renders with today's date", () => {
85
- const onBlur = jest.fn();
86
- const { getByText, getByRole } = render(<DxcDateInput onBlur={onBlur} />);
87
- const calendarAction = getByRole("button");
88
- const d = new Date();
89
- const options = { weekday: "short", month: "short", day: "numeric" };
90
- const input = getByRole("textbox");
91
-
92
- userEvent.type(input, "01-01-xxxx");
93
- fireEvent.blur(input);
94
- expect(onBlur).toHaveBeenCalled();
95
- expect(onBlur).toHaveBeenCalledWith({ value: "01-01-xxxx", error: "Invalid date.", date: null });
96
- userEvent.click(calendarAction);
97
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
98
- });
99
-
100
- test("Selecting a date from the calendar with an specific format", () => {
101
- const { getByText, getByRole } = render(<DxcDateInput label="With format M-dd-yyyy" format="M-dd-yyyy" />);
102
- const input = getByRole("textbox");
103
- const calendarAction = getByRole("button");
104
- userEvent.click(calendarAction);
105
- const dayButton = getByText("10").closest("button");
106
- fireEvent.click(dayButton);
107
- const d = new Date();
108
- d.setDate(10);
109
- const options = { weekday: "short", month: "short", day: "numeric" };
110
- expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
111
- fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
112
- expect(input.value).toBe(`${d.getMonth() + 1}-10-${d.getFullYear()}`);
113
- });
114
-
115
- test("Selecting a date from the calendar (using keyboard presses)", () => {
116
- const { getByRole } = render(<DxcDateInput />);
117
- const calendarAction = getByRole("button");
118
- const input = getByRole("textbox");
119
-
120
- userEvent.type(input, "01-01-2010");
121
- userEvent.click(calendarAction);
122
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
123
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
124
- fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
125
- fireEvent.keyDown(document, { key: "ArrowLeft", code: "ArrowLeft", keyCode: 37, charCode: 37 });
126
- fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
127
- expect(input.value).toBe("03-01-2010");
128
- });
129
-
130
- test("onChange & onBlur functions are called correctly", () => {
131
- const onBlur = jest.fn();
132
- const onChange = jest.fn();
133
- const { getByRole } = render(<DxcDateInput onChange={onChange} onBlur={onBlur} />);
134
- const input = getByRole("textbox");
135
- const d = new Date(2011, 9, 10);
136
-
137
- userEvent.type(input, "10-10-2011");
138
- expect(input.value).toBe("10-10-2011");
139
- expect(onChange).toHaveBeenCalledTimes(10);
140
- expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
141
- fireEvent.blur(input);
142
- expect(onBlur).toHaveBeenCalled();
143
- expect(onBlur).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
144
- });
145
-
146
- test("onChange & onBlur functions are called correctly, also with errors", () => {
147
- const onBlur = jest.fn();
148
- const onChange = jest.fn();
149
- const { getByRole } = render(<DxcDateInput onChange={onChange} onBlur={onBlur} />);
150
- const input = getByRole("textbox");
151
-
152
- userEvent.type(input, "10-10-");
153
- expect(input.value).toBe("10-10-");
154
- expect(onChange).toHaveBeenCalledTimes(6);
155
- expect(onChange).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
156
- fireEvent.blur(input);
157
- expect(onBlur).toHaveBeenCalled();
158
- expect(onBlur).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
159
- });
160
-
161
- test("onBlur function removes the error when it is fixed", () => {
162
- const onBlur = jest.fn();
163
- const { getByRole } = render(<DxcDateInput onBlur={onBlur} />);
164
- const input = getByRole("textbox");
165
- const d = new Date(2002, 1, 20);
166
-
167
- userEvent.type(input, "test");
168
- expect(input.value).toBe("test");
169
- fireEvent.blur(input);
170
- expect(onBlur).toHaveBeenCalled();
171
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
172
- userEvent.clear(input);
173
- userEvent.type(input, "20-02-2002");
174
- expect(input.value).toBe("20-02-2002");
175
- fireEvent.blur(input);
176
- expect(onBlur).toHaveBeenCalled();
177
- expect(onBlur).toHaveBeenCalledWith({ value: "20-02-2002", error: null, date: d });
178
- });
179
-
180
- test("onBlur function removes the error when the input is empty", () => {
181
- const onBlur = jest.fn();
182
- const { getByRole } = render(<DxcDateInput onBlur={onBlur} optional />);
183
- const input = getByRole("textbox");
184
-
185
- userEvent.type(input, "test");
186
- expect(input.value).toBe("test");
187
- fireEvent.blur(input);
188
- expect(onBlur).toHaveBeenCalled();
189
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
190
- userEvent.clear(input);
191
- fireEvent.blur(input);
192
- expect(onBlur).toHaveBeenCalled();
193
- expect(onBlur).toHaveBeenCalledWith({ value: "", error: null, date: null });
194
- });
195
-
196
- test("onBlur & onChange functions error: required field (not optional)", () => {
197
- const onBlur = jest.fn();
198
- const onChange = jest.fn();
199
- const { getByRole } = render(<DxcDateInput onBlur={onBlur} onChange={onChange} />);
200
- const date = getByRole("textbox");
201
-
202
- userEvent.type(date, "t");
203
- expect(date.value).toBe("t");
204
- userEvent.clear(date);
205
- fireEvent.blur(date);
206
- expect(onBlur).toHaveBeenCalled();
207
- expect(onBlur).toHaveBeenCalledWith({
208
- value: "",
209
- error: "This field is required. Please, enter a value.",
210
- date: null,
211
- });
212
- expect(onChange).toHaveBeenCalled();
213
- expect(onChange).toHaveBeenCalledWith({
214
- value: "",
215
- error: "This field is required. Please, enter a value.",
216
- date: null,
217
- });
218
- });
219
-
220
- test("Disabled date input (calendar action must be shown but not clickable)", () => {
221
- const { getByRole, queryByText } = render(<DxcDateInput disabled />);
222
- const calendarAction = getByRole("button");
223
- const d = new Date();
224
- const options = { weekday: "short", month: "short", day: "numeric" };
225
-
226
- expect(getByRole("textbox").disabled).toBeTruthy();
227
- userEvent.click(calendarAction);
228
- expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
229
- });
230
-
231
- test("Input has correct accesibility attributes", () => {
232
- const { getByRole } = render(<DxcDateInput label="Date input label" />);
233
- const input = getByRole("textbox");
234
- expect(input.getAttribute("aria-autocomplete")).toBeNull();
235
- expect(input.getAttribute("aria-controls")).toBeNull();
236
- expect(input.getAttribute("aria-expanded")).toBeNull();
237
- const calendarAction = getByRole("button");
238
- userEvent.click(calendarAction);
239
- const datePicker = getByRole("dialog");
240
- expect(datePicker.getAttribute("aria-modal")).toBe("true");
241
- });
242
- });
@@ -1,23 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcDialog from "../src/dialog/Dialog";
4
-
5
- describe("Dialog component tests", () => {
6
- test("Dialog renders with correct text", () => {
7
- const { getByText } = render(<DxcDialog>dialog-text</DxcDialog>);
8
- expect(getByText("dialog-text")).toBeTruthy();
9
- });
10
-
11
- test("Dialog renders without close button", () => {
12
- const { queryByRole } = render(<DxcDialog isCloseVisible={false}>dialog-text</DxcDialog>);
13
- expect(queryByRole("button")).toBeFalsy();
14
- });
15
-
16
- test("Calls correct function onCloseClick", () => {
17
- const onCloseClick = jest.fn();
18
- const { getByRole } = render(<DxcDialog onCloseClick={onCloseClick}>dialog-text</DxcDialog>);
19
- const closeButton = getByRole("button");
20
- fireEvent.click(closeButton);
21
- expect(onCloseClick).toHaveBeenCalled();
22
- });
23
- });