@dxc-technology/halstack-react 0.0.0-12908ef → 0.0.0-13df478

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