@dhis2-ui/button 9.5.0 → 9.6.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.
|
@@ -4,12 +4,16 @@ var _layer = require("@dhis2-ui/layer");
|
|
|
4
4
|
|
|
5
5
|
var _popper = require("@dhis2-ui/popper");
|
|
6
6
|
|
|
7
|
+
var _react = require("@testing-library/react");
|
|
8
|
+
|
|
7
9
|
var _enzyme = require("enzyme");
|
|
8
10
|
|
|
9
|
-
var
|
|
11
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
10
12
|
|
|
11
13
|
var _testUtils = require("react-dom/test-utils");
|
|
12
14
|
|
|
15
|
+
var _modal = require("../../../../modal/src/modal/modal.js");
|
|
16
|
+
|
|
13
17
|
var _index = require("../../index.js");
|
|
14
18
|
|
|
15
19
|
var _dropdownButton = require("../dropdown-button.js");
|
|
@@ -21,10 +25,10 @@ describe('<DropdownButton>', () => {
|
|
|
21
25
|
describe('open state', () => {
|
|
22
26
|
const onClick = jest.fn();
|
|
23
27
|
|
|
24
|
-
const Component = /*#__PURE__*/
|
|
28
|
+
const Component = /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
|
25
29
|
onClick: onClick,
|
|
26
30
|
open: true,
|
|
27
|
-
component: /*#__PURE__*/
|
|
31
|
+
component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
|
|
28
32
|
});
|
|
29
33
|
|
|
30
34
|
it('shows the Popper when open is true', async () => {
|
|
@@ -47,13 +51,69 @@ describe('<DropdownButton>', () => {
|
|
|
47
51
|
open: false
|
|
48
52
|
}));
|
|
49
53
|
});
|
|
54
|
+
it('closes dropdown when escape key is pressed', async () => {
|
|
55
|
+
const componentText = 'Dropdown Content';
|
|
56
|
+
const {
|
|
57
|
+
getByTestId,
|
|
58
|
+
queryByText
|
|
59
|
+
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
|
60
|
+
component: componentText
|
|
61
|
+
}));
|
|
62
|
+
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
|
63
|
+
|
|
64
|
+
_react.fireEvent.click(toggleButton);
|
|
65
|
+
|
|
66
|
+
await (0, _react.waitFor)(() => {
|
|
67
|
+
expect(queryByText(componentText)).toBeInTheDocument();
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
_react.fireEvent.keyDown(document, {
|
|
71
|
+
key: 'Escape'
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
await (0, _react.waitFor)(() => {
|
|
75
|
+
expect(queryByText(componentText)).not.toBeInTheDocument();
|
|
76
|
+
});
|
|
77
|
+
});
|
|
78
|
+
test('modal remains open when dropdown button is closed on escape click', async () => {
|
|
79
|
+
const dropdownButtonText = 'Dropdown Content';
|
|
80
|
+
const headingText = 'Heading Text';
|
|
81
|
+
|
|
82
|
+
const modalContent = /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("h1", null, headingText), /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
|
83
|
+
component: dropdownButtonText
|
|
84
|
+
}));
|
|
85
|
+
|
|
86
|
+
const {
|
|
87
|
+
getByTestId,
|
|
88
|
+
queryByText
|
|
89
|
+
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
|
|
90
|
+
hide: false,
|
|
91
|
+
onClose: () => {}
|
|
92
|
+
}, modalContent));
|
|
93
|
+
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
|
94
|
+
|
|
95
|
+
_react.fireEvent.click(toggleButton);
|
|
96
|
+
|
|
97
|
+
await (0, _react.waitFor)(() => {
|
|
98
|
+
expect(queryByText(dropdownButtonText)).toBeInTheDocument();
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
_react.fireEvent.keyDown(document, {
|
|
102
|
+
key: 'Escape'
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
await (0, _react.waitFor)(() => {
|
|
106
|
+
expect(queryByText(dropdownButtonText)).not.toBeInTheDocument();
|
|
107
|
+
expect(queryByText(headingText)).toBeInTheDocument();
|
|
108
|
+
});
|
|
109
|
+
});
|
|
50
110
|
});
|
|
51
111
|
describe('closed state', () => {
|
|
52
112
|
const onClick = jest.fn();
|
|
53
|
-
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/
|
|
113
|
+
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
|
54
114
|
onClick: onClick,
|
|
55
115
|
open: false,
|
|
56
|
-
component: /*#__PURE__*/
|
|
116
|
+
component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
|
|
57
117
|
}));
|
|
58
118
|
it('it does not show the Popper when open is false', () => {
|
|
59
119
|
const popper = wrapper.find(_popper.Popper);
|
|
@@ -86,6 +86,17 @@ class DropdownButton extends _react.Component {
|
|
|
86
86
|
|
|
87
87
|
_defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
|
|
88
88
|
|
|
89
|
+
_defineProperty(this, "handleKeyDown", event => {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
|
|
92
|
+
if (event.key === 'Escape' && this.state.open) {
|
|
93
|
+
event.stopPropagation();
|
|
94
|
+
this.setState({
|
|
95
|
+
open: false
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
|
|
89
100
|
_defineProperty(this, "onClickHandler", (_ref3, event) => {
|
|
90
101
|
let {
|
|
91
102
|
name,
|
|
@@ -114,6 +125,14 @@ class DropdownButton extends _react.Component {
|
|
|
114
125
|
});
|
|
115
126
|
}
|
|
116
127
|
|
|
128
|
+
componentDidMount() {
|
|
129
|
+
document.addEventListener('keydown', this.handleKeyDown);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
componentWillUnmount() {
|
|
133
|
+
document.removeEventListener('keydown', this.handleKeyDown);
|
|
134
|
+
}
|
|
135
|
+
|
|
117
136
|
render() {
|
|
118
137
|
const {
|
|
119
138
|
component,
|
|
@@ -153,7 +172,8 @@ class DropdownButton extends _react.Component {
|
|
|
153
172
|
value: value,
|
|
154
173
|
tabIndex: tabIndex,
|
|
155
174
|
type: type,
|
|
156
|
-
initialFocus: initialFocus
|
|
175
|
+
initialFocus: initialFocus,
|
|
176
|
+
"data-test": "dhis2-uicore-dropdownbutton-toggle"
|
|
157
177
|
}, children, /*#__PURE__*/_react.default.createElement(ArrowIconComponent, {
|
|
158
178
|
className: "jsx-3163060161" + " " + (arrow.className || "")
|
|
159
179
|
})), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Layer } from '@dhis2-ui/layer';
|
|
2
2
|
import { Popper } from '@dhis2-ui/popper';
|
|
3
|
+
import { render, fireEvent, waitFor } from '@testing-library/react';
|
|
3
4
|
import { mount } from 'enzyme';
|
|
4
5
|
import React from 'react';
|
|
5
6
|
import { act } from 'react-dom/test-utils';
|
|
7
|
+
import { Modal } from '../../../../modal/src/modal/modal.js';
|
|
6
8
|
import { Button } from '../../index.js';
|
|
7
9
|
import { DropdownButton } from '../dropdown-button.js';
|
|
8
10
|
describe('<DropdownButton>', () => {
|
|
@@ -34,6 +36,52 @@ describe('<DropdownButton>', () => {
|
|
|
34
36
|
open: false
|
|
35
37
|
}));
|
|
36
38
|
});
|
|
39
|
+
it('closes dropdown when escape key is pressed', async () => {
|
|
40
|
+
const componentText = 'Dropdown Content';
|
|
41
|
+
const {
|
|
42
|
+
getByTestId,
|
|
43
|
+
queryByText
|
|
44
|
+
} = render( /*#__PURE__*/React.createElement(DropdownButton, {
|
|
45
|
+
component: componentText
|
|
46
|
+
}));
|
|
47
|
+
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
|
48
|
+
fireEvent.click(toggleButton);
|
|
49
|
+
await waitFor(() => {
|
|
50
|
+
expect(queryByText(componentText)).toBeInTheDocument();
|
|
51
|
+
});
|
|
52
|
+
fireEvent.keyDown(document, {
|
|
53
|
+
key: 'Escape'
|
|
54
|
+
});
|
|
55
|
+
await waitFor(() => {
|
|
56
|
+
expect(queryByText(componentText)).not.toBeInTheDocument();
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
test('modal remains open when dropdown button is closed on escape click', async () => {
|
|
60
|
+
const dropdownButtonText = 'Dropdown Content';
|
|
61
|
+
const headingText = 'Heading Text';
|
|
62
|
+
const modalContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, headingText), /*#__PURE__*/React.createElement(DropdownButton, {
|
|
63
|
+
component: dropdownButtonText
|
|
64
|
+
}));
|
|
65
|
+
const {
|
|
66
|
+
getByTestId,
|
|
67
|
+
queryByText
|
|
68
|
+
} = render( /*#__PURE__*/React.createElement(Modal, {
|
|
69
|
+
hide: false,
|
|
70
|
+
onClose: () => {}
|
|
71
|
+
}, modalContent));
|
|
72
|
+
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
|
73
|
+
fireEvent.click(toggleButton);
|
|
74
|
+
await waitFor(() => {
|
|
75
|
+
expect(queryByText(dropdownButtonText)).toBeInTheDocument();
|
|
76
|
+
});
|
|
77
|
+
fireEvent.keyDown(document, {
|
|
78
|
+
key: 'Escape'
|
|
79
|
+
});
|
|
80
|
+
await waitFor(() => {
|
|
81
|
+
expect(queryByText(dropdownButtonText)).not.toBeInTheDocument();
|
|
82
|
+
expect(queryByText(headingText)).toBeInTheDocument();
|
|
83
|
+
});
|
|
84
|
+
});
|
|
37
85
|
});
|
|
38
86
|
describe('closed state', () => {
|
|
39
87
|
const onClick = jest.fn();
|
|
@@ -67,6 +67,17 @@ class DropdownButton extends Component {
|
|
|
67
67
|
|
|
68
68
|
_defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
|
|
69
69
|
|
|
70
|
+
_defineProperty(this, "handleKeyDown", event => {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
|
|
73
|
+
if (event.key === 'Escape' && this.state.open) {
|
|
74
|
+
event.stopPropagation();
|
|
75
|
+
this.setState({
|
|
76
|
+
open: false
|
|
77
|
+
});
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
70
81
|
_defineProperty(this, "onClickHandler", (_ref3, event) => {
|
|
71
82
|
let {
|
|
72
83
|
name,
|
|
@@ -95,6 +106,14 @@ class DropdownButton extends Component {
|
|
|
95
106
|
});
|
|
96
107
|
}
|
|
97
108
|
|
|
109
|
+
componentDidMount() {
|
|
110
|
+
document.addEventListener('keydown', this.handleKeyDown);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
componentWillUnmount() {
|
|
114
|
+
document.removeEventListener('keydown', this.handleKeyDown);
|
|
115
|
+
}
|
|
116
|
+
|
|
98
117
|
render() {
|
|
99
118
|
const {
|
|
100
119
|
component,
|
|
@@ -134,7 +153,8 @@ class DropdownButton extends Component {
|
|
|
134
153
|
value: value,
|
|
135
154
|
tabIndex: tabIndex,
|
|
136
155
|
type: type,
|
|
137
|
-
initialFocus: initialFocus
|
|
156
|
+
initialFocus: initialFocus,
|
|
157
|
+
"data-test": "dhis2-uicore-dropdownbutton-toggle"
|
|
138
158
|
}, children, /*#__PURE__*/React.createElement(ArrowIconComponent, {
|
|
139
159
|
className: "jsx-3163060161" + " " + (arrow.className || "")
|
|
140
160
|
})), open && /*#__PURE__*/React.createElement(Layer, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,11 +33,11 @@
|
|
|
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.6.0",
|
|
37
|
+
"@dhis2-ui/loader": "9.6.0",
|
|
38
|
+
"@dhis2-ui/popper": "9.6.0",
|
|
39
|
+
"@dhis2/ui-constants": "9.6.0",
|
|
40
|
+
"@dhis2/ui-icons": "9.6.0",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"prop-types": "^15.7.2"
|
|
43
43
|
},
|