@dhis2-ui/button 9.5.0-alpha.1 → 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.
- package/build/cjs/button/__tests__/Button.test.js +0 -31
- package/build/cjs/button/button.js +0 -8
- package/build/cjs/button/features/can_be_blurred/index.js +4 -4
- package/build/cjs/button/features/can_be_clicked/index.js +4 -4
- package/build/cjs/button/features/can_be_focused/index.js +4 -4
- package/build/cjs/button-strip/features/accepts_children/index.js +3 -3
- package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js +65 -5
- package/build/cjs/dropdown-button/dropdown-button.js +21 -1
- package/build/cjs/dropdown-button/features/accepts_children/index.js +3 -3
- package/build/cjs/dropdown-button/features/accepts_component/index.js +3 -3
- package/build/cjs/dropdown-button/features/accepts_icon/index.js +3 -3
- package/build/cjs/dropdown-button/features/accepts_initial_focus/index.js +3 -3
- package/build/cjs/dropdown-button/features/button_is_clickable/index.js +3 -5
- package/build/cjs/dropdown-button/features/can_be_disabled/index.js +3 -8
- package/build/cjs/dropdown-button/features/common/index.js +2 -2
- package/build/cjs/dropdown-button/features/opens_a_dropdown/index.js +6 -8
- package/build/cjs/split-button/features/accepts_children/index.js +3 -3
- package/build/cjs/split-button/features/accepts_icon/index.js +5 -5
- package/build/cjs/split-button/features/accepts_initial_focus/index.js +3 -3
- package/build/cjs/split-button/features/arrow_opens_menu/index.js +9 -11
- package/build/cjs/split-button/features/button_is_clickable/index.js +3 -5
- package/build/cjs/split-button/features/can_be_disabled/index.js +6 -6
- package/build/cjs/split-button/features/common/index.js +3 -3
- package/build/cjs/split-button/split-button.js +4 -30
- package/build/es/button/__tests__/Button.test.js +0 -31
- package/build/es/button/button.js +0 -8
- package/build/es/button/features/can_be_blurred/index.js +1 -1
- package/build/es/button/features/can_be_clicked/index.js +1 -1
- package/build/es/button/features/can_be_focused/index.js +1 -1
- package/build/es/button-strip/features/accepts_children/index.js +1 -1
- package/build/es/dropdown-button/__tests__/dropdown-button.test.js +48 -0
- package/build/es/dropdown-button/dropdown-button.js +21 -1
- package/build/es/dropdown-button/features/accepts_children/index.js +1 -1
- package/build/es/dropdown-button/features/accepts_component/index.js +1 -1
- package/build/es/dropdown-button/features/accepts_icon/index.js +1 -1
- package/build/es/dropdown-button/features/accepts_initial_focus/index.js +1 -1
- package/build/es/dropdown-button/features/button_is_clickable/index.js +1 -2
- package/build/es/dropdown-button/features/can_be_disabled/index.js +1 -6
- package/build/es/dropdown-button/features/common/index.js +1 -1
- package/build/es/dropdown-button/features/opens_a_dropdown/index.js +1 -2
- package/build/es/split-button/features/accepts_children/index.js +1 -1
- package/build/es/split-button/features/accepts_icon/index.js +3 -3
- package/build/es/split-button/features/accepts_initial_focus/index.js +1 -1
- package/build/es/split-button/features/arrow_opens_menu/index.js +1 -2
- package/build/es/split-button/features/button_is_clickable/index.js +1 -2
- package/build/es/split-button/features/can_be_disabled/index.js +1 -1
- package/build/es/split-button/features/common/index.js +1 -1
- package/build/es/split-button/split-button.js +4 -29
- package/package.json +6 -6
- package/types/index.d.ts +4 -1
- package/build/cjs/locales/en/translations.json +0 -3
- package/build/cjs/locales/index.js +0 -27
- package/build/cjs/split-button/split-button.test.js +0 -99
- package/build/es/locales/en/translations.json +0 -3
- package/build/es/locales/index.js +0 -13
- package/build/es/split-button/split-button.test.js +0 -77
@@ -3,37 +3,6 @@ import { mount } from 'enzyme';
|
|
3
3
|
import React from 'react';
|
4
4
|
import { Button } from '../button.js';
|
5
5
|
describe('<Button>', () => {
|
6
|
-
let consoleSpy;
|
7
|
-
beforeEach(() => {
|
8
|
-
consoleSpy = jest.spyOn(console, 'debug').mockImplementation();
|
9
|
-
});
|
10
|
-
afterEach(() => {
|
11
|
-
consoleSpy.mockRestore();
|
12
|
-
});
|
13
|
-
describe('warning for missing aria-label and title', () => {
|
14
|
-
it('No warning if children exist but aria-label and title is missing', () => {
|
15
|
-
render( /*#__PURE__*/React.createElement(Button, null, "Children content"));
|
16
|
-
expect(consoleSpy).not.toHaveBeenCalled();
|
17
|
-
});
|
18
|
-
it('does not warn if aria-label and title is present', () => {
|
19
|
-
render( /*#__PURE__*/React.createElement(Button, {
|
20
|
-
"aria-label": "Test",
|
21
|
-
title: "Test"
|
22
|
-
}, "Children content"));
|
23
|
-
expect(consoleSpy).not.toHaveBeenCalled();
|
24
|
-
});
|
25
|
-
it('warns if no children are present with no arial-label and title', () => {
|
26
|
-
render( /*#__PURE__*/React.createElement(Button, null));
|
27
|
-
expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
|
28
|
-
});
|
29
|
-
it('No warning if there are no children but arial label and title', () => {
|
30
|
-
render( /*#__PURE__*/React.createElement(Button, {
|
31
|
-
"aria-label": "Test",
|
32
|
-
title: "Test"
|
33
|
-
}));
|
34
|
-
expect(consoleSpy).not.toHaveBeenCalled();
|
35
|
-
});
|
36
|
-
});
|
37
6
|
it('renders a default data-test attribute', () => {
|
38
7
|
const dataTest = 'dhis2-uicore-button';
|
39
8
|
const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
|
@@ -39,14 +39,6 @@ export const Button = _ref => {
|
|
39
39
|
ref.current.focus();
|
40
40
|
}
|
41
41
|
}, [initialFocus, ref.current]);
|
42
|
-
const {
|
43
|
-
'aria-label': ariaLabel,
|
44
|
-
title
|
45
|
-
} = otherProps;
|
46
|
-
|
47
|
-
if (!children && !title && !ariaLabel) {
|
48
|
-
console.debug('Button component has no children but is missing title and ariaLabel attribute.');
|
49
|
-
}
|
50
42
|
|
51
43
|
const handleClick = event => onClick && onClick({
|
52
44
|
value,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Given, When, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('an Button with initialFocus and onBlur handler is rendered', () => {
|
3
3
|
cy.visitStory('Button', 'With initialFocus and onBlur');
|
4
4
|
cy.focused().should('exist');
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a ButtonStrip with children is rendered', () => {
|
3
3
|
cy.visitStory('ButtonStrip', 'With children');
|
4
4
|
cy.get('[data-test="dhis2-uicore-buttonstrip"]').should('be.visible');
|
@@ -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, {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a DropdownButton with children is rendered', () => {
|
3
3
|
cy.visitStory('DropdownButton', 'With children');
|
4
4
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a DropdownButton with a component prop and opened dropdown is rendered', () => {
|
3
3
|
cy.visitStory('DropdownButton', 'With component');
|
4
4
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a DropdownButton with an icon prop is rendered', () => {
|
3
3
|
cy.visitStory('DropdownButton', 'With icon');
|
4
4
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import '
|
2
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
3
2
|
Given('a DropdownButton with onClick handler is rendered', () => {
|
4
3
|
cy.visitStory('DropdownButton', 'With onClick');
|
5
4
|
});
|
@@ -1,12 +1,7 @@
|
|
1
|
-
import { Given,
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a disabled DropdownButton with onClick handler is rendered', () => {
|
3
3
|
cy.visitStory('DropdownButton', 'Disabled with onClick');
|
4
4
|
});
|
5
|
-
When('the DropdownButton is clicked', () => {
|
6
|
-
cy.get('[data-test="dhis2-uicore-dropdownbutton"] button').click({
|
7
|
-
force: true
|
8
|
-
});
|
9
|
-
});
|
10
5
|
Then('the onClick handler is not called', () => {
|
11
6
|
cy.window().should(win => {
|
12
7
|
expect(win.onClick).not.to.be.called;
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import '
|
2
|
-
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
|
1
|
+
import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
|
3
2
|
Given('a default DropdownButton is rendered', () => {
|
4
3
|
cy.visitStory('DropdownButton', 'Default');
|
5
4
|
});
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a SplitButton with children is rendered', () => {
|
3
3
|
cy.visitStory('SplitButton', 'With children');
|
4
4
|
cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
|
@@ -1,9 +1,9 @@
|
|
1
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
2
2
|
Given('a SplitButton with an icon is rendered', () => {
|
3
3
|
cy.visitStory('SplitButton', 'With icon');
|
4
4
|
cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
|
5
5
|
});
|
6
6
|
Then('the icon is visible on the left button only', () => {
|
7
|
-
cy.get('[data-test="dhis2-uicore-splitbutton-button"]
|
8
|
-
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]
|
7
|
+
cy.get('[data-test="dhis2-uicore-splitbutton-button"] :contains("Icon")').should('be.visible');
|
8
|
+
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"] :contains("Icon")').should('not.exist');
|
9
9
|
});
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import '
|
2
|
-
import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
|
1
|
+
import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
|
3
2
|
Given('a SplitButton is rendered', () => {
|
4
3
|
cy.visitStory('SplitButton', 'Default');
|
5
4
|
});
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import '
|
2
|
-
import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
|
1
|
+
import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
|
3
2
|
Given('a SplitButton with onClick hander is rendered', () => {
|
4
3
|
cy.visitStory('SplitButton', 'With onClick');
|
5
4
|
});
|
@@ -10,7 +10,6 @@ import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
11
11
|
import React, { Component } from 'react';
|
12
12
|
import { Button } from '../index.js';
|
13
|
-
import i18n from '../locales/index.js';
|
14
13
|
const rightButton = {
|
15
14
|
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
|
16
15
|
id: "2502148942"
|
@@ -28,18 +27,6 @@ class SplitButton extends Component {
|
|
28
27
|
|
29
28
|
_defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
|
30
29
|
|
31
|
-
_defineProperty(this, "handleKeyDown", event => {
|
32
|
-
event.preventDefault();
|
33
|
-
|
34
|
-
if (event.key === 'Escape' && this.state.open) {
|
35
|
-
event.stopPropagation();
|
36
|
-
this.setState({
|
37
|
-
open: false
|
38
|
-
});
|
39
|
-
this.anchorRef.current && this.anchorRef.current.focus();
|
40
|
-
}
|
41
|
-
});
|
42
|
-
|
43
30
|
_defineProperty(this, "onClick", (payload, event) => {
|
44
31
|
if (this.props.onClick) {
|
45
32
|
this.props.onClick({
|
@@ -50,19 +37,9 @@ class SplitButton extends Component {
|
|
50
37
|
}
|
51
38
|
});
|
52
39
|
|
53
|
-
_defineProperty(this, "onToggle", () => {
|
54
|
-
this.
|
55
|
-
|
56
|
-
}));
|
57
|
-
});
|
58
|
-
}
|
59
|
-
|
60
|
-
componentDidMount() {
|
61
|
-
document.addEventListener('keydown', this.handleKeyDown);
|
62
|
-
}
|
63
|
-
|
64
|
-
componentWillUnmount() {
|
65
|
-
document.removeEventListener('keydown', this.handleKeyDown);
|
40
|
+
_defineProperty(this, "onToggle", () => this.setState({
|
41
|
+
open: !this.state.open
|
42
|
+
}));
|
66
43
|
}
|
67
44
|
|
68
45
|
render() {
|
@@ -121,9 +98,7 @@ class SplitButton extends Component {
|
|
121
98
|
type: type,
|
122
99
|
tabIndex: tabIndex,
|
123
100
|
className: cx(className, rightButton.className),
|
124
|
-
dataTest: "".concat(dataTest, "-toggle")
|
125
|
-
title: i18n.t('Toggle dropdown'),
|
126
|
-
"aria-label": i18n.t('Toggle dropdown')
|
101
|
+
dataTest: "".concat(dataTest, "-toggle")
|
127
102
|
}, arrow), open && /*#__PURE__*/React.createElement(Layer, {
|
128
103
|
onBackdropClick: this.onToggle,
|
129
104
|
transparent: true
|
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
|
},
|
package/types/index.d.ts
CHANGED
@@ -16,7 +16,7 @@ type ButtonOpenEventHandler<
|
|
16
16
|
Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
|
17
17
|
> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
|
18
18
|
|
19
|
-
export interface
|
19
|
+
export interface BaseButtonProps {
|
20
20
|
/**
|
21
21
|
* Component to render inside the button
|
22
22
|
*/
|
@@ -102,6 +102,9 @@ export interface ButtonProps extends HTMLButtonElement {
|
|
102
102
|
onKeyDown?: ButtonEventHandler<React.KeyboardEvent<HTMLButtonElement>>
|
103
103
|
}
|
104
104
|
|
105
|
+
export type ButtonProps = BaseButtonProps &
|
106
|
+
Omit<React.ComponentPropsWithoutRef<'button'>, keyof BaseButtonProps>
|
107
|
+
|
105
108
|
export const Button: React.FC<ButtonProps>
|
106
109
|
|
107
110
|
export interface ButtonStripProps {
|
@@ -1,27 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.default = void 0;
|
7
|
-
|
8
|
-
var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
|
9
|
-
|
10
|
-
var _translations = _interopRequireDefault(require("./en/translations.json"));
|
11
|
-
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
13
|
-
|
14
|
-
//------------------------------------------------------------------------------
|
15
|
-
// <auto-generated>
|
16
|
-
// This code was generated by d2-i18n-generate.
|
17
|
-
//
|
18
|
-
// Changes to this file may cause incorrect behavior and will be lost if
|
19
|
-
// the code is regenerated.
|
20
|
-
// </auto-generated>
|
21
|
-
//------------------------------------------------------------------------------
|
22
|
-
const namespace = 'default';
|
23
|
-
|
24
|
-
_d2I18n.default.addResources('en', namespace, _translations.default);
|
25
|
-
|
26
|
-
var _default = _d2I18n.default;
|
27
|
-
exports.default = _default;
|
@@ -1,99 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
var _react = require("@testing-library/react");
|
4
|
-
|
5
|
-
var _react2 = _interopRequireDefault(require("react"));
|
6
|
-
|
7
|
-
require("@testing-library/jest-dom/extend-expect");
|
8
|
-
|
9
|
-
var _splitButton = require("./split-button.js");
|
10
|
-
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
12
|
-
|
13
|
-
describe('SplitButton', () => {
|
14
|
-
afterEach(_react.cleanup);
|
15
|
-
it('renders button with children', () => {
|
16
|
-
const {
|
17
|
-
getByText
|
18
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
|
19
|
-
expect(getByText('Click me')).toBeInTheDocument();
|
20
|
-
});
|
21
|
-
it('toggles dropdown when left button is clicked', () => {
|
22
|
-
const {
|
23
|
-
getByTestId,
|
24
|
-
queryByTestId
|
25
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
|
26
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
27
|
-
|
28
|
-
_react.fireEvent.click(toggleButton);
|
29
|
-
|
30
|
-
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
31
|
-
|
32
|
-
_react.fireEvent.click(toggleButton);
|
33
|
-
|
34
|
-
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
|
35
|
-
});
|
36
|
-
it('renders dropdown content when open is true', () => {
|
37
|
-
const {
|
38
|
-
getByTestId
|
39
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
40
|
-
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
41
|
-
}));
|
42
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
43
|
-
|
44
|
-
_react.fireEvent.click(toggleButton);
|
45
|
-
|
46
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
47
|
-
});
|
48
|
-
it("does not close dropdown 'Enter' key is pressed", async () => {
|
49
|
-
const {
|
50
|
-
getByTestId
|
51
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
52
|
-
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
53
|
-
}));
|
54
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
55
|
-
|
56
|
-
_react.fireEvent.click(toggleButton);
|
57
|
-
|
58
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
59
|
-
|
60
|
-
_react.fireEvent.keyDown(document, {
|
61
|
-
key: 'Enter'
|
62
|
-
}); // Use waitFor to wait for the DOM to update
|
63
|
-
|
64
|
-
|
65
|
-
await (0, _react.waitFor)(() => {
|
66
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
67
|
-
});
|
68
|
-
});
|
69
|
-
it('closes dropdown when escape key is pressed', async () => {
|
70
|
-
const {
|
71
|
-
getByTestId,
|
72
|
-
queryByTestId
|
73
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
74
|
-
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
75
|
-
}));
|
76
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
77
|
-
|
78
|
-
_react.fireEvent.click(toggleButton);
|
79
|
-
|
80
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
81
|
-
|
82
|
-
_react.fireEvent.keyDown(document, {
|
83
|
-
key: 'Escape'
|
84
|
-
}); // Use waitFor to wait for the DOM to update
|
85
|
-
|
86
|
-
|
87
|
-
await (0, _react.waitFor)(() => {
|
88
|
-
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
|
89
|
-
});
|
90
|
-
});
|
91
|
-
it('adds title and aria-label attributes to the right button', () => {
|
92
|
-
const {
|
93
|
-
getByTestId
|
94
|
-
} = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
|
95
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
96
|
-
expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
|
97
|
-
expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
|
98
|
-
});
|
99
|
-
});
|
@@ -1,13 +0,0 @@
|
|
1
|
-
//------------------------------------------------------------------------------
|
2
|
-
// <auto-generated>
|
3
|
-
// This code was generated by d2-i18n-generate.
|
4
|
-
//
|
5
|
-
// Changes to this file may cause incorrect behavior and will be lost if
|
6
|
-
// the code is regenerated.
|
7
|
-
// </auto-generated>
|
8
|
-
//------------------------------------------------------------------------------
|
9
|
-
import i18n from '@dhis2/d2-i18n';
|
10
|
-
import enTranslations from './en/translations.json';
|
11
|
-
const namespace = 'default';
|
12
|
-
i18n.addResources('en', namespace, enTranslations);
|
13
|
-
export default i18n;
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
|
2
|
-
import React from 'react';
|
3
|
-
import '@testing-library/jest-dom/extend-expect';
|
4
|
-
import { SplitButton } from './split-button.js';
|
5
|
-
describe('SplitButton', () => {
|
6
|
-
afterEach(cleanup);
|
7
|
-
it('renders button with children', () => {
|
8
|
-
const {
|
9
|
-
getByText
|
10
|
-
} = render( /*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
|
11
|
-
expect(getByText('Click me')).toBeInTheDocument();
|
12
|
-
});
|
13
|
-
it('toggles dropdown when left button is clicked', () => {
|
14
|
-
const {
|
15
|
-
getByTestId,
|
16
|
-
queryByTestId
|
17
|
-
} = render( /*#__PURE__*/React.createElement(SplitButton, null));
|
18
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
19
|
-
fireEvent.click(toggleButton);
|
20
|
-
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
21
|
-
fireEvent.click(toggleButton);
|
22
|
-
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
|
23
|
-
});
|
24
|
-
it('renders dropdown content when open is true', () => {
|
25
|
-
const {
|
26
|
-
getByTestId
|
27
|
-
} = render( /*#__PURE__*/React.createElement(SplitButton, {
|
28
|
-
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
29
|
-
}));
|
30
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
31
|
-
fireEvent.click(toggleButton);
|
32
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
33
|
-
});
|
34
|
-
it("does not close dropdown 'Enter' key is pressed", async () => {
|
35
|
-
const {
|
36
|
-
getByTestId
|
37
|
-
} = render( /*#__PURE__*/React.createElement(SplitButton, {
|
38
|
-
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
39
|
-
}));
|
40
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
41
|
-
fireEvent.click(toggleButton);
|
42
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
43
|
-
fireEvent.keyDown(document, {
|
44
|
-
key: 'Enter'
|
45
|
-
}); // Use waitFor to wait for the DOM to update
|
46
|
-
|
47
|
-
await waitFor(() => {
|
48
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
49
|
-
});
|
50
|
-
});
|
51
|
-
it('closes dropdown when escape key is pressed', async () => {
|
52
|
-
const {
|
53
|
-
getByTestId,
|
54
|
-
queryByTestId
|
55
|
-
} = render( /*#__PURE__*/React.createElement(SplitButton, {
|
56
|
-
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
57
|
-
}));
|
58
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
59
|
-
fireEvent.click(toggleButton);
|
60
|
-
expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
61
|
-
fireEvent.keyDown(document, {
|
62
|
-
key: 'Escape'
|
63
|
-
}); // Use waitFor to wait for the DOM to update
|
64
|
-
|
65
|
-
await waitFor(() => {
|
66
|
-
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
|
67
|
-
});
|
68
|
-
});
|
69
|
-
it('adds title and aria-label attributes to the right button', () => {
|
70
|
-
const {
|
71
|
-
getByTestId
|
72
|
-
} = render( /*#__PURE__*/React.createElement(SplitButton, null));
|
73
|
-
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
74
|
-
expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
|
75
|
-
expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
|
76
|
-
});
|
77
|
-
});
|