@dxc-technology/halstack-react 0.0.0-6bc7b92 → 0.0.0-6bee0d5

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 (388) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/HalstackContext.d.ts +10 -0
  4. package/HalstackContext.js +243 -0
  5. package/accordion/Accordion.d.ts +4 -0
  6. package/accordion/Accordion.js +226 -0
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +72 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +168 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/AccordionGroup.test.js +151 -0
  15. package/accordion-group/types.d.ts +72 -0
  16. package/accordion-group/types.js +5 -0
  17. package/alert/Alert.d.ts +4 -0
  18. package/{dist/alert → alert}/Alert.js +40 -153
  19. package/alert/Alert.stories.tsx +170 -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 +59 -0
  25. package/badge/types.d.ts +4 -0
  26. package/badge/types.js +5 -0
  27. package/bleed/Bleed.d.ts +3 -0
  28. package/bleed/Bleed.js +84 -0
  29. package/bleed/Bleed.stories.tsx +342 -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/{dist/box → box}/Box.js +15 -45
  34. package/box/Box.stories.tsx +132 -0
  35. package/box/Box.test.js +18 -0
  36. package/box/types.d.ts +43 -0
  37. package/box/types.js +5 -0
  38. package/button/Button.d.ts +4 -0
  39. package/{dist/button → button}/Button.js +34 -100
  40. package/button/Button.stories.tsx +274 -0
  41. package/button/Button.test.js +35 -0
  42. package/button/types.d.ts +53 -0
  43. package/button/types.js +5 -0
  44. package/card/Card.d.ts +4 -0
  45. package/card/Card.js +163 -0
  46. package/card/Card.stories.tsx +201 -0
  47. package/card/Card.test.js +50 -0
  48. package/card/ice-cream.jpg +0 -0
  49. package/card/types.d.ts +67 -0
  50. package/card/types.js +5 -0
  51. package/checkbox/Checkbox.d.ts +4 -0
  52. package/{dist/checkbox → checkbox}/Checkbox.js +53 -99
  53. package/checkbox/Checkbox.stories.tsx +188 -0
  54. package/checkbox/Checkbox.test.js +78 -0
  55. package/checkbox/types.d.ts +64 -0
  56. package/checkbox/types.js +5 -0
  57. package/chip/Chip.d.ts +4 -0
  58. package/chip/Chip.js +161 -0
  59. package/chip/Chip.stories.tsx +119 -0
  60. package/chip/Chip.test.js +56 -0
  61. package/chip/types.d.ts +45 -0
  62. package/chip/types.js +5 -0
  63. package/{dist/common → common}/OpenSans.css +0 -0
  64. package/{dist/common → common}/RequiredComponent.js +3 -11
  65. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  68. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  69. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  70. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  71. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  72. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  73. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  74. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  75. package/{dist/common → common}/utils.js +0 -0
  76. package/{dist/common → common}/variables.js +150 -347
  77. package/date-input/DateInput.d.ts +4 -0
  78. package/{dist/date-input → date-input}/DateInput.js +77 -108
  79. package/date-input/DateInput.stories.tsx +138 -0
  80. package/date-input/DateInput.test.js +479 -0
  81. package/date-input/types.d.ts +107 -0
  82. package/date-input/types.js +5 -0
  83. package/dialog/Dialog.d.ts +4 -0
  84. package/dialog/Dialog.js +138 -0
  85. package/dialog/Dialog.stories.tsx +212 -0
  86. package/dialog/Dialog.test.js +40 -0
  87. package/dialog/types.d.ts +43 -0
  88. package/dialog/types.js +5 -0
  89. package/dropdown/Dropdown.d.ts +4 -0
  90. package/{dist/dropdown → dropdown}/Dropdown.js +54 -207
  91. package/dropdown/Dropdown.stories.tsx +249 -0
  92. package/dropdown/Dropdown.test.js +189 -0
  93. package/dropdown/types.d.ts +80 -0
  94. package/dropdown/types.js +5 -0
  95. package/file-input/FileInput.d.ts +4 -0
  96. package/file-input/FileInput.js +590 -0
  97. package/file-input/FileInput.stories.tsx +507 -0
  98. package/file-input/FileInput.test.js +457 -0
  99. package/file-input/FileItem.d.ts +14 -0
  100. package/file-input/FileItem.js +184 -0
  101. package/file-input/types.d.ts +112 -0
  102. package/file-input/types.js +5 -0
  103. package/footer/Footer.d.ts +4 -0
  104. package/footer/Footer.js +183 -0
  105. package/footer/Footer.stories.tsx +130 -0
  106. package/footer/Footer.test.js +109 -0
  107. package/footer/Icons.d.ts +2 -0
  108. package/{dist/footer → footer}/Icons.js +15 -15
  109. package/footer/types.d.ts +65 -0
  110. package/footer/types.js +5 -0
  111. package/header/Header.d.ts +7 -0
  112. package/header/Header.js +300 -0
  113. package/header/Header.stories.tsx +172 -0
  114. package/header/Header.test.js +79 -0
  115. package/header/Icons.d.ts +2 -0
  116. package/{dist/header → header}/Icons.js +7 -32
  117. package/header/types.d.ts +47 -0
  118. package/header/types.js +5 -0
  119. package/heading/Heading.d.ts +4 -0
  120. package/{dist/heading → heading}/Heading.js +31 -90
  121. package/heading/Heading.stories.tsx +54 -0
  122. package/heading/Heading.test.js +186 -0
  123. package/heading/types.d.ts +33 -0
  124. package/heading/types.js +5 -0
  125. package/inset/Inset.d.ts +3 -0
  126. package/inset/Inset.js +84 -0
  127. package/inset/Inset.stories.tsx +229 -0
  128. package/inset/types.d.ts +37 -0
  129. package/inset/types.js +5 -0
  130. package/layout/ApplicationLayout.d.ts +10 -0
  131. package/layout/ApplicationLayout.js +218 -0
  132. package/layout/ApplicationLayout.stories.tsx +171 -0
  133. package/{dist/layout → layout}/Icons.js +7 -7
  134. package/layout/types.d.ts +57 -0
  135. package/layout/types.js +5 -0
  136. package/link/Link.d.ts +3 -0
  137. package/{dist/link → link}/Link.js +22 -110
  138. package/link/Link.stories.tsx +151 -0
  139. package/link/Link.test.js +91 -0
  140. package/link/types.d.ts +70 -0
  141. package/link/types.js +5 -0
  142. package/list/List.d.ts +4 -0
  143. package/list/List.js +47 -0
  144. package/list/List.stories.tsx +95 -0
  145. package/list/types.d.ts +7 -0
  146. package/list/types.js +5 -0
  147. package/main.d.ts +47 -0
  148. package/{dist/main.js → main.js} +121 -101
  149. package/number-input/NumberInput.d.ts +4 -0
  150. package/number-input/NumberInput.js +76 -0
  151. package/number-input/NumberInput.stories.tsx +115 -0
  152. package/number-input/NumberInput.test.js +506 -0
  153. package/number-input/NumberInputContext.d.ts +4 -0
  154. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  155. package/number-input/numberInputContextTypes.d.ts +19 -0
  156. package/number-input/numberInputContextTypes.js +5 -0
  157. package/number-input/types.d.ts +124 -0
  158. package/number-input/types.js +5 -0
  159. package/package.json +37 -28
  160. package/{dist/paginator → paginator}/Icons.js +9 -9
  161. package/paginator/Paginator.d.ts +4 -0
  162. package/paginator/Paginator.js +192 -0
  163. package/paginator/Paginator.stories.tsx +63 -0
  164. package/paginator/Paginator.test.js +266 -0
  165. package/paginator/types.d.ts +38 -0
  166. package/paginator/types.js +5 -0
  167. package/password-input/PasswordInput.d.ts +4 -0
  168. package/{dist/password-input → password-input}/PasswordInput.js +43 -78
  169. package/password-input/PasswordInput.stories.tsx +131 -0
  170. package/password-input/PasswordInput.test.js +181 -0
  171. package/password-input/types.d.ts +110 -0
  172. package/password-input/types.js +5 -0
  173. package/progress-bar/ProgressBar.d.ts +4 -0
  174. package/{dist/progress-bar → progress-bar}/ProgressBar.js +22 -94
  175. package/progress-bar/ProgressBar.stories.jsx +58 -0
  176. package/progress-bar/ProgressBar.test.js +65 -0
  177. package/progress-bar/types.d.ts +37 -0
  178. package/progress-bar/types.js +5 -0
  179. package/quick-nav/QuickNav.d.ts +4 -0
  180. package/quick-nav/QuickNav.js +64 -0
  181. package/quick-nav/QuickNav.stories.tsx +237 -0
  182. package/quick-nav/types.d.ts +21 -0
  183. package/quick-nav/types.js +5 -0
  184. package/radio/Radio.d.ts +4 -0
  185. package/{dist/radio → radio}/Radio.js +23 -59
  186. package/radio/Radio.stories.tsx +192 -0
  187. package/radio/Radio.test.js +71 -0
  188. package/radio/types.d.ts +54 -0
  189. package/radio/types.js +5 -0
  190. package/radio-group/Radio.d.ts +4 -0
  191. package/radio-group/Radio.js +141 -0
  192. package/radio-group/RadioGroup.d.ts +4 -0
  193. package/radio-group/RadioGroup.js +280 -0
  194. package/radio-group/RadioGroup.stories.tsx +100 -0
  195. package/radio-group/RadioGroup.test.js +695 -0
  196. package/radio-group/types.d.ts +114 -0
  197. package/radio-group/types.js +5 -0
  198. package/resultsetTable/ResultsetTable.d.ts +4 -0
  199. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +43 -147
  200. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  201. package/resultsetTable/ResultsetTable.test.js +306 -0
  202. package/resultsetTable/types.d.ts +67 -0
  203. package/resultsetTable/types.js +5 -0
  204. package/row/Row.d.ts +3 -0
  205. package/row/Row.js +127 -0
  206. package/row/Row.stories.tsx +237 -0
  207. package/row/types.d.ts +28 -0
  208. package/row/types.js +5 -0
  209. package/select/Icons.d.ts +10 -0
  210. package/select/Icons.js +93 -0
  211. package/select/Listbox.d.ts +4 -0
  212. package/select/Listbox.js +148 -0
  213. package/select/Option.d.ts +4 -0
  214. package/select/Option.js +110 -0
  215. package/select/Select.d.ts +4 -0
  216. package/select/Select.js +655 -0
  217. package/select/Select.stories.tsx +582 -0
  218. package/select/Select.test.js +2057 -0
  219. package/select/types.d.ts +213 -0
  220. package/select/types.js +5 -0
  221. package/sidenav/Sidenav.d.ts +9 -0
  222. package/{dist/sidenav → sidenav}/Sidenav.js +21 -64
  223. package/sidenav/Sidenav.stories.tsx +182 -0
  224. package/sidenav/Sidenav.test.js +56 -0
  225. package/sidenav/types.d.ts +50 -0
  226. package/sidenav/types.js +5 -0
  227. package/slider/Slider.d.ts +4 -0
  228. package/{dist/slider → slider}/Slider.js +76 -162
  229. package/slider/Slider.stories.tsx +177 -0
  230. package/slider/Slider.test.js +150 -0
  231. package/slider/types.d.ts +82 -0
  232. package/slider/types.js +5 -0
  233. package/spinner/Spinner.d.ts +4 -0
  234. package/spinner/Spinner.js +250 -0
  235. package/spinner/Spinner.stories.jsx +103 -0
  236. package/spinner/Spinner.test.js +64 -0
  237. package/spinner/types.d.ts +32 -0
  238. package/spinner/types.js +5 -0
  239. package/stack/Stack.d.ts +3 -0
  240. package/stack/Stack.js +97 -0
  241. package/stack/Stack.stories.tsx +164 -0
  242. package/stack/types.d.ts +24 -0
  243. package/stack/types.js +5 -0
  244. package/switch/Switch.d.ts +4 -0
  245. package/switch/Switch.js +192 -0
  246. package/switch/Switch.stories.tsx +160 -0
  247. package/switch/Switch.test.js +98 -0
  248. package/switch/types.d.ts +62 -0
  249. package/switch/types.js +5 -0
  250. package/table/Table.d.ts +4 -0
  251. package/{dist/table → table}/Table.js +12 -26
  252. package/table/Table.stories.jsx +277 -0
  253. package/table/Table.test.js +26 -0
  254. package/table/types.d.ts +21 -0
  255. package/table/types.js +5 -0
  256. package/tabs/Tabs.d.ts +4 -0
  257. package/tabs/Tabs.js +211 -0
  258. package/tabs/Tabs.stories.tsx +118 -0
  259. package/tabs/Tabs.test.js +140 -0
  260. package/tabs/types.d.ts +82 -0
  261. package/tabs/types.js +5 -0
  262. package/tag/Tag.d.ts +4 -0
  263. package/tag/Tag.js +183 -0
  264. package/tag/Tag.stories.tsx +142 -0
  265. package/tag/Tag.test.js +60 -0
  266. package/tag/types.d.ts +69 -0
  267. package/tag/types.js +5 -0
  268. package/text/Text.d.ts +7 -0
  269. package/text/Text.js +30 -0
  270. package/text/Text.stories.tsx +19 -0
  271. package/text-input/TextInput.d.ts +4 -0
  272. package/{dist/text-input → text-input}/TextInput.js +288 -463
  273. package/text-input/TextInput.stories.tsx +474 -0
  274. package/text-input/TextInput.test.js +1712 -0
  275. package/text-input/types.d.ts +166 -0
  276. package/text-input/types.js +5 -0
  277. package/textarea/Textarea.d.ts +4 -0
  278. package/{dist/textarea → textarea}/Textarea.js +48 -131
  279. package/textarea/Textarea.stories.jsx +157 -0
  280. package/textarea/Textarea.test.js +437 -0
  281. package/textarea/types.d.ts +137 -0
  282. package/textarea/types.js +5 -0
  283. package/toggle-group/ToggleGroup.d.ts +4 -0
  284. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +36 -148
  285. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  286. package/toggle-group/ToggleGroup.test.js +156 -0
  287. package/toggle-group/types.d.ts +105 -0
  288. package/toggle-group/types.js +5 -0
  289. package/useTheme.d.ts +2 -0
  290. package/{dist/useTheme.js → useTheme.js} +2 -2
  291. package/wizard/Wizard.d.ts +4 -0
  292. package/wizard/Wizard.js +290 -0
  293. package/wizard/Wizard.stories.tsx +214 -0
  294. package/wizard/Wizard.test.js +141 -0
  295. package/wizard/types.d.ts +64 -0
  296. package/wizard/types.js +5 -0
  297. package/README.md +0 -66
  298. package/babel.config.js +0 -8
  299. package/dist/BackgroundColorContext.js +0 -46
  300. package/dist/ThemeContext.js +0 -248
  301. package/dist/V3Textarea/V3Textarea.js +0 -264
  302. package/dist/accordion/Accordion.js +0 -353
  303. package/dist/accordion-group/AccordionGroup.js +0 -186
  304. package/dist/alert/index.d.ts +0 -51
  305. package/dist/badge/Badge.js +0 -63
  306. package/dist/card/Card.js +0 -254
  307. package/dist/chip/Chip.js +0 -265
  308. package/dist/date/Date.js +0 -379
  309. package/dist/date-input/index.d.ts +0 -95
  310. package/dist/dialog/Dialog.js +0 -218
  311. package/dist/file-input/FileInput.js +0 -644
  312. package/dist/file-input/FileItem.js +0 -280
  313. package/dist/file-input/index.d.ts +0 -81
  314. package/dist/footer/Footer.js +0 -421
  315. package/dist/header/Header.js +0 -434
  316. package/dist/input-text/Icons.js +0 -22
  317. package/dist/input-text/InputText.js +0 -705
  318. package/dist/layout/ApplicationLayout.js +0 -327
  319. package/dist/main.d.ts +0 -8
  320. package/dist/new-select/NewSelect.js +0 -836
  321. package/dist/new-select/index.d.ts +0 -53
  322. package/dist/number-input/NumberInput.js +0 -136
  323. package/dist/number-input/index.d.ts +0 -113
  324. package/dist/paginator/Paginator.js +0 -283
  325. package/dist/password-input/index.d.ts +0 -94
  326. package/dist/select/Select.js +0 -549
  327. package/dist/spinner/Spinner.js +0 -381
  328. package/dist/switch/Switch.js +0 -222
  329. package/dist/tabs/Tabs.js +0 -343
  330. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  331. package/dist/tag/Tag.js +0 -282
  332. package/dist/text-input/index.d.ts +0 -135
  333. package/dist/textarea/index.d.ts +0 -117
  334. package/dist/toggle/Toggle.js +0 -220
  335. package/dist/upload/Upload.js +0 -205
  336. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  337. package/dist/upload/buttons-upload/Icons.js +0 -40
  338. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  339. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  340. package/dist/upload/file-upload/FileToUpload.js +0 -189
  341. package/dist/upload/file-upload/Icons.js +0 -66
  342. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  343. package/dist/upload/transaction/Icons.js +0 -160
  344. package/dist/upload/transaction/Transaction.js +0 -148
  345. package/dist/upload/transactions/Transactions.js +0 -138
  346. package/dist/wizard/Icons.js +0 -65
  347. package/dist/wizard/Wizard.js +0 -405
  348. package/test/Accordion.test.js +0 -33
  349. package/test/AccordionGroup.test.js +0 -125
  350. package/test/Alert.test.js +0 -53
  351. package/test/Box.test.js +0 -10
  352. package/test/Button.test.js +0 -18
  353. package/test/Card.test.js +0 -30
  354. package/test/Checkbox.test.js +0 -45
  355. package/test/Chip.test.js +0 -25
  356. package/test/Date.test.js +0 -397
  357. package/test/DateInput.test.js +0 -242
  358. package/test/Dialog.test.js +0 -23
  359. package/test/Dropdown.test.js +0 -145
  360. package/test/FileInput.test.js +0 -201
  361. package/test/Footer.test.js +0 -94
  362. package/test/Header.test.js +0 -34
  363. package/test/Heading.test.js +0 -35
  364. package/test/InputText.test.js +0 -248
  365. package/test/Link.test.js +0 -43
  366. package/test/NumberInput.test.js +0 -259
  367. package/test/Paginator.test.js +0 -177
  368. package/test/PasswordInput.test.js +0 -83
  369. package/test/ProgressBar.test.js +0 -35
  370. package/test/Radio.test.js +0 -37
  371. package/test/ResultsetTable.test.js +0 -329
  372. package/test/Select.test.js +0 -212
  373. package/test/Sidenav.test.js +0 -45
  374. package/test/Slider.test.js +0 -74
  375. package/test/Spinner.test.js +0 -32
  376. package/test/Switch.test.js +0 -45
  377. package/test/Table.test.js +0 -36
  378. package/test/Tabs.test.js +0 -109
  379. package/test/TabsForSections.test.js +0 -34
  380. package/test/Tag.test.js +0 -32
  381. package/test/TextInput.test.js +0 -732
  382. package/test/Textarea.test.js +0 -193
  383. package/test/ToggleGroup.test.js +0 -85
  384. package/test/Upload.test.js +0 -60
  385. package/test/V3TextArea.test.js +0 -51
  386. package/test/Wizard.test.js +0 -130
  387. package/test/mocks/pngMock.js +0 -1
  388. package/test/mocks/svgMock.js +0 -1
@@ -1,45 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
-
4
- import DxcCheckbox from "../src/checkbox/Checkbox";
5
-
6
- describe("Checkbox component tests", () => {
7
- test("Checkbox renders with correct text", () => {
8
- const { getByText } = render(<DxcCheckbox label="Checkbox" />);
9
-
10
- expect(getByText("Checkbox")).toBeTruthy();
11
- });
12
-
13
- test("Calls correct function on click", () => {
14
- const onChange = jest.fn();
15
- const { getByText } = render(<DxcCheckbox label="Checkbox" onChange={onChange} />);
16
-
17
- fireEvent.click(getByText("Checkbox"));
18
- expect(onChange).toHaveBeenCalled();
19
- });
20
-
21
- test("Uncontrolled checkbox", () => {
22
- const onChange = jest.fn();
23
- const component = render(<DxcCheckbox label="Checkbox" onChange={onChange} />);
24
- const visibleCheckbox = component.getByText("Checkbox");
25
- const input = component.getByRole("checkbox");
26
- expect(input.checked).toBe(false);
27
- fireEvent.click(visibleCheckbox);
28
- expect(onChange).toHaveBeenCalled();
29
- expect(onChange).toHaveBeenCalledWith(true);
30
- expect(input.checked).toBe(true);
31
- });
32
-
33
- test("Controlled checkbox", () => {
34
- const onChange = jest.fn();
35
- const component = render(<DxcCheckbox label="Checkbox" checked={false} onChange={onChange} />);
36
-
37
- const input = component.getByRole("checkbox");
38
- const visibleCheckbox = component.getByText("Checkbox");
39
-
40
- fireEvent.click(visibleCheckbox);
41
- expect(onChange).toHaveBeenCalled();
42
- expect(onChange).toHaveBeenCalledWith(true);
43
- expect(input.checked).toBe(false);
44
- });
45
- });
package/test/Chip.test.js DELETED
@@ -1,25 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcChip from "../src/chip/Chip";
4
- import icon from "../../app/src/images/invision.svg";
5
-
6
- describe("Chip component tests", () => {
7
- test("Chip renders with correct text", () => {
8
- const { getByText } = render(<DxcChip label="Chip" />);
9
- expect(getByText("Chip")).toBeTruthy();
10
- });
11
- test("Calls correct function when clicking on prefix icon", () => {
12
- const onClick = jest.fn();
13
- const { getByText, getByRole } = render(<DxcChip label="Chip" prefixIconSrc={icon} onClickPrefix={onClick} />);
14
- expect(getByText("Chip")).toBeTruthy();
15
- fireEvent.click(getByRole("img"));
16
- expect(onClick).toHaveBeenCalled();
17
- });
18
- test("Calls correct function when clicking on suffix icon", () => {
19
- const onClick = jest.fn();
20
- const { getByText, getByRole } = render(<DxcChip label="Chip" suffixIconSrc={icon} onClickSuffix={onClick} />);
21
- expect(getByText("Chip")).toBeTruthy();
22
- fireEvent.click(getByRole("img"));
23
- expect(onClick).toHaveBeenCalled();
24
- });
25
- });
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
- });