@dxc-technology/halstack-react 0.0.0-933ff75 → 0.0.0-93deeae

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 (162) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6802 -0
  3. package/dist/index.d.ts +6802 -0
  4. package/dist/index.js +4372 -0
  5. package/dist/index.mjs +4372 -0
  6. package/package.json +76 -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 -421
  48. package/dist/footer/Icons.js +0 -77
  49. package/dist/header/Header.js +0 -434
  50. package/dist/header/Icons.js +0 -59
  51. package/dist/heading/Heading.js +0 -218
  52. package/dist/input-text/Icons.js +0 -22
  53. package/dist/input-text/InputText.js +0 -705
  54. package/dist/layout/ApplicationLayout.js +0 -327
  55. package/dist/layout/Icons.js +0 -55
  56. package/dist/link/Link.js +0 -237
  57. package/dist/link/readme.md +0 -51
  58. package/dist/main.d.ts +0 -8
  59. package/dist/main.js +0 -367
  60. package/dist/new-select/NewSelect.js +0 -836
  61. package/dist/new-select/index.d.ts +0 -53
  62. package/dist/number-input/NumberInput.js +0 -136
  63. package/dist/number-input/NumberInputContext.js +0 -16
  64. package/dist/number-input/index.d.ts +0 -113
  65. package/dist/paginator/Icons.js +0 -66
  66. package/dist/paginator/Paginator.js +0 -283
  67. package/dist/password-input/PasswordInput.js +0 -198
  68. package/dist/password-input/index.d.ts +0 -94
  69. package/dist/progress-bar/ProgressBar.js +0 -242
  70. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  71. package/dist/progress-bar/readme.md +0 -63
  72. package/dist/radio/Radio.js +0 -209
  73. package/dist/radio/Radio.stories.js +0 -166
  74. package/dist/radio/readme.md +0 -70
  75. package/dist/resultsetTable/ResultsetTable.js +0 -358
  76. package/dist/select/Select.js +0 -549
  77. package/dist/sidenav/Sidenav.js +0 -179
  78. package/dist/slider/Slider.js +0 -404
  79. package/dist/slider/readme.md +0 -64
  80. package/dist/spinner/Spinner.js +0 -381
  81. package/dist/spinner/Spinner.stories.js +0 -183
  82. package/dist/spinner/readme.md +0 -65
  83. package/dist/switch/Switch.js +0 -222
  84. package/dist/switch/Switch.stories.js +0 -134
  85. package/dist/switch/readme.md +0 -133
  86. package/dist/table/Table.js +0 -132
  87. package/dist/tabs/Tabs.js +0 -343
  88. package/dist/tabs/Tabs.stories.js +0 -130
  89. package/dist/tabs/readme.md +0 -78
  90. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  91. package/dist/tabs-for-sections/readme.md +0 -78
  92. package/dist/tag/Tag.js +0 -282
  93. package/dist/text-input/TextInput.js +0 -971
  94. package/dist/text-input/index.d.ts +0 -135
  95. package/dist/textarea/Textarea.js +0 -369
  96. package/dist/textarea/index.d.ts +0 -117
  97. package/dist/toggle/Toggle.js +0 -220
  98. package/dist/toggle/Toggle.stories.js +0 -297
  99. package/dist/toggle/readme.md +0 -80
  100. package/dist/toggle-group/ToggleGroup.js +0 -327
  101. package/dist/upload/Upload.js +0 -205
  102. package/dist/upload/Upload.stories.js +0 -72
  103. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  104. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  105. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  106. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  107. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  108. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  109. package/dist/upload/file-upload/FileToUpload.js +0 -184
  110. package/dist/upload/file-upload/audio-icon.svg +0 -4
  111. package/dist/upload/file-upload/close.svg +0 -4
  112. package/dist/upload/file-upload/file-icon.svg +0 -4
  113. package/dist/upload/file-upload/video-icon.svg +0 -4
  114. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  115. package/dist/upload/readme.md +0 -37
  116. package/dist/upload/transaction/Icons.js +0 -160
  117. package/dist/upload/transaction/Transaction.js +0 -148
  118. package/dist/upload/transactions/Transactions.js +0 -138
  119. package/dist/useTheme.js +0 -22
  120. package/dist/wizard/Icons.js +0 -65
  121. package/dist/wizard/Wizard.js +0 -405
  122. package/test/Accordion.test.js +0 -33
  123. package/test/AccordionGroup.test.js +0 -125
  124. package/test/Alert.test.js +0 -53
  125. package/test/Box.test.js +0 -10
  126. package/test/Button.test.js +0 -18
  127. package/test/Card.test.js +0 -30
  128. package/test/Checkbox.test.js +0 -45
  129. package/test/Chip.test.js +0 -25
  130. package/test/Date.test.js +0 -397
  131. package/test/DateInput.test.js +0 -242
  132. package/test/Dialog.test.js +0 -23
  133. package/test/Dropdown.test.js +0 -145
  134. package/test/FileInput.test.js +0 -201
  135. package/test/Footer.test.js +0 -94
  136. package/test/Header.test.js +0 -34
  137. package/test/Heading.test.js +0 -35
  138. package/test/InputText.test.js +0 -248
  139. package/test/Link.test.js +0 -43
  140. package/test/NumberInput.test.js +0 -259
  141. package/test/Paginator.test.js +0 -177
  142. package/test/PasswordInput.test.js +0 -83
  143. package/test/ProgressBar.test.js +0 -35
  144. package/test/Radio.test.js +0 -37
  145. package/test/ResultsetTable.test.js +0 -329
  146. package/test/Select.test.js +0 -212
  147. package/test/Sidenav.test.js +0 -45
  148. package/test/Slider.test.js +0 -74
  149. package/test/Spinner.test.js +0 -32
  150. package/test/Switch.test.js +0 -45
  151. package/test/Table.test.js +0 -36
  152. package/test/Tabs.test.js +0 -109
  153. package/test/TabsForSections.test.js +0 -34
  154. package/test/Tag.test.js +0 -32
  155. package/test/TextInput.test.js +0 -732
  156. package/test/Textarea.test.js +0 -193
  157. package/test/ToggleGroup.test.js +0 -85
  158. package/test/Upload.test.js +0 -60
  159. package/test/V3TextArea.test.js +0 -51
  160. package/test/Wizard.test.js +0 -130
  161. package/test/mocks/pngMock.js +0 -1
  162. 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
- });