@dxc-technology/halstack-react 0.0.0-8d633bd → 0.0.0-8d998c7

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