@dxc-technology/halstack-react 0.0.0-e628009 → 0.0.0-e961efe
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.
- package/README.md +1 -1
- package/babel.config.js +0 -1
- package/dist/ThemeContext.js +40 -38
- package/dist/V3Select/V3Select.js +549 -0
- package/dist/V3Select/index.d.ts +27 -0
- package/dist/V3Textarea/index.d.ts +27 -0
- package/dist/accordion/index.d.ts +28 -0
- package/dist/accordion-group/index.d.ts +16 -0
- package/dist/alert/Alert.js +1 -1
- package/dist/box/index.d.ts +25 -0
- package/dist/button/index.d.ts +24 -0
- package/dist/card/index.d.ts +22 -0
- package/dist/checkbox/Checkbox.js +4 -5
- package/dist/checkbox/index.d.ts +24 -0
- package/dist/chip/index.d.ts +22 -0
- package/dist/common/variables.js +128 -123
- package/dist/date/Date.js +6 -6
- package/dist/date/index.d.ts +27 -0
- package/dist/dialog/index.d.ts +18 -0
- package/dist/dropdown/index.d.ts +26 -0
- package/dist/file-input/FileItem.js +8 -1
- package/dist/file-input/index.d.ts +1 -1
- package/dist/footer/index.d.ts +25 -0
- package/dist/header/Header.js +59 -23
- package/dist/header/index.d.ts +25 -0
- package/dist/heading/index.d.ts +17 -0
- package/dist/input-text/InputText.js +4 -4
- package/dist/input-text/index.d.ts +36 -0
- package/dist/link/index.d.ts +23 -0
- package/dist/main.d.ts +36 -4
- package/dist/main.js +9 -17
- package/dist/paginator/Paginator.js +50 -28
- package/dist/paginator/index.d.ts +20 -0
- package/dist/password-input/PasswordInput.js +6 -1
- package/dist/progress-bar/index.d.ts +18 -0
- package/dist/radio/index.d.ts +23 -0
- package/dist/resultsetTable/index.d.ts +19 -0
- package/dist/select/Select.js +848 -301
- package/dist/{new-select → select}/index.d.ts +1 -1
- package/dist/sidenav/index.d.ts +13 -0
- package/dist/slider/index.d.ts +29 -0
- package/dist/spinner/index.d.ts +17 -0
- package/dist/stories/Button.js +71 -0
- package/dist/stories/Button.stories.js +55 -0
- package/dist/stories/Header.js +67 -0
- package/dist/stories/Header.stories.js +31 -0
- package/dist/stories/Introduction.stories.mdx +211 -0
- package/dist/stories/Page.js +68 -0
- package/dist/stories/Page.stories.js +39 -0
- package/dist/stories/assets/code-brackets.svg +1 -0
- package/dist/stories/assets/colors.svg +1 -0
- package/dist/stories/assets/comments.svg +1 -0
- package/dist/stories/assets/direction.svg +1 -0
- package/dist/stories/assets/flow.svg +1 -0
- package/dist/stories/assets/plugin.svg +1 -0
- package/dist/stories/assets/repo.svg +1 -0
- package/dist/stories/assets/stackalt.svg +1 -0
- package/dist/stories/button.css +30 -0
- package/dist/stories/header.css +26 -0
- package/dist/stories/page.css +69 -0
- package/dist/switch/index.d.ts +24 -0
- package/dist/table/index.d.ts +13 -0
- package/dist/tabs/index.d.ts +19 -0
- package/dist/tag/index.d.ts +24 -0
- package/dist/text-input/TextInput.js +8 -5
- package/dist/toggle/index.d.ts +21 -0
- package/dist/toggle-group/index.d.ts +21 -0
- package/dist/upload/Upload.js +3 -3
- package/dist/upload/index.d.ts +15 -0
- package/dist/wizard/index.d.ts +18 -0
- package/package.json +14 -10
- package/test/Date.test.js +34 -36
- package/test/InputText.test.js +17 -26
- package/test/Paginator.test.js +5 -1
- package/test/ResultsetTable.test.js +5 -4
- package/test/Select.test.js +374 -171
- package/test/TextInput.test.js +5 -5
- package/test/Upload.test.js +4 -4
- package/test/V3Select.test.js +212 -0
- package/dist/new-select/NewSelect.js +0 -836
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/test/TabsForSections.test.js +0 -34
package/test/Date.test.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { render, fireEvent } from "@testing-library/react";
|
|
3
|
-
import
|
|
3
|
+
import DxcDate from "../src/date/Date";
|
|
4
4
|
|
|
5
5
|
const defaultFormat = "DD-MM-YYYY";
|
|
6
6
|
|
|
7
7
|
describe("Date component general tests", () => {
|
|
8
8
|
test("Date renders correctly", () => {
|
|
9
|
-
const { getByPlaceholderText } = render(<
|
|
9
|
+
const { getByPlaceholderText } = render(<DxcDate label="Birthdate" placeholder />);
|
|
10
10
|
// const input = getByPlaceholderText('DD-MM-YYYY');
|
|
11
11
|
expect(getByPlaceholderText(defaultFormat)).toBeTruthy();
|
|
12
12
|
});
|
|
@@ -22,19 +22,19 @@ describe("Controlled Date Component", () => {
|
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
const { getByRole, getByPlaceholderText, rerender } = render(
|
|
25
|
-
<
|
|
25
|
+
<DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
|
|
26
26
|
);
|
|
27
27
|
const input = getByPlaceholderText(defaultFormat);
|
|
28
28
|
|
|
29
29
|
fireEvent.change(input, { target: { value: "something" } });
|
|
30
30
|
expect(onChange).toHaveBeenCalled();
|
|
31
31
|
fireEvent.blur(input);
|
|
32
|
-
rerender(<
|
|
32
|
+
rerender(<DxcDate label="Birthdate" value="" placeholder />);
|
|
33
33
|
// expect(getByRole("textbox").value).toBe('');
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
test("The input´s value is the same as the one received as a parameter (Default format)", () => {
|
|
37
|
-
const { getByRole, getByPlaceholderText } = render(<
|
|
37
|
+
const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" value="30/03/1981" placeholder />);
|
|
38
38
|
// const input = getByRole("textbox");
|
|
39
39
|
const input = getByPlaceholderText(defaultFormat);
|
|
40
40
|
expect(input.value).toBe("30/03/1981");
|
|
@@ -42,7 +42,7 @@ describe("Controlled Date Component", () => {
|
|
|
42
42
|
|
|
43
43
|
test("The input´s value is the same as the one received as a parameter (Custom format)", () => {
|
|
44
44
|
const { getByRole, getByPlaceholderText } = render(
|
|
45
|
-
<
|
|
45
|
+
<DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
|
|
46
46
|
);
|
|
47
47
|
// const input = getByRole("textbox");
|
|
48
48
|
const input = getByPlaceholderText("DD/MM/YY");
|
|
@@ -50,20 +50,20 @@ describe("Controlled Date Component", () => {
|
|
|
50
50
|
});
|
|
51
51
|
|
|
52
52
|
test("Calendar´s value is the same as the input´s date if it´s right (Depending on the format)", () => {
|
|
53
|
-
const { getByRole, getByText, getByTestId } = render(<
|
|
53
|
+
const { getByRole, getByText, getByTestId } = render(<DxcDate label="Birthdate" value="16-10-2020" />);
|
|
54
54
|
fireEvent.click(getByTestId("calendarIcon"));
|
|
55
55
|
expect(getByText("Fri, Oct 16")).toBeTruthy();
|
|
56
56
|
});
|
|
57
57
|
|
|
58
58
|
test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
|
|
59
59
|
const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
|
|
60
|
-
<
|
|
60
|
+
<DxcDate label="Birthdate" value="30-03-1981" placeholder />
|
|
61
61
|
);
|
|
62
62
|
// const input = getByRole("textbox");
|
|
63
63
|
const input = getByPlaceholderText(defaultFormat);
|
|
64
64
|
fireEvent.change(input, { target: { value: "10-02-2020" } });
|
|
65
65
|
|
|
66
|
-
rerender(<
|
|
66
|
+
rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
|
|
67
67
|
const calendarButton = getByTestId("calendarIcon");
|
|
68
68
|
fireEvent.click(calendarButton);
|
|
69
69
|
expect(getByText("Mon, Feb 10")).toBeTruthy();
|
|
@@ -76,7 +76,7 @@ describe("Controlled Date Component", () => {
|
|
|
76
76
|
});
|
|
77
77
|
|
|
78
78
|
const { getByRole, getByPlaceholderText } = render(
|
|
79
|
-
<
|
|
79
|
+
<DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
|
|
80
80
|
);
|
|
81
81
|
// const input = getByRole("textbox");
|
|
82
82
|
const input = getByPlaceholderText(defaultFormat);
|
|
@@ -92,7 +92,7 @@ describe("Controlled Date Component", () => {
|
|
|
92
92
|
});
|
|
93
93
|
|
|
94
94
|
const { getByRole, getByPlaceholderText } = render(
|
|
95
|
-
<
|
|
95
|
+
<DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
|
|
96
96
|
);
|
|
97
97
|
// const input = getByRole("textbox");
|
|
98
98
|
const input = getByPlaceholderText(defaultFormat);
|
|
@@ -107,7 +107,7 @@ describe("Controlled Date Component", () => {
|
|
|
107
107
|
});
|
|
108
108
|
|
|
109
109
|
const { getByRole, getByPlaceholderText } = render(
|
|
110
|
-
<
|
|
110
|
+
<DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
|
|
111
111
|
);
|
|
112
112
|
// const input = getByRole("textbox");
|
|
113
113
|
const input = getByPlaceholderText("DD-MM-YY");
|
|
@@ -123,7 +123,7 @@ describe("Controlled Date Component", () => {
|
|
|
123
123
|
});
|
|
124
124
|
|
|
125
125
|
const { getByRole, getByPlaceholderText } = render(
|
|
126
|
-
<
|
|
126
|
+
<DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
|
|
127
127
|
);
|
|
128
128
|
// const input = getByRole("textbox");
|
|
129
129
|
const input = getByPlaceholderText(defaultFormat);
|
|
@@ -139,7 +139,7 @@ describe("Controlled Date Component", () => {
|
|
|
139
139
|
});
|
|
140
140
|
|
|
141
141
|
const { getByRole, getByPlaceholderText } = render(
|
|
142
|
-
<
|
|
142
|
+
<DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
|
|
143
143
|
);
|
|
144
144
|
// const input = getByRole("textbox");
|
|
145
145
|
const input = getByPlaceholderText("MM/DD/YYYY");
|
|
@@ -151,7 +151,7 @@ describe("Controlled Date Component", () => {
|
|
|
151
151
|
test("onChange function is called when the user selects from the calendar", () => {
|
|
152
152
|
const onChange = jest.fn();
|
|
153
153
|
|
|
154
|
-
const component = render(<
|
|
154
|
+
const component = render(<DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
|
|
155
155
|
const calendarButton = component.getByTestId("calendarIcon");
|
|
156
156
|
fireEvent.click(calendarButton);
|
|
157
157
|
const dayButton = component.getByRole("button", { name: "10" });
|
|
@@ -165,7 +165,7 @@ describe("Controlled Date Component", () => {
|
|
|
165
165
|
expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
|
|
166
166
|
});
|
|
167
167
|
|
|
168
|
-
const component = render(<
|
|
168
|
+
const component = render(<DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
|
|
169
169
|
const calendarButton = component.getByTestId("calendarIcon");
|
|
170
170
|
fireEvent.click(calendarButton);
|
|
171
171
|
const dayButton = component.getByRole("button", { name: "16" });
|
|
@@ -178,7 +178,7 @@ describe("Controlled Date Component", () => {
|
|
|
178
178
|
expect(returnedValue.stringValue).toBe("16-10-2020");
|
|
179
179
|
});
|
|
180
180
|
|
|
181
|
-
const component = render(<
|
|
181
|
+
const component = render(<DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
|
|
182
182
|
const calendarButton = component.getByTestId("calendarIcon");
|
|
183
183
|
fireEvent.click(calendarButton);
|
|
184
184
|
const dayButton = component.getByRole("button", { name: "16" });
|
|
@@ -191,9 +191,7 @@ describe("Controlled Date Component", () => {
|
|
|
191
191
|
expect(returnedValue.stringValue).toBe("2020/10/16");
|
|
192
192
|
});
|
|
193
193
|
|
|
194
|
-
const component = render(
|
|
195
|
-
<V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
|
|
196
|
-
);
|
|
194
|
+
const component = render(<DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />);
|
|
197
195
|
const calendarButton = component.getByTestId("calendarIcon");
|
|
198
196
|
fireEvent.click(calendarButton);
|
|
199
197
|
const dayButton = component.getByRole("button", { name: "16" });
|
|
@@ -202,7 +200,7 @@ describe("Controlled Date Component", () => {
|
|
|
202
200
|
});
|
|
203
201
|
|
|
204
202
|
test("Check selected date on calendar is the same date as the one on the input", () => {
|
|
205
|
-
const component = render(<
|
|
203
|
+
const component = render(<DxcDate label="Birthdate" value="01-10-2020" />);
|
|
206
204
|
const calendarButton = component.getByTestId("calendarIcon");
|
|
207
205
|
fireEvent.click(calendarButton);
|
|
208
206
|
const dayButton = component.getByRole("button", { name: "1" });
|
|
@@ -211,7 +209,7 @@ describe("Controlled Date Component", () => {
|
|
|
211
209
|
test("onBlur function is called", () => {
|
|
212
210
|
const onBlur = jest.fn();
|
|
213
211
|
const { getByRole, getByPlaceholderText } = render(
|
|
214
|
-
<
|
|
212
|
+
<DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
|
|
215
213
|
);
|
|
216
214
|
// const input = getByRole("textbox");
|
|
217
215
|
const input = getByPlaceholderText(defaultFormat);
|
|
@@ -224,7 +222,7 @@ describe("Controlled Date Component", () => {
|
|
|
224
222
|
expect(returnedValue).toBe("30-03-81");
|
|
225
223
|
});
|
|
226
224
|
const { getByRole, getByPlaceholderText } = render(
|
|
227
|
-
<
|
|
225
|
+
<DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
|
|
228
226
|
);
|
|
229
227
|
// const input = getByRole("textbox");
|
|
230
228
|
const input = getByPlaceholderText(defaultFormat);
|
|
@@ -237,7 +235,7 @@ describe("Controlled Date Component", () => {
|
|
|
237
235
|
expect(returnedValue).toBe("30/03/81");
|
|
238
236
|
});
|
|
239
237
|
const { getByRole, getByPlaceholderText } = render(
|
|
240
|
-
<
|
|
238
|
+
<DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
|
|
241
239
|
);
|
|
242
240
|
// const input = getByRole("textbox");
|
|
243
241
|
const input = getByPlaceholderText("DD/MM/YY");
|
|
@@ -252,14 +250,14 @@ describe("Uncontrolled Date Component", () => {
|
|
|
252
250
|
|
|
253
251
|
test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
|
|
254
252
|
const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
|
|
255
|
-
<
|
|
253
|
+
<DxcDate label="Birthdate" placeholder />
|
|
256
254
|
);
|
|
257
255
|
// const input = getByRole("textbox");
|
|
258
256
|
const input = getByPlaceholderText(defaultFormat);
|
|
259
257
|
|
|
260
258
|
fireEvent.change(input, { target: { value: "10-02-2020" } });
|
|
261
259
|
|
|
262
|
-
rerender(<
|
|
260
|
+
rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
|
|
263
261
|
const calendarButton = getByTestId("calendarIcon");
|
|
264
262
|
fireEvent.click(calendarButton);
|
|
265
263
|
expect(getByText("Mon, Feb 10")).toBeTruthy();
|
|
@@ -271,7 +269,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
271
269
|
expect(returnedValue.stringValue).toBe("something");
|
|
272
270
|
});
|
|
273
271
|
|
|
274
|
-
const { getByRole, getByPlaceholderText } = render(<
|
|
272
|
+
const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
|
|
275
273
|
// const input = getByRole("textbox");
|
|
276
274
|
const input = getByPlaceholderText(defaultFormat);
|
|
277
275
|
|
|
@@ -284,7 +282,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
284
282
|
expect(returnedValue.stringValue).toBe("16-10-2020");
|
|
285
283
|
});
|
|
286
284
|
|
|
287
|
-
const { getByRole, getByPlaceholderText } = render(<
|
|
285
|
+
const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
|
|
288
286
|
// const input = getByRole("textbox");
|
|
289
287
|
const input = getByPlaceholderText(defaultFormat);
|
|
290
288
|
|
|
@@ -298,7 +296,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
298
296
|
});
|
|
299
297
|
|
|
300
298
|
const { getByRole, getByPlaceholderText } = render(
|
|
301
|
-
<
|
|
299
|
+
<DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
|
|
302
300
|
);
|
|
303
301
|
// const input = getByRole("textbox");
|
|
304
302
|
const input = getByPlaceholderText("DD-MM-YY");
|
|
@@ -313,7 +311,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
313
311
|
expect(returnedValue.stringValue).toBe("11-15-2020");
|
|
314
312
|
});
|
|
315
313
|
|
|
316
|
-
const { getByRole, getByPlaceholderText } = render(<
|
|
314
|
+
const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
|
|
317
315
|
// const input = getByRole("textbox");
|
|
318
316
|
const input = getByPlaceholderText(defaultFormat);
|
|
319
317
|
|
|
@@ -328,7 +326,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
328
326
|
});
|
|
329
327
|
|
|
330
328
|
const { getByRole, getByPlaceholderText } = render(
|
|
331
|
-
<
|
|
329
|
+
<DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
|
|
332
330
|
);
|
|
333
331
|
// const input = getByRole("textbox");
|
|
334
332
|
const input = getByPlaceholderText("MM/DD/YYYY");
|
|
@@ -339,7 +337,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
339
337
|
test("onChange function is called when the user selects from the calendar", () => {
|
|
340
338
|
const onChange = jest.fn();
|
|
341
339
|
|
|
342
|
-
const component = render(<
|
|
340
|
+
const component = render(<DxcDate label="Birthdate" onChange={onChange} />);
|
|
343
341
|
const calendarButton = component.getByTestId("calendarIcon");
|
|
344
342
|
fireEvent.click(calendarButton);
|
|
345
343
|
const dayButton = component.getByRole("button", { name: "10" });
|
|
@@ -349,7 +347,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
349
347
|
});
|
|
350
348
|
|
|
351
349
|
test("Check selected date on calendar is the same date as the one on the input", () => {
|
|
352
|
-
const component = render(<
|
|
350
|
+
const component = render(<DxcDate label="Birthdate" placeholder />);
|
|
353
351
|
// const input = component.getByRole("textbox");
|
|
354
352
|
const input = component.getByPlaceholderText(defaultFormat);
|
|
355
353
|
|
|
@@ -361,7 +359,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
361
359
|
});
|
|
362
360
|
test("onBlur function is called", () => {
|
|
363
361
|
const onBlur = jest.fn();
|
|
364
|
-
const { getByRole, getByPlaceholderText } = render(<
|
|
362
|
+
const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
|
|
365
363
|
// const input = getByRole("textbox");
|
|
366
364
|
const input = getByPlaceholderText(defaultFormat);
|
|
367
365
|
|
|
@@ -372,7 +370,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
372
370
|
const onBlur = jest.fn((returnedValue) => {
|
|
373
371
|
expect(returnedValue).toBe("10-02-2020");
|
|
374
372
|
});
|
|
375
|
-
const { getByRole, getByPlaceholderText } = render(<
|
|
373
|
+
const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
|
|
376
374
|
// const input = getByRole("textbox");
|
|
377
375
|
const input = getByPlaceholderText("DD-MM-YYYY");
|
|
378
376
|
|
|
@@ -385,7 +383,7 @@ describe("Uncontrolled Date Component", () => {
|
|
|
385
383
|
expect(returnedValue).toBe("10/02/20");
|
|
386
384
|
});
|
|
387
385
|
const { getByRole, getByPlaceholderText } = render(
|
|
388
|
-
<
|
|
386
|
+
<DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
|
|
389
387
|
);
|
|
390
388
|
// const input = getByRole("textbox");
|
|
391
389
|
const input = getByPlaceholderText("DD/MM/YY");
|
package/test/InputText.test.js
CHANGED
|
@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
|
|
|
4
4
|
|
|
5
5
|
import icon from "../../app/src/images/invision.svg";
|
|
6
6
|
|
|
7
|
-
import
|
|
7
|
+
import DxcInputText from "../src/input-text/InputText";
|
|
8
8
|
|
|
9
9
|
const countries = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
|
|
10
10
|
|
|
@@ -14,9 +14,8 @@ jest.mock("popper.js", () => {
|
|
|
14
14
|
const PopperJS = jest.requireActual("popper.js");
|
|
15
15
|
|
|
16
16
|
return class {
|
|
17
|
-
static placements = PopperJS.placements;
|
|
18
|
-
|
|
19
17
|
constructor() {
|
|
18
|
+
this.placements = PopperJS.placements;
|
|
20
19
|
return {
|
|
21
20
|
destroy: () => {},
|
|
22
21
|
scheduleUpdate: () => {},
|
|
@@ -28,13 +27,13 @@ jest.mock("popper.js", () => {
|
|
|
28
27
|
|
|
29
28
|
describe("InputText component tests", () => {
|
|
30
29
|
test("Input renders with correct label", () => {
|
|
31
|
-
const { getByText } = render(<
|
|
30
|
+
const { getByText } = render(<DxcInputText label="Input label" />);
|
|
32
31
|
expect(getByText("Input label")).toBeTruthy();
|
|
33
32
|
});
|
|
34
33
|
|
|
35
34
|
test("onChange function is called correctly", () => {
|
|
36
35
|
const onChange = jest.fn();
|
|
37
|
-
const { getByRole } = render(<
|
|
36
|
+
const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} />);
|
|
38
37
|
const input = getByRole("textbox");
|
|
39
38
|
userEvent.type(input, "20000");
|
|
40
39
|
expect(onChange).toHaveBeenCalled();
|
|
@@ -44,7 +43,7 @@ describe("InputText component tests", () => {
|
|
|
44
43
|
const onBlur = jest.fn();
|
|
45
44
|
const onChange = jest.fn();
|
|
46
45
|
|
|
47
|
-
const { getByRole } = render(<
|
|
46
|
+
const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} onBlur={onBlur} />);
|
|
48
47
|
const input = getByRole("textbox");
|
|
49
48
|
userEvent.type(input, "Test value");
|
|
50
49
|
fireEvent.blur(input);
|
|
@@ -54,7 +53,7 @@ describe("InputText component tests", () => {
|
|
|
54
53
|
|
|
55
54
|
test("Uncontrolled component", () => {
|
|
56
55
|
const onChange = jest.fn();
|
|
57
|
-
const { getByRole } = render(<
|
|
56
|
+
const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} />);
|
|
58
57
|
const input = getByRole("textbox");
|
|
59
58
|
userEvent.type(input, "20000");
|
|
60
59
|
expect(onChange).toHaveBeenCalled();
|
|
@@ -66,7 +65,7 @@ describe("InputText component tests", () => {
|
|
|
66
65
|
const onChange = jest.fn();
|
|
67
66
|
const onBlur = jest.fn();
|
|
68
67
|
const { getByRole } = render(
|
|
69
|
-
<
|
|
68
|
+
<DxcInputText label="Input label" value="Test value" onChange={onChange} onBlur={onBlur} />
|
|
70
69
|
);
|
|
71
70
|
const input = getByRole("textbox");
|
|
72
71
|
userEvent.type(input, "20000");
|
|
@@ -78,14 +77,14 @@ describe("InputText component tests", () => {
|
|
|
78
77
|
});
|
|
79
78
|
test("Prefix icon onClick", () => {
|
|
80
79
|
const onClick = jest.fn();
|
|
81
|
-
const { getByRole } = render(<
|
|
80
|
+
const { getByRole } = render(<DxcInputText label="Input label" prefixIconSrc={icon} onClickPrefix={onClick} />);
|
|
82
81
|
const prefixIcon = getByRole("img");
|
|
83
82
|
userEvent.click(prefixIcon);
|
|
84
83
|
expect(onClick).toHaveBeenCalled();
|
|
85
84
|
});
|
|
86
85
|
test("Suffix icon onClick", () => {
|
|
87
86
|
const onClick = jest.fn();
|
|
88
|
-
const { getByRole } = render(<
|
|
87
|
+
const { getByRole } = render(<DxcInputText label="Input label" suffixIconSrc={icon} onClickSuffix={onClick} />);
|
|
89
88
|
const suffixIcon = getByRole("img");
|
|
90
89
|
userEvent.click(suffixIcon);
|
|
91
90
|
expect(onClick).toHaveBeenCalled();
|
|
@@ -96,7 +95,7 @@ describe("Autocomplete component Synchronous tests", () => {
|
|
|
96
95
|
test("Autocomplete no matches found is shown", async () => {
|
|
97
96
|
const onChangeAtocomplete = jest.fn();
|
|
98
97
|
render(
|
|
99
|
-
<
|
|
98
|
+
<DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
|
|
100
99
|
);
|
|
101
100
|
const input = screen.getByRole("textbox");
|
|
102
101
|
fireEvent.focus(input);
|
|
@@ -108,7 +107,7 @@ describe("Autocomplete component Synchronous tests", () => {
|
|
|
108
107
|
test("Autocomplete suggestions are shown", async () => {
|
|
109
108
|
const onChangeAtocomplete = jest.fn();
|
|
110
109
|
render(
|
|
111
|
-
<
|
|
110
|
+
<DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
|
|
112
111
|
);
|
|
113
112
|
const input = screen.getByRole("textbox");
|
|
114
113
|
fireEvent.focus(input);
|
|
@@ -118,7 +117,7 @@ describe("Autocomplete component Synchronous tests", () => {
|
|
|
118
117
|
test("Autocomplete UNCONTROLLED suggestion selected", async () => {
|
|
119
118
|
const onChangeAtocomplete = jest.fn();
|
|
120
119
|
render(
|
|
121
|
-
<
|
|
120
|
+
<DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
|
|
122
121
|
);
|
|
123
122
|
const input = screen.getByRole("textbox");
|
|
124
123
|
fireEvent.focus(input);
|
|
@@ -138,7 +137,7 @@ describe("Autocomplete component Synchronous tests", () => {
|
|
|
138
137
|
test("Autocomplete CONTROLLED suggestions selected", async () => {
|
|
139
138
|
const onChangeAtocomplete = jest.fn();
|
|
140
139
|
render(
|
|
141
|
-
<
|
|
140
|
+
<DxcInputText
|
|
142
141
|
label="Autocomplete Countries"
|
|
143
142
|
value="Andorra"
|
|
144
143
|
autocompleteOptions={countries}
|
|
@@ -165,11 +164,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
|
|
|
165
164
|
|
|
166
165
|
const onChangeAtocomplete = jest.fn();
|
|
167
166
|
render(
|
|
168
|
-
<
|
|
169
|
-
label="Autocomplete Countries"
|
|
170
|
-
autocompleteOptions={callbackFunc}
|
|
171
|
-
onChange={onChangeAtocomplete}
|
|
172
|
-
/>
|
|
167
|
+
<DxcInputText label="Autocomplete Countries" autocompleteOptions={callbackFunc} onChange={onChangeAtocomplete} />
|
|
173
168
|
);
|
|
174
169
|
const input = screen.getByRole("textbox");
|
|
175
170
|
fireEvent.focus(input);
|
|
@@ -182,11 +177,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
|
|
|
182
177
|
const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 1000)));
|
|
183
178
|
const onChangeAtocomplete = jest.fn();
|
|
184
179
|
render(
|
|
185
|
-
<
|
|
186
|
-
label="Autocomplete Countries"
|
|
187
|
-
onChange={onChangeAtocomplete}
|
|
188
|
-
autocompleteOptions={callbackFunc}
|
|
189
|
-
/>
|
|
180
|
+
<DxcInputText label="Autocomplete Countries" onChange={onChangeAtocomplete} autocompleteOptions={callbackFunc} />
|
|
190
181
|
);
|
|
191
182
|
const input = screen.getByRole("textbox");
|
|
192
183
|
fireEvent.focus(input);
|
|
@@ -206,7 +197,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
|
|
|
206
197
|
const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 3000)));
|
|
207
198
|
const onChangeAtocomplete = jest.fn();
|
|
208
199
|
render(
|
|
209
|
-
<
|
|
200
|
+
<DxcInputText
|
|
210
201
|
label="Autocomplete Countries"
|
|
211
202
|
value="test value"
|
|
212
203
|
onChange={onChangeAtocomplete}
|
|
@@ -232,7 +223,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
|
|
|
232
223
|
const onChangeAtocomplete = jest.fn();
|
|
233
224
|
|
|
234
225
|
render(
|
|
235
|
-
<
|
|
226
|
+
<DxcInputText
|
|
236
227
|
label="Autocomplete Countries"
|
|
237
228
|
value="test value"
|
|
238
229
|
onChange={onChangeAtocomplete}
|
package/test/Paginator.test.js
CHANGED
|
@@ -49,6 +49,8 @@ describe("Paginator component tests", () => {
|
|
|
49
49
|
|
|
50
50
|
test("Paginator goToPage call correct function", () => {
|
|
51
51
|
const onClick = jest.fn();
|
|
52
|
+
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
53
|
+
window.HTMLElement.prototype.scrollTo = () => {};
|
|
52
54
|
const { getByText, getAllByRole, getByRole } = render(
|
|
53
55
|
<DxcPaginator
|
|
54
56
|
currentPage={1}
|
|
@@ -58,7 +60,7 @@ describe("Paginator component tests", () => {
|
|
|
58
60
|
onPageChange={onClick}
|
|
59
61
|
></DxcPaginator>
|
|
60
62
|
);
|
|
61
|
-
const goToPageSelect = getAllByRole("
|
|
63
|
+
const goToPageSelect = getAllByRole("combobox")[0];
|
|
62
64
|
act(() => {
|
|
63
65
|
userEvent.click(goToPageSelect);
|
|
64
66
|
});
|
|
@@ -81,6 +83,8 @@ describe("Paginator component tests", () => {
|
|
|
81
83
|
|
|
82
84
|
test("Call correct itemsPerPageFunction", () => {
|
|
83
85
|
const onClick = jest.fn();
|
|
86
|
+
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
87
|
+
window.HTMLElement.prototype.scrollTo = () => {};
|
|
84
88
|
const { getAllByText, getByText } = render(
|
|
85
89
|
<DxcPaginator
|
|
86
90
|
currentPage={1}
|
|
@@ -244,7 +244,7 @@ describe("ResultsetTable component tests", () => {
|
|
|
244
244
|
expect(getByText("Louis")).toBeTruthy();
|
|
245
245
|
expect(getByText("Lana")).toBeTruthy();
|
|
246
246
|
expect(getAllByRole("row").length - 1).toEqual(3);
|
|
247
|
-
const nextButton = getAllByRole("button")[
|
|
247
|
+
const nextButton = getAllByRole("button")[2];
|
|
248
248
|
fireEvent.click(nextButton);
|
|
249
249
|
expect(getByText("4 to 6 of 10")).toBeTruthy();
|
|
250
250
|
// expect(getByText("Page: 2 of 4")).toBeTruthy();
|
|
@@ -255,6 +255,8 @@ describe("ResultsetTable component tests", () => {
|
|
|
255
255
|
});
|
|
256
256
|
|
|
257
257
|
test("Resultsettable goToPage works as expected", () => {
|
|
258
|
+
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
259
|
+
window.HTMLElement.prototype.scrollTo = () => {};
|
|
258
260
|
const { getByText, getAllByRole, getByRole } = render(
|
|
259
261
|
<DxcResultsetTable columns={columns} showGoToPage={true} rows={rows} itemsPerPage={3}></DxcResultsetTable>
|
|
260
262
|
);
|
|
@@ -282,8 +284,7 @@ describe("ResultsetTable component tests", () => {
|
|
|
282
284
|
const { getByText, getAllByRole } = render(
|
|
283
285
|
<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
|
|
284
286
|
);
|
|
285
|
-
|
|
286
|
-
const lastButton = getAllByRole("button")[4];
|
|
287
|
+
const lastButton = getAllByRole("button")[3];
|
|
287
288
|
fireEvent.click(lastButton);
|
|
288
289
|
expect(getByText("10 to 10 of 10")).toBeTruthy();
|
|
289
290
|
expect(getAllByRole("row")).toHaveLength(2);
|
|
@@ -319,7 +320,7 @@ describe("ResultsetTable component tests", () => {
|
|
|
319
320
|
itemsPerPageOptions={[2, 3]}
|
|
320
321
|
></DxcResultsetTable>
|
|
321
322
|
);
|
|
322
|
-
const lastButton = getAllByRole("button")[
|
|
323
|
+
const lastButton = getAllByRole("button")[3];
|
|
323
324
|
fireEvent.click(lastButton);
|
|
324
325
|
expect(getAllByRole("row").length - 1).toEqual(1);
|
|
325
326
|
rerender(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={6}></DxcResultsetTable>);
|