@dxc-technology/halstack-react 0.0.0-e961efe → 0.0.0-e9cf865
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 +10 -0
- package/BackgroundColorContext.js +48 -0
- package/ThemeContext.d.ts +15 -0
- package/ThemeContext.js +243 -0
- package/{dist/V3Select → V3Select}/V3Select.js +35 -129
- package/{dist/V3Select → V3Select}/index.d.ts +0 -0
- package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +12 -16
- package/{dist/V3Textarea → V3Textarea}/index.d.ts +0 -0
- package/accordion/Accordion.d.ts +4 -0
- package/{dist/accordion → accordion}/Accordion.js +37 -132
- package/accordion/types.d.ts +68 -0
- package/accordion/types.js +5 -0
- package/accordion-group/AccordionGroup.d.ts +7 -0
- package/accordion-group/AccordionGroup.js +170 -0
- package/accordion-group/AccordionGroup.stories.tsx +225 -0
- package/accordion-group/types.d.ts +72 -0
- package/accordion-group/types.js +5 -0
- package/alert/Alert.d.ts +4 -0
- package/{dist/alert → alert}/Alert.js +40 -153
- package/alert/Alert.stories.tsx +170 -0
- package/alert/types.d.ts +49 -0
- package/alert/types.js +5 -0
- package/badge/Badge.js +59 -0
- package/box/Box.d.ts +4 -0
- package/{dist/box → box}/Box.js +15 -45
- package/box/Box.stories.tsx +132 -0
- package/box/types.d.ts +43 -0
- package/box/types.js +5 -0
- package/button/Button.d.ts +4 -0
- package/{dist/button → button}/Button.js +24 -83
- package/button/Button.stories.tsx +276 -0
- package/button/types.d.ts +57 -0
- package/button/types.js +5 -0
- package/card/Card.d.ts +4 -0
- package/{dist/card → card}/Card.js +34 -124
- package/card/Card.stories.tsx +201 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +67 -0
- package/card/types.js +5 -0
- package/checkbox/Checkbox.d.ts +4 -0
- package/{dist/checkbox → checkbox}/Checkbox.js +15 -61
- package/checkbox/Checkbox.stories.tsx +192 -0
- package/checkbox/types.d.ts +60 -0
- package/checkbox/types.js +5 -0
- package/chip/Chip.d.ts +4 -0
- package/{dist/chip → chip}/Chip.js +18 -84
- package/chip/Chip.stories.tsx +121 -0
- package/chip/types.d.ts +53 -0
- package/chip/types.js +5 -0
- package/{dist/common → common}/OpenSans.css +0 -0
- package/{dist/common → common}/RequiredComponent.js +3 -11
- package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
- package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/{dist/common → common}/utils.js +0 -0
- package/{dist/common → common}/variables.js +88 -88
- package/{dist/date → date}/Date.js +17 -23
- package/{dist/date → date}/index.d.ts +0 -0
- package/date-input/DateInput.d.ts +4 -0
- package/{dist/date-input → date-input}/DateInput.js +26 -68
- package/date-input/DateInput.stories.tsx +138 -0
- package/date-input/types.d.ts +100 -0
- package/date-input/types.js +5 -0
- package/dialog/Dialog.d.ts +4 -0
- package/{dist/dialog → dialog}/Dialog.js +22 -75
- package/dialog/Dialog.stories.tsx +212 -0
- package/dialog/types.d.ts +43 -0
- package/dialog/types.js +5 -0
- package/dropdown/Dropdown.d.ts +4 -0
- package/{dist/dropdown → dropdown}/Dropdown.js +45 -172
- package/dropdown/types.d.ts +89 -0
- package/dropdown/types.js +5 -0
- package/file-input/FileInput.d.ts +4 -0
- package/{dist/file-input → file-input}/FileInput.js +98 -221
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +184 -0
- package/file-input/types.d.ts +112 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +4 -0
- package/footer/Footer.js +260 -0
- package/footer/Footer.stories.tsx +130 -0
- package/footer/Icons.d.ts +2 -0
- package/{dist/footer → footer}/Icons.js +15 -15
- package/footer/types.d.ts +65 -0
- package/footer/types.js +5 -0
- package/header/Header.d.ts +7 -0
- package/{dist/header → header}/Header.js +58 -204
- package/header/Header.stories.tsx +162 -0
- package/header/Icons.d.ts +2 -0
- package/{dist/header → header}/Icons.js +7 -32
- package/header/types.d.ts +47 -0
- package/header/types.js +5 -0
- package/heading/Heading.d.ts +4 -0
- package/{dist/heading → heading}/Heading.js +25 -96
- package/heading/Heading.stories.tsx +53 -0
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/{dist/input-text → input-text}/Icons.js +2 -2
- package/{dist/input-text → input-text}/InputText.js +38 -132
- package/{dist/input-text → input-text}/index.d.ts +1 -1
- package/layout/ApplicationLayout.d.ts +10 -0
- package/{dist/layout → layout}/ApplicationLayout.js +39 -141
- package/layout/ApplicationLayout.stories.tsx +171 -0
- package/{dist/layout → layout}/Icons.js +7 -7
- package/layout/types.d.ts +57 -0
- package/layout/types.js +5 -0
- package/link/Link.d.ts +3 -0
- package/{dist/link → link}/Link.js +19 -95
- package/link/Link.stories.tsx +146 -0
- package/link/types.d.ts +74 -0
- package/link/types.js +5 -0
- package/list/List.d.ts +7 -0
- package/list/List.js +37 -0
- package/list/List.stories.tsx +70 -0
- package/main.d.ts +48 -0
- package/{dist/main.js → main.js} +118 -82
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +83 -0
- package/number-input/NumberInput.stories.tsx +115 -0
- package/number-input/NumberInputContext.d.ts +4 -0
- package/{dist/number-input → number-input}/NumberInputContext.js +5 -2
- package/number-input/numberInputContextTypes.d.ts +19 -0
- package/number-input/numberInputContextTypes.js +5 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +20 -17
- package/{dist/paginator → paginator}/Icons.js +9 -9
- package/paginator/Paginator.d.ts +4 -0
- package/paginator/Paginator.js +192 -0
- package/paginator/Paginator.stories.tsx +63 -0
- package/paginator/types.d.ts +38 -0
- package/paginator/types.js +5 -0
- package/password-input/PasswordInput.d.ts +4 -0
- package/{dist/password-input → password-input}/PasswordInput.js +37 -77
- package/password-input/PasswordInput.stories.tsx +131 -0
- package/password-input/types.d.ts +107 -0
- package/password-input/types.js +5 -0
- package/progress-bar/ProgressBar.d.ts +4 -0
- package/{dist/progress-bar → progress-bar}/ProgressBar.js +22 -94
- package/progress-bar/ProgressBar.stories.jsx +58 -0
- package/progress-bar/types.d.ts +37 -0
- package/progress-bar/types.js +5 -0
- package/radio/Radio.d.ts +4 -0
- package/{dist/radio → radio}/Radio.js +17 -52
- package/radio/Radio.stories.tsx +192 -0
- package/radio/types.d.ts +54 -0
- package/radio/types.js +5 -0
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +39 -146
- package/resultsetTable/types.d.ts +67 -0
- package/resultsetTable/types.js +5 -0
- package/row/Row.d.ts +11 -0
- package/row/Row.js +124 -0
- package/row/Row.stories.tsx +223 -0
- package/{dist/select → select}/Select.js +254 -487
- package/select/Select.stories.tsx +572 -0
- package/select/index.d.ts +131 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/{dist/sidenav → sidenav}/Sidenav.js +21 -64
- package/sidenav/Sidenav.stories.tsx +165 -0
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/slider/Slider.d.ts +4 -0
- package/{dist/slider → slider}/Slider.js +74 -161
- package/slider/Slider.stories.tsx +177 -0
- package/slider/types.d.ts +78 -0
- package/slider/types.js +5 -0
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +250 -0
- package/spinner/Spinner.stories.jsx +102 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/stack/Stack.d.ts +10 -0
- package/stack/Stack.js +94 -0
- package/stack/Stack.stories.tsx +150 -0
- package/switch/Switch.d.ts +4 -0
- package/{dist/switch → switch}/Switch.js +28 -71
- package/switch/Switch.stories.tsx +160 -0
- package/switch/types.d.ts +58 -0
- package/switch/types.js +5 -0
- package/table/Table.d.ts +4 -0
- package/{dist/table → table}/Table.js +12 -26
- package/table/Table.stories.jsx +276 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tabs/Tabs.d.ts +4 -0
- package/tabs/Tabs.js +213 -0
- package/tabs/Tabs.stories.tsx +121 -0
- package/tabs/types.d.ts +70 -0
- package/tabs/types.js +5 -0
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +193 -0
- package/tag/Tag.stories.tsx +145 -0
- package/tag/types.d.ts +60 -0
- package/tag/types.js +5 -0
- package/text/Text.d.ts +7 -0
- package/text/Text.js +30 -0
- package/text/Text.stories.tsx +19 -0
- package/text-input/TextInput.d.ts +4 -0
- package/{dist/text-input → text-input}/TextInput.js +269 -457
- package/text-input/TextInput.stories.tsx +456 -0
- package/text-input/types.d.ts +159 -0
- package/text-input/types.js +5 -0
- package/{dist/textarea → textarea}/Textarea.js +40 -95
- package/textarea/Textarea.stories.jsx +135 -0
- package/{dist/textarea → textarea}/index.d.ts +18 -8
- package/{dist/toggle → toggle}/Toggle.js +16 -50
- package/{dist/toggle → toggle}/index.d.ts +0 -0
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/{dist/toggle-group → toggle-group}/ToggleGroup.js +30 -140
- package/toggle-group/ToggleGroup.stories.tsx +178 -0
- package/toggle-group/types.d.ts +84 -0
- package/toggle-group/types.js +5 -0
- package/{dist/upload → upload}/Upload.js +11 -15
- package/upload/buttons-upload/ButtonsUpload.js +111 -0
- package/{dist/upload → upload}/buttons-upload/Icons.js +7 -7
- package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
- package/{dist/upload → upload}/dragAndDropArea/Icons.js +6 -6
- package/upload/file-upload/FileToUpload.js +115 -0
- package/{dist/upload → upload}/file-upload/Icons.js +13 -13
- package/{dist/upload → upload}/files-upload/FilesToUpload.js +13 -27
- package/{dist/upload → upload}/index.d.ts +0 -0
- package/{dist/upload → upload}/transaction/Icons.js +31 -31
- package/upload/transaction/Transaction.js +104 -0
- package/upload/transactions/Transactions.js +94 -0
- package/useTheme.d.ts +2 -0
- package/{dist/useTheme.js → useTheme.js} +1 -1
- package/{dist/wizard → wizard}/Icons.js +8 -8
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +231 -0
- package/wizard/Wizard.stories.jsx +224 -0
- package/wizard/types.d.ts +64 -0
- package/wizard/types.js +5 -0
- package/README.md +0 -66
- package/babel.config.js +0 -7
- package/dist/BackgroundColorContext.js +0 -46
- package/dist/ThemeContext.js +0 -250
- package/dist/accordion/index.d.ts +0 -28
- package/dist/accordion-group/AccordionGroup.js +0 -186
- package/dist/accordion-group/index.d.ts +0 -16
- package/dist/alert/index.d.ts +0 -51
- package/dist/badge/Badge.js +0 -63
- package/dist/box/index.d.ts +0 -25
- package/dist/button/index.d.ts +0 -24
- package/dist/card/index.d.ts +0 -22
- package/dist/checkbox/index.d.ts +0 -24
- package/dist/chip/index.d.ts +0 -22
- package/dist/date-input/index.d.ts +0 -95
- package/dist/dialog/index.d.ts +0 -18
- package/dist/dropdown/index.d.ts +0 -26
- package/dist/file-input/FileItem.js +0 -287
- package/dist/file-input/index.d.ts +0 -81
- package/dist/footer/Footer.js +0 -421
- package/dist/footer/index.d.ts +0 -25
- package/dist/header/index.d.ts +0 -25
- package/dist/heading/index.d.ts +0 -17
- package/dist/link/index.d.ts +0 -23
- package/dist/main.d.ts +0 -40
- package/dist/number-input/NumberInput.js +0 -136
- package/dist/number-input/index.d.ts +0 -113
- package/dist/paginator/Paginator.js +0 -305
- package/dist/paginator/index.d.ts +0 -20
- package/dist/password-input/index.d.ts +0 -94
- package/dist/progress-bar/index.d.ts +0 -18
- package/dist/radio/index.d.ts +0 -23
- package/dist/resultsetTable/index.d.ts +0 -19
- package/dist/select/index.d.ts +0 -53
- package/dist/sidenav/index.d.ts +0 -13
- package/dist/slider/index.d.ts +0 -29
- package/dist/spinner/Spinner.js +0 -381
- package/dist/spinner/index.d.ts +0 -17
- package/dist/stories/Button.js +0 -71
- package/dist/stories/Button.stories.js +0 -55
- package/dist/stories/Header.js +0 -67
- package/dist/stories/Header.stories.js +0 -31
- package/dist/stories/Introduction.stories.mdx +0 -211
- package/dist/stories/Page.js +0 -68
- package/dist/stories/Page.stories.js +0 -39
- package/dist/stories/assets/code-brackets.svg +0 -1
- package/dist/stories/assets/colors.svg +0 -1
- package/dist/stories/assets/comments.svg +0 -1
- package/dist/stories/assets/direction.svg +0 -1
- package/dist/stories/assets/flow.svg +0 -1
- package/dist/stories/assets/plugin.svg +0 -1
- package/dist/stories/assets/repo.svg +0 -1
- package/dist/stories/assets/stackalt.svg +0 -1
- package/dist/stories/button.css +0 -30
- package/dist/stories/header.css +0 -26
- package/dist/stories/page.css +0 -69
- package/dist/switch/index.d.ts +0 -24
- package/dist/table/index.d.ts +0 -13
- package/dist/tabs/Tabs.js +0 -343
- package/dist/tabs/index.d.ts +0 -19
- package/dist/tag/Tag.js +0 -282
- package/dist/tag/index.d.ts +0 -24
- package/dist/text-input/index.d.ts +0 -135
- package/dist/toggle-group/index.d.ts +0 -21
- package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
- package/dist/upload/file-upload/FileToUpload.js +0 -189
- package/dist/upload/transaction/Transaction.js +0 -148
- package/dist/upload/transactions/Transactions.js +0 -138
- package/dist/wizard/Wizard.js +0 -405
- package/dist/wizard/index.d.ts +0 -18
- package/test/Accordion.test.js +0 -33
- package/test/AccordionGroup.test.js +0 -125
- package/test/Alert.test.js +0 -53
- package/test/Box.test.js +0 -10
- package/test/Button.test.js +0 -18
- package/test/Card.test.js +0 -30
- package/test/Checkbox.test.js +0 -45
- package/test/Chip.test.js +0 -25
- package/test/Date.test.js +0 -395
- package/test/DateInput.test.js +0 -242
- package/test/Dialog.test.js +0 -23
- package/test/Dropdown.test.js +0 -145
- package/test/FileInput.test.js +0 -201
- package/test/Footer.test.js +0 -94
- package/test/Header.test.js +0 -34
- package/test/Heading.test.js +0 -83
- package/test/InputText.test.js +0 -239
- package/test/Link.test.js +0 -43
- package/test/NumberInput.test.js +0 -259
- package/test/Paginator.test.js +0 -181
- package/test/PasswordInput.test.js +0 -83
- package/test/ProgressBar.test.js +0 -35
- package/test/Radio.test.js +0 -37
- package/test/ResultsetTable.test.js +0 -330
- package/test/Select.test.js +0 -415
- package/test/Sidenav.test.js +0 -45
- package/test/Slider.test.js +0 -74
- package/test/Spinner.test.js +0 -32
- package/test/Switch.test.js +0 -45
- package/test/Table.test.js +0 -36
- package/test/Tabs.test.js +0 -109
- package/test/Tag.test.js +0 -32
- package/test/TextInput.test.js +0 -732
- package/test/Textarea.test.js +0 -193
- package/test/ToggleGroup.test.js +0 -85
- package/test/Upload.test.js +0 -60
- package/test/V3Select.test.js +0 -212
- package/test/V3TextArea.test.js +0 -51
- package/test/Wizard.test.js +0 -130
- package/test/mocks/pngMock.js +0 -1
- package/test/mocks/svgMock.js +0 -1
package/test/Select.test.js
DELETED
|
@@ -1,415 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import DxcSelect from "../src/select/Select";
|
|
3
|
-
import { render, fireEvent } from "@testing-library/react";
|
|
4
|
-
import userEvent from "@testing-library/user-event";
|
|
5
|
-
|
|
6
|
-
const single_options = [
|
|
7
|
-
{ label: "Option 01", value: "1" },
|
|
8
|
-
{ label: "Option 02", value: "2" },
|
|
9
|
-
{ label: "Option 03", value: "3" },
|
|
10
|
-
{ label: "Option 04", value: "4" },
|
|
11
|
-
{ label: "Option 05", value: "5" },
|
|
12
|
-
{ label: "Option 06", value: "6" },
|
|
13
|
-
{ label: "Option 07", value: "7" },
|
|
14
|
-
{ label: "Option 08", value: "8" },
|
|
15
|
-
{ label: "Option 09", value: "9" },
|
|
16
|
-
{ label: "Option 10", value: "10" },
|
|
17
|
-
{ label: "Option 11", value: "11" },
|
|
18
|
-
{ label: "Option 12", value: "12" },
|
|
19
|
-
{ label: "Option 13", value: "13" },
|
|
20
|
-
{ label: "Option 14", value: "14" },
|
|
21
|
-
{ label: "Option 15", value: "15" },
|
|
22
|
-
{ label: "Option 16", value: "16" },
|
|
23
|
-
{ label: "Option 17", value: "17" },
|
|
24
|
-
{ label: "Option 18", value: "18" },
|
|
25
|
-
{ label: "Option 19", value: "19" },
|
|
26
|
-
{ label: "Option 20", value: "20" },
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
const group_options = [
|
|
30
|
-
{
|
|
31
|
-
label: "Group 1",
|
|
32
|
-
options: [
|
|
33
|
-
{ label: "Option 001", value: "1" },
|
|
34
|
-
{ label: "Option 002", value: "2" },
|
|
35
|
-
{ label: "Option 003", value: "3" },
|
|
36
|
-
],
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
label: "Group 2",
|
|
40
|
-
options: [
|
|
41
|
-
{ label: "Option 0004", value: "4" },
|
|
42
|
-
{ label: "Option 05", value: "5" },
|
|
43
|
-
{ label: "Option 006", value: "6" },
|
|
44
|
-
],
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
label: "Group 3",
|
|
48
|
-
options: [
|
|
49
|
-
{ label: "Option 0007", value: "7" },
|
|
50
|
-
{ label: "Option 008", value: "8" },
|
|
51
|
-
{ label: "Option 9", value: "9" },
|
|
52
|
-
],
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
label: "Group 4",
|
|
56
|
-
options: [
|
|
57
|
-
{ label: "Option 10", value: "10" },
|
|
58
|
-
{ label: "Option 11", value: "11" },
|
|
59
|
-
{ label: "Option 12", value: "12" },
|
|
60
|
-
],
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
label: "Group 5",
|
|
64
|
-
options: [
|
|
65
|
-
{ label: "Option x", value: "13" },
|
|
66
|
-
{ label: "Option y", value: "14" },
|
|
67
|
-
{ label: "Option z", value: "15" },
|
|
68
|
-
],
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
label: "Group 6",
|
|
72
|
-
options: [
|
|
73
|
-
{ label: "Option 001", value: "16" },
|
|
74
|
-
{ label: "Option 002", value: "17" },
|
|
75
|
-
{ label: "Option 003", value: "18" },
|
|
76
|
-
],
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
label: "Group 7",
|
|
80
|
-
options: [
|
|
81
|
-
{ label: "Option 001", value: "19" },
|
|
82
|
-
{ label: "Option 002", value: "20" },
|
|
83
|
-
{ label: "Option 003", value: "21" },
|
|
84
|
-
],
|
|
85
|
-
},
|
|
86
|
-
];
|
|
87
|
-
|
|
88
|
-
describe("Select component tests", () => {
|
|
89
|
-
test("Renders with correct label, helper text and placeholder", () => {
|
|
90
|
-
const { getByText } = render(
|
|
91
|
-
<DxcSelect label="test-select-label" helperText="test-select-helper-text" placeholder="Example text" />
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
expect(getByText("test-select-label")).toBeTruthy();
|
|
95
|
-
expect(getByText("test-select-helper-text")).toBeTruthy();
|
|
96
|
-
expect(getByText("Example text")).toBeTruthy();
|
|
97
|
-
});
|
|
98
|
-
test("Renders with correct optional label", () => {
|
|
99
|
-
const { getByText } = render(<DxcSelect label="test-select-label" optional />);
|
|
100
|
-
|
|
101
|
-
expect(getByText("test-select-label")).toBeTruthy();
|
|
102
|
-
expect(getByText("(Optional)")).toBeTruthy();
|
|
103
|
-
});
|
|
104
|
-
test("Renders with error message", () => {
|
|
105
|
-
const { getByText, getByRole } = render(<DxcSelect label="test-select-label" error="Error message." />);
|
|
106
|
-
const select = getByRole("combobox");
|
|
107
|
-
|
|
108
|
-
expect(getByText("Error message.")).toBeTruthy();
|
|
109
|
-
expect(select.getAttribute("aria-invalid")).toBe("true");
|
|
110
|
-
});
|
|
111
|
-
test("Disabled select - Clear all options action must be shown but not clickable", () => {
|
|
112
|
-
const { getByRole, getByText, queryByRole } = render(
|
|
113
|
-
<DxcSelect label="test-select-label" value={["1", "2"]} options={single_options} disabled searchable multiple />
|
|
114
|
-
);
|
|
115
|
-
const select = getByRole("combobox");
|
|
116
|
-
|
|
117
|
-
userEvent.click(select);
|
|
118
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
119
|
-
userEvent.click(getByRole("button"));
|
|
120
|
-
expect(getByText("Option 01, Option 02")).toBeTruthy();
|
|
121
|
-
});
|
|
122
|
-
test("Focused select does not open the listbox", () => {
|
|
123
|
-
const { getByRole, queryByRole } = render(
|
|
124
|
-
<DxcSelect label="test-select-label" value={["1", "2"]} options={single_options} disabled searchable multiple />
|
|
125
|
-
);
|
|
126
|
-
const select = getByRole("combobox");
|
|
127
|
-
|
|
128
|
-
fireEvent.focus(select);
|
|
129
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
130
|
-
});
|
|
131
|
-
test("Controlled - Not optional constraint", () => {
|
|
132
|
-
// scrollIntoView & scrollTo are not implemented in jsdom
|
|
133
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
134
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
135
|
-
const onChange = jest.fn();
|
|
136
|
-
const onBlur = jest.fn();
|
|
137
|
-
const { getByRole, getAllByRole } = render(
|
|
138
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} onBlur={onBlur} />
|
|
139
|
-
);
|
|
140
|
-
const select = getByRole("combobox");
|
|
141
|
-
|
|
142
|
-
expect(select.getAttribute("aria-required")).toBe("true");
|
|
143
|
-
fireEvent.focus(select);
|
|
144
|
-
fireEvent.blur(select);
|
|
145
|
-
expect(onBlur).toHaveBeenCalled();
|
|
146
|
-
expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
|
|
147
|
-
userEvent.click(select);
|
|
148
|
-
userEvent.click(getAllByRole("option")[0]);
|
|
149
|
-
expect(onChange).toHaveBeenCalled();
|
|
150
|
-
expect(onChange).toHaveBeenCalledWith({ value: "1", error: null });
|
|
151
|
-
fireEvent.focus(select);
|
|
152
|
-
fireEvent.blur(select);
|
|
153
|
-
expect(onBlur).toHaveBeenCalled();
|
|
154
|
-
expect(onBlur).toHaveBeenCalledWith({ value: "1", error: null });
|
|
155
|
-
});
|
|
156
|
-
test("Controlled - Optional constraint", () => {
|
|
157
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
158
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
159
|
-
const onChange = jest.fn();
|
|
160
|
-
const onBlur = jest.fn();
|
|
161
|
-
const { getByRole } = render(
|
|
162
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} onBlur={onBlur} optional />
|
|
163
|
-
);
|
|
164
|
-
const select = getByRole("combobox");
|
|
165
|
-
|
|
166
|
-
expect(select.getAttribute("aria-required")).toBe("false");
|
|
167
|
-
fireEvent.focus(select);
|
|
168
|
-
fireEvent.blur(select);
|
|
169
|
-
expect(onBlur).toHaveBeenCalled();
|
|
170
|
-
expect(onBlur).toHaveBeenCalledWith({ value: "", error: null });
|
|
171
|
-
expect(select.getAttribute("aria-invalid")).toBe("false");
|
|
172
|
-
});
|
|
173
|
-
test("Non-Grouped Options - Opens listbox or closes it with a click on select", () => {
|
|
174
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
175
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
176
|
-
const { getByText, getByRole, queryByRole } = render(
|
|
177
|
-
<DxcSelect label="test-select-label" options={single_options} />
|
|
178
|
-
);
|
|
179
|
-
const select = getByRole("combobox");
|
|
180
|
-
|
|
181
|
-
userEvent.click(select);
|
|
182
|
-
expect(getByRole("listbox")).toBeTruthy();
|
|
183
|
-
expect(select.getAttribute("aria-expanded")).toBe("true");
|
|
184
|
-
expect(getByText("Option 01")).toBeTruthy();
|
|
185
|
-
expect(getByText("Option 02")).toBeTruthy();
|
|
186
|
-
expect(getByText("Option 08")).toBeTruthy();
|
|
187
|
-
expect(getByText("Option 09")).toBeTruthy();
|
|
188
|
-
userEvent.click(select);
|
|
189
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
190
|
-
expect(select.getAttribute("aria-expanded")).toBe("false");
|
|
191
|
-
});
|
|
192
|
-
test("Non-Grouped Options - If an empty list of options is passed, the select is rendered but doestn't open the listbox", () => {
|
|
193
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
194
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
195
|
-
const { getByRole, queryByRole } = render(<DxcSelect label="test-select-label" options={[]} />);
|
|
196
|
-
const select = getByRole("combobox");
|
|
197
|
-
|
|
198
|
-
userEvent.click(select);
|
|
199
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
200
|
-
expect(select.getAttribute("aria-expanded")).toBe("false");
|
|
201
|
-
});
|
|
202
|
-
test("Non-Grouped Options - Click in an option selects it and closes the listbox", () => {
|
|
203
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
204
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
205
|
-
const onChange = jest.fn();
|
|
206
|
-
const { getByText, getByRole, getAllByRole, queryByRole } = render(
|
|
207
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} />
|
|
208
|
-
);
|
|
209
|
-
const select = getByRole("combobox");
|
|
210
|
-
|
|
211
|
-
userEvent.click(select);
|
|
212
|
-
userEvent.click(getAllByRole("option")[2]);
|
|
213
|
-
expect(onChange).toHaveBeenCalledWith({ value: "3", error: null });
|
|
214
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
215
|
-
expect(getByText("Option 03")).toBeTruthy();
|
|
216
|
-
userEvent.click(select);
|
|
217
|
-
expect(getAllByRole("option")[2].getAttribute("aria-selected")).toBe("true");
|
|
218
|
-
});
|
|
219
|
-
test("Non-Grouped Options - Optional renders an empty first option with the placeholder as its label", () => {
|
|
220
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
221
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
222
|
-
const onChange = jest.fn();
|
|
223
|
-
const { getByRole, getAllByRole, getAllByText } = render(
|
|
224
|
-
<DxcSelect
|
|
225
|
-
label="test-select-label"
|
|
226
|
-
placeholder="Choose an option"
|
|
227
|
-
options={single_options}
|
|
228
|
-
onChange={onChange}
|
|
229
|
-
optional
|
|
230
|
-
/>
|
|
231
|
-
);
|
|
232
|
-
const select = getByRole("combobox");
|
|
233
|
-
|
|
234
|
-
userEvent.click(select);
|
|
235
|
-
expect(getAllByText("Choose an option").length).toBe(2);
|
|
236
|
-
expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
|
|
237
|
-
userEvent.click(getAllByRole("option")[0]);
|
|
238
|
-
expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
|
|
239
|
-
expect(getAllByText("Choose an option").length).toBe(1);
|
|
240
|
-
});
|
|
241
|
-
test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", () => {
|
|
242
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
243
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
244
|
-
const { getByRole, queryByRole } = render(
|
|
245
|
-
<DxcSelect label="test-select-label" options={single_options} />
|
|
246
|
-
);
|
|
247
|
-
const select = getByRole("combobox");
|
|
248
|
-
|
|
249
|
-
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
|
|
250
|
-
expect(queryByRole("listbox")).toBeTruthy();
|
|
251
|
-
expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
|
|
252
|
-
});
|
|
253
|
-
test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", () => {
|
|
254
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
255
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
256
|
-
const { getByRole, queryByRole } = render(
|
|
257
|
-
<DxcSelect label="test-select-label" options={single_options} />
|
|
258
|
-
);
|
|
259
|
-
const select = getByRole("combobox");
|
|
260
|
-
|
|
261
|
-
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
|
|
262
|
-
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
|
|
263
|
-
expect(queryByRole("listbox")).toBeTruthy();
|
|
264
|
-
expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
|
|
265
|
-
});
|
|
266
|
-
test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", () => {
|
|
267
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
268
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
269
|
-
const { getByRole, queryByRole } = render(
|
|
270
|
-
<DxcSelect label="test-select-label" options={single_options} />
|
|
271
|
-
);
|
|
272
|
-
const select = getByRole("combobox");
|
|
273
|
-
|
|
274
|
-
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
|
|
275
|
-
expect(queryByRole("listbox")).toBeTruthy();
|
|
276
|
-
expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
277
|
-
});
|
|
278
|
-
test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", () => {
|
|
279
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
280
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
281
|
-
const { getByRole, queryByRole } = render(
|
|
282
|
-
<DxcSelect label="test-select-label" options={single_options} />
|
|
283
|
-
);
|
|
284
|
-
const select = getByRole("combobox");
|
|
285
|
-
|
|
286
|
-
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
|
|
287
|
-
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
|
|
288
|
-
expect(queryByRole("listbox")).toBeTruthy();
|
|
289
|
-
expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
|
|
290
|
-
});
|
|
291
|
-
test("Non-Grouped Options: Enter key - Selects the visually focused option and closes the listbox", () => {
|
|
292
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
293
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
294
|
-
const onChange = jest.fn();
|
|
295
|
-
const { getByText, getByRole, getAllByRole, queryByRole } = render(
|
|
296
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} />
|
|
297
|
-
);
|
|
298
|
-
const select = getByRole("combobox");
|
|
299
|
-
|
|
300
|
-
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
|
|
301
|
-
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
|
|
302
|
-
fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
|
|
303
|
-
fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
|
|
304
|
-
fireEvent.keyDown(select, { key: "Enter", code: "Enter", keyCode: 13, charCode: 13 });
|
|
305
|
-
expect(onChange).toHaveBeenCalledWith({ value: "19", error: null });
|
|
306
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
307
|
-
expect(getByText("Option 19")).toBeTruthy();
|
|
308
|
-
userEvent.click(select);
|
|
309
|
-
expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
|
|
310
|
-
});
|
|
311
|
-
test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", () => {
|
|
312
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
313
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
314
|
-
const onChange = jest.fn();
|
|
315
|
-
const { container, getByText, getByRole, getAllByRole, queryByRole } = render(
|
|
316
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
|
|
317
|
-
);
|
|
318
|
-
const select = getByRole("combobox");
|
|
319
|
-
const searchInput = container.querySelectorAll("input")[1];
|
|
320
|
-
|
|
321
|
-
userEvent.click(select);
|
|
322
|
-
expect(getByRole("listbox")).toBeTruthy();
|
|
323
|
-
userEvent.type(searchInput, "08");
|
|
324
|
-
userEvent.click(getByRole("option"));
|
|
325
|
-
expect(onChange).toHaveBeenCalledWith({ value: "8", error: null });
|
|
326
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
327
|
-
expect(getByText("Option 08")).toBeTruthy();
|
|
328
|
-
expect(searchInput.value).toBe("");
|
|
329
|
-
userEvent.click(select);
|
|
330
|
-
expect(getAllByRole("option")[7].getAttribute("aria-selected")).toBe("true");
|
|
331
|
-
});
|
|
332
|
-
test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", () => {
|
|
333
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
334
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
335
|
-
const onChange = jest.fn();
|
|
336
|
-
const { container, getByText, getByRole } = render(
|
|
337
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
|
|
338
|
-
);
|
|
339
|
-
const select = getByRole("combobox");
|
|
340
|
-
const searchInput = container.querySelectorAll("input")[1];
|
|
341
|
-
|
|
342
|
-
userEvent.click(select);
|
|
343
|
-
expect(getByRole("listbox")).toBeTruthy();
|
|
344
|
-
userEvent.type(searchInput, "abc");
|
|
345
|
-
expect(getByText("No matches found")).toBeTruthy();
|
|
346
|
-
});
|
|
347
|
-
test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", () => {
|
|
348
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
349
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
350
|
-
const onChange = jest.fn();
|
|
351
|
-
const { container, getByText, getByRole, getAllByRole } = render(
|
|
352
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
|
|
353
|
-
);
|
|
354
|
-
const select = getByRole("combobox");
|
|
355
|
-
const searchInput = container.querySelectorAll("input")[1];
|
|
356
|
-
|
|
357
|
-
userEvent.click(select);
|
|
358
|
-
expect(getByRole("listbox")).toBeTruthy();
|
|
359
|
-
userEvent.type(searchInput, "2");
|
|
360
|
-
expect(getByText("Option 02")).toBeTruthy();
|
|
361
|
-
expect(getByText("Option 12")).toBeTruthy();
|
|
362
|
-
expect(getByText("Option 20")).toBeTruthy();
|
|
363
|
-
expect(getAllByRole("option").length).toBe(3);
|
|
364
|
-
userEvent.click(select);
|
|
365
|
-
expect(searchInput.value).toBe("");
|
|
366
|
-
});
|
|
367
|
-
test("Non-Grouped Options: Searchable - Writing displays the listbox, if was not open", () => {
|
|
368
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
369
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
370
|
-
const onChange = jest.fn();
|
|
371
|
-
const { container, getByRole, queryByRole } = render(
|
|
372
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
|
|
373
|
-
);
|
|
374
|
-
const select = getByRole("combobox");
|
|
375
|
-
const searchInput = container.querySelectorAll("input")[1];
|
|
376
|
-
|
|
377
|
-
userEvent.click(select);
|
|
378
|
-
userEvent.click(select);
|
|
379
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
380
|
-
userEvent.type(searchInput, "2");
|
|
381
|
-
expect(getByRole("listbox")).toBeTruthy();
|
|
382
|
-
});
|
|
383
|
-
test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", () => {
|
|
384
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
385
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
386
|
-
const onChange = jest.fn();
|
|
387
|
-
const { container, getByRole, queryByRole } = render(
|
|
388
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
|
|
389
|
-
);
|
|
390
|
-
const select = getByRole("combobox");
|
|
391
|
-
const searchInput = container.querySelectorAll("input")[1];
|
|
392
|
-
|
|
393
|
-
userEvent.type(searchInput, "Option 02");
|
|
394
|
-
fireEvent.keyDown(select, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
|
|
395
|
-
expect(searchInput.value).toBe("");
|
|
396
|
-
expect(queryByRole("listbox")).toBeFalsy();
|
|
397
|
-
});
|
|
398
|
-
test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", () => {
|
|
399
|
-
window.HTMLElement.prototype.scrollIntoView = () => {};
|
|
400
|
-
window.HTMLElement.prototype.scrollTo = () => {};
|
|
401
|
-
const onChange = jest.fn();
|
|
402
|
-
const { container, getByRole, getAllByRole } = render(
|
|
403
|
-
<DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
|
|
404
|
-
);
|
|
405
|
-
const searchInput = container.querySelectorAll("input")[1];
|
|
406
|
-
|
|
407
|
-
userEvent.type(searchInput, "Option 02");
|
|
408
|
-
expect(getAllByRole("option").length).toBe(1);
|
|
409
|
-
const clearAction = getByRole("button");
|
|
410
|
-
expect(clearAction).toBeTruthy();
|
|
411
|
-
userEvent.click(clearAction);
|
|
412
|
-
expect(getByRole("listbox")).toBeTruthy();
|
|
413
|
-
expect(getAllByRole("option").length).toBe(20);
|
|
414
|
-
});
|
|
415
|
-
});
|
package/test/Sidenav.test.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, fireEvent } from "@testing-library/react";
|
|
3
|
-
import DxcSidenav from "../src/sidenav/Sidenav";
|
|
4
|
-
|
|
5
|
-
const navContent = <p>nav-content-test</p>;
|
|
6
|
-
|
|
7
|
-
describe("Sidenav component tests", () => {
|
|
8
|
-
test("Sidenav renders nav content", () => {
|
|
9
|
-
const { getByText } = render(<DxcSidenav>{navContent}</DxcSidenav>);
|
|
10
|
-
expect(getByText("nav-content-test")).toBeTruthy();
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
test("Sidenav renders nav and page content in mobile version", () => {
|
|
14
|
-
//425 is mobile width
|
|
15
|
-
Object.defineProperty(HTMLElement.prototype, "offsetWidth", { configurable: true, value: 425 });
|
|
16
|
-
const { getByText } = render(<DxcSidenav>{navContent}</DxcSidenav>);
|
|
17
|
-
expect(getByText("nav-content-test")).toBeTruthy();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
test("Sidenav renders compound components", () => {
|
|
21
|
-
const { getByText } = render(
|
|
22
|
-
<DxcSidenav>
|
|
23
|
-
<DxcSidenav.Title>test-title</DxcSidenav.Title>
|
|
24
|
-
<DxcSidenav.Subtitle>test-subtitle</DxcSidenav.Subtitle>
|
|
25
|
-
<DxcSidenav.Link href="#">test-link</DxcSidenav.Link>
|
|
26
|
-
</DxcSidenav>
|
|
27
|
-
);
|
|
28
|
-
expect(getByText("test-title")).toBeTruthy();
|
|
29
|
-
expect(getByText("test-subtitle")).toBeTruthy();
|
|
30
|
-
expect(getByText("test-link")).toBeTruthy();
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
test("Sidenav link onClick", () => {
|
|
34
|
-
const onClick = jest.fn();
|
|
35
|
-
const { getByText } = render(
|
|
36
|
-
<DxcSidenav>
|
|
37
|
-
<DxcSidenav.Link onClick={onClick}>test-link</DxcSidenav.Link>
|
|
38
|
-
</DxcSidenav>
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
const link = getByText("test-link");
|
|
42
|
-
fireEvent.click(link);
|
|
43
|
-
expect(onClick).toHaveBeenCalled();
|
|
44
|
-
});
|
|
45
|
-
});
|
package/test/Slider.test.js
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, fireEvent, act } from "@testing-library/react";
|
|
3
|
-
import DxcSlider from "../src/slider/Slider";
|
|
4
|
-
|
|
5
|
-
describe("Slider component tests", () => {
|
|
6
|
-
test("Slider renders with correct text", () => {
|
|
7
|
-
const { getByText } = render(<DxcSlider minValue={0} maxValue={100} showLimitsValues />);
|
|
8
|
-
expect(getByText("0")).toBeTruthy();
|
|
9
|
-
expect(getByText("100")).toBeTruthy();
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
test("Calls correct function onChange in controlled slider", () => {
|
|
13
|
-
const onChange = jest.fn();
|
|
14
|
-
const { getByRole } = render(
|
|
15
|
-
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
|
|
16
|
-
);
|
|
17
|
-
act(() => {
|
|
18
|
-
fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
|
|
19
|
-
});
|
|
20
|
-
expect(onChange).toHaveBeenCalledWith(25);
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
test("Calls correct function onChange in uncontrolled slider", () => {
|
|
24
|
-
const onChange = jest.fn();
|
|
25
|
-
const { getByRole } = render(
|
|
26
|
-
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues showInput />
|
|
27
|
-
);
|
|
28
|
-
act(() => {
|
|
29
|
-
fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
|
|
30
|
-
});
|
|
31
|
-
expect(onChange).toHaveBeenCalledWith(25);
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
test("Disabled slider have disabled input", () => {
|
|
35
|
-
const onChange = jest.fn();
|
|
36
|
-
const { getByRole } = render(
|
|
37
|
-
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues disabled showInput value={13} />
|
|
38
|
-
);
|
|
39
|
-
act(() => {
|
|
40
|
-
fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
|
|
41
|
-
});
|
|
42
|
-
expect(getByRole("textbox").hasAttribute("disabled")).toBeTruthy();
|
|
43
|
-
expect(getByRole("textbox").value).toBe("13");
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
test("Calls correct function onDragEnd", () => {
|
|
47
|
-
const onDragEnd = jest.fn();
|
|
48
|
-
const { getByRole } = render(
|
|
49
|
-
<DxcSlider minValue={0} maxValue={100} showLimitsValues showInput onDragEnd={onDragEnd} value={25} />
|
|
50
|
-
);
|
|
51
|
-
act(() => {
|
|
52
|
-
fireEvent.mouseDown(getByRole("slider"));
|
|
53
|
-
fireEvent.mouseUp(getByRole("slider"));
|
|
54
|
-
});
|
|
55
|
-
expect(onDragEnd).toHaveBeenCalled();
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
test("Calls correct function labelFormatCallback", () => {
|
|
59
|
-
const labelFormatCallback = jest.fn((x) => `${x}$`);
|
|
60
|
-
const { getByText } = render(
|
|
61
|
-
<DxcSlider
|
|
62
|
-
minValue={0}
|
|
63
|
-
maxValue={100}
|
|
64
|
-
showLimitsValues
|
|
65
|
-
showInput
|
|
66
|
-
value={25}
|
|
67
|
-
labelFormatCallback={labelFormatCallback}
|
|
68
|
-
/>
|
|
69
|
-
);
|
|
70
|
-
expect(getByText("0$")).toBeTruthy();
|
|
71
|
-
expect(getByText("100$")).toBeTruthy();
|
|
72
|
-
expect(labelFormatCallback).toHaveBeenCalledTimes(2);
|
|
73
|
-
});
|
|
74
|
-
});
|
package/test/Spinner.test.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render } from "@testing-library/react";
|
|
3
|
-
import DxcSpinner from "../src/spinner/Spinner";
|
|
4
|
-
|
|
5
|
-
describe("Spinner component tests", () => {
|
|
6
|
-
test("Spinner renders with correct label", () => {
|
|
7
|
-
const { getByText } = render(<DxcSpinner label="test-loading"></DxcSpinner>);
|
|
8
|
-
expect(getByText("test-loading")).toBeTruthy();
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
test("Spinner shows value correctly", () => {
|
|
12
|
-
const { getByText } = render(<DxcSpinner label="test-loading" value={75} showValue></DxcSpinner>);
|
|
13
|
-
expect(getByText("75%")).toBeTruthy();
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
test("Small spinner hides value and label correctly", () => {
|
|
17
|
-
const { queryByText } = render(<DxcSpinner mode="small" label="test-loading" value={75} showValue></DxcSpinner>);
|
|
18
|
-
expect(queryByText("test-loading")).toBeFalsy();
|
|
19
|
-
expect(queryByText("75%")).toBeFalsy();
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
test("Overlay spinner shows value and label correctly", () => {
|
|
23
|
-
const { getByText } = render(<DxcSpinner mode="overlay" label="test-loading" value={75} showValue></DxcSpinner>);
|
|
24
|
-
expect(getByText("test-loading")).toBeTruthy();
|
|
25
|
-
expect(getByText("75%")).toBeTruthy();
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
test("Get spinner by role", () => {
|
|
29
|
-
const { getByRole } = render(<DxcSpinner label="test-loading" value={75} showValue></DxcSpinner>);
|
|
30
|
-
expect(getByRole("progressbar")).toBeTruthy();
|
|
31
|
-
});
|
|
32
|
-
});
|
package/test/Switch.test.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, fireEvent } from "@testing-library/react";
|
|
3
|
-
import DxcSwitch from "../src/switch/Switch";
|
|
4
|
-
|
|
5
|
-
describe("Switch component tests", () => {
|
|
6
|
-
test("Switch renders with correct text", () => {
|
|
7
|
-
const onChange = jest.fn((returnedValue) => {
|
|
8
|
-
expect(returnedValue).toBe(true);
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
const { getByText } = render(<DxcSwitch label={"SwitchComponent"} checked={false} onChange={onChange} />);
|
|
12
|
-
expect(getByText("SwitchComponent")).toBeTruthy();
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
test("Calls correct function on click", () => {
|
|
16
|
-
const onChange = jest.fn();
|
|
17
|
-
const { getByText } = render(<DxcSwitch label={"SwitchComponent"} checked={false} onChange={onChange} />);
|
|
18
|
-
|
|
19
|
-
fireEvent.click(getByText("SwitchComponent"));
|
|
20
|
-
expect(onChange).toHaveBeenCalled();
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
|
|
24
|
-
const onChange = jest.fn();
|
|
25
|
-
|
|
26
|
-
const { getByText } = render(<DxcSwitch label={"SwitchComponent"} checked={false} onChange={onChange} />);
|
|
27
|
-
|
|
28
|
-
fireEvent.click(getByText("SwitchComponent"));
|
|
29
|
-
fireEvent.click(getByText("SwitchComponent"));
|
|
30
|
-
expect(onChange.mock.calls[0][0]).toBe(true);
|
|
31
|
-
expect(onChange.mock.calls[1][0]).toBe(true);
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
test("Everytime the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
|
|
36
|
-
const onChange = jest.fn();
|
|
37
|
-
|
|
38
|
-
const { getByText } = render(<DxcSwitch label={"SwitchComponent"} onChange={onChange} />);
|
|
39
|
-
|
|
40
|
-
fireEvent.click(getByText("SwitchComponent"));
|
|
41
|
-
fireEvent.click(getByText("SwitchComponent"));
|
|
42
|
-
expect(onChange.mock.calls[0][0]).toBe(true);
|
|
43
|
-
expect(onChange.mock.calls[1][0]).toBe(false);
|
|
44
|
-
});
|
|
45
|
-
});
|
package/test/Table.test.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, fireEvent } from "@testing-library/react";
|
|
3
|
-
import DxcTable from "../src/table/Table";
|
|
4
|
-
|
|
5
|
-
describe("Table component tests", () => {
|
|
6
|
-
test("Table renders with correct content", () => {
|
|
7
|
-
const { getByText } = render(
|
|
8
|
-
<DxcTable>
|
|
9
|
-
<tr>
|
|
10
|
-
<th>header-1</th>
|
|
11
|
-
<th>header-2</th>
|
|
12
|
-
<th>header-3</th>
|
|
13
|
-
</tr>
|
|
14
|
-
<tr>
|
|
15
|
-
<td>cell-1</td>
|
|
16
|
-
<td>cell-2</td>
|
|
17
|
-
<td>cell-3</td>
|
|
18
|
-
</tr>
|
|
19
|
-
<tr>
|
|
20
|
-
<td>cell-4</td>
|
|
21
|
-
<td>cell-5</td>
|
|
22
|
-
<td>cell-6</td>
|
|
23
|
-
</tr>
|
|
24
|
-
</DxcTable>
|
|
25
|
-
);
|
|
26
|
-
expect(getByText("header-1")).toBeTruthy();
|
|
27
|
-
expect(getByText("header-2")).toBeTruthy();
|
|
28
|
-
expect(getByText("header-3")).toBeTruthy();
|
|
29
|
-
expect(getByText("cell-1")).toBeTruthy();
|
|
30
|
-
expect(getByText("cell-2")).toBeTruthy();
|
|
31
|
-
expect(getByText("cell-3")).toBeTruthy();
|
|
32
|
-
expect(getByText("cell-4")).toBeTruthy();
|
|
33
|
-
expect(getByText("cell-5")).toBeTruthy();
|
|
34
|
-
expect(getByText("cell-6")).toBeTruthy();
|
|
35
|
-
});
|
|
36
|
-
});
|