@dxc-technology/halstack-react 0.0.0-ccdec40 → 0.0.0-cd617f3

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 (308) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +260 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +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/alert/Alert.js +290 -0
  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 +38 -34
  21. package/box/index.d.ts +25 -0
  22. package/button/Button.d.ts +4 -0
  23. package/button/Button.js +182 -0
  24. package/button/Button.stories.tsx +293 -0
  25. package/button/types.d.ts +57 -0
  26. package/button/types.js +5 -0
  27. package/card/Card.js +200 -0
  28. package/card/index.d.ts +22 -0
  29. package/checkbox/Checkbox.d.ts +4 -0
  30. package/checkbox/Checkbox.js +253 -0
  31. package/checkbox/types.d.ts +61 -0
  32. package/checkbox/types.js +5 -0
  33. package/chip/Chip.js +221 -0
  34. package/chip/index.d.ts +22 -0
  35. package/{dist/common → common}/OpenSans.css +0 -0
  36. package/{dist/common → common}/RequiredComponent.js +5 -19
  37. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  39. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  47. package/common/utils.js +22 -0
  48. package/common/variables.js +1569 -0
  49. package/{dist/date → date}/Date.js +87 -70
  50. package/date/index.d.ts +27 -0
  51. package/date-input/DateInput.d.ts +4 -0
  52. package/date-input/DateInput.js +361 -0
  53. package/date-input/types.d.ts +100 -0
  54. package/date-input/types.js +5 -0
  55. package/dialog/Dialog.js +184 -0
  56. package/dialog/index.d.ts +18 -0
  57. package/dropdown/Dropdown.js +450 -0
  58. package/dropdown/index.d.ts +26 -0
  59. package/file-input/FileInput.js +532 -0
  60. package/file-input/FileItem.js +193 -0
  61. package/file-input/index.d.ts +81 -0
  62. package/footer/Footer.js +297 -0
  63. package/footer/Icons.js +77 -0
  64. package/footer/index.d.ts +25 -0
  65. package/header/Header.js +326 -0
  66. package/header/Icons.js +59 -0
  67. package/header/index.d.ts +25 -0
  68. package/heading/Heading.js +176 -0
  69. package/heading/index.d.ts +17 -0
  70. package/input-text/Icons.js +22 -0
  71. package/input-text/InputText.js +611 -0
  72. package/input-text/index.d.ts +36 -0
  73. package/{dist/layout → layout}/ApplicationLayout.js +43 -142
  74. package/layout/Icons.js +55 -0
  75. package/link/Link.js +183 -0
  76. package/link/index.d.ts +23 -0
  77. package/main.d.ts +44 -0
  78. package/{dist/main.js → main.js} +137 -53
  79. package/number-input/NumberInput.js +128 -0
  80. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  81. package/number-input/index.d.ts +113 -0
  82. package/package.json +37 -23
  83. package/paginator/Icons.js +66 -0
  84. package/paginator/Paginator.d.ts +4 -0
  85. package/paginator/Paginator.js +198 -0
  86. package/paginator/types.d.ts +38 -0
  87. package/paginator/types.js +5 -0
  88. package/password-input/PasswordInput.js +199 -0
  89. package/password-input/PasswordInput.stories.jsx +131 -0
  90. package/password-input/index.d.ts +94 -0
  91. package/progress-bar/ProgressBar.js +188 -0
  92. package/progress-bar/index.d.ts +18 -0
  93. package/radio/Radio.d.ts +4 -0
  94. package/radio/Radio.js +174 -0
  95. package/radio/types.d.ts +54 -0
  96. package/radio/types.js +5 -0
  97. package/resultsetTable/ResultsetTable.js +274 -0
  98. package/resultsetTable/index.d.ts +19 -0
  99. package/select/Select.js +865 -0
  100. package/select/index.d.ts +131 -0
  101. package/sidenav/Sidenav.js +145 -0
  102. package/sidenav/index.d.ts +13 -0
  103. package/slider/Slider.js +340 -0
  104. package/slider/index.d.ts +29 -0
  105. package/spinner/Spinner.js +267 -0
  106. package/spinner/index.d.ts +17 -0
  107. package/switch/Switch.d.ts +4 -0
  108. package/switch/Switch.js +179 -0
  109. package/switch/types.d.ts +58 -0
  110. package/switch/types.js +5 -0
  111. package/table/Table.js +118 -0
  112. package/table/index.d.ts +13 -0
  113. package/tabs/Tabs.js +259 -0
  114. package/tabs/index.d.ts +19 -0
  115. package/tag/Tag.js +208 -0
  116. package/tag/index.d.ts +24 -0
  117. package/text-input/TextInput.js +825 -0
  118. package/text-input/index.d.ts +135 -0
  119. package/textarea/Textarea.js +317 -0
  120. package/textarea/index.d.ts +117 -0
  121. package/{dist/toggle → toggle}/Toggle.js +30 -67
  122. package/toggle/index.d.ts +21 -0
  123. package/toggle-group/ToggleGroup.js +243 -0
  124. package/toggle-group/index.d.ts +21 -0
  125. package/{dist/upload → upload}/Upload.js +23 -22
  126. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  127. package/upload/buttons-upload/Icons.js +40 -0
  128. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  129. package/upload/dragAndDropArea/Icons.js +39 -0
  130. package/upload/file-upload/FileToUpload.js +115 -0
  131. package/upload/file-upload/Icons.js +66 -0
  132. package/upload/files-upload/FilesToUpload.js +109 -0
  133. package/upload/index.d.ts +15 -0
  134. package/upload/transaction/Icons.js +160 -0
  135. package/upload/transaction/Transaction.js +104 -0
  136. package/upload/transactions/Transactions.js +94 -0
  137. package/useTheme.js +22 -0
  138. package/wizard/Icons.js +65 -0
  139. package/wizard/Wizard.js +271 -0
  140. package/wizard/index.d.ts +18 -0
  141. package/README.md +0 -66
  142. package/babel.config.js +0 -4
  143. package/dist/accordion/Accordion.js +0 -248
  144. package/dist/accordion/Accordion.stories.js +0 -207
  145. package/dist/accordion/readme.md +0 -96
  146. package/dist/alert/Alert.js +0 -304
  147. package/dist/alert/Alert.stories.js +0 -158
  148. package/dist/alert/close.svg +0 -4
  149. package/dist/alert/error.svg +0 -4
  150. package/dist/alert/info.svg +0 -4
  151. package/dist/alert/readme.md +0 -43
  152. package/dist/alert/success.svg +0 -4
  153. package/dist/alert/warning.svg +0 -4
  154. package/dist/button/Button.js +0 -181
  155. package/dist/button/Button.stories.js +0 -224
  156. package/dist/button/readme.md +0 -93
  157. package/dist/card/Card.js +0 -217
  158. package/dist/checkbox/Checkbox.js +0 -240
  159. package/dist/checkbox/Checkbox.stories.js +0 -144
  160. package/dist/checkbox/readme.md +0 -116
  161. package/dist/chip/Chip.js +0 -173
  162. package/dist/common/services/example-service.js +0 -10
  163. package/dist/common/services/example-service.test.js +0 -12
  164. package/dist/common/utils.js +0 -42
  165. package/dist/common/variables.js +0 -434
  166. package/dist/date/Date.stories.js +0 -205
  167. package/dist/date/calendar.svg +0 -1
  168. package/dist/date/calendar_dark.svg +0 -1
  169. package/dist/date/readme.md +0 -73
  170. package/dist/dialog/Dialog.js +0 -197
  171. package/dist/dialog/Dialog.stories.js +0 -217
  172. package/dist/dialog/readme.md +0 -32
  173. package/dist/dropdown/Dropdown.js +0 -416
  174. package/dist/dropdown/Dropdown.stories.js +0 -249
  175. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  176. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  177. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  178. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  179. package/dist/dropdown/readme.md +0 -69
  180. package/dist/footer/Footer.js +0 -346
  181. package/dist/footer/Footer.stories.js +0 -94
  182. package/dist/footer/dxc_logo_wht.png +0 -0
  183. package/dist/footer/readme.md +0 -41
  184. package/dist/header/Header.js +0 -360
  185. package/dist/header/Header.stories.js +0 -176
  186. package/dist/header/close_icon.svg +0 -1
  187. package/dist/header/dxc_logo_black.png +0 -0
  188. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  189. package/dist/header/dxc_logo_white.png +0 -0
  190. package/dist/header/hamb_menu_black.svg +0 -1
  191. package/dist/header/hamb_menu_white.svg +0 -1
  192. package/dist/header/readme.md +0 -33
  193. package/dist/heading/Heading.js +0 -153
  194. package/dist/input-text/InputText.js +0 -519
  195. package/dist/input-text/InputText.stories.js +0 -209
  196. package/dist/input-text/error.svg +0 -1
  197. package/dist/input-text/readme.md +0 -91
  198. package/dist/layout/facebook.svg +0 -45
  199. package/dist/layout/linkedin.svg +0 -50
  200. package/dist/layout/twitter.svg +0 -53
  201. package/dist/link/Link.js +0 -168
  202. package/dist/link/readme.md +0 -51
  203. package/dist/paginator/Paginator.js +0 -196
  204. package/dist/paginator/images/next.svg +0 -3
  205. package/dist/paginator/images/nextPage.svg +0 -3
  206. package/dist/paginator/images/previous.svg +0 -3
  207. package/dist/paginator/images/previousPage.svg +0 -3
  208. package/dist/paginator/readme.md +0 -50
  209. package/dist/progress-bar/ProgressBar.js +0 -185
  210. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  211. package/dist/progress-bar/readme.md +0 -63
  212. package/dist/radio/Radio.js +0 -195
  213. package/dist/radio/Radio.stories.js +0 -166
  214. package/dist/radio/readme.md +0 -70
  215. package/dist/resultsetTable/ResultsetTable.js +0 -333
  216. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  217. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  218. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  219. package/dist/select/Select.js +0 -453
  220. package/dist/select/Select.stories.js +0 -235
  221. package/dist/select/readme.md +0 -72
  222. package/dist/sidenav/Sidenav.js +0 -69
  223. package/dist/slider/Slider.js +0 -266
  224. package/dist/slider/Slider.stories.js +0 -241
  225. package/dist/slider/readme.md +0 -64
  226. package/dist/spinner/Spinner.js +0 -193
  227. package/dist/spinner/Spinner.stories.js +0 -183
  228. package/dist/spinner/readme.md +0 -65
  229. package/dist/switch/Switch.js +0 -199
  230. package/dist/switch/Switch.stories.js +0 -134
  231. package/dist/switch/readme.md +0 -133
  232. package/dist/table/Table.js +0 -105
  233. package/dist/tabs/Tabs.js +0 -172
  234. package/dist/tabs/Tabs.stories.js +0 -130
  235. package/dist/tabs/readme.md +0 -78
  236. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  237. package/dist/tabs-for-sections/readme.md +0 -78
  238. package/dist/tag/Tag.js +0 -234
  239. package/dist/textarea/Textarea.js +0 -227
  240. package/dist/toggle/Toggle.stories.js +0 -297
  241. package/dist/toggle/readme.md +0 -80
  242. package/dist/toggle-group/ToggleGroup.js +0 -214
  243. package/dist/toggle-group/readme.md +0 -82
  244. package/dist/upload/Upload.stories.js +0 -72
  245. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  246. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  247. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  248. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  249. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  250. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  251. package/dist/upload/file-upload/FileToUpload.js +0 -158
  252. package/dist/upload/file-upload/audio-icon.svg +0 -4
  253. package/dist/upload/file-upload/close.svg +0 -4
  254. package/dist/upload/file-upload/file-icon.svg +0 -4
  255. package/dist/upload/file-upload/video-icon.svg +0 -4
  256. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  257. package/dist/upload/readme.md +0 -37
  258. package/dist/upload/transaction/Transaction.js +0 -155
  259. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  260. package/dist/upload/transaction/audio-icon.svg +0 -4
  261. package/dist/upload/transaction/error-icon.svg +0 -4
  262. package/dist/upload/transaction/file-icon-err.svg +0 -4
  263. package/dist/upload/transaction/file-icon.svg +0 -4
  264. package/dist/upload/transaction/image-icon-err.svg +0 -4
  265. package/dist/upload/transaction/image-icon.svg +0 -4
  266. package/dist/upload/transaction/success-icon.svg +0 -4
  267. package/dist/upload/transaction/video-icon-err.svg +0 -4
  268. package/dist/upload/transaction/video-icon.svg +0 -4
  269. package/dist/upload/transactions/Transactions.js +0 -120
  270. package/dist/wizard/Wizard.js +0 -327
  271. package/dist/wizard/invalid_icon.svg +0 -6
  272. package/dist/wizard/valid_icon.svg +0 -6
  273. package/dist/wizard/validation-wrong.svg +0 -6
  274. package/test/Accordion.test.js +0 -33
  275. package/test/Alert.test.js +0 -53
  276. package/test/Box.test.js +0 -10
  277. package/test/Button.test.js +0 -18
  278. package/test/Card.test.js +0 -30
  279. package/test/Checkbox.test.js +0 -45
  280. package/test/Chip.test.js +0 -25
  281. package/test/Date.test.js +0 -393
  282. package/test/Dialog.test.js +0 -23
  283. package/test/Dropdown.test.js +0 -130
  284. package/test/Footer.test.js +0 -99
  285. package/test/Header.test.js +0 -39
  286. package/test/Heading.test.js +0 -35
  287. package/test/InputText.test.js +0 -236
  288. package/test/Link.test.js +0 -33
  289. package/test/Paginator.test.js +0 -165
  290. package/test/ProgressBar.test.js +0 -35
  291. package/test/Radio.test.js +0 -37
  292. package/test/ResultsetTable.test.js +0 -282
  293. package/test/Select.test.js +0 -191
  294. package/test/Sidenav.test.js +0 -19
  295. package/test/Slider.test.js +0 -82
  296. package/test/Spinner.test.js +0 -27
  297. package/test/Switch.test.js +0 -45
  298. package/test/Table.test.js +0 -36
  299. package/test/Tabs.test.js +0 -88
  300. package/test/TabsForSections.test.js +0 -34
  301. package/test/Tag.test.js +0 -32
  302. package/test/TextArea.test.js +0 -52
  303. package/test/Toggle.test.js +0 -43
  304. package/test/ToggleGroup.test.js +0 -81
  305. package/test/Upload.test.js +0 -60
  306. package/test/Wizard.test.js +0 -130
  307. package/test/mocks/pngMock.js +0 -1
  308. package/test/mocks/svgMock.js +0 -1
package/test/Tabs.test.js DELETED
@@ -1,88 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcTabs from "../src/tabs/Tabs";
4
-
5
- const sampleTabs = [
6
- {
7
- label: "Tab-1",
8
- },
9
- {
10
- label: "Tab-2",
11
- },
12
- {
13
- label: "Tab-3",
14
- },
15
- ];
16
-
17
- describe("Tabs component tests", () => {
18
- test("Tabs render with correct labels", () => {
19
- const { getByText } = render(<DxcTabs tabs={sampleTabs}></DxcTabs>);
20
- expect(getByText("Tab-1")).toBeTruthy();
21
- expect(getByText("Tab-2")).toBeTruthy();
22
- expect(getByText("Tab-3")).toBeTruthy();
23
- });
24
-
25
- test("Tabs render with correct icons", () => {
26
- const { getAllByRole } = render(
27
- <DxcTabs
28
- tabs={[
29
- {
30
- label: "Tab-1",
31
- iconSrc: "/testIcon1.png",
32
- },
33
- {
34
- label: "Tab-2",
35
- iconSrc: "/testIcon2.png",
36
- },
37
- {
38
- label: "Tab-3",
39
- iconSrc: "/testIcon3.png",
40
- },
41
- ]}
42
- ></DxcTabs>
43
- );
44
- expect(getAllByRole("img")[0].getAttribute("src")).toBe("/testIcon1.png");
45
- expect(getAllByRole("img")[1].getAttribute("src")).toBe("/testIcon2.png");
46
- expect(getAllByRole("img")[2].getAttribute("src")).toBe("/testIcon3.png");
47
- });
48
-
49
- test("Tabs render with disabled tab", () => {
50
- const { getAllByRole } = render(
51
- <DxcTabs
52
- tabs={[
53
- {
54
- label: "Tab-1",
55
- isDisabled: true,
56
- },
57
- {
58
- label: "Tab-2",
59
- },
60
- ]}
61
- ></DxcTabs>
62
- );
63
- expect(getAllByRole("tab")[0].hasAttribute("disabled")).toBeTruthy();
64
- expect(getAllByRole("tab")[1].hasAttribute("disabled")).toBeFalsy();
65
- });
66
-
67
- test("Uncontrolled tabs", () => {
68
- const onTabClick = jest.fn();
69
- const { getByText } = render(<DxcTabs tabs={sampleTabs} onTabClick={onTabClick}></DxcTabs>);
70
- const tab1 = getByText("Tab-1");
71
- const tab2 = getByText("Tab-2");
72
- fireEvent.click(tab2);
73
- expect(onTabClick).toHaveBeenCalledWith(1);
74
- fireEvent.click(tab1);
75
- expect(onTabClick).toHaveBeenCalledWith(0);
76
- });
77
-
78
- test("Controlled tabs", () => {
79
- const onTabClick = jest.fn();
80
- const { getByText } = render(<DxcTabs tabs={sampleTabs} onTabClick={onTabClick} activeTabIndex={0}></DxcTabs>);
81
- const tab2 = getByText("Tab-2");
82
- const tab3 = getByText("Tab-3");
83
- fireEvent.click(tab2);
84
- expect(onTabClick).toHaveBeenCalledWith(1);
85
- fireEvent.click(tab3);
86
- expect(onTabClick).toHaveBeenCalledWith(2);
87
- });
88
- });
@@ -1,34 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import DxcTabsForSections from "../src/tabs-for-sections/TabsForSections";
4
-
5
- const sections = [
6
- {
7
- tabLabel: "S1",
8
- section: () => <div>test-section-1</div>,
9
- },
10
- {
11
- tabLabel: "S2",
12
- section: () => <div>test-section-2</div>,
13
- },
14
- {
15
- tabLabel: "S3",
16
- section: () => <div>test-section-3</div>,
17
- },
18
- ];
19
-
20
- describe("TabsForSections component tests", () => {
21
- test("TabsForSections renders with correct sections label", () => {
22
- const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
23
- expect(getByText("S1")).toBeTruthy();
24
- expect(getByText("S2")).toBeTruthy();
25
- expect(getByText("S3")).toBeTruthy();
26
- });
27
-
28
- test("TabsForSections renders with correct sections content", () => {
29
- const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
30
- expect(getByText("test-section-1")).toBeTruthy();
31
- expect(getByText("test-section-2")).toBeTruthy();
32
- expect(getByText("test-section-3")).toBeTruthy();
33
- });
34
- });
package/test/Tag.test.js DELETED
@@ -1,32 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcTag from "../src/tag/Tag";
4
-
5
- describe("Tag component tests", () => {
6
- test("Tag renders with correct label", () => {
7
- const { getByText } = render(<DxcTag label="tag-test"></DxcTag>);
8
- expect(getByText("tag-test")).toBeTruthy();
9
- });
10
-
11
- test("Tag renders with correct label before", () => {
12
- const { getByText } = render(<DxcTag label="tag-test" labelPosition="before"></DxcTag>);
13
- expect(getByText("tag-test")).toBeTruthy();
14
- });
15
-
16
- test("Tag renders with correct icon", () => {
17
- const { getByRole } = render(<DxcTag label="tag-test" iconSrc="/test-icon.jpg"></DxcTag>);
18
- expect(getByRole("img").getAttribute("src")).toBe("/test-icon.jpg");
19
- });
20
-
21
- test("Tag renders with link href", () => {
22
- const { getByRole } = render(<DxcTag label="tag-test" linkHref="/test/page"></DxcTag>);
23
- expect(getByRole("link").getAttribute("href")).toBe("/test/page");
24
- });
25
-
26
- test("Call correct function on click", () => {
27
- const onClick = jest.fn();
28
- const { getByText } = render(<DxcTag label="tag-test" onClick={onClick}></DxcTag>);
29
- fireEvent.click(getByText("tag-test"));
30
- expect(onClick).toHaveBeenCalled();
31
- });
32
- });
@@ -1,52 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcTextarea from "../src/textarea/Textarea";
4
-
5
- describe("TextArea component tests", () => {
6
- test("TextArea renders with correct text", () => {
7
- const { getByText } = render(<DxcTextarea label="TextArea label" />);
8
- expect(getByText("TextArea label")).toBeTruthy();
9
- });
10
-
11
- test("onChange function is called correctly", () => {
12
- const onChange = jest.fn();
13
-
14
- const { getByRole } = render(<DxcTextarea label="TextArea label" onChange={onChange} />);
15
- const input = getByRole("textbox");
16
- fireEvent.change(input, { target: { value: "Testing..." } });
17
- expect(onChange).toHaveBeenCalled();
18
- expect(onChange).toHaveBeenCalledWith("Testing...");
19
- });
20
-
21
- test("onBlur function is called correctly", () => {
22
- const onBlur = jest.fn();
23
-
24
- const { getByRole } = render(<DxcTextarea label="TextArea label" onBlur={onBlur} />);
25
- const input = getByRole("textbox");
26
- fireEvent.change(input, { target: { value: "Testing..." } });
27
- fireEvent.blur(input);
28
- expect(onBlur).toHaveBeenCalled();
29
- expect(onBlur).toHaveBeenCalledWith("Testing...");
30
- });
31
-
32
- test("Controlled component", () => {
33
- const onChange = jest.fn();
34
- const { getByRole } = render(<DxcTextarea label="TextArea label" value="TextArea Value" onChange={onChange} />);
35
- const input = getByRole("textbox");
36
- fireEvent.change(input, { target: { value: "Tests" } });
37
- expect(onChange).toHaveBeenCalled();
38
- expect(onChange).toHaveBeenCalledWith("Tests");
39
- expect(input.value).toBe("TextArea Value");
40
- });
41
-
42
- test("Uncontrolled component", () => {
43
- const onChange = jest.fn();
44
- const { getByRole } = render(<DxcTextarea label="TextArea label" onChange={onChange} />);
45
- const input = getByRole("textbox");
46
- fireEvent.change(input, { target: { value: "Tests" } });
47
- expect(onChange).toHaveBeenCalled();
48
- expect(onChange).toHaveBeenCalledWith("Tests");
49
- expect(input.value).toBe("Tests");
50
- });
51
-
52
- });
@@ -1,43 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcToggle from "../src/toggle/Toggle";
4
-
5
- describe("Toggle component tests", () => {
6
- test("Toggle renders with correct text", () => {
7
- const { getByText } = render(<DxcToggle label="Toggle" />);
8
- expect(getByText("Toggle")).toBeTruthy();
9
- });
10
-
11
- test("Calls correct function on click", () => {
12
- const onClick = jest.fn();
13
- const { getByText} = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
14
- fireEvent.click(getByText("ToggleTest"));
15
- expect(onClick).toHaveBeenCalled();
16
- });
17
-
18
- test("Calls correct function on click with the correct value.", () => {
19
- const onClick = jest.fn();
20
- const { getByText, rerender } = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
21
-
22
- fireEvent.click(getByText("ToggleTest"));
23
- rerender(<DxcToggle label="ToggleTest" onClick={onClick} selected={true} />);
24
- fireEvent.click(getByText("ToggleTest"));
25
- expect(onClick.mock.calls[0][0]).toBe(true);
26
- expect(onClick.mock.calls[1][0]).toBe(false);
27
- });
28
-
29
-
30
- test("Calls correct function on click with the correct value, if it´s controlled and the user doesn´t change the value the function always receives the same", () => {
31
- const onClick = jest.fn();
32
- const { getByText } = render(<DxcToggle label="ToggleTest" selected={true} onClick={onClick} />);
33
-
34
- fireEvent.click(getByText("ToggleTest"));
35
- fireEvent.click(getByText("ToggleTest"));
36
- fireEvent.click(getByText("ToggleTest"));
37
- expect(onClick).toHaveBeenCalledTimes(3);
38
- expect(onClick.mock.calls[0][0]).toBe(false);
39
- expect(onClick.mock.calls[1][0]).toBe(false);
40
- expect(onClick.mock.calls[2][0]).toBe(false);
41
- });
42
-
43
- });
@@ -1,81 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcToggleGroup from "../src/toggle-group/ToggleGroup";
4
-
5
- const options = [
6
- {
7
- value: 1,
8
- label: "Amazon",
9
- },
10
- {
11
- value: 2,
12
- label: "Ebay",
13
- },
14
- {
15
- value: 3,
16
- label: "Apple",
17
- },
18
- {
19
- value: 4,
20
- label: "Google",
21
- },
22
- ];
23
-
24
- describe("Toggle group component tests", () => {
25
- test("Toggle group renders with correct labels", () => {
26
- const { getByText } = render(<DxcToggleGroup options={options} />);
27
- expect(getByText("Amazon")).toBeTruthy();
28
- expect(getByText("Ebay")).toBeTruthy();
29
- expect(getByText("Apple")).toBeTruthy();
30
- expect(getByText("Google")).toBeTruthy();
31
- });
32
-
33
- test("Uncontrolled toggle group calls correct function on change with value", () => {
34
- const onChange = jest.fn();
35
- const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} />);
36
-
37
- const option = getByText("Ebay");
38
- fireEvent.click(option);
39
- expect(onChange).toHaveBeenCalledWith(2);
40
- });
41
-
42
- test("Controlled toggle group calls correct function on change with value", () => {
43
- const onChange = jest.fn();
44
- const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} value={1} />);
45
-
46
- const option = getByText("Ebay");
47
- fireEvent.click(option);
48
- expect(onChange).toHaveBeenCalledWith(2);
49
- });
50
-
51
- test("Function on change is not called when disable", () => {
52
- const onChange = jest.fn();
53
- const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} disabled />);
54
-
55
- const option = getByText("Ebay");
56
- fireEvent.click(option);
57
- expect(onChange).toHaveBeenCalledTimes(0);
58
- });
59
-
60
- test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", () => {
61
- const onChange = jest.fn();
62
- const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} multiple />);
63
-
64
- const option = getByText("Ebay");
65
- fireEvent.click(option);
66
- expect(onChange).toHaveBeenCalledWith([2]);
67
- });
68
-
69
- test("Controlled multiple toggle returns always same values", () => {
70
- const onChange = jest.fn();
71
- const { getByText } = render(<DxcToggleGroup options={options} onChange={onChange} value={[1]} multiple />);
72
-
73
- const option = getByText("Ebay");
74
- fireEvent.click(option);
75
- expect(onChange).toHaveBeenCalledWith([1, 2]);
76
-
77
- const option2 = getByText("Google");
78
- fireEvent.click(option2);
79
- expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
80
- });
81
- });
@@ -1,60 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent, act, createEvent } from "@testing-library/react";
3
- import DxcUpload from "../src/upload/Upload";
4
-
5
- describe("Upload component tests", () => {
6
- test("Upload renders with correct text", () => {
7
- const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
8
- expect(getByText("There are no files to upload")).toBeTruthy();
9
- expect(getByText("Drag and drop your files here or choose one from your computer")).toBeTruthy();
10
- expect(getByText("CHOOSE FILES")).toBeTruthy();
11
- });
12
-
13
- test("Upload shows file information", () => {
14
- const myfunction = jest.fn();
15
- const { getByText } = render(<DxcUpload margin="small"></DxcUpload>);
16
-
17
- const dropZone = getByText("There are no files to upload");
18
- const dropEvent = createEvent.drop(dropZone);
19
- const fileList = [new File(["(⌐□_□)"], "test.png", { type: "image/png" })];
20
-
21
- Object.defineProperty(dropEvent, "dataTransfer", {
22
- value: {
23
- files: fileList,
24
- clearData: myfunction,
25
- },
26
- });
27
-
28
- act(() => {
29
- fireEvent(dropZone, dropEvent);
30
- });
31
- expect(getByText("test.png")).toBeTruthy();
32
- expect(getByText("image/png")).toBeTruthy();
33
- expect(getByText("UPLOAD")).toBeTruthy();
34
- });
35
-
36
- test("Calls correct function callbackUpload", () => {
37
- const onCallbackUpload = jest.fn(() => new Promise(resolve => setTimeout(resolve, 1000)));
38
- const myfunction = jest.fn();
39
- const { getByText } = render(<DxcUpload margin="small" callbackUpload={onCallbackUpload}></DxcUpload>);
40
-
41
- const dropZone = getByText("There are no files to upload");
42
- const dropEvent = createEvent.drop(dropZone);
43
- const fileList = [new File(["(⌐□_□)"], "test.png", { type: "image/png" })];
44
-
45
- Object.defineProperty(dropEvent, "dataTransfer", {
46
- value: {
47
- files: fileList,
48
- clearData: myfunction,
49
- },
50
- });
51
-
52
- act(() => {
53
- fireEvent(dropZone, dropEvent);
54
- });
55
- act(() => {
56
- fireEvent.click(getByText("UPLOAD"));
57
- });
58
- expect(onCallbackUpload).toHaveBeenCalled();
59
- });
60
- });
@@ -1,130 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcWizard from "../src/wizard/Wizard";
4
-
5
- describe("Wizard components tests", () => {
6
- test("Wizard renders with correct steps", () => {
7
- const { getByText } = render(
8
- <DxcWizard
9
- steps={[
10
- {
11
- label: "first-step",
12
- },
13
- {
14
- label: "second-step",
15
- },
16
- ]}
17
- ></DxcWizard>
18
- );
19
-
20
- expect(getByText("first-step")).toBeTruthy();
21
- expect(getByText("second-step")).toBeTruthy();
22
- });
23
-
24
- test("Click on step text", () => {
25
- const onClick = jest.fn();
26
- const { getByText } = render(
27
- <DxcWizard
28
- onStepClick={onClick}
29
- steps={[
30
- {
31
- label: "first-step",
32
- },
33
- ]}
34
- ></DxcWizard>
35
- );
36
-
37
- const step = getByText("first-step");
38
- fireEvent.click(step);
39
- expect(onClick).toHaveBeenCalled();
40
- });
41
-
42
- test("Click on step description", () => {
43
- const onClick = jest.fn();
44
- const { getByText } = render(
45
- <DxcWizard
46
- onStepClick={onClick}
47
- steps={[
48
- {
49
- label: "first-step",
50
- description: "step-description",
51
- },
52
- ]}
53
- ></DxcWizard>
54
- );
55
-
56
- const step = getByText("step-description");
57
- fireEvent.click(step);
58
- expect(onClick).toHaveBeenCalled();
59
- });
60
-
61
- test("Click on step number", () => {
62
- const onClick = jest.fn();
63
- const { getByText } = render(
64
- <DxcWizard
65
- onStepClick={onClick}
66
- steps={[
67
- {
68
- label: "first-step",
69
- },
70
- ]}
71
- ></DxcWizard>
72
- );
73
-
74
- const step = getByText("1");
75
- fireEvent.click(step);
76
- expect(onClick).toHaveBeenCalled();
77
- });
78
-
79
- test("Click on disable step", () => {
80
- const onClick = jest.fn();
81
- const { getByText } = render(
82
- <DxcWizard
83
- onStepClick={onClick}
84
- steps={[
85
- {
86
- label: "first-step",
87
- },
88
- {
89
- label: "second-step",
90
- disabled: true,
91
- },
92
- ]}
93
- ></DxcWizard>
94
- );
95
-
96
- const step = getByText("second-step");
97
- fireEvent.click(step);
98
- expect(onClick).toHaveBeenCalledTimes(0);
99
- });
100
-
101
- test("Controlled wizard function is called", () => {
102
- const onClick = jest.fn((i) => i);
103
- const { getByText } = render(
104
- <DxcWizard
105
- currentStep={1}
106
- onStepClick={onClick}
107
- steps={[
108
- {
109
- label: "first-step",
110
- },
111
- {
112
- label: "second-step",
113
- },
114
- ]}
115
- ></DxcWizard>
116
- );
117
-
118
- const step1 = getByText("first-step");
119
- const step2 = getByText("second-step");
120
- fireEvent.click(step1);
121
- fireEvent.click(step2);
122
- fireEvent.click(step1);
123
-
124
- expect(onClick).toHaveBeenCalledTimes(3);
125
- //Test the received value in the onClick function
126
- expect(onClick).toHaveBeenNthCalledWith(1, 0);
127
- expect(onClick).toHaveBeenNthCalledWith(2, 1);
128
- expect(onClick).toHaveBeenNthCalledWith(3, 0);
129
- });
130
- });
@@ -1 +0,0 @@
1
- module.exports = 'ImageMock';
@@ -1 +0,0 @@
1
- module.exports = 'IconMock';