@dhis2-ui/button 9.12.0 → 9.14.0
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/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.14.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.14.0",
|
37
|
+
"@dhis2-ui/loader": "9.14.0",
|
38
|
+
"@dhis2-ui/popper": "9.14.0",
|
39
|
+
"@dhis2/ui-constants": "9.14.0",
|
40
|
+
"@dhis2/ui-icons": "9.14.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"
|