@dxc-technology/halstack-react 0.0.0-acb1a24 → 0.0.0-acc2a7e

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 (167) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +3862 -0
  3. package/dist/index.d.ts +3862 -0
  4. package/dist/index.js +12917 -0
  5. package/dist/index.mjs +12830 -0
  6. package/package.json +83 -64
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -250
  10. package/dist/V3Select/V3Select.js +0 -549
  11. package/dist/V3Select/index.d.ts +0 -27
  12. package/dist/V3Textarea/V3Textarea.js +0 -264
  13. package/dist/V3Textarea/index.d.ts +0 -27
  14. package/dist/accordion/Accordion.js +0 -353
  15. package/dist/accordion/index.d.ts +0 -28
  16. package/dist/accordion-group/AccordionGroup.js +0 -186
  17. package/dist/accordion-group/index.d.ts +0 -16
  18. package/dist/alert/Alert.js +0 -403
  19. package/dist/alert/index.d.ts +0 -51
  20. package/dist/badge/Badge.js +0 -63
  21. package/dist/box/Box.js +0 -156
  22. package/dist/box/index.d.ts +0 -25
  23. package/dist/button/Button.js +0 -238
  24. package/dist/button/index.d.ts +0 -24
  25. package/dist/card/Card.js +0 -254
  26. package/dist/card/index.d.ts +0 -22
  27. package/dist/checkbox/Checkbox.js +0 -299
  28. package/dist/checkbox/index.d.ts +0 -24
  29. package/dist/chip/Chip.js +0 -265
  30. package/dist/chip/index.d.ts +0 -22
  31. package/dist/common/OpenSans.css +0 -81
  32. package/dist/common/RequiredComponent.js +0 -40
  33. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  34. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  35. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  36. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  40. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  41. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  42. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  43. package/dist/common/utils.js +0 -22
  44. package/dist/common/variables.js +0 -1574
  45. package/dist/date/Date.js +0 -379
  46. package/dist/date/index.d.ts +0 -27
  47. package/dist/date-input/DateInput.js +0 -400
  48. package/dist/date-input/index.d.ts +0 -95
  49. package/dist/dialog/Dialog.js +0 -218
  50. package/dist/dialog/index.d.ts +0 -18
  51. package/dist/dropdown/Dropdown.js +0 -544
  52. package/dist/dropdown/index.d.ts +0 -26
  53. package/dist/file-input/FileInput.js +0 -644
  54. package/dist/file-input/FileItem.js +0 -287
  55. package/dist/file-input/index.d.ts +0 -81
  56. package/dist/footer/Footer.js +0 -421
  57. package/dist/footer/Icons.js +0 -77
  58. package/dist/footer/index.d.ts +0 -25
  59. package/dist/header/Header.js +0 -470
  60. package/dist/header/Icons.js +0 -59
  61. package/dist/header/index.d.ts +0 -25
  62. package/dist/heading/Heading.js +0 -230
  63. package/dist/heading/index.d.ts +0 -17
  64. package/dist/input-text/Icons.js +0 -22
  65. package/dist/input-text/InputText.js +0 -705
  66. package/dist/input-text/index.d.ts +0 -36
  67. package/dist/layout/ApplicationLayout.js +0 -327
  68. package/dist/layout/Icons.js +0 -55
  69. package/dist/link/Link.js +0 -237
  70. package/dist/link/index.d.ts +0 -23
  71. package/dist/main.d.ts +0 -40
  72. package/dist/main.js +0 -359
  73. package/dist/number-input/NumberInput.js +0 -136
  74. package/dist/number-input/NumberInputContext.js +0 -16
  75. package/dist/number-input/index.d.ts +0 -113
  76. package/dist/paginator/Icons.js +0 -66
  77. package/dist/paginator/Paginator.js +0 -305
  78. package/dist/paginator/index.d.ts +0 -20
  79. package/dist/password-input/PasswordInput.js +0 -203
  80. package/dist/password-input/index.d.ts +0 -94
  81. package/dist/progress-bar/ProgressBar.js +0 -242
  82. package/dist/progress-bar/index.d.ts +0 -18
  83. package/dist/radio/Radio.js +0 -209
  84. package/dist/radio/index.d.ts +0 -23
  85. package/dist/resultsetTable/ResultsetTable.js +0 -358
  86. package/dist/resultsetTable/index.d.ts +0 -19
  87. package/dist/select/Select.js +0 -1096
  88. package/dist/select/index.d.ts +0 -53
  89. package/dist/sidenav/Sidenav.js +0 -179
  90. package/dist/sidenav/index.d.ts +0 -13
  91. package/dist/slider/Slider.js +0 -404
  92. package/dist/slider/index.d.ts +0 -29
  93. package/dist/spinner/Spinner.js +0 -381
  94. package/dist/spinner/index.d.ts +0 -17
  95. package/dist/switch/Switch.js +0 -222
  96. package/dist/switch/index.d.ts +0 -24
  97. package/dist/table/Table.js +0 -132
  98. package/dist/table/index.d.ts +0 -13
  99. package/dist/tabs/Tabs.js +0 -343
  100. package/dist/tabs/index.d.ts +0 -19
  101. package/dist/tag/Tag.js +0 -282
  102. package/dist/tag/index.d.ts +0 -24
  103. package/dist/text-input/TextInput.js +0 -974
  104. package/dist/text-input/index.d.ts +0 -135
  105. package/dist/textarea/Textarea.js +0 -369
  106. package/dist/textarea/index.d.ts +0 -117
  107. package/dist/toggle/Toggle.js +0 -220
  108. package/dist/toggle/index.d.ts +0 -21
  109. package/dist/toggle-group/ToggleGroup.js +0 -327
  110. package/dist/toggle-group/index.d.ts +0 -21
  111. package/dist/upload/Upload.js +0 -205
  112. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  113. package/dist/upload/buttons-upload/Icons.js +0 -40
  114. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  115. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  116. package/dist/upload/file-upload/FileToUpload.js +0 -189
  117. package/dist/upload/file-upload/Icons.js +0 -66
  118. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  119. package/dist/upload/index.d.ts +0 -15
  120. package/dist/upload/transaction/Icons.js +0 -160
  121. package/dist/upload/transaction/Transaction.js +0 -148
  122. package/dist/upload/transactions/Transactions.js +0 -138
  123. package/dist/useTheme.js +0 -22
  124. package/dist/wizard/Icons.js +0 -65
  125. package/dist/wizard/Wizard.js +0 -405
  126. package/dist/wizard/index.d.ts +0 -18
  127. package/test/Accordion.test.js +0 -33
  128. package/test/AccordionGroup.test.js +0 -125
  129. package/test/Alert.test.js +0 -53
  130. package/test/Box.test.js +0 -10
  131. package/test/Button.test.js +0 -18
  132. package/test/Card.test.js +0 -30
  133. package/test/Checkbox.test.js +0 -45
  134. package/test/Chip.test.js +0 -25
  135. package/test/Date.test.js +0 -395
  136. package/test/DateInput.test.js +0 -242
  137. package/test/Dialog.test.js +0 -23
  138. package/test/Dropdown.test.js +0 -145
  139. package/test/FileInput.test.js +0 -201
  140. package/test/Footer.test.js +0 -94
  141. package/test/Header.test.js +0 -34
  142. package/test/Heading.test.js +0 -83
  143. package/test/InputText.test.js +0 -240
  144. package/test/Link.test.js +0 -43
  145. package/test/NumberInput.test.js +0 -259
  146. package/test/Paginator.test.js +0 -181
  147. package/test/PasswordInput.test.js +0 -83
  148. package/test/ProgressBar.test.js +0 -35
  149. package/test/Radio.test.js +0 -37
  150. package/test/ResultsetTable.test.js +0 -330
  151. package/test/Select.test.js +0 -415
  152. package/test/Sidenav.test.js +0 -45
  153. package/test/Slider.test.js +0 -74
  154. package/test/Spinner.test.js +0 -32
  155. package/test/Switch.test.js +0 -45
  156. package/test/Table.test.js +0 -36
  157. package/test/Tabs.test.js +0 -109
  158. package/test/Tag.test.js +0 -32
  159. package/test/TextInput.test.js +0 -732
  160. package/test/Textarea.test.js +0 -193
  161. package/test/ToggleGroup.test.js +0 -85
  162. package/test/Upload.test.js +0 -60
  163. package/test/V3Select.test.js +0 -212
  164. package/test/V3TextArea.test.js +0 -51
  165. package/test/Wizard.test.js +0 -130
  166. package/test/mocks/pngMock.js +0 -1
  167. 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,181 +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
- window.HTMLElement.prototype.scrollIntoView = () => {};
53
- window.HTMLElement.prototype.scrollTo = () => {};
54
- const { getByText, getAllByRole, getByRole } = render(
55
- <DxcPaginator
56
- currentPage={1}
57
- itemsPerPage={10}
58
- totalItems={27}
59
- showGoToPage={true}
60
- onPageChange={onClick}
61
- ></DxcPaginator>
62
- );
63
- const goToPageSelect = getAllByRole("combobox")[0];
64
- act(() => {
65
- userEvent.click(goToPageSelect);
66
- });
67
- const goToPageOption = getByText("2");
68
- act(() => {
69
- userEvent.click(goToPageOption);
70
- });
71
- expect(onClick).toHaveBeenCalledWith(2);
72
- });
73
-
74
- test("Call correct goToPageFunction", () => {
75
- const onClick = jest.fn();
76
- const { getAllByRole } = render(
77
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
78
- );
79
- const nextButton = getAllByRole("button")[2];
80
- userEvent.click(nextButton);
81
- expect(onClick).toHaveBeenCalled();
82
- });
83
-
84
- test("Call correct itemsPerPageFunction", () => {
85
- const onClick = jest.fn();
86
- window.HTMLElement.prototype.scrollIntoView = () => {};
87
- window.HTMLElement.prototype.scrollTo = () => {};
88
- const { getAllByText, getByText } = render(
89
- <DxcPaginator
90
- currentPage={1}
91
- itemsPerPage={10}
92
- itemsPerPageOptions={[10, 15]}
93
- itemsPerPageFunction={onClick}
94
- totalItems={20}
95
- ></DxcPaginator>
96
- );
97
- const select = getAllByText("10")[0];
98
- act(() => {
99
- userEvent.click(select);
100
- });
101
- const itemPerPageOption = getByText("15");
102
- act(() => {
103
- userEvent.click(itemPerPageOption);
104
- });
105
- expect(onClick).toHaveBeenCalledWith(15);
106
- });
107
-
108
- test("Next button is disable in last page", () => {
109
- const onClick = jest.fn();
110
- const { getAllByRole } = render(
111
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
112
- );
113
- const nextButton = getAllByRole("button")[2];
114
- expect(nextButton.hasAttribute("disabled")).toBeTruthy();
115
- userEvent.click(nextButton);
116
- expect(onClick).toHaveBeenCalledTimes(0);
117
- });
118
-
119
- test("Last button is disable in last page", () => {
120
- const onClick = jest.fn();
121
- const { getAllByRole } = render(
122
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
123
- );
124
- const lastButton = getAllByRole("button")[3];
125
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
126
- userEvent.click(lastButton);
127
- expect(onClick).toHaveBeenCalledTimes(0);
128
- });
129
-
130
- test("First button is disable in first page", () => {
131
- const onClick = jest.fn();
132
- const { getAllByRole } = render(
133
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
134
- );
135
- const lastButton = getAllByRole("button")[0];
136
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
137
- userEvent.click(lastButton);
138
- expect(onClick).toHaveBeenCalledTimes(0);
139
- });
140
-
141
- test("Previous button is disable in first page", () => {
142
- const onClick = jest.fn();
143
- const { getAllByRole } = render(
144
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
145
- );
146
- const lastButton = getAllByRole("button")[1];
147
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
148
- userEvent.click(lastButton);
149
- expect(onClick).toHaveBeenCalledTimes(0);
150
- });
151
-
152
- test("Last and next buttons are disable in last page", () => {
153
- const onClick = jest.fn();
154
- const { getAllByRole } = render(
155
- <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
156
- );
157
- const firstButton = getAllByRole("button")[0];
158
- const prevButton = getAllByRole("button")[1];
159
- const nextButton = getAllByRole("button")[2];
160
- const lastButton = getAllByRole("button")[3];
161
- expect(firstButton.hasAttribute("disabled")).toBeFalsy();
162
- expect(prevButton.hasAttribute("disabled")).toBeFalsy();
163
- expect(nextButton.hasAttribute("disabled")).toBeTruthy();
164
- expect(lastButton.hasAttribute("disabled")).toBeTruthy();
165
- });
166
-
167
- test("First and previous buttons are disable in first page", () => {
168
- const onClick = jest.fn();
169
- const { getAllByRole } = render(
170
- <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
171
- );
172
- const firstButton = getAllByRole("button")[0];
173
- const prevButton = getAllByRole("button")[1];
174
- const nextButton = getAllByRole("button")[2];
175
- const lastButton = getAllByRole("button")[3];
176
- expect(firstButton.hasAttribute("disabled")).toBeTruthy();
177
- expect(prevButton.hasAttribute("disabled")).toBeTruthy();
178
- expect(nextButton.hasAttribute("disabled")).toBeFalsy();
179
- expect(lastButton.hasAttribute("disabled")).toBeFalsy();
180
- });
181
- });
@@ -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
- });