@dxc-technology/halstack-react 0.0.0-dbd540d → 0.0.0-dfcca07

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 (324) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/V3Select → V3Select}/V3Select.js +33 -127
  4. package/{dist/V3Select → V3Select}/index.d.ts +0 -0
  5. package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +10 -14
  6. package/{dist/V3Textarea → V3Textarea}/index.d.ts +0 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/{dist/accordion → accordion}/Accordion.js +35 -130
  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 +170 -0
  13. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  14. package/accordion-group/types.d.ts +72 -0
  15. package/accordion-group/types.js +5 -0
  16. package/alert/Alert.d.ts +4 -0
  17. package/{dist/alert → alert}/Alert.js +38 -151
  18. package/alert/Alert.stories.tsx +170 -0
  19. package/alert/types.d.ts +49 -0
  20. package/alert/types.js +5 -0
  21. package/badge/Badge.js +59 -0
  22. package/box/Box.d.ts +4 -0
  23. package/{dist/box → box}/Box.js +13 -43
  24. package/box/Box.stories.tsx +132 -0
  25. package/box/types.d.ts +43 -0
  26. package/box/types.js +5 -0
  27. package/button/Button.d.ts +4 -0
  28. package/{dist/button → button}/Button.js +22 -81
  29. package/button/Button.stories.tsx +276 -0
  30. package/button/types.d.ts +57 -0
  31. package/button/types.js +5 -0
  32. package/card/Card.d.ts +4 -0
  33. package/{dist/card → card}/Card.js +33 -123
  34. package/card/Card.stories.tsx +201 -0
  35. package/card/ice-cream.jpg +0 -0
  36. package/card/types.d.ts +67 -0
  37. package/card/types.js +5 -0
  38. package/checkbox/Checkbox.d.ts +4 -0
  39. package/{dist/checkbox → checkbox}/Checkbox.js +13 -59
  40. package/checkbox/Checkbox.stories.tsx +192 -0
  41. package/checkbox/types.d.ts +60 -0
  42. package/checkbox/types.js +5 -0
  43. package/{dist/chip → chip}/Chip.js +17 -61
  44. package/chip/Chip.stories.tsx +121 -0
  45. package/{dist/chip → chip}/index.d.ts +0 -0
  46. package/{dist/common → common}/OpenSans.css +0 -0
  47. package/{dist/common → common}/RequiredComponent.js +3 -11
  48. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  50. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  51. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  52. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  53. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  54. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  55. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  56. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  57. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  58. package/{dist/common → common}/utils.js +0 -0
  59. package/{dist/common → common}/variables.js +72 -68
  60. package/{dist/date → date}/Date.js +16 -22
  61. package/{dist/date → date}/index.d.ts +0 -0
  62. package/date-input/DateInput.d.ts +4 -0
  63. package/{dist/date-input → date-input}/DateInput.js +22 -61
  64. package/date-input/DateInput.stories.tsx +138 -0
  65. package/date-input/types.d.ts +100 -0
  66. package/date-input/types.js +5 -0
  67. package/dialog/Dialog.d.ts +4 -0
  68. package/{dist/dialog → dialog}/Dialog.js +20 -73
  69. package/dialog/Dialog.stories.tsx +212 -0
  70. package/dialog/types.d.ts +43 -0
  71. package/dialog/types.js +5 -0
  72. package/dropdown/Dropdown.d.ts +4 -0
  73. package/{dist/dropdown → dropdown}/Dropdown.js +44 -171
  74. package/dropdown/types.d.ts +89 -0
  75. package/dropdown/types.js +5 -0
  76. package/file-input/FileInput.d.ts +4 -0
  77. package/{dist/file-input → file-input}/FileInput.js +69 -202
  78. package/file-input/FileItem.d.ts +14 -0
  79. package/file-input/FileItem.js +184 -0
  80. package/file-input/types.d.ts +87 -0
  81. package/file-input/types.js +5 -0
  82. package/footer/Footer.d.ts +4 -0
  83. package/{dist/footer → footer}/Footer.js +38 -193
  84. package/footer/Footer.stories.jsx +151 -0
  85. package/{dist/footer → footer}/Icons.js +13 -13
  86. package/footer/types.d.ts +69 -0
  87. package/footer/types.js +5 -0
  88. package/header/Header.d.ts +7 -0
  89. package/{dist/header → header}/Header.js +60 -206
  90. package/header/Header.stories.tsx +162 -0
  91. package/{dist/header → header}/Icons.js +7 -32
  92. package/header/types.d.ts +47 -0
  93. package/header/types.js +5 -0
  94. package/heading/Heading.d.ts +4 -0
  95. package/{dist/heading → heading}/Heading.js +24 -95
  96. package/heading/Heading.stories.tsx +53 -0
  97. package/heading/types.d.ts +33 -0
  98. package/heading/types.js +5 -0
  99. package/{dist/input-text → input-text}/Icons.js +2 -2
  100. package/{dist/input-text → input-text}/InputText.js +36 -130
  101. package/{dist/input-text → input-text}/index.d.ts +1 -1
  102. package/{dist/layout → layout}/ApplicationLayout.js +31 -123
  103. package/{dist/layout → layout}/Icons.js +7 -7
  104. package/link/Link.d.ts +3 -0
  105. package/{dist/link → link}/Link.js +18 -94
  106. package/link/Link.stories.tsx +146 -0
  107. package/link/types.d.ts +74 -0
  108. package/link/types.js +5 -0
  109. package/main.d.ts +44 -0
  110. package/{dist/main.js → main.js} +91 -87
  111. package/number-input/NumberInput.d.ts +4 -0
  112. package/number-input/NumberInput.js +86 -0
  113. package/number-input/NumberInput.stories.tsx +115 -0
  114. package/number-input/NumberInputContext.d.ts +4 -0
  115. package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
  116. package/number-input/numberInputContextTypes.d.ts +19 -0
  117. package/number-input/numberInputContextTypes.js +5 -0
  118. package/number-input/types.d.ts +117 -0
  119. package/number-input/types.js +5 -0
  120. package/package.json +20 -17
  121. package/{dist/paginator → paginator}/Icons.js +9 -9
  122. package/paginator/Paginator.d.ts +4 -0
  123. package/{dist/paginator → paginator}/Paginator.js +24 -131
  124. package/paginator/Paginator.stories.tsx +63 -0
  125. package/paginator/types.d.ts +38 -0
  126. package/paginator/types.js +5 -0
  127. package/password-input/PasswordInput.d.ts +4 -0
  128. package/{dist/password-input → password-input}/PasswordInput.js +22 -61
  129. package/password-input/PasswordInput.stories.tsx +131 -0
  130. package/password-input/types.d.ts +107 -0
  131. package/password-input/types.js +5 -0
  132. package/progress-bar/ProgressBar.d.ts +4 -0
  133. package/{dist/progress-bar → progress-bar}/ProgressBar.js +20 -92
  134. package/progress-bar/ProgressBar.stories.jsx +58 -0
  135. package/progress-bar/types.d.ts +37 -0
  136. package/progress-bar/types.js +5 -0
  137. package/radio/Radio.d.ts +4 -0
  138. package/{dist/radio → radio}/Radio.js +15 -50
  139. package/radio/Radio.stories.tsx +192 -0
  140. package/radio/types.d.ts +54 -0
  141. package/radio/types.js +5 -0
  142. package/resultsetTable/ResultsetTable.d.ts +4 -0
  143. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +38 -145
  144. package/resultsetTable/types.d.ts +67 -0
  145. package/resultsetTable/types.js +5 -0
  146. package/{dist/select → select}/Select.js +248 -479
  147. package/select/Select.stories.tsx +572 -0
  148. package/select/index.d.ts +131 -0
  149. package/sidenav/Sidenav.d.ts +9 -0
  150. package/{dist/sidenav → sidenav}/Sidenav.js +19 -62
  151. package/sidenav/Sidenav.stories.tsx +165 -0
  152. package/sidenav/types.d.ts +50 -0
  153. package/sidenav/types.js +5 -0
  154. package/slider/Slider.d.ts +4 -0
  155. package/{dist/slider → slider}/Slider.js +72 -159
  156. package/slider/Slider.stories.tsx +177 -0
  157. package/slider/types.d.ts +78 -0
  158. package/slider/types.js +5 -0
  159. package/spinner/Spinner.d.ts +4 -0
  160. package/spinner/Spinner.js +250 -0
  161. package/spinner/Spinner.stories.jsx +102 -0
  162. package/spinner/types.d.ts +32 -0
  163. package/spinner/types.js +5 -0
  164. package/switch/Switch.d.ts +4 -0
  165. package/{dist/switch → switch}/Switch.js +26 -69
  166. package/switch/Switch.stories.tsx +160 -0
  167. package/switch/types.d.ts +58 -0
  168. package/switch/types.js +5 -0
  169. package/table/Table.d.ts +4 -0
  170. package/{dist/table → table}/Table.js +10 -24
  171. package/table/Table.stories.jsx +276 -0
  172. package/table/types.d.ts +21 -0
  173. package/table/types.js +5 -0
  174. package/tabs/Tabs.d.ts +4 -0
  175. package/tabs/Tabs.js +213 -0
  176. package/tabs/Tabs.stories.tsx +121 -0
  177. package/tabs/types.d.ts +70 -0
  178. package/tabs/types.js +5 -0
  179. package/tag/Tag.d.ts +4 -0
  180. package/tag/Tag.js +193 -0
  181. package/tag/Tag.stories.tsx +145 -0
  182. package/tag/types.d.ts +60 -0
  183. package/tag/types.js +5 -0
  184. package/text-input/TextInput.d.ts +4 -0
  185. package/{dist/text-input → text-input}/TextInput.js +255 -443
  186. package/text-input/TextInput.stories.tsx +456 -0
  187. package/text-input/types.d.ts +159 -0
  188. package/text-input/types.js +5 -0
  189. package/{dist/textarea → textarea}/Textarea.js +33 -86
  190. package/textarea/Textarea.stories.jsx +135 -0
  191. package/{dist/textarea → textarea}/index.d.ts +18 -8
  192. package/{dist/toggle → toggle}/Toggle.js +15 -49
  193. package/{dist/toggle → toggle}/index.d.ts +0 -0
  194. package/toggle-group/ToggleGroup.d.ts +4 -0
  195. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +28 -138
  196. package/toggle-group/ToggleGroup.stories.tsx +178 -0
  197. package/toggle-group/types.d.ts +84 -0
  198. package/toggle-group/types.js +5 -0
  199. package/{dist/upload → upload}/Upload.js +11 -15
  200. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +13 -37
  201. package/{dist/upload → upload}/buttons-upload/Icons.js +7 -7
  202. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  203. package/{dist/upload → upload}/dragAndDropArea/Icons.js +6 -6
  204. package/upload/file-upload/FileToUpload.js +115 -0
  205. package/{dist/upload → upload}/file-upload/Icons.js +13 -13
  206. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  207. package/{dist/upload → upload}/index.d.ts +0 -0
  208. package/{dist/upload → upload}/transaction/Icons.js +31 -31
  209. package/upload/transaction/Transaction.js +104 -0
  210. package/upload/transactions/Transactions.js +94 -0
  211. package/{dist/useTheme.js → useTheme.js} +0 -0
  212. package/{dist/wizard → wizard}/Icons.js +8 -8
  213. package/wizard/Wizard.d.ts +4 -0
  214. package/{dist/wizard → wizard}/Wizard.js +32 -206
  215. package/wizard/Wizard.stories.jsx +224 -0
  216. package/wizard/types.d.ts +64 -0
  217. package/wizard/types.js +5 -0
  218. package/README.md +0 -66
  219. package/babel.config.js +0 -7
  220. package/dist/BackgroundColorContext.js +0 -46
  221. package/dist/ThemeContext.js +0 -250
  222. package/dist/accordion/index.d.ts +0 -28
  223. package/dist/accordion-group/AccordionGroup.js +0 -186
  224. package/dist/accordion-group/index.d.ts +0 -16
  225. package/dist/alert/index.d.ts +0 -51
  226. package/dist/badge/Badge.js +0 -63
  227. package/dist/box/index.d.ts +0 -25
  228. package/dist/button/index.d.ts +0 -24
  229. package/dist/card/index.d.ts +0 -22
  230. package/dist/checkbox/index.d.ts +0 -24
  231. package/dist/date-input/index.d.ts +0 -95
  232. package/dist/dialog/index.d.ts +0 -18
  233. package/dist/dropdown/index.d.ts +0 -26
  234. package/dist/file-input/FileItem.js +0 -287
  235. package/dist/file-input/index.d.ts +0 -81
  236. package/dist/footer/index.d.ts +0 -25
  237. package/dist/header/index.d.ts +0 -25
  238. package/dist/heading/index.d.ts +0 -17
  239. package/dist/link/index.d.ts +0 -23
  240. package/dist/main.d.ts +0 -40
  241. package/dist/number-input/NumberInput.js +0 -136
  242. package/dist/number-input/index.d.ts +0 -113
  243. package/dist/paginator/index.d.ts +0 -20
  244. package/dist/password-input/index.d.ts +0 -94
  245. package/dist/progress-bar/index.d.ts +0 -18
  246. package/dist/radio/index.d.ts +0 -23
  247. package/dist/resultsetTable/index.d.ts +0 -19
  248. package/dist/select/index.d.ts +0 -53
  249. package/dist/sidenav/index.d.ts +0 -13
  250. package/dist/slider/index.d.ts +0 -29
  251. package/dist/spinner/Spinner.js +0 -381
  252. package/dist/spinner/index.d.ts +0 -17
  253. package/dist/stories/Button.js +0 -71
  254. package/dist/stories/Button.stories.js +0 -55
  255. package/dist/stories/Header.js +0 -67
  256. package/dist/stories/Header.stories.js +0 -31
  257. package/dist/stories/Introduction.stories.mdx +0 -211
  258. package/dist/stories/Page.js +0 -68
  259. package/dist/stories/Page.stories.js +0 -39
  260. package/dist/stories/assets/code-brackets.svg +0 -1
  261. package/dist/stories/assets/colors.svg +0 -1
  262. package/dist/stories/assets/comments.svg +0 -1
  263. package/dist/stories/assets/direction.svg +0 -1
  264. package/dist/stories/assets/flow.svg +0 -1
  265. package/dist/stories/assets/plugin.svg +0 -1
  266. package/dist/stories/assets/repo.svg +0 -1
  267. package/dist/stories/assets/stackalt.svg +0 -1
  268. package/dist/stories/button.css +0 -30
  269. package/dist/stories/header.css +0 -26
  270. package/dist/stories/page.css +0 -69
  271. package/dist/switch/index.d.ts +0 -24
  272. package/dist/table/index.d.ts +0 -13
  273. package/dist/tabs/Tabs.js +0 -343
  274. package/dist/tabs/index.d.ts +0 -19
  275. package/dist/tag/Tag.js +0 -282
  276. package/dist/tag/index.d.ts +0 -24
  277. package/dist/text-input/index.d.ts +0 -135
  278. package/dist/toggle-group/index.d.ts +0 -21
  279. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  280. package/dist/upload/file-upload/FileToUpload.js +0 -189
  281. package/dist/upload/transaction/Transaction.js +0 -148
  282. package/dist/upload/transactions/Transactions.js +0 -138
  283. package/dist/wizard/index.d.ts +0 -18
  284. package/test/Accordion.test.js +0 -33
  285. package/test/AccordionGroup.test.js +0 -125
  286. package/test/Alert.test.js +0 -53
  287. package/test/Box.test.js +0 -10
  288. package/test/Button.test.js +0 -18
  289. package/test/Card.test.js +0 -30
  290. package/test/Checkbox.test.js +0 -45
  291. package/test/Chip.test.js +0 -25
  292. package/test/Date.test.js +0 -395
  293. package/test/DateInput.test.js +0 -242
  294. package/test/Dialog.test.js +0 -23
  295. package/test/Dropdown.test.js +0 -145
  296. package/test/FileInput.test.js +0 -201
  297. package/test/Footer.test.js +0 -94
  298. package/test/Header.test.js +0 -34
  299. package/test/Heading.test.js +0 -83
  300. package/test/InputText.test.js +0 -239
  301. package/test/Link.test.js +0 -43
  302. package/test/NumberInput.test.js +0 -259
  303. package/test/Paginator.test.js +0 -181
  304. package/test/PasswordInput.test.js +0 -83
  305. package/test/ProgressBar.test.js +0 -35
  306. package/test/Radio.test.js +0 -37
  307. package/test/ResultsetTable.test.js +0 -330
  308. package/test/Select.test.js +0 -415
  309. package/test/Sidenav.test.js +0 -45
  310. package/test/Slider.test.js +0 -74
  311. package/test/Spinner.test.js +0 -32
  312. package/test/Switch.test.js +0 -45
  313. package/test/Table.test.js +0 -36
  314. package/test/Tabs.test.js +0 -109
  315. package/test/Tag.test.js +0 -32
  316. package/test/TextInput.test.js +0 -732
  317. package/test/Textarea.test.js +0 -193
  318. package/test/ToggleGroup.test.js +0 -85
  319. package/test/Upload.test.js +0 -60
  320. package/test/V3Select.test.js +0 -212
  321. package/test/V3TextArea.test.js +0 -51
  322. package/test/Wizard.test.js +0 -130
  323. package/test/mocks/pngMock.js +0 -1
  324. package/test/mocks/svgMock.js +0 -1
package/test/Date.test.js DELETED
@@ -1,395 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcDate 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(<DxcDate 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
- <DxcDate 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(<DxcDate 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(<DxcDate 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
- <DxcDate 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(<DxcDate 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
- <DxcDate 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(<DxcDate 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
- <DxcDate 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
- <DxcDate 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
- <DxcDate 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
- <DxcDate 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
- <DxcDate 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(<DxcDate 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(<DxcDate 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(<DxcDate 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(<DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />);
195
- const calendarButton = component.getByTestId("calendarIcon");
196
- fireEvent.click(calendarButton);
197
- const dayButton = component.getByRole("button", { name: "16" });
198
- fireEvent.click(dayButton);
199
- expect(dayButton).toBeTruthy();
200
- });
201
-
202
- test("Check selected date on calendar is the same date as the one on the input", () => {
203
- const component = render(<DxcDate label="Birthdate" value="01-10-2020" />);
204
- const calendarButton = component.getByTestId("calendarIcon");
205
- fireEvent.click(calendarButton);
206
- const dayButton = component.getByRole("button", { name: "1" });
207
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
208
- });
209
- test("onBlur function is called", () => {
210
- const onBlur = jest.fn();
211
- const { getByRole, getByPlaceholderText } = render(
212
- <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
213
- );
214
- // const input = getByRole("textbox");
215
- const input = getByPlaceholderText(defaultFormat);
216
-
217
- fireEvent.blur(input);
218
- expect(onBlur).toHaveBeenCalled();
219
- });
220
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
221
- const onBlur = jest.fn((returnedValue) => {
222
- expect(returnedValue).toBe("30-03-81");
223
- });
224
- const { getByRole, getByPlaceholderText } = render(
225
- <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
226
- );
227
- // const input = getByRole("textbox");
228
- const input = getByPlaceholderText(defaultFormat);
229
-
230
- fireEvent.blur(input);
231
- expect(onBlur).toHaveBeenCalled();
232
- });
233
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
234
- const onBlur = jest.fn((returnedValue) => {
235
- expect(returnedValue).toBe("30/03/81");
236
- });
237
- const { getByRole, getByPlaceholderText } = render(
238
- <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
239
- );
240
- // const input = getByRole("textbox");
241
- const input = getByPlaceholderText("DD/MM/YY");
242
-
243
- fireEvent.blur(input);
244
- expect(onBlur).toHaveBeenCalled();
245
- });
246
- });
247
-
248
- describe("Uncontrolled Date Component", () => {
249
- const date = new Date("2020-10-16 00:00:00");
250
-
251
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
252
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
253
- <DxcDate label="Birthdate" placeholder />
254
- );
255
- // const input = getByRole("textbox");
256
- const input = getByPlaceholderText(defaultFormat);
257
-
258
- fireEvent.change(input, { target: { value: "10-02-2020" } });
259
-
260
- rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
261
- const calendarButton = getByTestId("calendarIcon");
262
- fireEvent.click(calendarButton);
263
- expect(getByText("Mon, Feb 10")).toBeTruthy();
264
- });
265
-
266
- test("onChange function is called when the user types something in the input", () => {
267
- const onChange = jest.fn((returnedValue) => {
268
- expect(returnedValue.dateValue).toBeNull();
269
- expect(returnedValue.stringValue).toBe("something");
270
- });
271
-
272
- const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
273
- // const input = getByRole("textbox");
274
- const input = getByPlaceholderText(defaultFormat);
275
-
276
- fireEvent.change(input, { target: { value: "something" } });
277
- expect(onChange).toHaveBeenCalled();
278
- });
279
- 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)", () => {
280
- const onChange = jest.fn((returnedValue) => {
281
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
282
- expect(returnedValue.stringValue).toBe("16-10-2020");
283
- });
284
-
285
- const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
286
- // const input = getByRole("textbox");
287
- const input = getByPlaceholderText(defaultFormat);
288
-
289
- fireEvent.change(input, { target: { value: "16-10-2020" } });
290
- expect(onChange).toHaveBeenCalled();
291
- });
292
- 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)", () => {
293
- const onChange = jest.fn((returnedValue) => {
294
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
295
- expect(returnedValue.stringValue).toBe("16-10-20");
296
- });
297
-
298
- const { getByRole, getByPlaceholderText } = render(
299
- <DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
300
- );
301
- // const input = getByRole("textbox");
302
- const input = getByPlaceholderText("DD-MM-YY");
303
-
304
- fireEvent.change(input, { target: { value: "16-10-20" } });
305
- expect(onChange).toHaveBeenCalled();
306
- });
307
-
308
- 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)", () => {
309
- const onChange = jest.fn((returnedValue) => {
310
- expect(returnedValue.dateValue).toBeNull();
311
- expect(returnedValue.stringValue).toBe("11-15-2020");
312
- });
313
-
314
- const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
315
- // const input = getByRole("textbox");
316
- const input = getByPlaceholderText(defaultFormat);
317
-
318
- fireEvent.change(input, { target: { value: "11-15-2020" } });
319
- expect(onChange).toHaveBeenCalled();
320
- });
321
-
322
- 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)", () => {
323
- const onChange = jest.fn((returnedValue) => {
324
- expect(returnedValue.dateValue).toBeNull();
325
- expect(returnedValue.stringValue).toBe("15/11/2020");
326
- });
327
-
328
- const { getByRole, getByPlaceholderText } = render(
329
- <DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
330
- );
331
- // const input = getByRole("textbox");
332
- const input = getByPlaceholderText("MM/DD/YYYY");
333
-
334
- fireEvent.change(input, { target: { value: "15/11/2020" } });
335
- expect(onChange).toHaveBeenCalled();
336
- });
337
- test("onChange function is called when the user selects from the calendar", () => {
338
- const onChange = jest.fn();
339
-
340
- const component = render(<DxcDate label="Birthdate" onChange={onChange} />);
341
- const calendarButton = component.getByTestId("calendarIcon");
342
- fireEvent.click(calendarButton);
343
- const dayButton = component.getByRole("button", { name: "10" });
344
- fireEvent.click(dayButton);
345
- expect(dayButton).toBeTruthy();
346
- expect(onChange).toHaveBeenCalled();
347
- });
348
-
349
- test("Check selected date on calendar is the same date as the one on the input", () => {
350
- const component = render(<DxcDate label="Birthdate" placeholder />);
351
- // const input = component.getByRole("textbox");
352
- const input = component.getByPlaceholderText(defaultFormat);
353
-
354
- fireEvent.change(input, { target: { value: "10-02-2020" } });
355
- const calendarButton = component.getByTestId("calendarIcon");
356
- fireEvent.click(calendarButton);
357
- const dayButton = component.getByRole("button", { name: "10" });
358
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
359
- });
360
- test("onBlur function is called", () => {
361
- const onBlur = jest.fn();
362
- const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
363
- // const input = getByRole("textbox");
364
- const input = getByPlaceholderText(defaultFormat);
365
-
366
- fireEvent.blur(input);
367
- expect(onBlur).toHaveBeenCalled();
368
- });
369
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
370
- const onBlur = jest.fn((returnedValue) => {
371
- expect(returnedValue).toBe("10-02-2020");
372
- });
373
- const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
374
- // const input = getByRole("textbox");
375
- const input = getByPlaceholderText("DD-MM-YYYY");
376
-
377
- fireEvent.change(input, { target: { value: "10-02-2020" } });
378
- fireEvent.blur(input);
379
- expect(onBlur).toHaveBeenCalled();
380
- });
381
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
382
- const onBlur = jest.fn((returnedValue) => {
383
- expect(returnedValue).toBe("10/02/20");
384
- });
385
- const { getByRole, getByPlaceholderText } = render(
386
- <DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
387
- );
388
- // const input = getByRole("textbox");
389
- const input = getByPlaceholderText("DD/MM/YY");
390
-
391
- fireEvent.change(input, { target: { value: "10/02/20" } });
392
- fireEvent.blur(input);
393
- expect(onBlur).toHaveBeenCalled();
394
- });
395
- });
@@ -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
- });