@dxc-technology/halstack-react 0.0.0-e628009 → 0.0.0-e690193

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 (136) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +3923 -0
  3. package/dist/index.d.ts +3923 -0
  4. package/dist/index.js +14133 -0
  5. package/dist/index.mjs +14045 -0
  6. package/package.json +92 -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/chip/Chip.js +0 -265
  21. package/dist/common/OpenSans.css +0 -81
  22. package/dist/common/RequiredComponent.js +0 -40
  23. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  24. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  33. package/dist/common/utils.js +0 -22
  34. package/dist/common/variables.js +0 -1569
  35. package/dist/date/Date.js +0 -379
  36. package/dist/date-input/DateInput.js +0 -400
  37. package/dist/date-input/index.d.ts +0 -95
  38. package/dist/dialog/Dialog.js +0 -218
  39. package/dist/dropdown/Dropdown.js +0 -544
  40. package/dist/file-input/FileInput.js +0 -644
  41. package/dist/file-input/FileItem.js +0 -280
  42. package/dist/file-input/index.d.ts +0 -81
  43. package/dist/footer/Footer.js +0 -421
  44. package/dist/footer/Icons.js +0 -77
  45. package/dist/header/Header.js +0 -434
  46. package/dist/header/Icons.js +0 -59
  47. package/dist/heading/Heading.js +0 -230
  48. package/dist/input-text/Icons.js +0 -22
  49. package/dist/input-text/InputText.js +0 -705
  50. package/dist/layout/ApplicationLayout.js +0 -327
  51. package/dist/layout/Icons.js +0 -55
  52. package/dist/link/Link.js +0 -237
  53. package/dist/main.d.ts +0 -8
  54. package/dist/main.js +0 -367
  55. package/dist/new-select/NewSelect.js +0 -836
  56. package/dist/new-select/index.d.ts +0 -53
  57. package/dist/number-input/NumberInput.js +0 -136
  58. package/dist/number-input/NumberInputContext.js +0 -16
  59. package/dist/number-input/index.d.ts +0 -113
  60. package/dist/paginator/Icons.js +0 -66
  61. package/dist/paginator/Paginator.js +0 -283
  62. package/dist/password-input/PasswordInput.js +0 -198
  63. package/dist/password-input/index.d.ts +0 -94
  64. package/dist/progress-bar/ProgressBar.js +0 -242
  65. package/dist/radio/Radio.js +0 -209
  66. package/dist/resultsetTable/ResultsetTable.js +0 -358
  67. package/dist/select/Select.js +0 -549
  68. package/dist/sidenav/Sidenav.js +0 -179
  69. package/dist/slider/Slider.js +0 -404
  70. package/dist/spinner/Spinner.js +0 -381
  71. package/dist/switch/Switch.js +0 -222
  72. package/dist/table/Table.js +0 -132
  73. package/dist/tabs/Tabs.js +0 -343
  74. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  75. package/dist/tag/Tag.js +0 -282
  76. package/dist/text-input/TextInput.js +0 -971
  77. package/dist/text-input/index.d.ts +0 -135
  78. package/dist/textarea/Textarea.js +0 -369
  79. package/dist/textarea/index.d.ts +0 -117
  80. package/dist/toggle/Toggle.js +0 -220
  81. package/dist/toggle-group/ToggleGroup.js +0 -327
  82. package/dist/upload/Upload.js +0 -205
  83. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  84. package/dist/upload/buttons-upload/Icons.js +0 -40
  85. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  86. package/dist/upload/dragAndDropArea/Icons.js +0 -39
  87. package/dist/upload/file-upload/FileToUpload.js +0 -189
  88. package/dist/upload/file-upload/Icons.js +0 -66
  89. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  90. package/dist/upload/transaction/Icons.js +0 -160
  91. package/dist/upload/transaction/Transaction.js +0 -148
  92. package/dist/upload/transactions/Transactions.js +0 -138
  93. package/dist/useTheme.js +0 -22
  94. package/dist/wizard/Icons.js +0 -65
  95. package/dist/wizard/Wizard.js +0 -405
  96. package/test/Accordion.test.js +0 -33
  97. package/test/AccordionGroup.test.js +0 -125
  98. package/test/Alert.test.js +0 -53
  99. package/test/Box.test.js +0 -10
  100. package/test/Button.test.js +0 -18
  101. package/test/Card.test.js +0 -30
  102. package/test/Checkbox.test.js +0 -45
  103. package/test/Chip.test.js +0 -25
  104. package/test/Date.test.js +0 -397
  105. package/test/DateInput.test.js +0 -242
  106. package/test/Dialog.test.js +0 -23
  107. package/test/Dropdown.test.js +0 -145
  108. package/test/FileInput.test.js +0 -201
  109. package/test/Footer.test.js +0 -94
  110. package/test/Header.test.js +0 -34
  111. package/test/Heading.test.js +0 -83
  112. package/test/InputText.test.js +0 -248
  113. package/test/Link.test.js +0 -43
  114. package/test/NumberInput.test.js +0 -259
  115. package/test/Paginator.test.js +0 -177
  116. package/test/PasswordInput.test.js +0 -83
  117. package/test/ProgressBar.test.js +0 -35
  118. package/test/Radio.test.js +0 -37
  119. package/test/ResultsetTable.test.js +0 -329
  120. package/test/Select.test.js +0 -212
  121. package/test/Sidenav.test.js +0 -45
  122. package/test/Slider.test.js +0 -74
  123. package/test/Spinner.test.js +0 -32
  124. package/test/Switch.test.js +0 -45
  125. package/test/Table.test.js +0 -36
  126. package/test/Tabs.test.js +0 -109
  127. package/test/TabsForSections.test.js +0 -34
  128. package/test/Tag.test.js +0 -32
  129. package/test/TextInput.test.js +0 -732
  130. package/test/Textarea.test.js +0 -193
  131. package/test/ToggleGroup.test.js +0 -85
  132. package/test/Upload.test.js +0 -60
  133. package/test/V3TextArea.test.js +0 -51
  134. package/test/Wizard.test.js +0 -130
  135. package/test/mocks/pngMock.js +0 -1
  136. package/test/mocks/svgMock.js +0 -1
@@ -1,45 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
-
4
- import DxcCheckbox from "../src/checkbox/Checkbox";
5
-
6
- describe("Checkbox component tests", () => {
7
- test("Checkbox renders with correct text", () => {
8
- const { getByText } = render(<DxcCheckbox label="Checkbox" />);
9
-
10
- expect(getByText("Checkbox")).toBeTruthy();
11
- });
12
-
13
- test("Calls correct function on click", () => {
14
- const onChange = jest.fn();
15
- const { getByText } = render(<DxcCheckbox label="Checkbox" onChange={onChange} />);
16
-
17
- fireEvent.click(getByText("Checkbox"));
18
- expect(onChange).toHaveBeenCalled();
19
- });
20
-
21
- test("Uncontrolled checkbox", () => {
22
- const onChange = jest.fn();
23
- const component = render(<DxcCheckbox label="Checkbox" onChange={onChange} />);
24
- const visibleCheckbox = component.getByText("Checkbox");
25
- const input = component.getByRole("checkbox");
26
- expect(input.checked).toBe(false);
27
- fireEvent.click(visibleCheckbox);
28
- expect(onChange).toHaveBeenCalled();
29
- expect(onChange).toHaveBeenCalledWith(true);
30
- expect(input.checked).toBe(true);
31
- });
32
-
33
- test("Controlled checkbox", () => {
34
- const onChange = jest.fn();
35
- const component = render(<DxcCheckbox label="Checkbox" checked={false} onChange={onChange} />);
36
-
37
- const input = component.getByRole("checkbox");
38
- const visibleCheckbox = component.getByText("Checkbox");
39
-
40
- fireEvent.click(visibleCheckbox);
41
- expect(onChange).toHaveBeenCalled();
42
- expect(onChange).toHaveBeenCalledWith(true);
43
- expect(input.checked).toBe(false);
44
- });
45
- });
package/test/Chip.test.js DELETED
@@ -1,25 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import DxcChip from "../src/chip/Chip";
4
- import icon from "../../app/src/images/invision.svg";
5
-
6
- describe("Chip component tests", () => {
7
- test("Chip renders with correct text", () => {
8
- const { getByText } = render(<DxcChip label="Chip" />);
9
- expect(getByText("Chip")).toBeTruthy();
10
- });
11
- test("Calls correct function when clicking on prefix icon", () => {
12
- const onClick = jest.fn();
13
- const { getByText, getByRole } = render(<DxcChip label="Chip" prefixIconSrc={icon} onClickPrefix={onClick} />);
14
- expect(getByText("Chip")).toBeTruthy();
15
- fireEvent.click(getByRole("img"));
16
- expect(onClick).toHaveBeenCalled();
17
- });
18
- test("Calls correct function when clicking on suffix icon", () => {
19
- const onClick = jest.fn();
20
- const { getByText, getByRole } = render(<DxcChip label="Chip" suffixIconSrc={icon} onClickSuffix={onClick} />);
21
- expect(getByText("Chip")).toBeTruthy();
22
- fireEvent.click(getByRole("img"));
23
- expect(onClick).toHaveBeenCalled();
24
- });
25
- });
package/test/Date.test.js DELETED
@@ -1,397 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
- import V3DxcDate from "../src/date/Date";
4
-
5
- const defaultFormat = "DD-MM-YYYY";
6
-
7
- describe("Date component general tests", () => {
8
- test("Date renders correctly", () => {
9
- const { getByPlaceholderText } = render(<V3DxcDate label="Birthdate" placeholder />);
10
- // const input = getByPlaceholderText('DD-MM-YYYY');
11
- expect(getByPlaceholderText(defaultFormat)).toBeTruthy();
12
- });
13
- });
14
-
15
- describe("Controlled Date Component", () => {
16
- const date = new Date("2020-10-16 00:00:00");
17
-
18
- test("Changing the input value and after this deleting its content input´s value should be ''", () => {
19
- const onChange = jest.fn((returnedValue) => {
20
- expect(returnedValue.dateValue).toBeNull();
21
- expect(returnedValue.stringValue).toBe("something");
22
- });
23
-
24
- const { getByRole, getByPlaceholderText, rerender } = render(
25
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
26
- );
27
- const input = getByPlaceholderText(defaultFormat);
28
-
29
- fireEvent.change(input, { target: { value: "something" } });
30
- expect(onChange).toHaveBeenCalled();
31
- fireEvent.blur(input);
32
- rerender(<V3DxcDate label="Birthdate" value="" placeholder />);
33
- // expect(getByRole("textbox").value).toBe('');
34
- });
35
-
36
- test("The input´s value is the same as the one received as a parameter (Default format)", () => {
37
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" value="30/03/1981" placeholder />);
38
- // const input = getByRole("textbox");
39
- const input = getByPlaceholderText(defaultFormat);
40
- expect(input.value).toBe("30/03/1981");
41
- });
42
-
43
- test("The input´s value is the same as the one received as a parameter (Custom format)", () => {
44
- const { getByRole, getByPlaceholderText } = render(
45
- <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
46
- );
47
- // const input = getByRole("textbox");
48
- const input = getByPlaceholderText("DD/MM/YY");
49
- expect(input.value).toBe("30/03/81");
50
- });
51
-
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(<V3DxcDate label="Birthdate" value="16-10-2020" />);
54
- fireEvent.click(getByTestId("calendarIcon"));
55
- expect(getByText("Fri, Oct 16")).toBeTruthy();
56
- });
57
-
58
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
59
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
60
- <V3DxcDate label="Birthdate" value="30-03-1981" placeholder />
61
- );
62
- // const input = getByRole("textbox");
63
- const input = getByPlaceholderText(defaultFormat);
64
- fireEvent.change(input, { target: { value: "10-02-2020" } });
65
-
66
- rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
67
- const calendarButton = getByTestId("calendarIcon");
68
- fireEvent.click(calendarButton);
69
- expect(getByText("Mon, Feb 10")).toBeTruthy();
70
- });
71
-
72
- test("onChange function is called when the user types something in the input", () => {
73
- const onChange = jest.fn((returnedValue) => {
74
- expect(returnedValue.dateValue).toBeNull();
75
- expect(returnedValue.stringValue).toBe("something");
76
- });
77
-
78
- const { getByRole, getByPlaceholderText } = render(
79
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
80
- );
81
- // const input = getByRole("textbox");
82
- const input = getByPlaceholderText(defaultFormat);
83
-
84
- fireEvent.change(input, { target: { value: "something" } });
85
- expect(onChange).toHaveBeenCalled();
86
- });
87
-
88
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(DEFAULT FORMAT)", () => {
89
- const onChange = jest.fn((returnedValue) => {
90
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
91
- expect(returnedValue.stringValue).toBe("16-10-2020");
92
- });
93
-
94
- const { getByRole, getByPlaceholderText } = render(
95
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
96
- );
97
- // const input = getByRole("textbox");
98
- const input = getByPlaceholderText(defaultFormat);
99
- fireEvent.change(input, { target: { value: "16-10-2020" } });
100
- expect(onChange).toHaveBeenCalled();
101
- });
102
-
103
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(CUSTOM FORMAT)", () => {
104
- const onChange = jest.fn((returnedValue) => {
105
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
106
- expect(returnedValue.stringValue).toBe("16-10-20");
107
- });
108
-
109
- const { getByRole, getByPlaceholderText } = render(
110
- <V3DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
111
- );
112
- // const input = getByRole("textbox");
113
- const input = getByPlaceholderText("DD-MM-YY");
114
-
115
- fireEvent.change(input, { target: { value: "16-10-20" } });
116
- expect(onChange).toHaveBeenCalled();
117
- });
118
-
119
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(DEFAULT FORMAT)", () => {
120
- const onChange = jest.fn((returnedValue) => {
121
- expect(returnedValue.dateValue).toBeNull();
122
- expect(returnedValue.stringValue).toBe("11-15-2020");
123
- });
124
-
125
- const { getByRole, getByPlaceholderText } = render(
126
- <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
127
- );
128
- // const input = getByRole("textbox");
129
- const input = getByPlaceholderText(defaultFormat);
130
-
131
- fireEvent.change(input, { target: { value: "11-15-2020" } });
132
- expect(onChange).toHaveBeenCalled();
133
- });
134
-
135
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(CUSTOM FORMAT)", () => {
136
- const onChange = jest.fn((returnedValue) => {
137
- expect(returnedValue.dateValue).toBeNull();
138
- expect(returnedValue.stringValue).toBe("15/11/2020");
139
- });
140
-
141
- const { getByRole, getByPlaceholderText } = render(
142
- <V3DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
143
- );
144
- // const input = getByRole("textbox");
145
- const input = getByPlaceholderText("MM/DD/YYYY");
146
-
147
- fireEvent.change(input, { target: { value: "15/11/2020" } });
148
- expect(onChange).toHaveBeenCalled();
149
- });
150
-
151
- test("onChange function is called when the user selects from the calendar", () => {
152
- const onChange = jest.fn();
153
-
154
- const component = render(<V3DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
155
- const calendarButton = component.getByTestId("calendarIcon");
156
- fireEvent.click(calendarButton);
157
- const dayButton = component.getByRole("button", { name: "10" });
158
- fireEvent.click(dayButton);
159
- expect(dayButton).toBeTruthy();
160
- expect(onChange).toHaveBeenCalled();
161
- });
162
-
163
- test("onChange function is called when the user selects from the calendar, the dateValue received by the onChange function is the selected date", () => {
164
- const onChange = jest.fn((returnedValue) => {
165
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
166
- });
167
-
168
- const component = render(<V3DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
169
- const calendarButton = component.getByTestId("calendarIcon");
170
- fireEvent.click(calendarButton);
171
- const dayButton = component.getByRole("button", { name: "16" });
172
- fireEvent.click(dayButton);
173
- expect(dayButton).toBeTruthy();
174
- });
175
-
176
- test("onChange function is called when the user selects from the calendar, the stringValue received by the onChange function is the date with the correct format (DEFAULT FORMAT)", () => {
177
- const onChange = jest.fn((returnedValue) => {
178
- expect(returnedValue.stringValue).toBe("16-10-2020");
179
- });
180
-
181
- const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
182
- const calendarButton = component.getByTestId("calendarIcon");
183
- fireEvent.click(calendarButton);
184
- const dayButton = component.getByRole("button", { name: "16" });
185
- fireEvent.click(dayButton);
186
- expect(dayButton).toBeTruthy();
187
- });
188
-
189
- test("onChange function is called when the user selects from the calendar, the stringValue received by the onChange function is the date with the correct format (CUSTOM FORMAT)", () => {
190
- const onChange = jest.fn((returnedValue) => {
191
- expect(returnedValue.stringValue).toBe("2020/10/16");
192
- });
193
-
194
- const component = render(
195
- <V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
196
- );
197
- const calendarButton = component.getByTestId("calendarIcon");
198
- fireEvent.click(calendarButton);
199
- const dayButton = component.getByRole("button", { name: "16" });
200
- fireEvent.click(dayButton);
201
- expect(dayButton).toBeTruthy();
202
- });
203
-
204
- test("Check selected date on calendar is the same date as the one on the input", () => {
205
- const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" />);
206
- const calendarButton = component.getByTestId("calendarIcon");
207
- fireEvent.click(calendarButton);
208
- const dayButton = component.getByRole("button", { name: "1" });
209
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
210
- });
211
- test("onBlur function is called", () => {
212
- const onBlur = jest.fn();
213
- const { getByRole, getByPlaceholderText } = render(
214
- <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
215
- );
216
- // const input = getByRole("textbox");
217
- const input = getByPlaceholderText(defaultFormat);
218
-
219
- fireEvent.blur(input);
220
- expect(onBlur).toHaveBeenCalled();
221
- });
222
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
223
- const onBlur = jest.fn((returnedValue) => {
224
- expect(returnedValue).toBe("30-03-81");
225
- });
226
- const { getByRole, getByPlaceholderText } = render(
227
- <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
228
- );
229
- // const input = getByRole("textbox");
230
- const input = getByPlaceholderText(defaultFormat);
231
-
232
- fireEvent.blur(input);
233
- expect(onBlur).toHaveBeenCalled();
234
- });
235
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
236
- const onBlur = jest.fn((returnedValue) => {
237
- expect(returnedValue).toBe("30/03/81");
238
- });
239
- const { getByRole, getByPlaceholderText } = render(
240
- <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
241
- );
242
- // const input = getByRole("textbox");
243
- const input = getByPlaceholderText("DD/MM/YY");
244
-
245
- fireEvent.blur(input);
246
- expect(onBlur).toHaveBeenCalled();
247
- });
248
- });
249
-
250
- describe("Uncontrolled Date Component", () => {
251
- const date = new Date("2020-10-16 00:00:00");
252
-
253
- test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
254
- const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
255
- <V3DxcDate label="Birthdate" placeholder />
256
- );
257
- // const input = getByRole("textbox");
258
- const input = getByPlaceholderText(defaultFormat);
259
-
260
- fireEvent.change(input, { target: { value: "10-02-2020" } });
261
-
262
- rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
263
- const calendarButton = getByTestId("calendarIcon");
264
- fireEvent.click(calendarButton);
265
- expect(getByText("Mon, Feb 10")).toBeTruthy();
266
- });
267
-
268
- test("onChange function is called when the user types something in the input", () => {
269
- const onChange = jest.fn((returnedValue) => {
270
- expect(returnedValue.dateValue).toBeNull();
271
- expect(returnedValue.stringValue).toBe("something");
272
- });
273
-
274
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
275
- // const input = getByRole("textbox");
276
- const input = getByPlaceholderText(defaultFormat);
277
-
278
- fireEvent.change(input, { target: { value: "something" } });
279
- expect(onChange).toHaveBeenCalled();
280
- });
281
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(DEFAULT FORMAT)", () => {
282
- const onChange = jest.fn((returnedValue) => {
283
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
284
- expect(returnedValue.stringValue).toBe("16-10-2020");
285
- });
286
-
287
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
288
- // const input = getByRole("textbox");
289
- const input = getByPlaceholderText(defaultFormat);
290
-
291
- fireEvent.change(input, { target: { value: "16-10-2020" } });
292
- expect(onChange).toHaveBeenCalled();
293
- });
294
- test("onChange function is called when the user types in the input a valid date(based on its format), the object received as a parameter in the onChange function is what should be(CUSTOM FORMAT)", () => {
295
- const onChange = jest.fn((returnedValue) => {
296
- expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
297
- expect(returnedValue.stringValue).toBe("16-10-20");
298
- });
299
-
300
- const { getByRole, getByPlaceholderText } = render(
301
- <V3DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
302
- );
303
- // const input = getByRole("textbox");
304
- const input = getByPlaceholderText("DD-MM-YY");
305
-
306
- fireEvent.change(input, { target: { value: "16-10-20" } });
307
- expect(onChange).toHaveBeenCalled();
308
- });
309
-
310
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(DEFAULT FORMAT)", () => {
311
- const onChange = jest.fn((returnedValue) => {
312
- expect(returnedValue.dateValue).toBeNull();
313
- expect(returnedValue.stringValue).toBe("11-15-2020");
314
- });
315
-
316
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
317
- // const input = getByRole("textbox");
318
- const input = getByPlaceholderText(defaultFormat);
319
-
320
- fireEvent.change(input, { target: { value: "11-15-2020" } });
321
- expect(onChange).toHaveBeenCalled();
322
- });
323
-
324
- test("onChange function is called when the user types in the input an invalid date(based on its format), the object received as a parameter in the onChange function is what should be(stringValue with the written string, and null as dateValue)(CUSTOM FORMAT)", () => {
325
- const onChange = jest.fn((returnedValue) => {
326
- expect(returnedValue.dateValue).toBeNull();
327
- expect(returnedValue.stringValue).toBe("15/11/2020");
328
- });
329
-
330
- const { getByRole, getByPlaceholderText } = render(
331
- <V3DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
332
- );
333
- // const input = getByRole("textbox");
334
- const input = getByPlaceholderText("MM/DD/YYYY");
335
-
336
- fireEvent.change(input, { target: { value: "15/11/2020" } });
337
- expect(onChange).toHaveBeenCalled();
338
- });
339
- test("onChange function is called when the user selects from the calendar", () => {
340
- const onChange = jest.fn();
341
-
342
- const component = render(<V3DxcDate label="Birthdate" onChange={onChange} />);
343
- const calendarButton = component.getByTestId("calendarIcon");
344
- fireEvent.click(calendarButton);
345
- const dayButton = component.getByRole("button", { name: "10" });
346
- fireEvent.click(dayButton);
347
- expect(dayButton).toBeTruthy();
348
- expect(onChange).toHaveBeenCalled();
349
- });
350
-
351
- test("Check selected date on calendar is the same date as the one on the input", () => {
352
- const component = render(<V3DxcDate label="Birthdate" placeholder />);
353
- // const input = component.getByRole("textbox");
354
- const input = component.getByPlaceholderText(defaultFormat);
355
-
356
- fireEvent.change(input, { target: { value: "10-02-2020" } });
357
- const calendarButton = component.getByTestId("calendarIcon");
358
- fireEvent.click(calendarButton);
359
- const dayButton = component.getByRole("button", { name: "10" });
360
- expect(dayButton.classList.contains("MuiPickersDay-daySelected")).toBe(true);
361
- });
362
- test("onBlur function is called", () => {
363
- const onBlur = jest.fn();
364
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
365
- // const input = getByRole("textbox");
366
- const input = getByPlaceholderText(defaultFormat);
367
-
368
- fireEvent.blur(input);
369
- expect(onBlur).toHaveBeenCalled();
370
- });
371
- test("onBlur function is called and the parameter received is what should be(DEFAULT FORMAT)", () => {
372
- const onBlur = jest.fn((returnedValue) => {
373
- expect(returnedValue).toBe("10-02-2020");
374
- });
375
- const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
376
- // const input = getByRole("textbox");
377
- const input = getByPlaceholderText("DD-MM-YYYY");
378
-
379
- fireEvent.change(input, { target: { value: "10-02-2020" } });
380
- fireEvent.blur(input);
381
- expect(onBlur).toHaveBeenCalled();
382
- });
383
- test("onBlur function is called and the parameter received is what should be(CUSTOM FORMAT)", () => {
384
- const onBlur = jest.fn((returnedValue) => {
385
- expect(returnedValue).toBe("10/02/20");
386
- });
387
- const { getByRole, getByPlaceholderText } = render(
388
- <V3DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
389
- );
390
- // const input = getByRole("textbox");
391
- const input = getByPlaceholderText("DD/MM/YY");
392
-
393
- fireEvent.change(input, { target: { value: "10/02/20" } });
394
- fireEvent.blur(input);
395
- expect(onBlur).toHaveBeenCalled();
396
- });
397
- });