@dxc-technology/halstack-react 0.0.0-7da4003 → 0.0.0-7dc5422

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 (359) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +47 -0
  3. package/ThemeContext.d.ts +15 -0
  4. package/ThemeContext.js +243 -0
  5. package/{dist/select/Select.js → V3Select/V3Select.js} +40 -134
  6. package/V3Select/index.d.ts +27 -0
  7. package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +12 -16
  8. package/V3Textarea/index.d.ts +27 -0
  9. package/accordion/Accordion.d.ts +4 -0
  10. package/{dist/accordion → accordion}/Accordion.js +37 -132
  11. package/accordion/Accordion.stories.tsx +307 -0
  12. package/accordion/types.d.ts +68 -0
  13. package/accordion/types.js +5 -0
  14. package/accordion-group/AccordionGroup.d.ts +7 -0
  15. package/accordion-group/AccordionGroup.js +170 -0
  16. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  17. package/accordion-group/types.d.ts +72 -0
  18. package/accordion-group/types.js +5 -0
  19. package/alert/Alert.d.ts +4 -0
  20. package/{dist/alert → alert}/Alert.js +40 -153
  21. package/alert/Alert.stories.tsx +170 -0
  22. package/alert/types.d.ts +49 -0
  23. package/alert/types.js +5 -0
  24. package/badge/Badge.js +59 -0
  25. package/bleed/Bleed.d.ts +3 -0
  26. package/bleed/Bleed.js +84 -0
  27. package/bleed/Bleed.stories.tsx +342 -0
  28. package/bleed/types.d.ts +13 -0
  29. package/bleed/types.js +5 -0
  30. package/box/Box.d.ts +4 -0
  31. package/{dist/box → box}/Box.js +15 -45
  32. package/box/Box.stories.tsx +132 -0
  33. package/box/types.d.ts +43 -0
  34. package/box/types.js +5 -0
  35. package/button/Button.d.ts +4 -0
  36. package/{dist/button → button}/Button.js +27 -94
  37. package/button/Button.stories.tsx +274 -0
  38. package/button/types.d.ts +53 -0
  39. package/button/types.js +5 -0
  40. package/card/Card.d.ts +4 -0
  41. package/{dist/card → card}/Card.js +34 -124
  42. package/card/Card.stories.tsx +201 -0
  43. package/card/ice-cream.jpg +0 -0
  44. package/card/types.d.ts +67 -0
  45. package/card/types.js +5 -0
  46. package/checkbox/Checkbox.d.ts +4 -0
  47. package/{dist/checkbox → checkbox}/Checkbox.js +18 -65
  48. package/checkbox/Checkbox.stories.tsx +192 -0
  49. package/checkbox/types.d.ts +60 -0
  50. package/checkbox/types.js +5 -0
  51. package/chip/Chip.d.ts +4 -0
  52. package/{dist/chip → chip}/Chip.js +22 -88
  53. package/chip/Chip.stories.tsx +121 -0
  54. package/chip/types.d.ts +53 -0
  55. package/chip/types.js +5 -0
  56. package/{dist/common → common}/OpenSans.css +0 -0
  57. package/{dist/common → common}/RequiredComponent.js +3 -11
  58. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  59. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  60. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  61. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  62. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  63. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  64. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  65. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  66. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  67. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  68. package/{dist/common → common}/utils.js +0 -0
  69. package/{dist/common → common}/variables.js +213 -170
  70. package/{dist/date → date}/Date.js +22 -28
  71. package/date/index.d.ts +27 -0
  72. package/date-input/DateInput.d.ts +4 -0
  73. package/{dist/date-input → date-input}/DateInput.js +32 -74
  74. package/date-input/DateInput.stories.tsx +138 -0
  75. package/date-input/types.d.ts +100 -0
  76. package/date-input/types.js +5 -0
  77. package/dialog/Dialog.d.ts +4 -0
  78. package/{dist/dialog → dialog}/Dialog.js +24 -76
  79. package/dialog/Dialog.stories.tsx +212 -0
  80. package/dialog/types.d.ts +43 -0
  81. package/dialog/types.js +5 -0
  82. package/dropdown/Dropdown.d.ts +4 -0
  83. package/{dist/dropdown → dropdown}/Dropdown.js +45 -172
  84. package/dropdown/Dropdown.stories.tsx +247 -0
  85. package/dropdown/types.d.ts +89 -0
  86. package/dropdown/types.js +5 -0
  87. package/file-input/FileInput.d.ts +4 -0
  88. package/file-input/FileInput.js +590 -0
  89. package/file-input/FileInput.stories.tsx +507 -0
  90. package/file-input/FileItem.d.ts +14 -0
  91. package/file-input/FileItem.js +184 -0
  92. package/file-input/types.d.ts +112 -0
  93. package/file-input/types.js +5 -0
  94. package/footer/Footer.d.ts +4 -0
  95. package/footer/Footer.js +260 -0
  96. package/footer/Footer.stories.tsx +130 -0
  97. package/footer/Icons.d.ts +2 -0
  98. package/{dist/footer → footer}/Icons.js +15 -15
  99. package/footer/types.d.ts +65 -0
  100. package/footer/types.js +5 -0
  101. package/header/Header.d.ts +7 -0
  102. package/header/Header.js +324 -0
  103. package/header/Header.stories.tsx +162 -0
  104. package/header/Icons.d.ts +2 -0
  105. package/{dist/header → header}/Icons.js +7 -32
  106. package/header/types.d.ts +47 -0
  107. package/header/types.js +5 -0
  108. package/heading/Heading.d.ts +4 -0
  109. package/{dist/heading → heading}/Heading.js +31 -90
  110. package/heading/Heading.stories.tsx +54 -0
  111. package/heading/types.d.ts +33 -0
  112. package/heading/types.js +5 -0
  113. package/{dist/input-text → input-text}/Icons.js +2 -2
  114. package/{dist/input-text → input-text}/InputText.js +38 -132
  115. package/input-text/index.d.ts +36 -0
  116. package/inset/Inset.d.ts +3 -0
  117. package/inset/Inset.js +84 -0
  118. package/inset/Inset.stories.tsx +229 -0
  119. package/inset/types.d.ts +13 -0
  120. package/inset/types.js +5 -0
  121. package/layout/ApplicationLayout.d.ts +10 -0
  122. package/{dist/layout → layout}/ApplicationLayout.js +39 -141
  123. package/layout/ApplicationLayout.stories.tsx +171 -0
  124. package/{dist/layout → layout}/Icons.js +7 -7
  125. package/layout/types.d.ts +57 -0
  126. package/layout/types.js +5 -0
  127. package/link/Link.d.ts +3 -0
  128. package/{dist/link → link}/Link.js +19 -95
  129. package/link/Link.stories.tsx +146 -0
  130. package/link/types.d.ts +74 -0
  131. package/link/types.js +5 -0
  132. package/list/List.d.ts +8 -0
  133. package/list/List.js +47 -0
  134. package/list/List.stories.tsx +95 -0
  135. package/main.d.ts +48 -0
  136. package/{dist/main.js → main.js} +116 -88
  137. package/number-input/NumberInput.d.ts +4 -0
  138. package/number-input/NumberInput.js +83 -0
  139. package/number-input/NumberInput.stories.tsx +115 -0
  140. package/number-input/NumberInputContext.d.ts +4 -0
  141. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  142. package/number-input/numberInputContextTypes.d.ts +19 -0
  143. package/number-input/numberInputContextTypes.js +5 -0
  144. package/number-input/types.d.ts +117 -0
  145. package/number-input/types.js +5 -0
  146. package/package.json +34 -25
  147. package/{dist/paginator → paginator}/Icons.js +9 -9
  148. package/paginator/Paginator.d.ts +4 -0
  149. package/paginator/Paginator.js +192 -0
  150. package/paginator/Paginator.stories.tsx +63 -0
  151. package/paginator/types.d.ts +38 -0
  152. package/paginator/types.js +5 -0
  153. package/password-input/PasswordInput.d.ts +4 -0
  154. package/{dist/password-input → password-input}/PasswordInput.js +43 -78
  155. package/password-input/PasswordInput.stories.tsx +131 -0
  156. package/password-input/types.d.ts +107 -0
  157. package/password-input/types.js +5 -0
  158. package/progress-bar/ProgressBar.d.ts +4 -0
  159. package/{dist/progress-bar → progress-bar}/ProgressBar.js +22 -94
  160. package/progress-bar/ProgressBar.stories.jsx +58 -0
  161. package/progress-bar/types.d.ts +37 -0
  162. package/progress-bar/types.js +5 -0
  163. package/radio/Radio.d.ts +4 -0
  164. package/{dist/radio → radio}/Radio.js +17 -52
  165. package/radio/Radio.stories.tsx +192 -0
  166. package/radio/types.d.ts +54 -0
  167. package/radio/types.js +5 -0
  168. package/radio-group/Radio.d.ts +4 -0
  169. package/radio-group/Radio.js +130 -0
  170. package/radio-group/RadioGroup.d.ts +4 -0
  171. package/radio-group/RadioGroup.js +268 -0
  172. package/radio-group/RadioGroup.stories.tsx +79 -0
  173. package/radio-group/types.d.ts +36 -0
  174. package/radio-group/types.js +5 -0
  175. package/resultsetTable/ResultsetTable.d.ts +4 -0
  176. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +39 -146
  177. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  178. package/resultsetTable/types.d.ts +67 -0
  179. package/resultsetTable/types.js +5 -0
  180. package/row/Row.d.ts +11 -0
  181. package/row/Row.js +127 -0
  182. package/row/Row.stories.tsx +239 -0
  183. package/select/Select.d.ts +4 -0
  184. package/select/Select.js +863 -0
  185. package/select/Select.stories.tsx +572 -0
  186. package/select/types.d.ts +170 -0
  187. package/select/types.js +5 -0
  188. package/sidenav/Sidenav.d.ts +9 -0
  189. package/{dist/sidenav → sidenav}/Sidenav.js +21 -64
  190. package/sidenav/Sidenav.stories.tsx +182 -0
  191. package/sidenav/types.d.ts +50 -0
  192. package/sidenav/types.js +5 -0
  193. package/slider/Slider.d.ts +4 -0
  194. package/{dist/slider → slider}/Slider.js +74 -161
  195. package/slider/Slider.stories.tsx +177 -0
  196. package/slider/types.d.ts +78 -0
  197. package/slider/types.js +5 -0
  198. package/spinner/Spinner.d.ts +4 -0
  199. package/spinner/Spinner.js +250 -0
  200. package/spinner/Spinner.stories.jsx +103 -0
  201. package/spinner/types.d.ts +32 -0
  202. package/spinner/types.js +5 -0
  203. package/stack/Stack.d.ts +10 -0
  204. package/stack/Stack.js +97 -0
  205. package/stack/Stack.stories.tsx +166 -0
  206. package/switch/Switch.d.ts +4 -0
  207. package/{dist/switch → switch}/Switch.js +28 -71
  208. package/switch/Switch.stories.tsx +160 -0
  209. package/switch/types.d.ts +58 -0
  210. package/switch/types.js +5 -0
  211. package/table/Table.d.ts +4 -0
  212. package/{dist/table → table}/Table.js +12 -26
  213. package/table/Table.stories.jsx +277 -0
  214. package/table/types.d.ts +21 -0
  215. package/table/types.js +5 -0
  216. package/tabs/Tabs.d.ts +4 -0
  217. package/tabs/Tabs.js +213 -0
  218. package/tabs/Tabs.stories.tsx +122 -0
  219. package/tabs/types.d.ts +70 -0
  220. package/tabs/types.js +5 -0
  221. package/tag/Tag.d.ts +4 -0
  222. package/tag/Tag.js +193 -0
  223. package/tag/Tag.stories.tsx +145 -0
  224. package/tag/types.d.ts +60 -0
  225. package/tag/types.js +5 -0
  226. package/text/Text.d.ts +7 -0
  227. package/text/Text.js +30 -0
  228. package/text/Text.stories.tsx +19 -0
  229. package/text-input/TextInput.d.ts +4 -0
  230. package/{dist/text-input → text-input}/TextInput.js +279 -456
  231. package/text-input/TextInput.stories.tsx +456 -0
  232. package/text-input/types.d.ts +159 -0
  233. package/text-input/types.js +5 -0
  234. package/textarea/Textarea.d.ts +4 -0
  235. package/{dist/textarea → textarea}/Textarea.js +38 -123
  236. package/textarea/Textarea.stories.jsx +136 -0
  237. package/textarea/types.d.ts +130 -0
  238. package/textarea/types.js +5 -0
  239. package/{dist/toggle → toggle}/Toggle.js +16 -50
  240. package/toggle/index.d.ts +21 -0
  241. package/toggle-group/ToggleGroup.d.ts +4 -0
  242. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +35 -148
  243. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  244. package/toggle-group/types.d.ts +97 -0
  245. package/toggle-group/types.js +5 -0
  246. package/{dist/upload → upload}/Upload.js +14 -18
  247. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  248. package/{dist/upload → upload}/buttons-upload/Icons.js +7 -7
  249. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  250. package/{dist/upload → upload}/dragAndDropArea/Icons.js +6 -6
  251. package/upload/file-upload/FileToUpload.js +115 -0
  252. package/{dist/upload → upload}/file-upload/Icons.js +13 -13
  253. package/{dist/upload → upload}/files-upload/FilesToUpload.js +13 -27
  254. package/upload/index.d.ts +15 -0
  255. package/{dist/upload → upload}/transaction/Icons.js +31 -31
  256. package/upload/transaction/Transaction.js +104 -0
  257. package/upload/transactions/Transactions.js +94 -0
  258. package/useTheme.d.ts +2 -0
  259. package/{dist/useTheme.js → useTheme.js} +1 -1
  260. package/wizard/Wizard.d.ts +4 -0
  261. package/wizard/Wizard.js +281 -0
  262. package/wizard/Wizard.stories.tsx +224 -0
  263. package/wizard/types.d.ts +60 -0
  264. package/wizard/types.js +5 -0
  265. package/README.md +0 -66
  266. package/babel.config.js +0 -8
  267. package/dist/BackgroundColorContext.js +0 -46
  268. package/dist/ThemeContext.js +0 -248
  269. package/dist/accordion-group/AccordionGroup.js +0 -186
  270. package/dist/alert/index.d.ts +0 -51
  271. package/dist/badge/Badge.js +0 -63
  272. package/dist/checkbox/Checkbox.stories.js +0 -144
  273. package/dist/checkbox/readme.md +0 -116
  274. package/dist/date/Date.stories.js +0 -205
  275. package/dist/date/readme.md +0 -73
  276. package/dist/date-input/index.d.ts +0 -95
  277. package/dist/file-input/FileInput.js +0 -644
  278. package/dist/file-input/FileItem.js +0 -280
  279. package/dist/file-input/index.d.ts +0 -81
  280. package/dist/footer/Footer.js +0 -421
  281. package/dist/header/Header.js +0 -434
  282. package/dist/link/readme.md +0 -51
  283. package/dist/main.d.ts +0 -8
  284. package/dist/new-select/NewSelect.js +0 -836
  285. package/dist/new-select/index.d.ts +0 -53
  286. package/dist/number-input/NumberInput.js +0 -136
  287. package/dist/number-input/index.d.ts +0 -113
  288. package/dist/paginator/Paginator.js +0 -283
  289. package/dist/password-input/index.d.ts +0 -94
  290. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  291. package/dist/progress-bar/readme.md +0 -63
  292. package/dist/radio/Radio.stories.js +0 -166
  293. package/dist/radio/readme.md +0 -70
  294. package/dist/slider/readme.md +0 -64
  295. package/dist/spinner/Spinner.js +0 -381
  296. package/dist/spinner/Spinner.stories.js +0 -183
  297. package/dist/spinner/readme.md +0 -65
  298. package/dist/switch/Switch.stories.js +0 -134
  299. package/dist/switch/readme.md +0 -133
  300. package/dist/tabs/Tabs.js +0 -343
  301. package/dist/tabs/Tabs.stories.js +0 -130
  302. package/dist/tabs/readme.md +0 -78
  303. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  304. package/dist/tabs-for-sections/readme.md +0 -78
  305. package/dist/tag/Tag.js +0 -282
  306. package/dist/text-input/index.d.ts +0 -135
  307. package/dist/textarea/index.d.ts +0 -117
  308. package/dist/toggle/Toggle.stories.js +0 -297
  309. package/dist/toggle/readme.md +0 -80
  310. package/dist/upload/Upload.stories.js +0 -72
  311. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  312. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  313. package/dist/upload/file-upload/FileToUpload.js +0 -189
  314. package/dist/upload/readme.md +0 -37
  315. package/dist/upload/transaction/Transaction.js +0 -148
  316. package/dist/upload/transactions/Transactions.js +0 -138
  317. package/dist/wizard/Icons.js +0 -65
  318. package/dist/wizard/Wizard.js +0 -405
  319. package/test/Accordion.test.js +0 -33
  320. package/test/AccordionGroup.test.js +0 -125
  321. package/test/Alert.test.js +0 -53
  322. package/test/Box.test.js +0 -10
  323. package/test/Button.test.js +0 -18
  324. package/test/Card.test.js +0 -30
  325. package/test/Checkbox.test.js +0 -45
  326. package/test/Chip.test.js +0 -25
  327. package/test/Date.test.js +0 -397
  328. package/test/DateInput.test.js +0 -242
  329. package/test/Dialog.test.js +0 -23
  330. package/test/Dropdown.test.js +0 -145
  331. package/test/FileInput.test.js +0 -201
  332. package/test/Footer.test.js +0 -94
  333. package/test/Header.test.js +0 -34
  334. package/test/Heading.test.js +0 -35
  335. package/test/InputText.test.js +0 -248
  336. package/test/Link.test.js +0 -43
  337. package/test/NumberInput.test.js +0 -259
  338. package/test/Paginator.test.js +0 -177
  339. package/test/PasswordInput.test.js +0 -83
  340. package/test/ProgressBar.test.js +0 -35
  341. package/test/Radio.test.js +0 -37
  342. package/test/ResultsetTable.test.js +0 -329
  343. package/test/Select.test.js +0 -212
  344. package/test/Sidenav.test.js +0 -45
  345. package/test/Slider.test.js +0 -74
  346. package/test/Spinner.test.js +0 -32
  347. package/test/Switch.test.js +0 -45
  348. package/test/Table.test.js +0 -36
  349. package/test/Tabs.test.js +0 -109
  350. package/test/TabsForSections.test.js +0 -34
  351. package/test/Tag.test.js +0 -32
  352. package/test/TextInput.test.js +0 -732
  353. package/test/Textarea.test.js +0 -193
  354. package/test/ToggleGroup.test.js +0 -85
  355. package/test/Upload.test.js +0 -60
  356. package/test/V3TextArea.test.js +0 -51
  357. package/test/Wizard.test.js +0 -130
  358. package/test/mocks/pngMock.js +0 -1
  359. package/test/mocks/svgMock.js +0 -1
@@ -1,259 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcNumberInput from "../src/number-input/NumberInput";
5
-
6
- describe("Number input component tests", () => {
7
- test("Number input renders with label", () => {
8
- const { getByText } = render(<DxcNumberInput label="Number input label" />);
9
- expect(getByText("Number input label")).toBeTruthy();
10
- });
11
-
12
- test("Number input renders with helper text", () => {
13
- const { getByText } = render(<DxcNumberInput helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Number input renders with placeholder", () => {
18
- const { getByLabelText } = render(<DxcNumberInput label="Number label" placeholder="Placeholder" />);
19
- const number = getByLabelText("Number label");
20
- expect(number.getAttribute("placeholder")).toBe("Placeholder");
21
- });
22
-
23
- test("Number input renders increment and decrement buttons", () => {
24
- const { queryAllByRole } = render(<DxcNumberInput label="Number label" />);
25
- expect(queryAllByRole("button").length).toBe(2);
26
- });
27
-
28
- test("Number input is disabled", () => {
29
- const { getByLabelText } = render(<DxcNumberInput label="Number label" disabled />);
30
- const number = getByLabelText("Number label");
31
- expect(number.disabled).toBeTruthy();
32
- });
33
-
34
- test("Number input is optional", () => {
35
- const { getByText } = render(<DxcNumberInput label="Number label" optional />);
36
- expect(getByText("(Optional)")).toBeTruthy();
37
- });
38
-
39
- test("Number input is not optional: required field, displays error if not filled in", () => {
40
- const onBlur = jest.fn();
41
- const onChange = jest.fn();
42
- const { getByRole } = render(<DxcNumberInput onBlur={onBlur} onChange={onChange} />);
43
- const input = getByRole("textbox");
44
-
45
- userEvent.type(input, "1");
46
- userEvent.clear(input);
47
- fireEvent.blur(input);
48
- expect(onBlur).toHaveBeenCalled();
49
- expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
50
- expect(onChange).toHaveBeenCalled();
51
- expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
52
- });
53
-
54
- test("Suffix and prefix must be shown)", () => {
55
- const { getByText } = render(<DxcNumberInput label="Number input label" prefix="+34" suffix="USD" />);
56
- expect(getByText("+34")).toBeTruthy();
57
- expect(getByText("USD")).toBeTruthy();
58
- });
59
-
60
- test("Invalid number input renders error", () => {
61
- const { getByText } = render(<DxcNumberInput error="Error message." />);
62
- expect(getByText("Error message.")).toBeTruthy();
63
- });
64
-
65
- test("onChange function is called correctly", () => {
66
- const onChange = jest.fn();
67
- const { getByLabelText } = render(<DxcNumberInput label="Number input label" onChange={onChange} />);
68
- const number = getByLabelText("Number input label");
69
- userEvent.type(number, "t");
70
- expect(onChange).not.toHaveBeenCalledWith({ value: "t", error: null });
71
- expect(number.value).toBe("");
72
- userEvent.type(number, "1");
73
- expect(onChange).toHaveBeenCalledWith({ value: "1", error: null });
74
- expect(number.value).toBe("1");
75
- });
76
-
77
- test("Error message is shown if the value is less than the min value", () => {
78
- const onChange = jest.fn(({ value, error }) => {
79
- expect(value).toBe("1");
80
- expect(error).toBe("Value must be greater than or equal to 5.");
81
- });
82
- const onBlur = jest.fn(({ value, error }) => {
83
- expect(value).toBe("1");
84
- expect(error).toBe("Value must be greater than or equal to 5.");
85
- });
86
- const { getByLabelText } = render(
87
- <DxcNumberInput label="Number input label" min={5} onBlur={onBlur} onChange={onChange} />
88
- );
89
- const number = getByLabelText("Number input label");
90
-
91
- userEvent.type(number, "1");
92
- fireEvent.blur(number);
93
- });
94
-
95
- test("Cannot decrement the value if it is less than the min value", () => {
96
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" min={5} />);
97
- const number = getByLabelText("Number input label");
98
- userEvent.type(number, "1");
99
- fireEvent.blur(number);
100
- expect(number.value).toBe("1");
101
- const decrement = getAllByRole("button")[0];
102
- userEvent.click(decrement);
103
- expect(number.value).toBe("1");
104
- });
105
-
106
- test("Increment the value when it is less than the min value", () => {
107
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" min={5} />);
108
- const number = getByLabelText("Number input label");
109
- userEvent.type(number, "1");
110
- fireEvent.blur(number);
111
- expect(number.value).toBe("1");
112
- const increment = getAllByRole("button")[1];
113
- userEvent.click(increment);
114
- expect(number.value).toBe("5");
115
- });
116
-
117
- test("Error message is shown if the value is greater than the max value", () => {
118
- const onChange = jest.fn();
119
- const onBlur = jest.fn();
120
- const { getByLabelText } = render(
121
- <DxcNumberInput label="Number input label" max={10} onBlur={onBlur} onChange={onChange} />
122
- );
123
- const number = getByLabelText("Number input label");
124
-
125
- userEvent.type(number, "12");
126
- expect(onChange).toHaveBeenCalledTimes(2);
127
- expect(onChange).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
128
- fireEvent.blur(number);
129
- expect(onBlur).toHaveBeenCalled();
130
- expect(onBlur).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
131
- });
132
-
133
- test("Cannot increment the value if it is greater than the max value", () => {
134
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" max={10} />);
135
- const number = getByLabelText("Number input label");
136
- userEvent.type(number, "12");
137
- fireEvent.blur(number);
138
- expect(number.value).toBe("12");
139
- const decrement = getAllByRole("button")[1];
140
- userEvent.click(decrement);
141
- expect(number.value).toBe("12");
142
- });
143
-
144
- test("Decrement the value when it is greater than the max value", () => {
145
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" max={10} />);
146
- const number = getByLabelText("Number input label");
147
- userEvent.type(number, "12");
148
- fireEvent.blur(number);
149
- expect(number.value).toBe("12");
150
- const decrement = getAllByRole("button")[0];
151
- userEvent.click(decrement);
152
- expect(number.value).toBe("10");
153
- });
154
-
155
- test("Increment and decrement the value with min and max values", () => {
156
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" min={5} max={10} />);
157
- const number = getByLabelText("Number input label");
158
- userEvent.type(number, "1");
159
- fireEvent.blur(number);
160
- expect(number.value).toBe("1");
161
- const decrement = getAllByRole("button")[0];
162
- userEvent.click(decrement);
163
- expect(number.value).toBe("1");
164
- const increment = getAllByRole("button")[1];
165
- userEvent.click(increment);
166
- expect(number.value).toBe("5");
167
- userEvent.click(increment);
168
- userEvent.click(increment);
169
- userEvent.click(increment);
170
- userEvent.click(increment);
171
- userEvent.click(increment);
172
- expect(number.value).toBe("10");
173
- userEvent.click(increment);
174
- expect(number.value).toBe("10");
175
- });
176
-
177
- test("Increment and decrement the value with step", () => {
178
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" step={5} />);
179
- const number = getByLabelText("Number input label");
180
- userEvent.type(number, "10");
181
- fireEvent.blur(number);
182
- expect(number.value).toBe("10");
183
- const increment = getAllByRole("button")[1];
184
- userEvent.click(increment);
185
- expect(number.value).toBe("15");
186
- userEvent.click(increment);
187
- expect(number.value).toBe("20");
188
- const decrement = getAllByRole("button")[0];
189
- userEvent.click(decrement);
190
- expect(number.value).toBe("15");
191
- userEvent.click(decrement);
192
- expect(number.value).toBe("10");
193
- });
194
-
195
- test("Increment and decrement the value with min, max and step", () => {
196
- const onBlur = jest.fn(({ value, error }) => {
197
- expect(value).toBe("1");
198
- expect(error).toBe("Value must be greater than or equal to 5.");
199
- });
200
- const { getByLabelText, getAllByRole } = render(
201
- <DxcNumberInput label="Number input label" min={5} max={20} step={8} onBlur={onBlur} />
202
- );
203
- const number = getByLabelText("Number input label");
204
- userEvent.type(number, "1");
205
- fireEvent.blur(number);
206
- const increment = getAllByRole("button")[1];
207
- userEvent.click(increment);
208
- expect(number.value).toBe("5");
209
- userEvent.click(increment);
210
- expect(number.value).toBe("13");
211
- userEvent.click(increment);
212
- expect(number.value).toBe("20");
213
- userEvent.click(increment);
214
- expect(number.value).toBe("20");
215
- const decrement = getAllByRole("button")[0];
216
- userEvent.click(decrement);
217
- expect(number.value).toBe("12");
218
- userEvent.click(decrement);
219
- expect(number.value).toBe("5");
220
- userEvent.click(decrement);
221
- expect(number.value).toBe("5");
222
- });
223
-
224
- test("Increment and decrement the value with min, max and step using the arrows in keyboard", () => {
225
- const { getByLabelText } = render(<DxcNumberInput label="Number input label" min={5} max={20} step={5} />);
226
- const number = getByLabelText("Number input label");
227
- userEvent.type(number, "1");
228
- fireEvent.keyDown(number, { keyCode: 38 });
229
- expect(number.value).toBe("5");
230
- fireEvent.keyDown(number, { keyCode: 38 });
231
- expect(number.value).toBe("10");
232
- fireEvent.keyDown(number, { keyCode: 38 });
233
- expect(number.value).toBe("15");
234
- fireEvent.keyDown(number, { keyCode: 38 });
235
- expect(number.value).toBe("20");
236
- fireEvent.keyDown(number, { keyCode: 38 });
237
- expect(number.value).toBe("20");
238
- fireEvent.keyDown(number, { keyCode: 40 });
239
- expect(number.value).toBe("15");
240
- fireEvent.keyDown(number, { keyCode: 40 });
241
- expect(number.value).toBe("10");
242
- fireEvent.keyDown(number, { keyCode: 40 });
243
- expect(number.value).toBe("5");
244
- fireEvent.keyDown(number, { keyCode: 40 });
245
- expect(number.value).toBe("5");
246
- });
247
-
248
- test("Number has correct accesibility attributes", () => {
249
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" />);
250
- const number = getByLabelText("Number input label");
251
- expect(number.getAttribute("aria-autocomplete")).toBeNull();
252
- expect(number.getAttribute("aria-controls")).toBeNull();
253
- expect(number.getAttribute("aria-expanded")).toBeNull();
254
- const decrement = getAllByRole("button")[0];
255
- expect(decrement.getAttribute("aria-label")).toBe("Decrement");
256
- const increment = getAllByRole("button")[1];
257
- expect(increment.getAttribute("aria-label")).toBe("Increment");
258
- });
259
- });
@@ -1,177 +0,0 @@
1
- import React from "react";
2
- import { render, act } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcPaginator from "../src/paginator/Paginator";
5
-
6
- describe("Paginator component tests", () => {
7
- test("Paginator renders with default values", () => {
8
- const { getByText } = render(<DxcPaginator></DxcPaginator>);
9
- expect(getByText("1 to 1 of 1")).toBeTruthy();
10
- expect(getByText("Page: 1 of 1")).toBeTruthy();
11
- });
12
-
13
- test("Paginator renders with currentPage", () => {
14
- const { getByText } = render(<DxcPaginator currentPage={2}></DxcPaginator>);
15
- expect(getByText("Page: 2 of 1")).toBeTruthy();
16
- });
17
-
18
- test("Paginator renders with itemsPerPageOptions", () => {
19
- const { getByText } = render(
20
- <DxcPaginator currentPage={1} itemsPerPage={10} itemsPerPageOptions={[10, 15]} totalItems={20}></DxcPaginator>
21
- );
22
- expect(getByText("Items per page")).toBeTruthy();
23
- });
24
-
25
- test("Paginator renders with itemsPerPageOptions", () => {
26
- const { getByText } = render(<DxcPaginator currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>);
27
- expect(getByText("1 to 10 of 20")).toBeTruthy();
28
- expect(getByText("Page: 1 of 2")).toBeTruthy();
29
- });
30
-
31
- test("Paginator renders with totalItems", () => {
32
- const { getByText } = render(<DxcPaginator totalItems={20}></DxcPaginator>);
33
- expect(getByText("1 to 5 of 20")).toBeTruthy();
34
- expect(getByText("Page: 1 of 4")).toBeTruthy();
35
- });
36
-
37
- test("Paginator renders with correct text in second page", () => {
38
- const { getByText } = render(<DxcPaginator currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>);
39
- expect(getByText("11 to 20 of 20")).toBeTruthy();
40
- expect(getByText("Page: 2 of 2")).toBeTruthy();
41
- });
42
-
43
- test("Paginator renders goToPage select", () => {
44
- const { getByText } = render(
45
- <DxcPaginator currentPage={2} showGoToPage={true} itemsPerPage={10} totalItems={20}></DxcPaginator>
46
- );
47
- expect(getByText("Go to page:")).toBeTruthy();
48
- });
49
-
50
- test("Paginator goToPage call correct function", () => {
51
- const onClick = jest.fn();
52
- const { getByText, getAllByRole, getByRole } = render(
53
- <DxcPaginator
54
- currentPage={1}
55
- itemsPerPage={10}
56
- totalItems={27}
57
- showGoToPage={true}
58
- onPageChange={onClick}
59
- ></DxcPaginator>
60
- );
61
- const goToPageSelect = getAllByRole("button")[2];
62
- act(() => {
63
- userEvent.click(goToPageSelect);
64
- });
65
- const goToPageOption = getByText("2");
66
- act(() => {
67
- userEvent.click(goToPageOption);
68
- });
69
- expect(onClick).toHaveBeenCalledWith(2);
70
- });
71
-
72
- test("Call correct goToPageFunction", () => {
73
- const onClick = jest.fn();
74
- const { getAllByRole } = render(
75
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
76
- );
77
- const nextButton = getAllByRole("button")[2];
78
- userEvent.click(nextButton);
79
- expect(onClick).toHaveBeenCalled();
80
- });
81
-
82
- test("Call correct itemsPerPageFunction", () => {
83
- const onClick = jest.fn();
84
- const { getAllByText, getByText } = render(
85
- <DxcPaginator
86
- currentPage={1}
87
- itemsPerPage={10}
88
- itemsPerPageOptions={[10, 15]}
89
- itemsPerPageFunction={onClick}
90
- totalItems={20}
91
- ></DxcPaginator>
92
- );
93
- const select = getAllByText("10")[0];
94
- act(() => {
95
- userEvent.click(select);
96
- });
97
- const itemPerPageOption = getByText("15");
98
- act(() => {
99
- userEvent.click(itemPerPageOption);
100
- });
101
- expect(onClick).toHaveBeenCalledWith(15);
102
- });
103
-
104
- test("Next button is disable in last page", () => {
105
- const onClick = jest.fn();
106
- const { getAllByRole } = render(
107
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
108
- );
109
- const nextButton = getAllByRole("button")[2];
110
- expect(nextButton.hasAttribute("disabled")).toBeTruthy();
111
- userEvent.click(nextButton);
112
- expect(onClick).toHaveBeenCalledTimes(0);
113
- });
114
-
115
- test("Last button is disable in last page", () => {
116
- const onClick = jest.fn();
117
- const { getAllByRole } = render(
118
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
119
- );
120
- const lastButton = getAllByRole("button")[3];
121
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
122
- userEvent.click(lastButton);
123
- expect(onClick).toHaveBeenCalledTimes(0);
124
- });
125
-
126
- test("First button is disable in first page", () => {
127
- const onClick = jest.fn();
128
- const { getAllByRole } = render(
129
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
130
- );
131
- const lastButton = getAllByRole("button")[0];
132
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
133
- userEvent.click(lastButton);
134
- expect(onClick).toHaveBeenCalledTimes(0);
135
- });
136
-
137
- test("Previous button is disable in first page", () => {
138
- const onClick = jest.fn();
139
- const { getAllByRole } = render(
140
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
141
- );
142
- const lastButton = getAllByRole("button")[1];
143
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
144
- userEvent.click(lastButton);
145
- expect(onClick).toHaveBeenCalledTimes(0);
146
- });
147
-
148
- test("Last and next buttons are disable in last page", () => {
149
- const onClick = jest.fn();
150
- const { getAllByRole } = render(
151
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
152
- );
153
- const firstButton = getAllByRole("button")[0];
154
- const prevButton = getAllByRole("button")[1];
155
- const nextButton = getAllByRole("button")[2];
156
- const lastButton = getAllByRole("button")[3];
157
- expect(firstButton.hasAttribute("disabled")).toBeFalsy();
158
- expect(prevButton.hasAttribute("disabled")).toBeFalsy();
159
- expect(nextButton.hasAttribute("disabled")).toBeTruthy();
160
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
161
- });
162
-
163
- test("First and previous buttons are disable in first page", () => {
164
- const onClick = jest.fn();
165
- const { getAllByRole } = render(
166
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
167
- );
168
- const firstButton = getAllByRole("button")[0];
169
- const prevButton = getAllByRole("button")[1];
170
- const nextButton = getAllByRole("button")[2];
171
- const lastButton = getAllByRole("button")[3];
172
- expect(firstButton.hasAttribute("disabled")).toBeTruthy();
173
- expect(prevButton.hasAttribute("disabled")).toBeTruthy();
174
- expect(nextButton.hasAttribute("disabled")).toBeFalsy();
175
- expect(lastButton.hasAttribute("disabled")).toBeFalsy();
176
- });
177
- });
@@ -1,83 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcPasswordInput from "../src/password-input/PasswordInput";
5
-
6
- describe("Password input component tests", () => {
7
- test("Password input renders with label", () => {
8
- const { getByText } = render(<DxcPasswordInput label="Password input label" />);
9
- expect(getByText("Password input label")).toBeTruthy();
10
- });
11
-
12
- test("Password input renders with helper text", () => {
13
- const { getByText } = render(<DxcPasswordInput helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Password input renders error", () => {
18
- const { getByText } = render(<DxcPasswordInput error="Error message." />);
19
- expect(getByText("Error message.")).toBeTruthy();
20
- });
21
-
22
- test("onChange function is called correctly", () => {
23
- const onChange = jest.fn();
24
- const { getByRole } = render(<DxcPasswordInput label="Password input" onChange={onChange} />);
25
- const passwordInput = getByRole("textbox");
26
- userEvent.type(passwordInput, "Pa$$w0rd");
27
- expect(onChange).toHaveBeenCalledWith({ value: "P", error: null });
28
- expect(passwordInput.value).toBe("Pa$$w0rd");
29
- });
30
-
31
- test("onBlur function is called correctly", () => {
32
- const onBlur = jest.fn();
33
- const { getByRole } = render(<DxcPasswordInput label="Password input" onBlur={onBlur} />);
34
- const passwordInput = getByRole("textbox");
35
- userEvent.type(passwordInput, "Pa$$w0rd");
36
- fireEvent.blur(passwordInput);
37
- expect(onBlur).toHaveBeenCalledWith({ value: "Pa$$w0rd", error: null });
38
- expect(passwordInput.value).toBe("Pa$$w0rd");
39
- });
40
-
41
- test("Clear password input value", () => {
42
- const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
43
- const passwordInput = getByRole("textbox");
44
- userEvent.type(passwordInput, "Pa$$w0rd");
45
- expect(passwordInput.value).toBe("Pa$$w0rd");
46
- const clearButton = getAllByRole("button")[0];
47
- userEvent.click(clearButton);
48
- expect(passwordInput.value).toBe("");
49
- });
50
-
51
- test("Non clearable password input has no clear icon", () => {
52
- const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" />);
53
- const passwordInput = getByRole("textbox");
54
- userEvent.type(passwordInput, "Pa$$w0rd");
55
- expect(passwordInput.value).toBe("Pa$$w0rd");
56
- const buttons = getAllByRole("button");
57
- expect(buttons.length).toBe(1);
58
- });
59
-
60
- test("Show/hide password input button works correctly", () => {
61
- const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
62
- const passwordInput = getByRole("textbox");
63
- userEvent.type(passwordInput, "Pa$$w0rd");
64
- expect(passwordInput.value).toBe("Pa$$w0rd");
65
- expect(passwordInput.type).toBe("password");
66
- const showButton = getAllByRole("button")[1];
67
- userEvent.click(showButton);
68
- expect(passwordInput.type).toBe("text");
69
- });
70
-
71
- test("Password input has correct accesibility attributes", () => {
72
- const { getByRole } = render(<DxcPasswordInput label="Password input" />);
73
- const passwordInput = getByRole("textbox");
74
- expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
75
- expect(passwordInput.getAttribute("aria-controls")).toBeNull();
76
- const showButton = getByRole("button");
77
- expect(showButton.getAttribute("aria-expanded")).toBe("false");
78
- expect(showButton.getAttribute("aria-label")).toBe("Show");
79
- userEvent.click(showButton);
80
- expect(showButton.getAttribute("aria-expanded")).toBe("true");
81
- expect(showButton.getAttribute("aria-label")).toBe("Hide");
82
- });
83
- });
@@ -1,35 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import DxcProgressBar from "../src/progress-bar/ProgressBar";
4
-
5
- describe("ProgressBar component tests", () => {
6
- test("ProgressBar renders with label", () => {
7
- const { getByText } = render(<DxcProgressBar label="test-label"></DxcProgressBar>);
8
- expect(getByText("test-label")).toBeTruthy();
9
- });
10
-
11
- test("Overlay progressBar renders with label", () => {
12
- const { getByText } = render(<DxcProgressBar label="test-label" overlay></DxcProgressBar>);
13
- expect(getByText("test-label")).toBeTruthy();
14
- });
15
-
16
- test("ProgressBar renders with default value", () => {
17
- const { getByText } = render(<DxcProgressBar showValue></DxcProgressBar>);
18
- expect(getByText("100 %")).toBeTruthy();
19
- });
20
-
21
- test("Overlay progressBar renders with default value", () => {
22
- const { getByText } = render(<DxcProgressBar showValue overlay></DxcProgressBar>);
23
- expect(getByText("100 %")).toBeTruthy();
24
- });
25
-
26
- test("ProgressBar renders with value", () => {
27
- const { getByText } = render(<DxcProgressBar showValue value={25}></DxcProgressBar>);
28
- expect(getByText("25 %")).toBeTruthy();
29
- });
30
-
31
- test("Overlay progressBar renders with value", () => {
32
- const { getByText } = render(<DxcProgressBar showValue value={25} overlay></DxcProgressBar>);
33
- expect(getByText("25 %")).toBeTruthy();
34
- });
35
- });
@@ -1,37 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcRadio from "../src/radio/Radio";
4
-
5
- describe("Radio component tests", () => {
6
- test("Radio renders correctly", () => {
7
- const { getByText } = render(<DxcRadio label="Radio button" />);
8
- expect(getByText("Radio button")).toBeTruthy();
9
- });
10
- test("Calls correct function on click", () => {
11
- const onClick = jest.fn();
12
- const { getByText} = render(<DxcRadio label="Radio button" onClick={onClick} />);
13
- fireEvent.click(getByText("Radio button"));
14
-
15
- expect(onClick).toHaveBeenCalled();
16
- expect(onClick).toHaveBeenCalledWith(true);
17
- });
18
- test("Controlled Radio", () => {
19
- const onClick = jest.fn();
20
- const { getByText, getByRole } = render(<DxcRadio label="Radio button" checked={false} onClick={onClick} />);
21
- expect(getByRole("radio").checked).toBe(false);
22
- fireEvent.click(getByText("Radio button"));
23
- expect(onClick).toHaveBeenCalled();
24
- expect(onClick).toHaveBeenCalledWith(true);
25
- expect(getByRole("radio").checked).toBe(false);
26
- });
27
- test("Uncontrolled Radio", () => {
28
- const onClick = jest.fn();
29
- const { getByText, getByRole } = render(<DxcRadio label="Radio button" onClick={onClick} />);
30
- expect(getByRole("radio").checked).toBe(false);
31
- fireEvent.click(getByText("Radio button"));
32
- expect(onClick).toHaveBeenCalled();
33
- expect(onClick).toHaveBeenCalledWith(true);
34
- expect(getByRole("radio").checked).toBe(false);
35
- });
36
-
37
- });