@dhis2-ui/button 9.12.0 → 9.13.0
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/button/__tests__/Button.test.js +10 -10
- package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js +3 -3
- package/build/cjs/split-button/split-button.test.js +6 -7
- package/build/es/button/__tests__/Button.test.js +10 -10
- package/build/es/dropdown-button/__tests__/dropdown-button.test.js +3 -3
- package/build/es/split-button/split-button.test.js +6 -7
- package/package.json +10 -10
@@ -15,22 +15,22 @@ describe('<Button>', () => {
|
|
15
15
|
});
|
16
16
|
describe('warning for missing aria-label and title', () => {
|
17
17
|
it('No warning if children exist but aria-label and title is missing', () => {
|
18
|
-
(0, _react.render)(
|
18
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
|
19
19
|
expect(consoleSpy).not.toHaveBeenCalled();
|
20
20
|
});
|
21
21
|
it('does not warn if aria-label and title is present', () => {
|
22
|
-
(0, _react.render)(
|
22
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
23
23
|
"aria-label": "Test",
|
24
24
|
title: "Test"
|
25
25
|
}, "Children content"));
|
26
26
|
expect(consoleSpy).not.toHaveBeenCalled();
|
27
27
|
});
|
28
28
|
it('warns if no children are present with no arial-label and title', () => {
|
29
|
-
(0, _react.render)(
|
29
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, null));
|
30
30
|
expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
|
31
31
|
});
|
32
32
|
it('No warning if there are no children but arial label and title', () => {
|
33
|
-
(0, _react.render)(
|
33
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
34
34
|
"aria-label": "Test",
|
35
35
|
title: "Test"
|
36
36
|
}));
|
@@ -39,7 +39,7 @@ describe('<Button>', () => {
|
|
39
39
|
});
|
40
40
|
it('renders a default data-test attribute', () => {
|
41
41
|
const dataTest = 'dhis2-uicore-button';
|
42
|
-
const wrapper = (0, _enzyme.mount)(
|
42
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
43
43
|
dataTest: dataTest
|
44
44
|
}));
|
45
45
|
const actual = wrapper.find({
|
@@ -49,7 +49,7 @@ describe('<Button>', () => {
|
|
49
49
|
});
|
50
50
|
it('renders a custom data-test attribute', () => {
|
51
51
|
const dataTest = 'button-data-test';
|
52
|
-
const wrapper = (0, _enzyme.mount)(
|
52
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
53
53
|
dataTest: dataTest
|
54
54
|
}));
|
55
55
|
const actual = wrapper.find({
|
@@ -59,7 +59,7 @@ describe('<Button>', () => {
|
|
59
59
|
});
|
60
60
|
it('has the accessibility attributes', () => {
|
61
61
|
const dataTest = 'button-data-test';
|
62
|
-
const wrapper = (0, _enzyme.mount)(
|
62
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
63
63
|
dataTest: dataTest,
|
64
64
|
ariaLabel: "test aria label",
|
65
65
|
title: "title for button"
|
@@ -70,21 +70,21 @@ describe('<Button>', () => {
|
|
70
70
|
});
|
71
71
|
describe('toggle', () => {
|
72
72
|
it('should have class "toggled" if toggled-prop is true', () => {
|
73
|
-
const wrapper = (0, _enzyme.mount)(
|
73
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
74
74
|
toggled: true
|
75
75
|
}));
|
76
76
|
const actual = wrapper.find('button');
|
77
77
|
expect(actual.hasClass('toggled')).toBe(true);
|
78
78
|
});
|
79
79
|
it('should not have class "toggled" if toggled-prop is not passed', () => {
|
80
|
-
const wrapper = (0, _enzyme.mount)(
|
80
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, null));
|
81
81
|
const actual = wrapper.find('button');
|
82
82
|
expect(actual.hasClass('toggled')).toBe(false);
|
83
83
|
});
|
84
84
|
});
|
85
85
|
it('should call the onKeyDown callback when provided', () => {
|
86
86
|
const onKeyDown = jest.fn();
|
87
|
-
(0, _react.render)(
|
87
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
88
88
|
name: "button-name",
|
89
89
|
value: "button-value",
|
90
90
|
onKeyDown: onKeyDown
|
@@ -44,7 +44,7 @@ describe('<DropdownButton>', () => {
|
|
44
44
|
const {
|
45
45
|
getByTestId,
|
46
46
|
queryByText
|
47
|
-
} = (0, _react.render)(
|
47
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
48
48
|
component: componentText
|
49
49
|
}));
|
50
50
|
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
@@ -68,7 +68,7 @@ describe('<DropdownButton>', () => {
|
|
68
68
|
const {
|
69
69
|
getByTestId,
|
70
70
|
queryByText
|
71
|
-
} = (0, _react.render)(
|
71
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
|
72
72
|
hide: false,
|
73
73
|
onClose: () => {}
|
74
74
|
}, modalContent));
|
@@ -88,7 +88,7 @@ describe('<DropdownButton>', () => {
|
|
88
88
|
});
|
89
89
|
describe('closed state', () => {
|
90
90
|
const onClick = jest.fn();
|
91
|
-
const wrapper = (0, _enzyme.mount)(
|
91
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
92
92
|
onClick: onClick,
|
93
93
|
open: false,
|
94
94
|
component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
|
@@ -2,7 +2,6 @@
|
|
2
2
|
|
3
3
|
var _react = require("@testing-library/react");
|
4
4
|
var _react2 = _interopRequireDefault(require("react"));
|
5
|
-
require("@testing-library/jest-dom/extend-expect");
|
6
5
|
var _splitButton = require("./split-button.js");
|
7
6
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
8
7
|
describe('SplitButton', () => {
|
@@ -10,14 +9,14 @@ describe('SplitButton', () => {
|
|
10
9
|
it('renders button with children', () => {
|
11
10
|
const {
|
12
11
|
getByText
|
13
|
-
} = (0, _react.render)(
|
12
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
|
14
13
|
expect(getByText('Click me')).toBeInTheDocument();
|
15
14
|
});
|
16
15
|
it('toggles dropdown when left button is clicked', () => {
|
17
16
|
const {
|
18
17
|
getByTestId,
|
19
18
|
queryByTestId
|
20
|
-
} = (0, _react.render)(
|
19
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
|
21
20
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
22
21
|
_react.fireEvent.click(toggleButton);
|
23
22
|
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
@@ -27,7 +26,7 @@ describe('SplitButton', () => {
|
|
27
26
|
it('renders dropdown content when open is true', () => {
|
28
27
|
const {
|
29
28
|
getByTestId
|
30
|
-
} = (0, _react.render)(
|
29
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
31
30
|
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
32
31
|
}));
|
33
32
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
@@ -37,7 +36,7 @@ describe('SplitButton', () => {
|
|
37
36
|
it("does not close dropdown 'Enter' key is pressed", async () => {
|
38
37
|
const {
|
39
38
|
getByTestId
|
40
|
-
} = (0, _react.render)(
|
39
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
41
40
|
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
42
41
|
}));
|
43
42
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
@@ -56,7 +55,7 @@ describe('SplitButton', () => {
|
|
56
55
|
const {
|
57
56
|
getByTestId,
|
58
57
|
queryByTestId
|
59
|
-
} = (0, _react.render)(
|
58
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
60
59
|
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
61
60
|
}));
|
62
61
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
@@ -74,7 +73,7 @@ describe('SplitButton', () => {
|
|
74
73
|
it('adds title and aria-label attributes to the right button', () => {
|
75
74
|
const {
|
76
75
|
getByTestId
|
77
|
-
} = (0, _react.render)(
|
76
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
|
78
77
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
79
78
|
expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
|
80
79
|
expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
|
@@ -12,22 +12,22 @@ describe('<Button>', () => {
|
|
12
12
|
});
|
13
13
|
describe('warning for missing aria-label and title', () => {
|
14
14
|
it('No warning if children exist but aria-label and title is missing', () => {
|
15
|
-
render(
|
15
|
+
render(/*#__PURE__*/React.createElement(Button, null, "Children content"));
|
16
16
|
expect(consoleSpy).not.toHaveBeenCalled();
|
17
17
|
});
|
18
18
|
it('does not warn if aria-label and title is present', () => {
|
19
|
-
render(
|
19
|
+
render(/*#__PURE__*/React.createElement(Button, {
|
20
20
|
"aria-label": "Test",
|
21
21
|
title: "Test"
|
22
22
|
}, "Children content"));
|
23
23
|
expect(consoleSpy).not.toHaveBeenCalled();
|
24
24
|
});
|
25
25
|
it('warns if no children are present with no arial-label and title', () => {
|
26
|
-
render(
|
26
|
+
render(/*#__PURE__*/React.createElement(Button, null));
|
27
27
|
expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
|
28
28
|
});
|
29
29
|
it('No warning if there are no children but arial label and title', () => {
|
30
|
-
render(
|
30
|
+
render(/*#__PURE__*/React.createElement(Button, {
|
31
31
|
"aria-label": "Test",
|
32
32
|
title: "Test"
|
33
33
|
}));
|
@@ -36,7 +36,7 @@ describe('<Button>', () => {
|
|
36
36
|
});
|
37
37
|
it('renders a default data-test attribute', () => {
|
38
38
|
const dataTest = 'dhis2-uicore-button';
|
39
|
-
const wrapper = mount(
|
39
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
40
40
|
dataTest: dataTest
|
41
41
|
}));
|
42
42
|
const actual = wrapper.find({
|
@@ -46,7 +46,7 @@ describe('<Button>', () => {
|
|
46
46
|
});
|
47
47
|
it('renders a custom data-test attribute', () => {
|
48
48
|
const dataTest = 'button-data-test';
|
49
|
-
const wrapper = mount(
|
49
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
50
50
|
dataTest: dataTest
|
51
51
|
}));
|
52
52
|
const actual = wrapper.find({
|
@@ -56,7 +56,7 @@ describe('<Button>', () => {
|
|
56
56
|
});
|
57
57
|
it('has the accessibility attributes', () => {
|
58
58
|
const dataTest = 'button-data-test';
|
59
|
-
const wrapper = mount(
|
59
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
60
60
|
dataTest: dataTest,
|
61
61
|
ariaLabel: "test aria label",
|
62
62
|
title: "title for button"
|
@@ -67,21 +67,21 @@ describe('<Button>', () => {
|
|
67
67
|
});
|
68
68
|
describe('toggle', () => {
|
69
69
|
it('should have class "toggled" if toggled-prop is true', () => {
|
70
|
-
const wrapper = mount(
|
70
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
71
71
|
toggled: true
|
72
72
|
}));
|
73
73
|
const actual = wrapper.find('button');
|
74
74
|
expect(actual.hasClass('toggled')).toBe(true);
|
75
75
|
});
|
76
76
|
it('should not have class "toggled" if toggled-prop is not passed', () => {
|
77
|
-
const wrapper = mount(
|
77
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, null));
|
78
78
|
const actual = wrapper.find('button');
|
79
79
|
expect(actual.hasClass('toggled')).toBe(false);
|
80
80
|
});
|
81
81
|
});
|
82
82
|
it('should call the onKeyDown callback when provided', () => {
|
83
83
|
const onKeyDown = jest.fn();
|
84
|
-
render(
|
84
|
+
render(/*#__PURE__*/React.createElement(Button, {
|
85
85
|
name: "button-name",
|
86
86
|
value: "button-value",
|
87
87
|
onKeyDown: onKeyDown
|
@@ -41,7 +41,7 @@ describe('<DropdownButton>', () => {
|
|
41
41
|
const {
|
42
42
|
getByTestId,
|
43
43
|
queryByText
|
44
|
-
} = render(
|
44
|
+
} = render(/*#__PURE__*/React.createElement(DropdownButton, {
|
45
45
|
component: componentText
|
46
46
|
}));
|
47
47
|
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
@@ -65,7 +65,7 @@ describe('<DropdownButton>', () => {
|
|
65
65
|
const {
|
66
66
|
getByTestId,
|
67
67
|
queryByText
|
68
|
-
} = render(
|
68
|
+
} = render(/*#__PURE__*/React.createElement(Modal, {
|
69
69
|
hide: false,
|
70
70
|
onClose: () => {}
|
71
71
|
}, modalContent));
|
@@ -85,7 +85,7 @@ describe('<DropdownButton>', () => {
|
|
85
85
|
});
|
86
86
|
describe('closed state', () => {
|
87
87
|
const onClick = jest.fn();
|
88
|
-
const wrapper = mount(
|
88
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(DropdownButton, {
|
89
89
|
onClick: onClick,
|
90
90
|
open: false,
|
91
91
|
component: /*#__PURE__*/React.createElement("span", null, "test")
|
@@ -1,20 +1,19 @@
|
|
1
1
|
import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
|
2
2
|
import React from 'react';
|
3
|
-
import '@testing-library/jest-dom/extend-expect';
|
4
3
|
import { SplitButton } from './split-button.js';
|
5
4
|
describe('SplitButton', () => {
|
6
5
|
afterEach(cleanup);
|
7
6
|
it('renders button with children', () => {
|
8
7
|
const {
|
9
8
|
getByText
|
10
|
-
} = render(
|
9
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
|
11
10
|
expect(getByText('Click me')).toBeInTheDocument();
|
12
11
|
});
|
13
12
|
it('toggles dropdown when left button is clicked', () => {
|
14
13
|
const {
|
15
14
|
getByTestId,
|
16
15
|
queryByTestId
|
17
|
-
} = render(
|
16
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, null));
|
18
17
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
19
18
|
fireEvent.click(toggleButton);
|
20
19
|
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
@@ -24,7 +23,7 @@ describe('SplitButton', () => {
|
|
24
23
|
it('renders dropdown content when open is true', () => {
|
25
24
|
const {
|
26
25
|
getByTestId
|
27
|
-
} = render(
|
26
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, {
|
28
27
|
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
29
28
|
}));
|
30
29
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
@@ -34,7 +33,7 @@ describe('SplitButton', () => {
|
|
34
33
|
it("does not close dropdown 'Enter' key is pressed", async () => {
|
35
34
|
const {
|
36
35
|
getByTestId
|
37
|
-
} = render(
|
36
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, {
|
38
37
|
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
39
38
|
}));
|
40
39
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
@@ -53,7 +52,7 @@ describe('SplitButton', () => {
|
|
53
52
|
const {
|
54
53
|
getByTestId,
|
55
54
|
queryByTestId
|
56
|
-
} = render(
|
55
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, {
|
57
56
|
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
58
57
|
}));
|
59
58
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
@@ -71,7 +70,7 @@ describe('SplitButton', () => {
|
|
71
70
|
it('adds title and aria-label attributes to the right button', () => {
|
72
71
|
const {
|
73
72
|
getByTestId
|
74
|
-
} = render(
|
73
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, null));
|
75
74
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
76
75
|
expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
|
77
76
|
expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@dhis2-ui/button",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.13.0",
|
4
4
|
"description": "UI Button",
|
5
5
|
"repository": {
|
6
6
|
"type": "git",
|
@@ -27,17 +27,17 @@
|
|
27
27
|
"test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
|
28
28
|
},
|
29
29
|
"peerDependencies": {
|
30
|
-
"react": "^16.13",
|
31
|
-
"react-dom": "^16.13",
|
30
|
+
"react": "^16.13 || ^18",
|
31
|
+
"react-dom": "^16.13 || ^18",
|
32
32
|
"styled-jsx": "^4"
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
36
|
-
"@dhis2-ui/layer": "9.
|
37
|
-
"@dhis2-ui/loader": "9.
|
38
|
-
"@dhis2-ui/popper": "9.
|
39
|
-
"@dhis2/ui-constants": "9.
|
40
|
-
"@dhis2/ui-icons": "9.
|
36
|
+
"@dhis2-ui/layer": "9.13.0",
|
37
|
+
"@dhis2-ui/loader": "9.13.0",
|
38
|
+
"@dhis2-ui/popper": "9.13.0",
|
39
|
+
"@dhis2/ui-constants": "9.13.0",
|
40
|
+
"@dhis2/ui-icons": "9.13.0",
|
41
41
|
"classnames": "^2.3.1",
|
42
42
|
"prop-types": "^15.7.2"
|
43
43
|
},
|
@@ -46,8 +46,8 @@
|
|
46
46
|
"types"
|
47
47
|
],
|
48
48
|
"devDependencies": {
|
49
|
-
"react": "
|
50
|
-
"react-dom": "
|
49
|
+
"react": "^18.3.1",
|
50
|
+
"react-dom": "^18.3.1",
|
51
51
|
"styled-jsx": "^4.0.1"
|
52
52
|
},
|
53
53
|
"types": "types"
|