@dxc-technology/halstack-react 0.0.0-51a5c42 → 0.0.0-51b0da8

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 (184) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6520 -0
  3. package/dist/index.d.ts +6520 -0
  4. package/dist/index.js +14559 -0
  5. package/dist/index.mjs +14471 -0
  6. package/package.json +83 -68
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -248
  10. package/dist/V3Textarea/V3Textarea.js +0 -264
  11. package/dist/accordion/Accordion.js +0 -353
  12. package/dist/accordion-group/AccordionGroup.js +0 -186
  13. package/dist/alert/Alert.js +0 -403
  14. package/dist/alert/index.d.ts +0 -51
  15. package/dist/badge/Badge.js +0 -63
  16. package/dist/box/Box.js +0 -156
  17. package/dist/button/Button.js +0 -238
  18. package/dist/card/Card.js +0 -254
  19. package/dist/checkbox/Checkbox.js +0 -300
  20. package/dist/checkbox/Checkbox.stories.js +0 -144
  21. package/dist/checkbox/readme.md +0 -116
  22. package/dist/chip/Chip.js +0 -265
  23. package/dist/common/OpenSans.css +0 -81
  24. package/dist/common/RequiredComponent.js +0 -40
  25. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  34. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  35. package/dist/common/utils.js +0 -22
  36. package/dist/common/variables.js +0 -1569
  37. package/dist/date/Date.js +0 -379
  38. package/dist/date/Date.stories.js +0 -205
  39. package/dist/date/readme.md +0 -73
  40. package/dist/date-input/DateInput.js +0 -400
  41. package/dist/date-input/index.d.ts +0 -95
  42. package/dist/dialog/Dialog.js +0 -218
  43. package/dist/dropdown/Dropdown.js +0 -544
  44. package/dist/file-input/FileInput.js +0 -644
  45. package/dist/file-input/FileItem.js +0 -280
  46. package/dist/file-input/index.d.ts +0 -81
  47. package/dist/footer/Footer.js +0 -395
  48. package/dist/footer/dxc_logo.svg +0 -15
  49. package/dist/footer/readme.md +0 -41
  50. package/dist/header/Header.js +0 -434
  51. package/dist/header/Icons.js +0 -59
  52. package/dist/heading/Heading.js +0 -218
  53. package/dist/input-text/InputText.js +0 -707
  54. package/dist/input-text/error.svg +0 -1
  55. package/dist/input-text/readme.md +0 -91
  56. package/dist/layout/ApplicationLayout.js +0 -331
  57. package/dist/layout/facebook.svg +0 -45
  58. package/dist/layout/linkedin.svg +0 -50
  59. package/dist/layout/twitter.svg +0 -53
  60. package/dist/link/Link.js +0 -237
  61. package/dist/link/readme.md +0 -51
  62. package/dist/main.d.ts +0 -8
  63. package/dist/main.js +0 -367
  64. package/dist/new-select/NewSelect.js +0 -836
  65. package/dist/new-select/index.d.ts +0 -53
  66. package/dist/number-input/NumberInput.js +0 -136
  67. package/dist/number-input/NumberInputContext.js +0 -16
  68. package/dist/number-input/index.d.ts +0 -113
  69. package/dist/paginator/Paginator.js +0 -289
  70. package/dist/paginator/images/next.svg +0 -3
  71. package/dist/paginator/images/nextPage.svg +0 -3
  72. package/dist/paginator/images/previous.svg +0 -3
  73. package/dist/paginator/images/previousPage.svg +0 -3
  74. package/dist/paginator/readme.md +0 -50
  75. package/dist/password-input/PasswordInput.js +0 -198
  76. package/dist/password-input/index.d.ts +0 -94
  77. package/dist/progress-bar/ProgressBar.js +0 -242
  78. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  79. package/dist/progress-bar/readme.md +0 -63
  80. package/dist/radio/Radio.js +0 -209
  81. package/dist/radio/Radio.stories.js +0 -166
  82. package/dist/radio/readme.md +0 -70
  83. package/dist/resultsetTable/ResultsetTable.js +0 -358
  84. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  85. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  86. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  87. package/dist/select/Select.js +0 -549
  88. package/dist/sidenav/Sidenav.js +0 -179
  89. package/dist/slider/Slider.js +0 -394
  90. package/dist/slider/readme.md +0 -64
  91. package/dist/spinner/Spinner.js +0 -381
  92. package/dist/spinner/Spinner.stories.js +0 -183
  93. package/dist/spinner/readme.md +0 -65
  94. package/dist/switch/Switch.js +0 -222
  95. package/dist/switch/Switch.stories.js +0 -134
  96. package/dist/switch/readme.md +0 -133
  97. package/dist/table/Table.js +0 -132
  98. package/dist/tabs/Tabs.js +0 -343
  99. package/dist/tabs/Tabs.stories.js +0 -130
  100. package/dist/tabs/readme.md +0 -78
  101. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  102. package/dist/tabs-for-sections/readme.md +0 -78
  103. package/dist/tag/Tag.js +0 -282
  104. package/dist/text-input/TextInput.js +0 -971
  105. package/dist/text-input/index.d.ts +0 -135
  106. package/dist/textarea/Textarea.js +0 -369
  107. package/dist/textarea/index.d.ts +0 -117
  108. package/dist/toggle/Toggle.js +0 -220
  109. package/dist/toggle/Toggle.stories.js +0 -297
  110. package/dist/toggle/readme.md +0 -80
  111. package/dist/toggle-group/ToggleGroup.js +0 -327
  112. package/dist/upload/Upload.js +0 -205
  113. package/dist/upload/Upload.stories.js +0 -72
  114. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  115. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  116. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  117. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  118. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  119. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  120. package/dist/upload/file-upload/FileToUpload.js +0 -184
  121. package/dist/upload/file-upload/audio-icon.svg +0 -4
  122. package/dist/upload/file-upload/close.svg +0 -4
  123. package/dist/upload/file-upload/file-icon.svg +0 -4
  124. package/dist/upload/file-upload/video-icon.svg +0 -4
  125. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  126. package/dist/upload/readme.md +0 -37
  127. package/dist/upload/transaction/Transaction.js +0 -175
  128. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  129. package/dist/upload/transaction/audio-icon.svg +0 -4
  130. package/dist/upload/transaction/error-icon.svg +0 -4
  131. package/dist/upload/transaction/file-icon-err.svg +0 -4
  132. package/dist/upload/transaction/file-icon.svg +0 -4
  133. package/dist/upload/transaction/image-icon-err.svg +0 -4
  134. package/dist/upload/transaction/image-icon.svg +0 -4
  135. package/dist/upload/transaction/success-icon.svg +0 -4
  136. package/dist/upload/transaction/video-icon-err.svg +0 -4
  137. package/dist/upload/transaction/video-icon.svg +0 -4
  138. package/dist/upload/transactions/Transactions.js +0 -138
  139. package/dist/useTheme.js +0 -22
  140. package/dist/wizard/Wizard.js +0 -411
  141. package/dist/wizard/invalid_icon.svg +0 -5
  142. package/dist/wizard/valid_icon.svg +0 -5
  143. package/dist/wizard/validation-wrong.svg +0 -6
  144. package/test/Accordion.test.js +0 -33
  145. package/test/AccordionGroup.test.js +0 -125
  146. package/test/Alert.test.js +0 -53
  147. package/test/Box.test.js +0 -10
  148. package/test/Button.test.js +0 -18
  149. package/test/Card.test.js +0 -30
  150. package/test/Checkbox.test.js +0 -45
  151. package/test/Chip.test.js +0 -25
  152. package/test/Date.test.js +0 -397
  153. package/test/DateInput.test.js +0 -242
  154. package/test/Dialog.test.js +0 -23
  155. package/test/Dropdown.test.js +0 -145
  156. package/test/FileInput.test.js +0 -201
  157. package/test/Footer.test.js +0 -99
  158. package/test/Header.test.js +0 -34
  159. package/test/Heading.test.js +0 -35
  160. package/test/InputText.test.js +0 -248
  161. package/test/Link.test.js +0 -43
  162. package/test/NumberInput.test.js +0 -259
  163. package/test/Paginator.test.js +0 -177
  164. package/test/PasswordInput.test.js +0 -83
  165. package/test/ProgressBar.test.js +0 -35
  166. package/test/Radio.test.js +0 -37
  167. package/test/ResultsetTable.test.js +0 -329
  168. package/test/Select.test.js +0 -212
  169. package/test/Sidenav.test.js +0 -45
  170. package/test/Slider.test.js +0 -82
  171. package/test/Spinner.test.js +0 -32
  172. package/test/Switch.test.js +0 -45
  173. package/test/Table.test.js +0 -36
  174. package/test/Tabs.test.js +0 -109
  175. package/test/TabsForSections.test.js +0 -34
  176. package/test/Tag.test.js +0 -32
  177. package/test/TextInput.test.js +0 -732
  178. package/test/Textarea.test.js +0 -193
  179. package/test/ToggleGroup.test.js +0 -85
  180. package/test/Upload.test.js +0 -60
  181. package/test/V3TextArea.test.js +0 -51
  182. package/test/Wizard.test.js +0 -130
  183. package/test/mocks/pngMock.js +0 -1
  184. package/test/mocks/svgMock.js +0 -1
@@ -1,259 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcNumberInput from "../src/number-input/NumberInput";
5
-
6
- describe("Number input component tests", () => {
7
- test("Number input renders with label", () => {
8
- const { getByText } = render(<DxcNumberInput label="Number input label" />);
9
- expect(getByText("Number input label")).toBeTruthy();
10
- });
11
-
12
- test("Number input renders with helper text", () => {
13
- const { getByText } = render(<DxcNumberInput helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Number input renders with placeholder", () => {
18
- const { getByLabelText } = render(<DxcNumberInput label="Number label" placeholder="Placeholder" />);
19
- const number = getByLabelText("Number label");
20
- expect(number.getAttribute("placeholder")).toBe("Placeholder");
21
- });
22
-
23
- test("Number input renders increment and decrement buttons", () => {
24
- const { queryAllByRole } = render(<DxcNumberInput label="Number label" />);
25
- expect(queryAllByRole("button").length).toBe(2);
26
- });
27
-
28
- test("Number input is disabled", () => {
29
- const { getByLabelText } = render(<DxcNumberInput label="Number label" disabled />);
30
- const number = getByLabelText("Number label");
31
- expect(number.disabled).toBeTruthy();
32
- });
33
-
34
- test("Number input is optional", () => {
35
- const { getByText } = render(<DxcNumberInput label="Number label" optional />);
36
- expect(getByText("(Optional)")).toBeTruthy();
37
- });
38
-
39
- test("Number input is not optional: required field, displays error if not filled in", () => {
40
- const onBlur = jest.fn();
41
- const onChange = jest.fn();
42
- const { getByRole } = render(<DxcNumberInput onBlur={onBlur} onChange={onChange} />);
43
- const input = getByRole("textbox");
44
-
45
- userEvent.type(input, "1");
46
- userEvent.clear(input);
47
- fireEvent.blur(input);
48
- expect(onBlur).toHaveBeenCalled();
49
- expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
50
- expect(onChange).toHaveBeenCalled();
51
- expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
52
- });
53
-
54
- test("Suffix and prefix must be shown)", () => {
55
- const { getByText } = render(<DxcNumberInput label="Number input label" prefix="+34" suffix="USD" />);
56
- expect(getByText("+34")).toBeTruthy();
57
- expect(getByText("USD")).toBeTruthy();
58
- });
59
-
60
- test("Invalid number input renders error", () => {
61
- const { getByText } = render(<DxcNumberInput error="Error message." />);
62
- expect(getByText("Error message.")).toBeTruthy();
63
- });
64
-
65
- test("onChange function is called correctly", () => {
66
- const onChange = jest.fn();
67
- const { getByLabelText } = render(<DxcNumberInput label="Number input label" onChange={onChange} />);
68
- const number = getByLabelText("Number input label");
69
- userEvent.type(number, "t");
70
- expect(onChange).not.toHaveBeenCalledWith({ value: "t", error: null });
71
- expect(number.value).toBe("");
72
- userEvent.type(number, "1");
73
- expect(onChange).toHaveBeenCalledWith({ value: "1", error: null });
74
- expect(number.value).toBe("1");
75
- });
76
-
77
- test("Error message is shown if the value is less than the min value", () => {
78
- const onChange = jest.fn(({ value, error }) => {
79
- expect(value).toBe("1");
80
- expect(error).toBe("Value must be greater than or equal to 5.");
81
- });
82
- const onBlur = jest.fn(({ value, error }) => {
83
- expect(value).toBe("1");
84
- expect(error).toBe("Value must be greater than or equal to 5.");
85
- });
86
- const { getByLabelText } = render(
87
- <DxcNumberInput label="Number input label" min={5} onBlur={onBlur} onChange={onChange} />
88
- );
89
- const number = getByLabelText("Number input label");
90
-
91
- userEvent.type(number, "1");
92
- fireEvent.blur(number);
93
- });
94
-
95
- test("Cannot decrement the value if it is less than the min value", () => {
96
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" min={5} />);
97
- const number = getByLabelText("Number input label");
98
- userEvent.type(number, "1");
99
- fireEvent.blur(number);
100
- expect(number.value).toBe("1");
101
- const decrement = getAllByRole("button")[0];
102
- userEvent.click(decrement);
103
- expect(number.value).toBe("1");
104
- });
105
-
106
- test("Increment the value when it is less than the min value", () => {
107
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" min={5} />);
108
- const number = getByLabelText("Number input label");
109
- userEvent.type(number, "1");
110
- fireEvent.blur(number);
111
- expect(number.value).toBe("1");
112
- const increment = getAllByRole("button")[1];
113
- userEvent.click(increment);
114
- expect(number.value).toBe("5");
115
- });
116
-
117
- test("Error message is shown if the value is greater than the max value", () => {
118
- const onChange = jest.fn();
119
- const onBlur = jest.fn();
120
- const { getByLabelText } = render(
121
- <DxcNumberInput label="Number input label" max={10} onBlur={onBlur} onChange={onChange} />
122
- );
123
- const number = getByLabelText("Number input label");
124
-
125
- userEvent.type(number, "12");
126
- expect(onChange).toHaveBeenCalledTimes(2);
127
- expect(onChange).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
128
- fireEvent.blur(number);
129
- expect(onBlur).toHaveBeenCalled();
130
- expect(onBlur).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
131
- });
132
-
133
- test("Cannot increment the value if it is greater than the max value", () => {
134
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" max={10} />);
135
- const number = getByLabelText("Number input label");
136
- userEvent.type(number, "12");
137
- fireEvent.blur(number);
138
- expect(number.value).toBe("12");
139
- const decrement = getAllByRole("button")[1];
140
- userEvent.click(decrement);
141
- expect(number.value).toBe("12");
142
- });
143
-
144
- test("Decrement the value when it is greater than the max value", () => {
145
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" max={10} />);
146
- const number = getByLabelText("Number input label");
147
- userEvent.type(number, "12");
148
- fireEvent.blur(number);
149
- expect(number.value).toBe("12");
150
- const decrement = getAllByRole("button")[0];
151
- userEvent.click(decrement);
152
- expect(number.value).toBe("10");
153
- });
154
-
155
- test("Increment and decrement the value with min and max values", () => {
156
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" min={5} max={10} />);
157
- const number = getByLabelText("Number input label");
158
- userEvent.type(number, "1");
159
- fireEvent.blur(number);
160
- expect(number.value).toBe("1");
161
- const decrement = getAllByRole("button")[0];
162
- userEvent.click(decrement);
163
- expect(number.value).toBe("1");
164
- const increment = getAllByRole("button")[1];
165
- userEvent.click(increment);
166
- expect(number.value).toBe("5");
167
- userEvent.click(increment);
168
- userEvent.click(increment);
169
- userEvent.click(increment);
170
- userEvent.click(increment);
171
- userEvent.click(increment);
172
- expect(number.value).toBe("10");
173
- userEvent.click(increment);
174
- expect(number.value).toBe("10");
175
- });
176
-
177
- test("Increment and decrement the value with step", () => {
178
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" step={5} />);
179
- const number = getByLabelText("Number input label");
180
- userEvent.type(number, "10");
181
- fireEvent.blur(number);
182
- expect(number.value).toBe("10");
183
- const increment = getAllByRole("button")[1];
184
- userEvent.click(increment);
185
- expect(number.value).toBe("15");
186
- userEvent.click(increment);
187
- expect(number.value).toBe("20");
188
- const decrement = getAllByRole("button")[0];
189
- userEvent.click(decrement);
190
- expect(number.value).toBe("15");
191
- userEvent.click(decrement);
192
- expect(number.value).toBe("10");
193
- });
194
-
195
- test("Increment and decrement the value with min, max and step", () => {
196
- const onBlur = jest.fn(({ value, error }) => {
197
- expect(value).toBe("1");
198
- expect(error).toBe("Value must be greater than or equal to 5.");
199
- });
200
- const { getByLabelText, getAllByRole } = render(
201
- <DxcNumberInput label="Number input label" min={5} max={20} step={8} onBlur={onBlur} />
202
- );
203
- const number = getByLabelText("Number input label");
204
- userEvent.type(number, "1");
205
- fireEvent.blur(number);
206
- const increment = getAllByRole("button")[1];
207
- userEvent.click(increment);
208
- expect(number.value).toBe("5");
209
- userEvent.click(increment);
210
- expect(number.value).toBe("13");
211
- userEvent.click(increment);
212
- expect(number.value).toBe("20");
213
- userEvent.click(increment);
214
- expect(number.value).toBe("20");
215
- const decrement = getAllByRole("button")[0];
216
- userEvent.click(decrement);
217
- expect(number.value).toBe("12");
218
- userEvent.click(decrement);
219
- expect(number.value).toBe("5");
220
- userEvent.click(decrement);
221
- expect(number.value).toBe("5");
222
- });
223
-
224
- test("Increment and decrement the value with min, max and step using the arrows in keyboard", () => {
225
- const { getByLabelText } = render(<DxcNumberInput label="Number input label" min={5} max={20} step={5} />);
226
- const number = getByLabelText("Number input label");
227
- userEvent.type(number, "1");
228
- fireEvent.keyDown(number, { keyCode: 38 });
229
- expect(number.value).toBe("5");
230
- fireEvent.keyDown(number, { keyCode: 38 });
231
- expect(number.value).toBe("10");
232
- fireEvent.keyDown(number, { keyCode: 38 });
233
- expect(number.value).toBe("15");
234
- fireEvent.keyDown(number, { keyCode: 38 });
235
- expect(number.value).toBe("20");
236
- fireEvent.keyDown(number, { keyCode: 38 });
237
- expect(number.value).toBe("20");
238
- fireEvent.keyDown(number, { keyCode: 40 });
239
- expect(number.value).toBe("15");
240
- fireEvent.keyDown(number, { keyCode: 40 });
241
- expect(number.value).toBe("10");
242
- fireEvent.keyDown(number, { keyCode: 40 });
243
- expect(number.value).toBe("5");
244
- fireEvent.keyDown(number, { keyCode: 40 });
245
- expect(number.value).toBe("5");
246
- });
247
-
248
- test("Number has correct accesibility attributes", () => {
249
- const { getByLabelText, getAllByRole } = render(<DxcNumberInput label="Number input label" />);
250
- const number = getByLabelText("Number input label");
251
- expect(number.getAttribute("aria-autocomplete")).toBeNull();
252
- expect(number.getAttribute("aria-controls")).toBeNull();
253
- expect(number.getAttribute("aria-expanded")).toBeNull();
254
- const decrement = getAllByRole("button")[0];
255
- expect(decrement.getAttribute("aria-label")).toBe("Decrement");
256
- const increment = getAllByRole("button")[1];
257
- expect(increment.getAttribute("aria-label")).toBe("Increment");
258
- });
259
- });
@@ -1,177 +0,0 @@
1
- import React from "react";
2
- import { render, act } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcPaginator from "../src/paginator/Paginator";
5
-
6
- describe("Paginator component tests", () => {
7
- test("Paginator renders with default values", () => {
8
- const { getByText } = render(<DxcPaginator></DxcPaginator>);
9
- expect(getByText("1 to 1 of 1")).toBeTruthy();
10
- expect(getByText("Page: 1 of 1")).toBeTruthy();
11
- });
12
-
13
- test("Paginator renders with currentPage", () => {
14
- const { getByText } = render(<DxcPaginator currentPage={2}></DxcPaginator>);
15
- expect(getByText("Page: 2 of 1")).toBeTruthy();
16
- });
17
-
18
- test("Paginator renders with itemsPerPageOptions", () => {
19
- const { getByText } = render(
20
- <DxcPaginator currentPage={1} itemsPerPage={10} itemsPerPageOptions={[10, 15]} totalItems={20}></DxcPaginator>
21
- );
22
- expect(getByText("Items per page")).toBeTruthy();
23
- });
24
-
25
- test("Paginator renders with itemsPerPageOptions", () => {
26
- const { getByText } = render(<DxcPaginator currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>);
27
- expect(getByText("1 to 10 of 20")).toBeTruthy();
28
- expect(getByText("Page: 1 of 2")).toBeTruthy();
29
- });
30
-
31
- test("Paginator renders with totalItems", () => {
32
- const { getByText } = render(<DxcPaginator totalItems={20}></DxcPaginator>);
33
- expect(getByText("1 to 5 of 20")).toBeTruthy();
34
- expect(getByText("Page: 1 of 4")).toBeTruthy();
35
- });
36
-
37
- test("Paginator renders with correct text in second page", () => {
38
- const { getByText } = render(<DxcPaginator currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>);
39
- expect(getByText("11 to 20 of 20")).toBeTruthy();
40
- expect(getByText("Page: 2 of 2")).toBeTruthy();
41
- });
42
-
43
- test("Paginator renders goToPage select", () => {
44
- const { getByText } = render(
45
- <DxcPaginator currentPage={2} showGoToPage={true} itemsPerPage={10} totalItems={20}></DxcPaginator>
46
- );
47
- expect(getByText("Go to page:")).toBeTruthy();
48
- });
49
-
50
- test("Paginator goToPage call correct function", () => {
51
- const onClick = jest.fn();
52
- const { getByText, getAllByRole, getByRole } = render(
53
- <DxcPaginator
54
- currentPage={1}
55
- itemsPerPage={10}
56
- totalItems={27}
57
- showGoToPage={true}
58
- onPageChange={onClick}
59
- ></DxcPaginator>
60
- );
61
- const goToPageSelect = getAllByRole("button")[2];
62
- act(() => {
63
- userEvent.click(goToPageSelect);
64
- });
65
- const goToPageOption = getByText("2");
66
- act(() => {
67
- userEvent.click(goToPageOption);
68
- });
69
- expect(onClick).toHaveBeenCalledWith(2);
70
- });
71
-
72
- test("Call correct goToPageFunction", () => {
73
- const onClick = jest.fn();
74
- const { getAllByRole } = render(
75
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
76
- );
77
- const nextButton = getAllByRole("button")[2];
78
- userEvent.click(nextButton);
79
- expect(onClick).toHaveBeenCalled();
80
- });
81
-
82
- test("Call correct itemsPerPageFunction", () => {
83
- const onClick = jest.fn();
84
- const { getAllByText, getByText } = render(
85
- <DxcPaginator
86
- currentPage={1}
87
- itemsPerPage={10}
88
- itemsPerPageOptions={[10, 15]}
89
- itemsPerPageFunction={onClick}
90
- totalItems={20}
91
- ></DxcPaginator>
92
- );
93
- const select = getAllByText("10")[0];
94
- act(() => {
95
- userEvent.click(select);
96
- });
97
- const itemPerPageOption = getByText("15");
98
- act(() => {
99
- userEvent.click(itemPerPageOption);
100
- });
101
- expect(onClick).toHaveBeenCalledWith(15);
102
- });
103
-
104
- test("Next button is disable in last page", () => {
105
- const onClick = jest.fn();
106
- const { getAllByRole } = render(
107
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
108
- );
109
- const nextButton = getAllByRole("button")[2];
110
- expect(nextButton.hasAttribute("disabled")).toBeTruthy();
111
- userEvent.click(nextButton);
112
- expect(onClick).toHaveBeenCalledTimes(0);
113
- });
114
-
115
- test("Last button is disable in last page", () => {
116
- const onClick = jest.fn();
117
- const { getAllByRole } = render(
118
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
119
- );
120
- const lastButton = getAllByRole("button")[3];
121
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
122
- userEvent.click(lastButton);
123
- expect(onClick).toHaveBeenCalledTimes(0);
124
- });
125
-
126
- test("First button is disable in first page", () => {
127
- const onClick = jest.fn();
128
- const { getAllByRole } = render(
129
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
130
- );
131
- const lastButton = getAllByRole("button")[0];
132
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
133
- userEvent.click(lastButton);
134
- expect(onClick).toHaveBeenCalledTimes(0);
135
- });
136
-
137
- test("Previous button is disable in first page", () => {
138
- const onClick = jest.fn();
139
- const { getAllByRole } = render(
140
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
141
- );
142
- const lastButton = getAllByRole("button")[1];
143
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
144
- userEvent.click(lastButton);
145
- expect(onClick).toHaveBeenCalledTimes(0);
146
- });
147
-
148
- test("Last and next buttons are disable in last page", () => {
149
- const onClick = jest.fn();
150
- const { getAllByRole } = render(
151
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
152
- );
153
- const firstButton = getAllByRole("button")[0];
154
- const prevButton = getAllByRole("button")[1];
155
- const nextButton = getAllByRole("button")[2];
156
- const lastButton = getAllByRole("button")[3];
157
- expect(firstButton.hasAttribute("disabled")).toBeFalsy();
158
- expect(prevButton.hasAttribute("disabled")).toBeFalsy();
159
- expect(nextButton.hasAttribute("disabled")).toBeTruthy();
160
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
161
- });
162
-
163
- test("First and previous buttons are disable in first page", () => {
164
- const onClick = jest.fn();
165
- const { getAllByRole } = render(
166
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
167
- );
168
- const firstButton = getAllByRole("button")[0];
169
- const prevButton = getAllByRole("button")[1];
170
- const nextButton = getAllByRole("button")[2];
171
- const lastButton = getAllByRole("button")[3];
172
- expect(firstButton.hasAttribute("disabled")).toBeTruthy();
173
- expect(prevButton.hasAttribute("disabled")).toBeTruthy();
174
- expect(nextButton.hasAttribute("disabled")).toBeFalsy();
175
- expect(lastButton.hasAttribute("disabled")).toBeFalsy();
176
- });
177
- });
@@ -1,83 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcPasswordInput from "../src/password-input/PasswordInput";
5
-
6
- describe("Password input component tests", () => {
7
- test("Password input renders with label", () => {
8
- const { getByText } = render(<DxcPasswordInput label="Password input label" />);
9
- expect(getByText("Password input label")).toBeTruthy();
10
- });
11
-
12
- test("Password input renders with helper text", () => {
13
- const { getByText } = render(<DxcPasswordInput helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Password input renders error", () => {
18
- const { getByText } = render(<DxcPasswordInput error="Error message." />);
19
- expect(getByText("Error message.")).toBeTruthy();
20
- });
21
-
22
- test("onChange function is called correctly", () => {
23
- const onChange = jest.fn();
24
- const { getByRole } = render(<DxcPasswordInput label="Password input" onChange={onChange} />);
25
- const passwordInput = getByRole("textbox");
26
- userEvent.type(passwordInput, "Pa$$w0rd");
27
- expect(onChange).toHaveBeenCalledWith({ value: "P", error: null });
28
- expect(passwordInput.value).toBe("Pa$$w0rd");
29
- });
30
-
31
- test("onBlur function is called correctly", () => {
32
- const onBlur = jest.fn();
33
- const { getByRole } = render(<DxcPasswordInput label="Password input" onBlur={onBlur} />);
34
- const passwordInput = getByRole("textbox");
35
- userEvent.type(passwordInput, "Pa$$w0rd");
36
- fireEvent.blur(passwordInput);
37
- expect(onBlur).toHaveBeenCalledWith({ value: "Pa$$w0rd", error: null });
38
- expect(passwordInput.value).toBe("Pa$$w0rd");
39
- });
40
-
41
- test("Clear password input value", () => {
42
- const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
43
- const passwordInput = getByRole("textbox");
44
- userEvent.type(passwordInput, "Pa$$w0rd");
45
- expect(passwordInput.value).toBe("Pa$$w0rd");
46
- const clearButton = getAllByRole("button")[0];
47
- userEvent.click(clearButton);
48
- expect(passwordInput.value).toBe("");
49
- });
50
-
51
- test("Non clearable password input has no clear icon", () => {
52
- const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" />);
53
- const passwordInput = getByRole("textbox");
54
- userEvent.type(passwordInput, "Pa$$w0rd");
55
- expect(passwordInput.value).toBe("Pa$$w0rd");
56
- const buttons = getAllByRole("button");
57
- expect(buttons.length).toBe(1);
58
- });
59
-
60
- test("Show/hide password input button works correctly", () => {
61
- const { getAllByRole, getByRole } = render(<DxcPasswordInput label="Password input" clearable />);
62
- const passwordInput = getByRole("textbox");
63
- userEvent.type(passwordInput, "Pa$$w0rd");
64
- expect(passwordInput.value).toBe("Pa$$w0rd");
65
- expect(passwordInput.type).toBe("password");
66
- const showButton = getAllByRole("button")[1];
67
- userEvent.click(showButton);
68
- expect(passwordInput.type).toBe("text");
69
- });
70
-
71
- test("Password input has correct accesibility attributes", () => {
72
- const { getByRole } = render(<DxcPasswordInput label="Password input" />);
73
- const passwordInput = getByRole("textbox");
74
- expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
75
- expect(passwordInput.getAttribute("aria-controls")).toBeNull();
76
- const showButton = getByRole("button");
77
- expect(showButton.getAttribute("aria-expanded")).toBe("false");
78
- expect(showButton.getAttribute("aria-label")).toBe("Show");
79
- userEvent.click(showButton);
80
- expect(showButton.getAttribute("aria-expanded")).toBe("true");
81
- expect(showButton.getAttribute("aria-label")).toBe("Hide");
82
- });
83
- });
@@ -1,35 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import DxcProgressBar from "../src/progress-bar/ProgressBar";
4
-
5
- describe("ProgressBar component tests", () => {
6
- test("ProgressBar renders with label", () => {
7
- const { getByText } = render(<DxcProgressBar label="test-label"></DxcProgressBar>);
8
- expect(getByText("test-label")).toBeTruthy();
9
- });
10
-
11
- test("Overlay progressBar renders with label", () => {
12
- const { getByText } = render(<DxcProgressBar label="test-label" overlay></DxcProgressBar>);
13
- expect(getByText("test-label")).toBeTruthy();
14
- });
15
-
16
- test("ProgressBar renders with default value", () => {
17
- const { getByText } = render(<DxcProgressBar showValue></DxcProgressBar>);
18
- expect(getByText("100 %")).toBeTruthy();
19
- });
20
-
21
- test("Overlay progressBar renders with default value", () => {
22
- const { getByText } = render(<DxcProgressBar showValue overlay></DxcProgressBar>);
23
- expect(getByText("100 %")).toBeTruthy();
24
- });
25
-
26
- test("ProgressBar renders with value", () => {
27
- const { getByText } = render(<DxcProgressBar showValue value={25}></DxcProgressBar>);
28
- expect(getByText("25 %")).toBeTruthy();
29
- });
30
-
31
- test("Overlay progressBar renders with value", () => {
32
- const { getByText } = render(<DxcProgressBar showValue value={25} overlay></DxcProgressBar>);
33
- expect(getByText("25 %")).toBeTruthy();
34
- });
35
- });
@@ -1,37 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcRadio from "../src/radio/Radio";
4
-
5
- describe("Radio component tests", () => {
6
- test("Radio renders correctly", () => {
7
- const { getByText } = render(<DxcRadio label="Radio button" />);
8
- expect(getByText("Radio button")).toBeTruthy();
9
- });
10
- test("Calls correct function on click", () => {
11
- const onClick = jest.fn();
12
- const { getByText} = render(<DxcRadio label="Radio button" onClick={onClick} />);
13
- fireEvent.click(getByText("Radio button"));
14
-
15
- expect(onClick).toHaveBeenCalled();
16
- expect(onClick).toHaveBeenCalledWith(true);
17
- });
18
- test("Controlled Radio", () => {
19
- const onClick = jest.fn();
20
- const { getByText, getByRole } = render(<DxcRadio label="Radio button" checked={false} onClick={onClick} />);
21
- expect(getByRole("radio").checked).toBe(false);
22
- fireEvent.click(getByText("Radio button"));
23
- expect(onClick).toHaveBeenCalled();
24
- expect(onClick).toHaveBeenCalledWith(true);
25
- expect(getByRole("radio").checked).toBe(false);
26
- });
27
- test("Uncontrolled Radio", () => {
28
- const onClick = jest.fn();
29
- const { getByText, getByRole } = render(<DxcRadio label="Radio button" onClick={onClick} />);
30
- expect(getByRole("radio").checked).toBe(false);
31
- fireEvent.click(getByText("Radio button"));
32
- expect(onClick).toHaveBeenCalled();
33
- expect(onClick).toHaveBeenCalledWith(true);
34
- expect(getByRole("radio").checked).toBe(false);
35
- });
36
-
37
- });