@dxc-technology/halstack-react 0.0.0-bd364ae → 0.0.0-bd47c58
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/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +1 -1
- package/HalstackContext.d.ts +1337 -5
- package/HalstackContext.js +117 -77
- package/README.md +47 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +110 -114
- package/accordion/Accordion.stories.tsx +105 -115
- package/accordion/Accordion.test.js +10 -11
- package/accordion/types.d.ts +1 -12
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +25 -65
- package/accordion-group/AccordionGroup.stories.tsx +93 -66
- package/accordion-group/AccordionGroup.test.js +27 -62
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +43 -0
- package/accordion-group/types.d.ts +7 -12
- package/alert/Alert.js +5 -9
- package/alert/Alert.stories.tsx +28 -0
- package/alert/Alert.test.js +1 -1
- package/bleed/Bleed.stories.tsx +64 -63
- package/box/Box.d.ts +1 -1
- package/box/Box.js +8 -27
- package/box/Box.stories.tsx +38 -51
- package/box/Box.test.js +1 -1
- package/box/types.d.ts +0 -11
- package/bulleted-list/BulletedList.d.ts +7 -0
- package/bulleted-list/BulletedList.js +125 -0
- package/bulleted-list/BulletedList.stories.tsx +206 -0
- package/bulleted-list/types.d.ts +38 -0
- package/button/Button.d.ts +1 -1
- package/button/Button.js +42 -72
- package/button/Button.stories.tsx +159 -8
- package/button/Button.test.js +12 -1
- package/button/types.d.ts +9 -5
- package/card/Card.d.ts +1 -1
- package/card/Card.js +27 -45
- package/card/Card.stories.tsx +12 -42
- package/card/Card.test.js +1 -1
- package/card/types.d.ts +1 -6
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +94 -101
- package/checkbox/Checkbox.stories.tsx +131 -59
- package/checkbox/Checkbox.test.js +94 -17
- package/checkbox/types.d.ts +4 -0
- package/chip/Chip.js +28 -49
- package/chip/Chip.stories.tsx +121 -26
- package/chip/Chip.test.js +3 -5
- package/chip/types.d.ts +1 -1
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +146 -0
- package/common/coreTokens.js +167 -0
- package/common/utils.d.ts +1 -0
- package/common/utils.js +4 -4
- package/common/variables.d.ts +1490 -0
- package/common/variables.js +1016 -1117
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +258 -0
- package/date-input/DateInput.js +134 -237
- package/date-input/DateInput.stories.tsx +199 -33
- package/date-input/DateInput.test.js +494 -138
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +146 -0
- package/date-input/Icons.d.ts +6 -0
- package/date-input/Icons.js +75 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +126 -0
- package/date-input/types.d.ts +51 -0
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +72 -79
- package/dialog/Dialog.stories.tsx +154 -171
- package/dialog/Dialog.test.js +334 -5
- package/dialog/types.d.ts +0 -12
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +246 -249
- package/dropdown/Dropdown.stories.tsx +245 -56
- package/dropdown/Dropdown.test.js +507 -110
- package/dropdown/DropdownMenu.d.ts +4 -0
- package/dropdown/DropdownMenu.js +74 -0
- package/dropdown/DropdownMenuItem.d.ts +4 -0
- package/dropdown/DropdownMenuItem.js +79 -0
- package/dropdown/types.d.ts +23 -3
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +174 -220
- package/file-input/FileInput.stories.tsx +122 -11
- package/file-input/FileInput.test.js +14 -14
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +39 -63
- package/file-input/types.d.ts +18 -1
- package/flex/Flex.d.ts +4 -0
- package/flex/Flex.js +71 -0
- package/flex/Flex.stories.tsx +112 -0
- package/flex/types.d.ts +97 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +44 -64
- package/footer/Footer.stories.tsx +37 -16
- package/footer/Footer.test.js +16 -26
- package/footer/Icons.js +1 -1
- package/footer/types.d.ts +11 -12
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +91 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/header/Header.d.ts +4 -3
- package/header/Header.js +83 -110
- package/header/Header.stories.tsx +118 -39
- package/header/Header.test.js +2 -2
- package/header/Icons.js +2 -2
- package/header/types.d.ts +0 -13
- package/heading/Heading.js +1 -1
- package/heading/Heading.test.js +1 -1
- package/image/Image.d.ts +4 -0
- package/image/Image.js +85 -0
- package/image/Image.stories.tsx +127 -0
- package/image/types.d.ts +72 -0
- package/inset/Inset.stories.tsx +5 -4
- package/layout/ApplicationLayout.d.ts +15 -6
- package/layout/ApplicationLayout.js +44 -69
- package/layout/ApplicationLayout.stories.tsx +80 -44
- package/layout/types.d.ts +18 -29
- package/link/Link.js +4 -4
- package/link/Link.stories.tsx +73 -6
- package/link/Link.test.js +2 -4
- package/link/types.d.ts +3 -3
- package/main.d.ts +8 -9
- package/main.js +41 -49
- package/{tabs-nav → nav-tabs}/NavTabs.d.ts +2 -2
- package/{tabs-nav → nav-tabs}/NavTabs.js +13 -16
- package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +110 -6
- package/{tabs-nav → nav-tabs}/NavTabs.test.js +1 -1
- package/{tabs-nav → nav-tabs}/Tab.js +51 -37
- package/{tabs-nav → nav-tabs}/types.d.ts +9 -10
- package/number-input/NumberInput.d.ts +7 -0
- package/number-input/NumberInput.js +6 -4
- package/number-input/NumberInput.test.js +317 -98
- package/package.json +18 -22
- package/paginator/Icons.d.ts +5 -0
- package/paginator/Icons.js +16 -28
- package/paginator/Paginator.js +8 -16
- package/paginator/Paginator.stories.tsx +24 -0
- package/paginator/Paginator.test.js +91 -39
- package/paragraph/Paragraph.d.ts +5 -0
- package/paragraph/Paragraph.js +38 -0
- package/paragraph/Paragraph.stories.tsx +44 -0
- package/password-input/Icons.d.ts +6 -0
- package/password-input/Icons.js +39 -0
- package/password-input/PasswordInput.js +35 -82
- package/password-input/PasswordInput.stories.tsx +1 -0
- package/password-input/PasswordInput.test.js +34 -40
- package/progress-bar/ProgressBar.js +60 -54
- package/progress-bar/ProgressBar.stories.jsx +38 -3
- package/progress-bar/ProgressBar.test.js +68 -23
- package/quick-nav/QuickNav.js +23 -18
- package/quick-nav/QuickNav.stories.tsx +145 -26
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +46 -31
- package/radio-group/RadioGroup.js +31 -32
- package/radio-group/RadioGroup.stories.tsx +132 -18
- package/radio-group/RadioGroup.test.js +124 -97
- package/radio-group/types.d.ts +2 -2
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +51 -0
- package/resultsetTable/ResultsetTable.js +49 -108
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +61 -42
- package/resultsetTable/types.d.ts +1 -1
- package/select/Listbox.d.ts +1 -1
- package/select/Listbox.js +33 -16
- package/select/Option.js +11 -24
- package/select/Select.js +92 -71
- package/select/Select.stories.tsx +513 -136
- package/select/Select.test.js +413 -305
- package/select/types.d.ts +3 -6
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +51 -0
- package/sidenav/Sidenav.d.ts +6 -5
- package/sidenav/Sidenav.js +139 -48
- package/sidenav/Sidenav.stories.tsx +251 -151
- package/sidenav/Sidenav.test.js +25 -37
- package/sidenav/types.d.ts +52 -26
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +121 -97
- package/slider/Slider.stories.tsx +64 -1
- package/slider/Slider.test.js +122 -22
- package/slider/types.d.ts +4 -0
- package/spinner/Spinner.js +17 -23
- package/spinner/Spinner.stories.jsx +53 -27
- package/spinner/Spinner.test.js +1 -1
- package/switch/Switch.d.ts +2 -2
- package/switch/Switch.js +137 -70
- package/switch/Switch.stories.tsx +41 -30
- package/switch/Switch.test.js +145 -18
- package/switch/types.d.ts +4 -0
- package/table/Table.js +3 -3
- package/table/Table.stories.jsx +80 -1
- package/table/Table.test.js +2 -2
- package/tabs/Tab.d.ts +4 -0
- package/tabs/Tab.js +132 -0
- package/tabs/Tabs.js +358 -108
- package/tabs/Tabs.stories.tsx +119 -5
- package/tabs/Tabs.test.js +220 -10
- package/tabs/types.d.ts +13 -3
- package/tag/Tag.js +8 -10
- package/tag/Tag.stories.tsx +14 -1
- package/tag/Tag.test.js +1 -1
- package/tag/types.d.ts +1 -1
- package/text-input/Icons.d.ts +8 -0
- package/text-input/Icons.js +60 -0
- package/text-input/Suggestion.js +40 -11
- package/text-input/Suggestions.d.ts +4 -0
- package/text-input/Suggestions.js +134 -0
- package/text-input/TextInput.js +235 -348
- package/text-input/TextInput.stories.tsx +280 -185
- package/text-input/TextInput.test.js +736 -725
- package/text-input/types.d.ts +22 -3
- package/textarea/Textarea.js +3 -4
- package/textarea/Textarea.stories.jsx +60 -1
- package/textarea/Textarea.test.js +2 -4
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/toggle-group/ToggleGroup.js +85 -59
- package/toggle-group/ToggleGroup.stories.tsx +45 -0
- package/toggle-group/ToggleGroup.test.js +38 -24
- package/toggle-group/types.d.ts +23 -14
- package/typography/Typography.d.ts +4 -0
- package/typography/Typography.js +32 -0
- package/typography/Typography.stories.tsx +198 -0
- package/typography/types.d.ts +18 -0
- package/typography/types.js +5 -0
- package/useTheme.d.ts +1242 -1
- package/useTheme.js +1 -1
- package/useTranslatedLabels.d.ts +84 -1
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +108 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +138 -0
- package/wizard/Wizard.js +10 -17
- package/wizard/Wizard.stories.tsx +40 -1
- package/wizard/Wizard.test.js +1 -1
- package/wizard/types.d.ts +3 -3
- package/card/ice-cream.jpg +0 -0
- package/common/RequiredComponent.js +0 -32
- package/list/List.d.ts +0 -4
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -95
- package/list/types.d.ts +0 -7
- package/number-input/NumberInputContext.d.ts +0 -4
- package/number-input/NumberInputContext.js +0 -19
- package/number-input/numberInputContextTypes.d.ts +0 -19
- package/row/Row.d.ts +0 -3
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -237
- package/row/types.d.ts +0 -28
- package/stack/Stack.d.ts +0 -3
- package/stack/Stack.js +0 -97
- package/stack/Stack.stories.tsx +0 -164
- package/stack/types.d.ts +0 -24
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
- /package/{list → bulleted-list}/types.js +0 -0
- /package/{row → flex}/types.js +0 -0
- /package/{stack → grid}/types.js +0 -0
- /package/{tabs-nav → image}/types.js +0 -0
- /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
- /package/{number-input/numberInputContextTypes.js → nav-tabs/types.js} +0 -0
|
@@ -8,68 +8,50 @@ var _react2 = require("@testing-library/react");
|
|
|
8
8
|
|
|
9
9
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
10
10
|
|
|
11
|
-
var _NumberInput = _interopRequireDefault(require("./NumberInput"));
|
|
11
|
+
var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
|
|
12
12
|
|
|
13
13
|
describe("Number input component tests", function () {
|
|
14
|
-
test("Number input renders with label", function () {
|
|
14
|
+
test("Number input renders with label, helper text, placeholder and increment/decrement action buttons", function () {
|
|
15
15
|
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
16
|
-
label: "Number input label"
|
|
16
|
+
label: "Number input label",
|
|
17
|
+
helperText: "Helper text",
|
|
18
|
+
placeholder: "Placeholder"
|
|
17
19
|
})),
|
|
18
|
-
|
|
20
|
+
getByLabelText = _render.getByLabelText,
|
|
21
|
+
getByText = _render.getByText,
|
|
22
|
+
queryAllByRole = _render.queryAllByRole;
|
|
19
23
|
|
|
24
|
+
var number = getByLabelText("Number input label");
|
|
20
25
|
expect(getByText("Number input label")).toBeTruthy();
|
|
21
|
-
});
|
|
22
|
-
test("Number input renders with helper text", function () {
|
|
23
|
-
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
24
|
-
helperText: "Helper text"
|
|
25
|
-
})),
|
|
26
|
-
getByText = _render2.getByText;
|
|
27
|
-
|
|
28
26
|
expect(getByText("Helper text")).toBeTruthy();
|
|
29
|
-
});
|
|
30
|
-
test("Number input renders with placeholder", function () {
|
|
31
|
-
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
32
|
-
label: "Number label",
|
|
33
|
-
placeholder: "Placeholder"
|
|
34
|
-
})),
|
|
35
|
-
getByLabelText = _render3.getByLabelText;
|
|
36
|
-
|
|
37
|
-
var number = getByLabelText("Number label");
|
|
38
27
|
expect(number.getAttribute("placeholder")).toBe("Placeholder");
|
|
39
|
-
});
|
|
40
|
-
test("Number input renders increment and decrement buttons", function () {
|
|
41
|
-
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
42
|
-
label: "Number label"
|
|
43
|
-
})),
|
|
44
|
-
queryAllByRole = _render4.queryAllByRole;
|
|
45
|
-
|
|
46
28
|
expect(queryAllByRole("button").length).toBe(2);
|
|
47
29
|
});
|
|
48
30
|
test("Number input buttons' tooltip is correct", function () {
|
|
49
|
-
var
|
|
31
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
50
32
|
label: "Number label"
|
|
51
33
|
})),
|
|
52
|
-
getByTitle =
|
|
34
|
+
getByTitle = _render2.getByTitle;
|
|
53
35
|
|
|
54
36
|
expect(getByTitle("Decrement value")).toBeTruthy();
|
|
55
37
|
expect(getByTitle("Increment value")).toBeTruthy();
|
|
56
38
|
});
|
|
57
39
|
test("Number input is disabled", function () {
|
|
58
|
-
var
|
|
40
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
59
41
|
label: "Number label",
|
|
60
42
|
disabled: true
|
|
61
43
|
})),
|
|
62
|
-
getByLabelText =
|
|
44
|
+
getByLabelText = _render3.getByLabelText;
|
|
63
45
|
|
|
64
46
|
var number = getByLabelText("Number label");
|
|
65
47
|
expect(number.disabled).toBeTruthy();
|
|
66
48
|
});
|
|
67
49
|
test("Number input is optional", function () {
|
|
68
|
-
var
|
|
50
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
69
51
|
label: "Number label",
|
|
70
52
|
optional: true
|
|
71
53
|
})),
|
|
72
|
-
getByText =
|
|
54
|
+
getByText = _render4.getByText;
|
|
73
55
|
|
|
74
56
|
expect(getByText("(Optional)")).toBeTruthy();
|
|
75
57
|
});
|
|
@@ -77,19 +59,20 @@ describe("Number input component tests", function () {
|
|
|
77
59
|
var onBlur = jest.fn();
|
|
78
60
|
var onChange = jest.fn();
|
|
79
61
|
|
|
80
|
-
var
|
|
62
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
63
|
+
label: "Number input label",
|
|
81
64
|
onBlur: onBlur,
|
|
82
65
|
onChange: onChange
|
|
83
66
|
})),
|
|
84
|
-
|
|
67
|
+
getByLabelText = _render5.getByLabelText;
|
|
85
68
|
|
|
86
|
-
var
|
|
69
|
+
var number = getByLabelText("Number input label");
|
|
87
70
|
|
|
88
|
-
_userEvent["default"].type(
|
|
71
|
+
_userEvent["default"].type(number, "1");
|
|
89
72
|
|
|
90
|
-
_userEvent["default"].clear(
|
|
73
|
+
_userEvent["default"].clear(number);
|
|
91
74
|
|
|
92
|
-
_react2.fireEvent.blur(
|
|
75
|
+
_react2.fireEvent.blur(number);
|
|
93
76
|
|
|
94
77
|
expect(onBlur).toHaveBeenCalled();
|
|
95
78
|
expect(onBlur).toHaveBeenCalledWith({
|
|
@@ -102,33 +85,33 @@ describe("Number input component tests", function () {
|
|
|
102
85
|
error: "This field is required. Please, enter a value."
|
|
103
86
|
});
|
|
104
87
|
});
|
|
105
|
-
test("Suffix and prefix must be shown
|
|
106
|
-
var
|
|
88
|
+
test("Suffix and prefix must be shown", function () {
|
|
89
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
107
90
|
label: "Number input label",
|
|
108
91
|
prefix: "+34",
|
|
109
92
|
suffix: "USD"
|
|
110
93
|
})),
|
|
111
|
-
getByText =
|
|
94
|
+
getByText = _render6.getByText;
|
|
112
95
|
|
|
113
96
|
expect(getByText("+34")).toBeTruthy();
|
|
114
97
|
expect(getByText("USD")).toBeTruthy();
|
|
115
98
|
});
|
|
116
99
|
test("Invalid number input renders error", function () {
|
|
117
|
-
var
|
|
100
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
118
101
|
error: "Error message."
|
|
119
102
|
})),
|
|
120
|
-
getByText =
|
|
103
|
+
getByText = _render7.getByText;
|
|
121
104
|
|
|
122
105
|
expect(getByText("Error message.")).toBeTruthy();
|
|
123
106
|
});
|
|
124
107
|
test("onChange function is called correctly", function () {
|
|
125
108
|
var onChange = jest.fn();
|
|
126
109
|
|
|
127
|
-
var
|
|
110
|
+
var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
128
111
|
label: "Number input label",
|
|
129
112
|
onChange: onChange
|
|
130
113
|
})),
|
|
131
|
-
getByLabelText =
|
|
114
|
+
getByLabelText = _render8.getByLabelText;
|
|
132
115
|
|
|
133
116
|
var number = getByLabelText("Number input label");
|
|
134
117
|
|
|
@@ -146,41 +129,41 @@ describe("Number input component tests", function () {
|
|
|
146
129
|
});
|
|
147
130
|
expect(number.value).toBe("1");
|
|
148
131
|
});
|
|
149
|
-
test("Error message is shown if the value is less than the min value", function () {
|
|
132
|
+
test("Error message is shown if the typed value is less than the min value", function () {
|
|
150
133
|
var onChange = jest.fn(function (_ref) {
|
|
151
134
|
var value = _ref.value,
|
|
152
135
|
error = _ref.error;
|
|
153
|
-
expect(value).toBe("1");
|
|
154
|
-
expect(error).toBe("Value must be greater than or equal to
|
|
136
|
+
expect(value).toBe("-1");
|
|
137
|
+
expect(error).toBe("Value must be greater than or equal to 0.");
|
|
155
138
|
});
|
|
156
139
|
var onBlur = jest.fn(function (_ref2) {
|
|
157
140
|
var value = _ref2.value,
|
|
158
141
|
error = _ref2.error;
|
|
159
|
-
expect(value).toBe("1");
|
|
160
|
-
expect(error).toBe("Value must be greater than or equal to
|
|
142
|
+
expect(value).toBe("-1");
|
|
143
|
+
expect(error).toBe("Value must be greater than or equal to 0.");
|
|
161
144
|
});
|
|
162
145
|
|
|
163
|
-
var
|
|
146
|
+
var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
164
147
|
label: "Number input label",
|
|
165
|
-
min:
|
|
148
|
+
min: 0,
|
|
166
149
|
onBlur: onBlur,
|
|
167
150
|
onChange: onChange
|
|
168
151
|
})),
|
|
169
|
-
getByLabelText =
|
|
152
|
+
getByLabelText = _render9.getByLabelText;
|
|
170
153
|
|
|
171
154
|
var number = getByLabelText("Number input label");
|
|
172
155
|
|
|
173
|
-
_userEvent["default"].type(number, "1");
|
|
156
|
+
_userEvent["default"].type(number, "-1");
|
|
174
157
|
|
|
175
158
|
_react2.fireEvent.blur(number);
|
|
176
159
|
});
|
|
177
160
|
test("Cannot decrement the value if it is less than the min value", function () {
|
|
178
|
-
var
|
|
161
|
+
var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
179
162
|
label: "Number input label",
|
|
180
163
|
min: 5
|
|
181
164
|
})),
|
|
182
|
-
getByLabelText =
|
|
183
|
-
getAllByRole =
|
|
165
|
+
getByLabelText = _render10.getByLabelText,
|
|
166
|
+
getAllByRole = _render10.getAllByRole;
|
|
184
167
|
|
|
185
168
|
var number = getByLabelText("Number input label");
|
|
186
169
|
|
|
@@ -196,12 +179,12 @@ describe("Number input component tests", function () {
|
|
|
196
179
|
expect(number.value).toBe("1");
|
|
197
180
|
});
|
|
198
181
|
test("Increment the value when it is less than the min value", function () {
|
|
199
|
-
var
|
|
182
|
+
var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
200
183
|
label: "Number input label",
|
|
201
184
|
min: 5
|
|
202
185
|
})),
|
|
203
|
-
getByLabelText =
|
|
204
|
-
getAllByRole =
|
|
186
|
+
getByLabelText = _render11.getByLabelText,
|
|
187
|
+
getAllByRole = _render11.getAllByRole;
|
|
205
188
|
|
|
206
189
|
var number = getByLabelText("Number input label");
|
|
207
190
|
|
|
@@ -216,17 +199,17 @@ describe("Number input component tests", function () {
|
|
|
216
199
|
|
|
217
200
|
expect(number.value).toBe("5");
|
|
218
201
|
});
|
|
219
|
-
test("Error message is shown if the value is greater than the max value", function () {
|
|
202
|
+
test("Error message is shown if the typed value is greater than the max value", function () {
|
|
220
203
|
var onChange = jest.fn();
|
|
221
204
|
var onBlur = jest.fn();
|
|
222
205
|
|
|
223
|
-
var
|
|
206
|
+
var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
224
207
|
label: "Number input label",
|
|
225
208
|
max: 10,
|
|
226
209
|
onBlur: onBlur,
|
|
227
210
|
onChange: onChange
|
|
228
211
|
})),
|
|
229
|
-
getByLabelText =
|
|
212
|
+
getByLabelText = _render12.getByLabelText;
|
|
230
213
|
|
|
231
214
|
var number = getByLabelText("Number input label");
|
|
232
215
|
|
|
@@ -247,12 +230,12 @@ describe("Number input component tests", function () {
|
|
|
247
230
|
});
|
|
248
231
|
});
|
|
249
232
|
test("Cannot increment the value if it is greater than the max value", function () {
|
|
250
|
-
var
|
|
233
|
+
var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
251
234
|
label: "Number input label",
|
|
252
235
|
max: 10
|
|
253
236
|
})),
|
|
254
|
-
getByLabelText =
|
|
255
|
-
getAllByRole =
|
|
237
|
+
getByLabelText = _render13.getByLabelText,
|
|
238
|
+
getAllByRole = _render13.getAllByRole;
|
|
256
239
|
|
|
257
240
|
var number = getByLabelText("Number input label");
|
|
258
241
|
|
|
@@ -268,20 +251,20 @@ describe("Number input component tests", function () {
|
|
|
268
251
|
expect(number.value).toBe("12");
|
|
269
252
|
});
|
|
270
253
|
test("Decrement the value when it is greater than the max value", function () {
|
|
271
|
-
var
|
|
254
|
+
var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
272
255
|
label: "Number input label",
|
|
273
256
|
max: 10
|
|
274
257
|
})),
|
|
275
|
-
getByLabelText =
|
|
276
|
-
getAllByRole =
|
|
258
|
+
getByLabelText = _render14.getByLabelText,
|
|
259
|
+
getAllByRole = _render14.getAllByRole;
|
|
277
260
|
|
|
278
261
|
var number = getByLabelText("Number input label");
|
|
279
262
|
|
|
280
|
-
_userEvent["default"].type(number, "
|
|
263
|
+
_userEvent["default"].type(number, "120");
|
|
281
264
|
|
|
282
265
|
_react2.fireEvent.blur(number);
|
|
283
266
|
|
|
284
|
-
expect(number.value).toBe("
|
|
267
|
+
expect(number.value).toBe("120");
|
|
285
268
|
var decrement = getAllByRole("button")[0];
|
|
286
269
|
|
|
287
270
|
_userEvent["default"].click(decrement);
|
|
@@ -289,13 +272,13 @@ describe("Number input component tests", function () {
|
|
|
289
272
|
expect(number.value).toBe("10");
|
|
290
273
|
});
|
|
291
274
|
test("Increment and decrement the value with min and max values", function () {
|
|
292
|
-
var
|
|
275
|
+
var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
293
276
|
label: "Number input label",
|
|
294
277
|
min: 5,
|
|
295
278
|
max: 10
|
|
296
279
|
})),
|
|
297
|
-
getByLabelText =
|
|
298
|
-
getAllByRole =
|
|
280
|
+
getByLabelText = _render15.getByLabelText,
|
|
281
|
+
getAllByRole = _render15.getAllByRole;
|
|
299
282
|
|
|
300
283
|
var number = getByLabelText("Number input label");
|
|
301
284
|
|
|
@@ -331,13 +314,13 @@ describe("Number input component tests", function () {
|
|
|
331
314
|
|
|
332
315
|
expect(number.value).toBe("10");
|
|
333
316
|
});
|
|
334
|
-
test("Increment and decrement the value with step", function () {
|
|
335
|
-
var
|
|
317
|
+
test("Increment and decrement the value with an integer step", function () {
|
|
318
|
+
var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
336
319
|
label: "Number input label",
|
|
337
320
|
step: 5
|
|
338
321
|
})),
|
|
339
|
-
getByLabelText =
|
|
340
|
-
getAllByRole =
|
|
322
|
+
getByLabelText = _render16.getByLabelText,
|
|
323
|
+
getAllByRole = _render16.getAllByRole;
|
|
341
324
|
|
|
342
325
|
var number = getByLabelText("Number input label");
|
|
343
326
|
|
|
@@ -365,23 +348,56 @@ describe("Number input component tests", function () {
|
|
|
365
348
|
|
|
366
349
|
expect(number.value).toBe("10");
|
|
367
350
|
});
|
|
351
|
+
test("Increment and decrement the value with a decimal step", function () {
|
|
352
|
+
var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
353
|
+
label: "Number input label",
|
|
354
|
+
step: 0.5
|
|
355
|
+
})),
|
|
356
|
+
getByLabelText = _render17.getByLabelText,
|
|
357
|
+
getAllByRole = _render17.getAllByRole;
|
|
358
|
+
|
|
359
|
+
var number = getByLabelText("Number input label");
|
|
360
|
+
|
|
361
|
+
_userEvent["default"].type(number, "-9");
|
|
362
|
+
|
|
363
|
+
_react2.fireEvent.blur(number);
|
|
364
|
+
|
|
365
|
+
expect(number.value).toBe("-9");
|
|
366
|
+
var increment = getAllByRole("button")[1];
|
|
367
|
+
|
|
368
|
+
_userEvent["default"].click(increment);
|
|
369
|
+
|
|
370
|
+
expect(number.value).toBe("-8.5");
|
|
371
|
+
|
|
372
|
+
_userEvent["default"].click(increment);
|
|
373
|
+
|
|
374
|
+
expect(number.value).toBe("-8");
|
|
375
|
+
var decrement = getAllByRole("button")[0];
|
|
376
|
+
|
|
377
|
+
_userEvent["default"].click(decrement);
|
|
378
|
+
|
|
379
|
+
_userEvent["default"].click(decrement);
|
|
380
|
+
|
|
381
|
+
_userEvent["default"].click(decrement);
|
|
382
|
+
|
|
383
|
+
expect(number.value).toBe("-9.5");
|
|
384
|
+
|
|
385
|
+
_userEvent["default"].click(decrement);
|
|
386
|
+
|
|
387
|
+
expect(number.value).toBe("-10");
|
|
388
|
+
});
|
|
368
389
|
test("Increment and decrement the value with min, max and step", function () {
|
|
369
|
-
var onBlur = jest.fn(
|
|
370
|
-
var value = _ref3.value,
|
|
371
|
-
error = _ref3.error;
|
|
372
|
-
expect(value).toBe("1");
|
|
373
|
-
expect(error).toBe("Value must be greater than or equal to 5.");
|
|
374
|
-
});
|
|
390
|
+
var onBlur = jest.fn();
|
|
375
391
|
|
|
376
|
-
var
|
|
392
|
+
var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
377
393
|
label: "Number input label",
|
|
378
394
|
min: 5,
|
|
379
395
|
max: 20,
|
|
380
396
|
step: 8,
|
|
381
397
|
onBlur: onBlur
|
|
382
398
|
})),
|
|
383
|
-
getByLabelText =
|
|
384
|
-
getAllByRole =
|
|
399
|
+
getByLabelText = _render18.getByLabelText,
|
|
400
|
+
getAllByRole = _render18.getAllByRole;
|
|
385
401
|
|
|
386
402
|
var number = getByLabelText("Number input label");
|
|
387
403
|
|
|
@@ -389,6 +405,10 @@ describe("Number input component tests", function () {
|
|
|
389
405
|
|
|
390
406
|
_react2.fireEvent.blur(number);
|
|
391
407
|
|
|
408
|
+
expect(onBlur).toHaveBeenCalledWith({
|
|
409
|
+
value: "1",
|
|
410
|
+
error: "Value must be greater than or equal to 5."
|
|
411
|
+
});
|
|
392
412
|
var increment = getAllByRole("button")[1];
|
|
393
413
|
|
|
394
414
|
_userEvent["default"].click(increment);
|
|
@@ -401,33 +421,194 @@ describe("Number input component tests", function () {
|
|
|
401
421
|
|
|
402
422
|
_userEvent["default"].click(increment);
|
|
403
423
|
|
|
404
|
-
expect(number.value).toBe("
|
|
424
|
+
expect(number.value).toBe("13");
|
|
405
425
|
|
|
406
426
|
_userEvent["default"].click(increment);
|
|
407
427
|
|
|
408
|
-
expect(number.value).toBe("
|
|
428
|
+
expect(number.value).toBe("13");
|
|
409
429
|
var decrement = getAllByRole("button")[0];
|
|
410
430
|
|
|
411
431
|
_userEvent["default"].click(decrement);
|
|
412
432
|
|
|
413
|
-
expect(number.value).toBe("
|
|
433
|
+
expect(number.value).toBe("5");
|
|
414
434
|
|
|
415
435
|
_userEvent["default"].click(decrement);
|
|
416
436
|
|
|
417
437
|
expect(number.value).toBe("5");
|
|
418
438
|
|
|
419
439
|
_userEvent["default"].click(decrement);
|
|
440
|
+
});
|
|
441
|
+
test("Start incrementing from 0 when the min value is less than 0 and the max value is bigger than 0", function () {
|
|
442
|
+
var onBlur = jest.fn();
|
|
420
443
|
|
|
421
|
-
|
|
444
|
+
var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
445
|
+
label: "Number input label",
|
|
446
|
+
min: -10,
|
|
447
|
+
max: 10,
|
|
448
|
+
step: 1,
|
|
449
|
+
onBlur: onBlur
|
|
450
|
+
})),
|
|
451
|
+
getByLabelText = _render19.getByLabelText,
|
|
452
|
+
getAllByRole = _render19.getAllByRole;
|
|
453
|
+
|
|
454
|
+
var number = getByLabelText("Number input label");
|
|
455
|
+
var increment = getAllByRole("button")[1];
|
|
456
|
+
|
|
457
|
+
_userEvent["default"].click(increment);
|
|
458
|
+
|
|
459
|
+
expect(number.value).toBe("1");
|
|
460
|
+
|
|
461
|
+
_userEvent["default"].click(increment);
|
|
462
|
+
|
|
463
|
+
expect(number.value).toBe("2");
|
|
422
464
|
});
|
|
423
|
-
test("
|
|
465
|
+
test("Start incrementing from 0 when the min value is less than 0 and the max is 0", function () {
|
|
466
|
+
var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
467
|
+
label: "Number input label",
|
|
468
|
+
min: -10,
|
|
469
|
+
max: 0,
|
|
470
|
+
step: 1
|
|
471
|
+
})),
|
|
472
|
+
getByLabelText = _render20.getByLabelText,
|
|
473
|
+
getAllByRole = _render20.getAllByRole;
|
|
474
|
+
|
|
475
|
+
var number = getByLabelText("Number input label");
|
|
476
|
+
var increment = getAllByRole("button")[1];
|
|
477
|
+
|
|
478
|
+
_userEvent["default"].click(increment);
|
|
479
|
+
|
|
480
|
+
expect(number.value).toBe("0");
|
|
481
|
+
|
|
482
|
+
_userEvent["default"].click(increment);
|
|
483
|
+
|
|
484
|
+
expect(number.value).toBe("0");
|
|
485
|
+
});
|
|
486
|
+
test("Start incrementing from the min value when it is bigger than 0", function () {
|
|
424
487
|
var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
488
|
+
label: "Number input label",
|
|
489
|
+
min: 2,
|
|
490
|
+
max: 10,
|
|
491
|
+
step: 0.5
|
|
492
|
+
})),
|
|
493
|
+
getByLabelText = _render21.getByLabelText,
|
|
494
|
+
getAllByRole = _render21.getAllByRole;
|
|
495
|
+
|
|
496
|
+
var number = getByLabelText("Number input label");
|
|
497
|
+
var increment = getAllByRole("button")[1];
|
|
498
|
+
|
|
499
|
+
_userEvent["default"].click(increment);
|
|
500
|
+
|
|
501
|
+
expect(number.value).toBe("2");
|
|
502
|
+
|
|
503
|
+
_userEvent["default"].click(increment);
|
|
504
|
+
|
|
505
|
+
expect(number.value).toBe("2.5");
|
|
506
|
+
});
|
|
507
|
+
test("Start incrementing from the max value when it is less than 0", function () {
|
|
508
|
+
var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
509
|
+
label: "Number input label",
|
|
510
|
+
min: -10,
|
|
511
|
+
max: -1,
|
|
512
|
+
step: 0.5
|
|
513
|
+
})),
|
|
514
|
+
getByLabelText = _render22.getByLabelText,
|
|
515
|
+
getAllByRole = _render22.getAllByRole;
|
|
516
|
+
|
|
517
|
+
var number = getByLabelText("Number input label");
|
|
518
|
+
var increment = getAllByRole("button")[1];
|
|
519
|
+
|
|
520
|
+
_userEvent["default"].click(increment);
|
|
521
|
+
|
|
522
|
+
expect(number.value).toBe("-1");
|
|
523
|
+
|
|
524
|
+
_userEvent["default"].click(increment);
|
|
525
|
+
|
|
526
|
+
expect(number.value).toBe("-1");
|
|
527
|
+
});
|
|
528
|
+
test("Start decrementing from 0 when the min value is less than 0 and the max value is bigger than 0", function () {
|
|
529
|
+
var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
530
|
+
label: "Number input label",
|
|
531
|
+
min: -10,
|
|
532
|
+
max: 10,
|
|
533
|
+
step: 1
|
|
534
|
+
})),
|
|
535
|
+
getByLabelText = _render23.getByLabelText,
|
|
536
|
+
getAllByRole = _render23.getAllByRole;
|
|
537
|
+
|
|
538
|
+
var number = getByLabelText("Number input label");
|
|
539
|
+
var decrement = getAllByRole("button")[0];
|
|
540
|
+
|
|
541
|
+
_userEvent["default"].click(decrement);
|
|
542
|
+
|
|
543
|
+
expect(number.value).toBe("-1");
|
|
544
|
+
});
|
|
545
|
+
test("Start decrementing from 0 when the min value is 0 and the max value is bigger than 0", function () {
|
|
546
|
+
var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
547
|
+
label: "Number input label",
|
|
548
|
+
min: 0,
|
|
549
|
+
max: 10,
|
|
550
|
+
step: 1
|
|
551
|
+
})),
|
|
552
|
+
getByLabelText = _render24.getByLabelText,
|
|
553
|
+
getAllByRole = _render24.getAllByRole;
|
|
554
|
+
|
|
555
|
+
var number = getByLabelText("Number input label");
|
|
556
|
+
var decrement = getAllByRole("button")[0];
|
|
557
|
+
|
|
558
|
+
_userEvent["default"].click(decrement);
|
|
559
|
+
|
|
560
|
+
expect(number.value).toBe("0");
|
|
561
|
+
});
|
|
562
|
+
test("Start decrementing from the min value when it is bigger than 0", function () {
|
|
563
|
+
var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
564
|
+
label: "Number input label",
|
|
565
|
+
min: 2,
|
|
566
|
+
max: 10,
|
|
567
|
+
step: 0.5
|
|
568
|
+
})),
|
|
569
|
+
getByLabelText = _render25.getByLabelText,
|
|
570
|
+
getAllByRole = _render25.getAllByRole;
|
|
571
|
+
|
|
572
|
+
var number = getByLabelText("Number input label");
|
|
573
|
+
var decrement = getAllByRole("button")[0];
|
|
574
|
+
|
|
575
|
+
_userEvent["default"].click(decrement);
|
|
576
|
+
|
|
577
|
+
expect(number.value).toBe("2");
|
|
578
|
+
|
|
579
|
+
_userEvent["default"].click(decrement);
|
|
580
|
+
|
|
581
|
+
expect(number.value).toBe("2");
|
|
582
|
+
});
|
|
583
|
+
test("Start decrementing from the max value when it is less than 0", function () {
|
|
584
|
+
var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
585
|
+
label: "Number input label",
|
|
586
|
+
min: -10,
|
|
587
|
+
max: -1,
|
|
588
|
+
step: 0.5
|
|
589
|
+
})),
|
|
590
|
+
getByLabelText = _render26.getByLabelText,
|
|
591
|
+
getAllByRole = _render26.getAllByRole;
|
|
592
|
+
|
|
593
|
+
var number = getByLabelText("Number input label");
|
|
594
|
+
var decrement = getAllByRole("button")[0];
|
|
595
|
+
|
|
596
|
+
_userEvent["default"].click(decrement);
|
|
597
|
+
|
|
598
|
+
expect(number.value).toBe("-1");
|
|
599
|
+
|
|
600
|
+
_userEvent["default"].click(decrement);
|
|
601
|
+
|
|
602
|
+
expect(number.value).toBe("-1.5");
|
|
603
|
+
});
|
|
604
|
+
test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
|
|
605
|
+
var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
425
606
|
label: "Number input label",
|
|
426
607
|
min: 5,
|
|
427
608
|
max: 20,
|
|
428
609
|
step: 5
|
|
429
610
|
})),
|
|
430
|
-
getByLabelText =
|
|
611
|
+
getByLabelText = _render27.getByLabelText;
|
|
431
612
|
|
|
432
613
|
var number = getByLabelText("Number input label");
|
|
433
614
|
|
|
@@ -487,14 +668,15 @@ describe("Number input component tests", function () {
|
|
|
487
668
|
|
|
488
669
|
expect(number.value).toBe("5");
|
|
489
670
|
});
|
|
490
|
-
test("Number has correct
|
|
491
|
-
var
|
|
671
|
+
test("Number has correct accessibility attributes", function () {
|
|
672
|
+
var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
492
673
|
label: "Number input label"
|
|
493
674
|
})),
|
|
494
|
-
getByLabelText =
|
|
495
|
-
getAllByRole =
|
|
675
|
+
getByLabelText = _render28.getByLabelText,
|
|
676
|
+
getAllByRole = _render28.getAllByRole;
|
|
496
677
|
|
|
497
678
|
var number = getByLabelText("Number input label");
|
|
679
|
+
expect(number.getAttribute("type")).toBe("number");
|
|
498
680
|
expect(number.getAttribute("aria-autocomplete")).toBeNull();
|
|
499
681
|
expect(number.getAttribute("aria-controls")).toBeNull();
|
|
500
682
|
expect(number.getAttribute("aria-expanded")).toBeNull();
|
|
@@ -503,4 +685,41 @@ describe("Number input component tests", function () {
|
|
|
503
685
|
var increment = getAllByRole("button")[1];
|
|
504
686
|
expect(increment.getAttribute("aria-label")).toBe("Increment value");
|
|
505
687
|
});
|
|
688
|
+
test("Number input submits correct values inside a form and actions don't trigger the submit event", function () {
|
|
689
|
+
var handlerOnSubmit = jest.fn(function (e) {
|
|
690
|
+
e.preventDefault();
|
|
691
|
+
var formData = new FormData(e.target);
|
|
692
|
+
var formProps = Object.fromEntries(formData);
|
|
693
|
+
expect(formProps).toStrictEqual({
|
|
694
|
+
data: "0"
|
|
695
|
+
});
|
|
696
|
+
});
|
|
697
|
+
|
|
698
|
+
var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
|
|
699
|
+
onSubmit: handlerOnSubmit
|
|
700
|
+
}, /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
|
|
701
|
+
label: "Number input label",
|
|
702
|
+
name: "data"
|
|
703
|
+
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
704
|
+
type: "submit"
|
|
705
|
+
}, "Submit"))),
|
|
706
|
+
getByText = _render29.getByText,
|
|
707
|
+
getAllByRole = _render29.getAllByRole;
|
|
708
|
+
|
|
709
|
+
var less = getAllByRole("button")[0];
|
|
710
|
+
var more = getAllByRole("button")[1];
|
|
711
|
+
var submit = getByText("Submit");
|
|
712
|
+
|
|
713
|
+
_userEvent["default"].click(more);
|
|
714
|
+
|
|
715
|
+
expect(handlerOnSubmit).not.toHaveBeenCalled();
|
|
716
|
+
|
|
717
|
+
_userEvent["default"].click(less);
|
|
718
|
+
|
|
719
|
+
expect(handlerOnSubmit).not.toHaveBeenCalled();
|
|
720
|
+
|
|
721
|
+
_userEvent["default"].click(submit);
|
|
722
|
+
|
|
723
|
+
expect(handlerOnSubmit).toHaveBeenCalled();
|
|
724
|
+
});
|
|
506
725
|
});
|