@dxc-technology/halstack-react 0.0.0-aa1e975 → 0.0.0-ab373ef

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 (193) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6643 -0
  3. package/dist/index.d.ts +6643 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +79 -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/accordion/Accordion.js +0 -353
  11. package/dist/accordion-group/AccordionGroup.js +0 -186
  12. package/dist/alert/Alert.js +0 -403
  13. package/dist/alert/index.d.ts +0 -51
  14. package/dist/badge/Badge.js +0 -63
  15. package/dist/box/Box.js +0 -156
  16. package/dist/button/Button.js +0 -238
  17. package/dist/card/Card.js +0 -254
  18. package/dist/checkbox/Checkbox.js +0 -300
  19. package/dist/checkbox/Checkbox.stories.js +0 -144
  20. package/dist/checkbox/readme.md +0 -116
  21. package/dist/chip/Chip.js +0 -265
  22. package/dist/common/OpenSans.css +0 -81
  23. package/dist/common/RequiredComponent.js +0 -40
  24. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  34. package/dist/common/utils.js +0 -22
  35. package/dist/common/variables.js +0 -1546
  36. package/dist/date/Date.js +0 -379
  37. package/dist/date/Date.stories.js +0 -205
  38. package/dist/date/readme.md +0 -73
  39. package/dist/dialog/Dialog.js +0 -218
  40. package/dist/dropdown/Dropdown.js +0 -544
  41. package/dist/file-input/FileInput.js +0 -644
  42. package/dist/file-input/FileItem.js +0 -280
  43. package/dist/file-input/index.d.ts +0 -81
  44. package/dist/footer/Footer.js +0 -395
  45. package/dist/footer/Footer.stories.js +0 -94
  46. package/dist/footer/dxc_logo.svg +0 -15
  47. package/dist/footer/readme.md +0 -41
  48. package/dist/header/Header.js +0 -403
  49. package/dist/header/Header.stories.js +0 -176
  50. package/dist/header/close_icon.svg +0 -1
  51. package/dist/header/dxc_logo_black.svg +0 -8
  52. package/dist/header/hamb_menu_black.svg +0 -1
  53. package/dist/header/hamb_menu_white.svg +0 -1
  54. package/dist/header/readme.md +0 -33
  55. package/dist/heading/Heading.js +0 -218
  56. package/dist/input-text/InputText.js +0 -707
  57. package/dist/input-text/InputText.stories.js +0 -209
  58. package/dist/input-text/error.svg +0 -1
  59. package/dist/input-text/readme.md +0 -91
  60. package/dist/layout/ApplicationLayout.js +0 -331
  61. package/dist/layout/facebook.svg +0 -45
  62. package/dist/layout/linkedin.svg +0 -50
  63. package/dist/layout/twitter.svg +0 -53
  64. package/dist/link/Link.js +0 -237
  65. package/dist/link/readme.md +0 -51
  66. package/dist/main.d.ts +0 -8
  67. package/dist/main.js +0 -367
  68. package/dist/new-date/NewDate.js +0 -400
  69. package/dist/new-date/index.d.ts +0 -95
  70. package/dist/new-input-text/NewInputText.js +0 -967
  71. package/dist/new-input-text/index.d.ts +0 -135
  72. package/dist/new-select/NewSelect.js +0 -836
  73. package/dist/new-select/index.d.ts +0 -53
  74. package/dist/new-textarea/NewTextarea.js +0 -365
  75. package/dist/new-textarea/index.d.ts +0 -117
  76. package/dist/number/Number.js +0 -136
  77. package/dist/number/NumberContext.js +0 -16
  78. package/dist/number/index.d.ts +0 -113
  79. package/dist/paginator/Paginator.js +0 -289
  80. package/dist/paginator/images/next.svg +0 -3
  81. package/dist/paginator/images/nextPage.svg +0 -3
  82. package/dist/paginator/images/previous.svg +0 -3
  83. package/dist/paginator/images/previousPage.svg +0 -3
  84. package/dist/paginator/readme.md +0 -50
  85. package/dist/password/Password.js +0 -200
  86. package/dist/password/index.d.ts +0 -94
  87. package/dist/password/styles.css +0 -3
  88. package/dist/progress-bar/ProgressBar.js +0 -242
  89. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  90. package/dist/progress-bar/readme.md +0 -63
  91. package/dist/radio/Radio.js +0 -209
  92. package/dist/radio/Radio.stories.js +0 -166
  93. package/dist/radio/readme.md +0 -70
  94. package/dist/resultsetTable/ResultsetTable.js +0 -358
  95. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  96. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  97. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  98. package/dist/select/Select.js +0 -549
  99. package/dist/sidenav/Sidenav.js +0 -179
  100. package/dist/slider/Slider.js +0 -394
  101. package/dist/slider/Slider.stories.js +0 -241
  102. package/dist/slider/readme.md +0 -64
  103. package/dist/spinner/Spinner.js +0 -381
  104. package/dist/spinner/Spinner.stories.js +0 -183
  105. package/dist/spinner/readme.md +0 -65
  106. package/dist/switch/Switch.js +0 -222
  107. package/dist/switch/Switch.stories.js +0 -134
  108. package/dist/switch/readme.md +0 -133
  109. package/dist/table/Table.js +0 -132
  110. package/dist/tabs/Tabs.js +0 -343
  111. package/dist/tabs/Tabs.stories.js +0 -130
  112. package/dist/tabs/readme.md +0 -78
  113. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  114. package/dist/tabs-for-sections/readme.md +0 -78
  115. package/dist/tag/Tag.js +0 -282
  116. package/dist/textarea/Textarea.js +0 -264
  117. package/dist/toggle/Toggle.js +0 -220
  118. package/dist/toggle/Toggle.stories.js +0 -297
  119. package/dist/toggle/readme.md +0 -80
  120. package/dist/toggle-group/ToggleGroup.js +0 -223
  121. package/dist/upload/Upload.js +0 -205
  122. package/dist/upload/Upload.stories.js +0 -72
  123. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  124. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  125. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  126. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  127. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  128. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  129. package/dist/upload/file-upload/FileToUpload.js +0 -184
  130. package/dist/upload/file-upload/audio-icon.svg +0 -4
  131. package/dist/upload/file-upload/close.svg +0 -4
  132. package/dist/upload/file-upload/file-icon.svg +0 -4
  133. package/dist/upload/file-upload/video-icon.svg +0 -4
  134. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  135. package/dist/upload/readme.md +0 -37
  136. package/dist/upload/transaction/Transaction.js +0 -175
  137. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  138. package/dist/upload/transaction/audio-icon.svg +0 -4
  139. package/dist/upload/transaction/error-icon.svg +0 -4
  140. package/dist/upload/transaction/file-icon-err.svg +0 -4
  141. package/dist/upload/transaction/file-icon.svg +0 -4
  142. package/dist/upload/transaction/image-icon-err.svg +0 -4
  143. package/dist/upload/transaction/image-icon.svg +0 -4
  144. package/dist/upload/transaction/success-icon.svg +0 -4
  145. package/dist/upload/transaction/video-icon-err.svg +0 -4
  146. package/dist/upload/transaction/video-icon.svg +0 -4
  147. package/dist/upload/transactions/Transactions.js +0 -138
  148. package/dist/useTheme.js +0 -22
  149. package/dist/wizard/Wizard.js +0 -411
  150. package/dist/wizard/invalid_icon.svg +0 -5
  151. package/dist/wizard/valid_icon.svg +0 -5
  152. package/dist/wizard/validation-wrong.svg +0 -6
  153. package/test/Accordion.test.js +0 -33
  154. package/test/AccordionGroup.test.js +0 -125
  155. package/test/Alert.test.js +0 -53
  156. package/test/Box.test.js +0 -10
  157. package/test/Button.test.js +0 -18
  158. package/test/Card.test.js +0 -30
  159. package/test/Checkbox.test.js +0 -45
  160. package/test/Chip.test.js +0 -25
  161. package/test/Date.test.js +0 -393
  162. package/test/Dialog.test.js +0 -23
  163. package/test/Dropdown.test.js +0 -145
  164. package/test/FileInput.test.js +0 -201
  165. package/test/Footer.test.js +0 -99
  166. package/test/Header.test.js +0 -39
  167. package/test/Heading.test.js +0 -35
  168. package/test/InputText.test.js +0 -240
  169. package/test/Link.test.js +0 -43
  170. package/test/NewDate.test.js +0 -232
  171. package/test/NewInputText.test.js +0 -734
  172. package/test/NewTextarea.test.js +0 -195
  173. package/test/Number.test.js +0 -257
  174. package/test/Paginator.test.js +0 -177
  175. package/test/Password.test.js +0 -83
  176. package/test/ProgressBar.test.js +0 -35
  177. package/test/Radio.test.js +0 -37
  178. package/test/ResultsetTable.test.js +0 -329
  179. package/test/Select.test.js +0 -212
  180. package/test/Sidenav.test.js +0 -45
  181. package/test/Slider.test.js +0 -82
  182. package/test/Spinner.test.js +0 -32
  183. package/test/Switch.test.js +0 -45
  184. package/test/Table.test.js +0 -36
  185. package/test/Tabs.test.js +0 -109
  186. package/test/TabsForSections.test.js +0 -34
  187. package/test/Tag.test.js +0 -32
  188. package/test/TextArea.test.js +0 -52
  189. package/test/ToggleGroup.test.js +0 -81
  190. package/test/Upload.test.js +0 -60
  191. package/test/Wizard.test.js +0 -130
  192. package/test/mocks/pngMock.js +0 -1
  193. package/test/mocks/svgMock.js +0 -1
@@ -1,195 +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 DxcNewTextarea from "../src/new-textarea/NewTextarea";
5
-
6
- describe("NewTextarea component tests", () => {
7
- test("Renders with correct label", () => {
8
- const { getByText } = render(<DxcNewTextarea label="Example label" />);
9
- expect(getByText("Example label")).toBeTruthy();
10
- });
11
- test("Renders with correct label and helper text", () => {
12
- const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" />);
13
- expect(getByText("Example label")).toBeTruthy();
14
- expect(getByText("Example helper text")).toBeTruthy();
15
- });
16
- test("Renders with correct label and optional", () => {
17
- const { getByText, getByRole } = render(
18
- <DxcNewTextarea label="Example label" helperText="Example helper text" optional />
19
- );
20
- const textarea = getByRole("textbox");
21
- expect(getByText("Example label")).toBeTruthy();
22
- expect(getByText("(Optional)")).toBeTruthy();
23
- expect(getByText("Example helper text")).toBeTruthy();
24
- expect(textarea.getAttribute("aria-required")).toBe("false");
25
- });
26
- test("Renders with correct placeholder", () => {
27
- const { getByRole } = render(<DxcNewTextarea placeholder="Placeholder" />);
28
- const textarea = getByRole("textbox");
29
- expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
30
- });
31
- test("Renders with error message", () => {
32
- const { getByText, getByRole } = render(<DxcNewTextarea error="Error message." />);
33
- const textarea = getByRole("textbox");
34
- expect(getByText("Error message.")).toBeTruthy();
35
- expect(textarea.getAttribute("aria-invalid")).toBe("true");
36
- expect(textarea.getAttribute("aria-describedBy")).not.toBeNull();
37
- });
38
- test("Renders with correct default rows", () => {
39
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" rows={10} />);
40
- const textarea = getByLabelText("Example label");
41
- expect(textarea.rows).toBe(10);
42
- });
43
- test("Renders with correct accesibility attributes", () => {
44
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" />);
45
- const textarea = getByLabelText("Example label");
46
- expect(textarea.getAttribute("aria-invalid")).toBe("false");
47
- expect(textarea.getAttribute("aria-describedBy")).toBeNull();
48
- expect(textarea.getAttribute("aria-required")).toBe("true");
49
- });
50
- test("Not optional constraint (onBlur)", () => {
51
- const onChange = jest.fn();
52
- const onBlur = jest.fn();
53
- const { getByLabelText } = render(
54
- <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
55
- );
56
- const textarea = getByLabelText("Example label");
57
-
58
- fireEvent.focus(textarea);
59
- fireEvent.blur(textarea);
60
- expect(onBlur).toHaveBeenCalled();
61
- expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
62
- fireEvent.change(textarea, { target: { value: "Test" } });
63
- fireEvent.blur(textarea);
64
- expect(onBlur).toHaveBeenCalled();
65
- expect(onBlur).toHaveBeenCalledWith({ value: "Test", error: null });
66
- });
67
- test("Not optional constraint (onChange)", () => {
68
- const onChange = jest.fn();
69
- const { getByLabelText } = render(
70
- <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
71
- );
72
- const textarea = getByLabelText("Example label");
73
-
74
- fireEvent.focus(textarea);
75
- fireEvent.change(textarea, { target: { value: "Test" } });
76
- expect(onChange).toHaveBeenCalled();
77
- expect(onChange).toHaveBeenCalledWith({ value: "Test", error: null });
78
- userEvent.clear(textarea);
79
- expect(onChange).toHaveBeenCalled();
80
- expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
81
- });
82
- test("Pattern constraint", () => {
83
- const onChange = jest.fn();
84
- const onBlur = jest.fn();
85
- const { getByLabelText } = render(
86
- <DxcNewTextarea
87
- label="Example label"
88
- placeholder="Placeholder"
89
- onChange={onChange}
90
- onBlur={onBlur}
91
- margin={{ left: "medium", right: "medium" }}
92
- pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
93
- />
94
- );
95
- const textarea = getByLabelText("Example label");
96
-
97
- fireEvent.change(textarea, { target: { value: "pattern test" } });
98
- expect(onChange).toHaveBeenCalled();
99
- expect(onChange).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
100
- fireEvent.blur(textarea);
101
- expect(onBlur).toHaveBeenCalled();
102
- expect(onBlur).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
103
- userEvent.clear(textarea);
104
- fireEvent.change(textarea, { target: { value: "pattern4&" } });
105
- expect(onChange).toHaveBeenCalled();
106
- expect(onChange).toHaveBeenCalledWith({ value: "pattern4&", error: null });
107
- fireEvent.blur(textarea);
108
- expect(onBlur).toHaveBeenCalled();
109
- expect(onBlur).toHaveBeenCalledWith({ value: "pattern4&", error: null });
110
- });
111
- test("Length constraint", () => {
112
- const onChange = jest.fn();
113
- const onBlur = jest.fn();
114
- const { getByLabelText } = render(
115
- <DxcNewTextarea
116
- label="Example label"
117
- placeholder="Placeholder"
118
- onChange={onChange}
119
- onBlur={onBlur}
120
- margin={{ left: "medium", right: "medium" }}
121
- length={{ min: 5, max: 10 }}
122
- />
123
- );
124
- const textarea = getByLabelText("Example label");
125
-
126
- fireEvent.change(textarea, { target: { value: "test" } });
127
- expect(onChange).toHaveBeenCalled();
128
- expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
129
- fireEvent.blur(textarea);
130
- expect(onBlur).toHaveBeenCalled();
131
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
132
- userEvent.clear(textarea);
133
- fireEvent.change(textarea, { target: { value: "length" } });
134
- expect(onChange).toHaveBeenCalled();
135
- expect(onChange).toHaveBeenCalledWith({ value: "length", error: null });
136
- fireEvent.blur(textarea);
137
- expect(onBlur).toHaveBeenCalled();
138
- expect(onBlur).toHaveBeenCalledWith({ value: "length", error: null });
139
- });
140
- test("Pattern and length constraints", () => {
141
- const onChange = jest.fn();
142
- const onBlur = jest.fn();
143
- const { getByLabelText, getByText, queryByText } = render(
144
- <DxcNewTextarea
145
- label="Example label"
146
- placeholder="Placeholder"
147
- onChange={onChange}
148
- onBlur={onBlur}
149
- margin={{ left: "medium", right: "medium" }}
150
- pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
151
- length={{ min: 5, max: 10 }}
152
- />
153
- );
154
- const textarea = getByLabelText("Example label");
155
-
156
- fireEvent.change(textarea, { target: { value: "test" } });
157
- expect(onChange).toHaveBeenCalled();
158
- expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
159
- fireEvent.blur(textarea);
160
- expect(onBlur).toHaveBeenCalled();
161
- expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
162
- fireEvent.change(textarea, { target: { value: "tests" } });
163
- expect(onChange).toHaveBeenCalled();
164
- expect(onChange).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
165
- fireEvent.blur(textarea);
166
- expect(onBlur).toHaveBeenCalled();
167
- expect(onBlur).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
168
- fireEvent.change(textarea, { target: { value: "tests4&" } });
169
- expect(onChange).toHaveBeenCalled();
170
- expect(onChange).toHaveBeenCalledWith({ value: "tests4&", error: null });
171
- fireEvent.blur(textarea);
172
- expect(onBlur).toHaveBeenCalled();
173
- expect(onBlur).toHaveBeenCalledWith({ value: "tests4&", error: null });
174
- });
175
- test("onBlur function is called correctly", () => {
176
- const onBlur = jest.fn();
177
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" onBlur={onBlur} />);
178
- const textarea = getByLabelText("Example label");
179
- fireEvent.change(textarea, { target: { value: "Blur test" } });
180
- fireEvent.blur(textarea);
181
- expect(onBlur).toHaveBeenCalled();
182
- expect(onBlur).toHaveBeenCalledWith({ value: "Blur test", error: null });
183
- });
184
- test("onChange function is called correctly", () => {
185
- const onChange = jest.fn();
186
- const { getByLabelText } = render(
187
- <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} />
188
- );
189
- const textarea = getByLabelText("Example label");
190
- fireEvent.change(textarea, { target: { value: "Controlled test" } });
191
- expect(onChange).toHaveBeenCalled();
192
- expect(onChange).toHaveBeenCalledWith({ value: "Controlled test", error: null });
193
- expect(textarea.value).toBe("Test value");
194
- });
195
- });
@@ -1,257 +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 DxcNumber from "../src/number/Number";
5
-
6
- describe("Number component tests", () => {
7
- test("Number renders with label", () => {
8
- const { getByText } = render(<DxcNumber label="Number label" />);
9
- expect(getByText("Number label")).toBeTruthy();
10
- });
11
-
12
- test("Number renders with helper text", () => {
13
- const { getByText } = render(<DxcNumber helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Number renders with placeholder", () => {
18
- const { getByLabelText } = render(<DxcNumber label="Number label" placeholder="Placeholder" />);
19
- const number = getByLabelText("Number label");
20
- expect(number.getAttribute("placeholder")).toBe("Placeholder");
21
- });
22
-
23
- test("Number renders increment and decrement buttons", () => {
24
- const { queryAllByRole } = render(<DxcNumber label="Number label" />);
25
- expect(queryAllByRole("button").length).toBe(2);
26
- });
27
-
28
- test("Number is disabled", () => {
29
- const { getByLabelText } = render(<DxcNumber label="Number label" disabled />);
30
- const number = getByLabelText("Number label");
31
- expect(number.disabled).toBeTruthy();
32
- });
33
-
34
- test("Number is optional", () => {
35
- const { getByText } = render(<DxcNumber label="Number label" optional />);
36
- expect(getByText("(Optional)")).toBeTruthy();
37
- });
38
-
39
- test("Number 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(<DxcNumber 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(<DxcNumber label="Number label" prefix="+34" suffix="USD" />);
56
- expect(getByText("+34")).toBeTruthy();
57
- expect(getByText("USD")).toBeTruthy();
58
- });
59
-
60
- test("Invalid number renders error", () => {
61
- const { getByText } = render(<DxcNumber 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(<DxcNumber label="Number label" onChange={onChange} />);
68
- const number = getByLabelText("Number 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
- <DxcNumber label="Number label" min={5} onBlur={onBlur} onChange={onChange} />
88
- );
89
- const number = getByLabelText("Number 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(<DxcNumber label="Number label" min={5} />);
97
- const number = getByLabelText("Number 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(<DxcNumber label="Number label" min={5} />);
108
- const number = getByLabelText("Number 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(<DxcNumber label="Number label" max={10} onBlur={onBlur} onChange={onChange} />);
121
- const number = getByLabelText("Number label");
122
-
123
- userEvent.type(number, "12");
124
- expect(onChange).toHaveBeenCalledTimes(2);
125
- expect(onChange).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
126
- fireEvent.blur(number);
127
- expect(onBlur).toHaveBeenCalled();
128
- expect(onBlur).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
129
- });
130
-
131
- test("Cannot increment the value if it is greater than the max value", () => {
132
- const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" max={10} />);
133
- const number = getByLabelText("Number label");
134
- userEvent.type(number, "12");
135
- fireEvent.blur(number);
136
- expect(number.value).toBe("12");
137
- const decrement = getAllByRole("button")[1];
138
- userEvent.click(decrement);
139
- expect(number.value).toBe("12");
140
- });
141
-
142
- test("Decrement the value when it is greater than the max value", () => {
143
- const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" max={10} />);
144
- const number = getByLabelText("Number label");
145
- userEvent.type(number, "12");
146
- fireEvent.blur(number);
147
- expect(number.value).toBe("12");
148
- const decrement = getAllByRole("button")[0];
149
- userEvent.click(decrement);
150
- expect(number.value).toBe("10");
151
- });
152
-
153
- test("Increment and decrement the value with min and max values", () => {
154
- const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" min={5} max={10} />);
155
- const number = getByLabelText("Number label");
156
- userEvent.type(number, "1");
157
- fireEvent.blur(number);
158
- expect(number.value).toBe("1");
159
- const decrement = getAllByRole("button")[0];
160
- userEvent.click(decrement);
161
- expect(number.value).toBe("1");
162
- const increment = getAllByRole("button")[1];
163
- userEvent.click(increment);
164
- expect(number.value).toBe("5");
165
- userEvent.click(increment);
166
- userEvent.click(increment);
167
- userEvent.click(increment);
168
- userEvent.click(increment);
169
- userEvent.click(increment);
170
- expect(number.value).toBe("10");
171
- userEvent.click(increment);
172
- expect(number.value).toBe("10");
173
- });
174
-
175
- test("Increment and decrement the value with step", () => {
176
- const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" step={5} />);
177
- const number = getByLabelText("Number label");
178
- userEvent.type(number, "10");
179
- fireEvent.blur(number);
180
- expect(number.value).toBe("10");
181
- const increment = getAllByRole("button")[1];
182
- userEvent.click(increment);
183
- expect(number.value).toBe("15");
184
- userEvent.click(increment);
185
- expect(number.value).toBe("20");
186
- const decrement = getAllByRole("button")[0];
187
- userEvent.click(decrement);
188
- expect(number.value).toBe("15");
189
- userEvent.click(decrement);
190
- expect(number.value).toBe("10");
191
- });
192
-
193
- test("Increment and decrement the value with min, max and step", () => {
194
- const onBlur = jest.fn(({ value, error }) => {
195
- expect(value).toBe("1");
196
- expect(error).toBe("Value must be greater than or equal to 5.");
197
- });
198
- const { getByLabelText, getAllByRole } = render(
199
- <DxcNumber label="Number label" min={5} max={20} step={8} onBlur={onBlur} />
200
- );
201
- const number = getByLabelText("Number label");
202
- userEvent.type(number, "1");
203
- fireEvent.blur(number);
204
- const increment = getAllByRole("button")[1];
205
- userEvent.click(increment);
206
- expect(number.value).toBe("5");
207
- userEvent.click(increment);
208
- expect(number.value).toBe("13");
209
- userEvent.click(increment);
210
- expect(number.value).toBe("20");
211
- userEvent.click(increment);
212
- expect(number.value).toBe("20");
213
- const decrement = getAllByRole("button")[0];
214
- userEvent.click(decrement);
215
- expect(number.value).toBe("12");
216
- userEvent.click(decrement);
217
- expect(number.value).toBe("5");
218
- userEvent.click(decrement);
219
- expect(number.value).toBe("5");
220
- });
221
-
222
- test("Increment and decrement the value with min, max and step using the arrows in keyboard", () => {
223
- const { getByLabelText } = render(<DxcNumber label="Number label" min={5} max={20} step={5} />);
224
- const number = getByLabelText("Number label");
225
- userEvent.type(number, "1");
226
- fireEvent.keyDown(number, { keyCode: 38 });
227
- expect(number.value).toBe("5");
228
- fireEvent.keyDown(number, { keyCode: 38 });
229
- expect(number.value).toBe("10");
230
- fireEvent.keyDown(number, { keyCode: 38 });
231
- expect(number.value).toBe("15");
232
- fireEvent.keyDown(number, { keyCode: 38 });
233
- expect(number.value).toBe("20");
234
- fireEvent.keyDown(number, { keyCode: 38 });
235
- expect(number.value).toBe("20");
236
- fireEvent.keyDown(number, { keyCode: 40 });
237
- expect(number.value).toBe("15");
238
- fireEvent.keyDown(number, { keyCode: 40 });
239
- expect(number.value).toBe("10");
240
- fireEvent.keyDown(number, { keyCode: 40 });
241
- expect(number.value).toBe("5");
242
- fireEvent.keyDown(number, { keyCode: 40 });
243
- expect(number.value).toBe("5");
244
- });
245
-
246
- test("Number has correct accesibility attributes", () => {
247
- const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" />);
248
- const number = getByLabelText("Number label");
249
- expect(number.getAttribute("aria-autocomplete")).toBeNull();
250
- expect(number.getAttribute("aria-controls")).toBeNull();
251
- expect(number.getAttribute("aria-expanded")).toBeNull();
252
- const decrement = getAllByRole("button")[0];
253
- expect(decrement.getAttribute("aria-label")).toBe("Decrement");
254
- const increment = getAllByRole("button")[1];
255
- expect(increment.getAttribute("aria-label")).toBe("Increment");
256
- });
257
- });
@@ -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
- });