@dhis2-ui/button 9.5.0-alpha.1 → 9.5.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/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/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
@@ -11,37 +11,6 @@ var _button = require("../button.js");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
12
12
|
|
13
13
|
describe('<Button>', () => {
|
14
|
-
let consoleSpy;
|
15
|
-
beforeEach(() => {
|
16
|
-
consoleSpy = jest.spyOn(console, 'debug').mockImplementation();
|
17
|
-
});
|
18
|
-
afterEach(() => {
|
19
|
-
consoleSpy.mockRestore();
|
20
|
-
});
|
21
|
-
describe('warning for missing aria-label and title', () => {
|
22
|
-
it('No warning if children exist but aria-label and title is missing', () => {
|
23
|
-
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
|
24
|
-
expect(consoleSpy).not.toHaveBeenCalled();
|
25
|
-
});
|
26
|
-
it('does not warn if aria-label and title is present', () => {
|
27
|
-
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
|
28
|
-
"aria-label": "Test",
|
29
|
-
title: "Test"
|
30
|
-
}, "Children content"));
|
31
|
-
expect(consoleSpy).not.toHaveBeenCalled();
|
32
|
-
});
|
33
|
-
it('warns if no children are present with no arial-label and title', () => {
|
34
|
-
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null));
|
35
|
-
expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
|
36
|
-
});
|
37
|
-
it('No warning if there are no children but arial label and title', () => {
|
38
|
-
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
|
39
|
-
"aria-label": "Test",
|
40
|
-
title: "Test"
|
41
|
-
}));
|
42
|
-
expect(consoleSpy).not.toHaveBeenCalled();
|
43
|
-
});
|
44
|
-
});
|
45
14
|
it('renders a default data-test attribute', () => {
|
46
15
|
const dataTest = 'dhis2-uicore-button';
|
47
16
|
const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
|
@@ -58,14 +58,6 @@ const Button = _ref => {
|
|
58
58
|
ref.current.focus();
|
59
59
|
}
|
60
60
|
}, [initialFocus, ref.current]);
|
61
|
-
const {
|
62
|
-
'aria-label': ariaLabel,
|
63
|
-
title
|
64
|
-
} = otherProps;
|
65
|
-
|
66
|
-
if (!children && !title && !ariaLabel) {
|
67
|
-
console.debug('Button component has no children but is missing title and ariaLabel attribute.');
|
68
|
-
}
|
69
61
|
|
70
62
|
const handleClick = event => onClick && onClick({
|
71
63
|
value,
|
@@ -1,15 +1,15 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('an Button with initialFocus and onBlur handler is rendered', () => {
|
6
6
|
cy.visitStory('Button', 'With initialFocus and onBlur');
|
7
7
|
cy.focused().should('exist');
|
8
8
|
});
|
9
|
-
(0,
|
9
|
+
(0, _cypressCucumberPreprocessor.When)('the Button is blurred', () => {
|
10
10
|
cy.get('[data-test="dhis2-uicore-button"]').blur();
|
11
11
|
});
|
12
|
-
(0,
|
12
|
+
(0, _cypressCucumberPreprocessor.Then)('the onBlur handler is called', () => {
|
13
13
|
cy.window().should(win => {
|
14
14
|
expect(win.onBlur).to.be.calledWith({
|
15
15
|
value: 'default',
|
@@ -1,14 +1,14 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a Button with onClick handler is rendered', () => {
|
6
6
|
cy.visitStory('Button', 'With onClick');
|
7
7
|
});
|
8
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.When)('the Button is clicked', () => {
|
9
9
|
cy.get('[data-test="dhis2-uicore-button"]').click();
|
10
10
|
});
|
11
|
-
(0,
|
11
|
+
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
|
12
12
|
cy.window().should(win => {
|
13
13
|
expect(win.onClick).to.be.calledWith({
|
14
14
|
name: 'Button',
|
@@ -1,14 +1,14 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a Button with onFocus handler is rendered', () => {
|
6
6
|
cy.visitStory('Button', 'With onFocus');
|
7
7
|
});
|
8
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.When)('the Button is focused', () => {
|
9
9
|
cy.get('[data-test="dhis2-uicore-button"]').focus();
|
10
10
|
});
|
11
|
-
(0,
|
11
|
+
(0, _cypressCucumberPreprocessor.Then)('the onFocus handler is called', () => {
|
12
12
|
cy.window().should(win => {
|
13
13
|
expect(win.onFocus).to.be.calledWith({
|
14
14
|
value: 'default',
|
@@ -1,11 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a ButtonStrip with children is rendered', () => {
|
6
6
|
cy.visitStory('ButtonStrip', 'With children');
|
7
7
|
cy.get('[data-test="dhis2-uicore-buttonstrip"]').should('be.visible');
|
8
8
|
});
|
9
|
-
(0,
|
9
|
+
(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
|
10
10
|
cy.contains('I am a child').should('be.visible');
|
11
11
|
});
|
@@ -1,11 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with children is rendered', () => {
|
6
6
|
cy.visitStory('DropdownButton', 'With children');
|
7
7
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
8
8
|
});
|
9
|
-
(0,
|
9
|
+
(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
|
10
10
|
cy.contains('I am a child').should('be.visible');
|
11
11
|
});
|
@@ -1,13 +1,13 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with a component prop and opened dropdown is rendered', () => {
|
6
6
|
cy.visitStory('DropdownButton', 'With component');
|
7
7
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
8
8
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
|
9
9
|
cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist');
|
10
10
|
});
|
11
|
-
(0,
|
11
|
+
(0, _cypressCucumberPreprocessor.Then)('the component is visible', () => {
|
12
12
|
cy.contains('I am a component').should('be.visible');
|
13
13
|
});
|
@@ -1,11 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with an icon prop is rendered', () => {
|
6
6
|
cy.visitStory('DropdownButton', 'With icon');
|
7
7
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
8
8
|
});
|
9
|
-
(0,
|
9
|
+
(0, _cypressCucumberPreprocessor.Then)('the icon is visible', () => {
|
10
10
|
cy.contains('Icon').should('be.visible');
|
11
11
|
});
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with initialFocus is rendered', () => {
|
6
6
|
cy.visitStory('DropdownButton', 'With initialFocus');
|
7
7
|
});
|
8
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.Then)('the DropdownButton is focused', () => {
|
9
9
|
cy.focused().parent('[data-test="dhis2-uicore-dropdownbutton"]').should('exist');
|
10
10
|
});
|
@@ -1,13 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
require("
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
(0, _steps.Given)('a DropdownButton with onClick handler is rendered', () => {
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with onClick handler is rendered', () => {
|
8
6
|
cy.visitStory('DropdownButton', 'With onClick');
|
9
7
|
});
|
10
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
|
11
9
|
cy.window().should(win => {
|
12
10
|
expect(win.onClick).to.be.calledWith({
|
13
11
|
name: 'Button',
|
@@ -1,16 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a disabled DropdownButton with onClick handler is rendered', () => {
|
6
6
|
cy.visitStory('DropdownButton', 'Disabled with onClick');
|
7
7
|
});
|
8
|
-
(0,
|
9
|
-
cy.get('[data-test="dhis2-uicore-dropdownbutton"] button').click({
|
10
|
-
force: true
|
11
|
-
});
|
12
|
-
});
|
13
|
-
(0, _steps.Then)('the onClick handler is not called', () => {
|
8
|
+
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is not called', () => {
|
14
9
|
cy.window().should(win => {
|
15
10
|
expect(win.onClick).not.to.be.called;
|
16
11
|
});
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.When)('the DropdownButton is clicked', () => {
|
6
6
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
|
7
7
|
});
|
@@ -1,23 +1,21 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
require("
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
(0, _steps.Given)('a default DropdownButton is rendered', () => {
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a default DropdownButton is rendered', () => {
|
8
6
|
cy.visitStory('DropdownButton', 'Default');
|
9
7
|
});
|
10
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with opened dropdown is rendered', () => {
|
11
9
|
cy.visitStory('DropdownButton', 'Default');
|
12
10
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
|
13
11
|
cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist');
|
14
12
|
});
|
15
|
-
(0,
|
13
|
+
(0, _cypressCucumberPreprocessor.When)('the user clicks the backdrop Layer', () => {
|
16
14
|
cy.get('[data-test="dhis2-uicore-layer"]').click();
|
17
15
|
});
|
18
|
-
(0,
|
16
|
+
(0, _cypressCucumberPreprocessor.Then)('the dropdown is not rendered', () => {
|
19
17
|
cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('not.exist');
|
20
18
|
});
|
21
|
-
(0,
|
19
|
+
(0, _cypressCucumberPreprocessor.Then)('the dropdown is rendered', () => {
|
22
20
|
cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist');
|
23
21
|
});
|
@@ -1,11 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with children is rendered', () => {
|
6
6
|
cy.visitStory('SplitButton', 'With children');
|
7
7
|
cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
|
8
8
|
});
|
9
|
-
(0,
|
9
|
+
(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
|
10
10
|
cy.get('[data-test="dhis2-uicore-splitbutton-button"]').contains('I am a child').should('be.visible');
|
11
11
|
});
|
@@ -1,12 +1,12 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with an icon is rendered', () => {
|
6
6
|
cy.visitStory('SplitButton', 'With icon');
|
7
7
|
cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
|
8
8
|
});
|
9
|
-
(0,
|
10
|
-
cy.get('[data-test="dhis2-uicore-splitbutton-button"]
|
11
|
-
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]
|
9
|
+
(0, _cypressCucumberPreprocessor.Then)('the icon is visible on the left button only', () => {
|
10
|
+
cy.get('[data-test="dhis2-uicore-splitbutton-button"] :contains("Icon")').should('be.visible');
|
11
|
+
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"] :contains("Icon")').should('not.exist');
|
12
12
|
});
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with initialFocus is rendered', () => {
|
6
6
|
cy.visitStory('SplitButton', 'With initialFocus');
|
7
7
|
});
|
8
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.Then)('the SplitButton button is focused', () => {
|
9
9
|
cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-splitbutton-button');
|
10
10
|
});
|
@@ -1,31 +1,29 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
require("
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
(0, _steps.Given)('a SplitButton is rendered', () => {
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a SplitButton is rendered', () => {
|
8
6
|
cy.visitStory('SplitButton', 'Default');
|
9
7
|
});
|
10
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.Given)('the SplitButton menu is open', () => {
|
11
9
|
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click();
|
12
10
|
cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('be.visible');
|
13
11
|
});
|
14
|
-
(0,
|
12
|
+
(0, _cypressCucumberPreprocessor.Given)('the SplitButton menu is closed', () => {
|
15
13
|
cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('not.exist');
|
16
14
|
});
|
17
|
-
(0,
|
15
|
+
(0, _cypressCucumberPreprocessor.When)('the user clicks the backdrop Layer', () => {
|
18
16
|
cy.get('[data-test="dhis2-uicore-layer"]').click();
|
19
17
|
});
|
20
|
-
(0,
|
18
|
+
(0, _cypressCucumberPreprocessor.Then)('the menu is not visible', () => {
|
21
19
|
cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('not.exist');
|
22
20
|
});
|
23
|
-
(0,
|
21
|
+
(0, _cypressCucumberPreprocessor.Then)('the component is not visible', () => {
|
24
22
|
cy.contains('Component').should('not.exist');
|
25
23
|
});
|
26
|
-
(0,
|
24
|
+
(0, _cypressCucumberPreprocessor.Then)('the menu is visible', () => {
|
27
25
|
cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('be.visible');
|
28
26
|
});
|
29
|
-
(0,
|
27
|
+
(0, _cypressCucumberPreprocessor.Then)('the component is visible', () => {
|
30
28
|
cy.contains('Component').should('be.visible');
|
31
29
|
});
|
@@ -1,13 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
require("
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
|
6
|
-
|
7
|
-
(0, _steps.Given)('a SplitButton with onClick hander is rendered', () => {
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with onClick hander is rendered', () => {
|
8
6
|
cy.visitStory('SplitButton', 'With onClick');
|
9
7
|
});
|
10
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
|
11
9
|
cy.window().its('onClick').should('be.calledWith', {
|
12
10
|
name: 'Button',
|
13
11
|
value: 'default',
|
@@ -1,23 +1,23 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.Given)('a disabled SplitButton is rendered', () => {
|
6
6
|
cy.visitStory('SplitButton', 'With disabled');
|
7
7
|
});
|
8
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.When)('the user clicks the SplitButton Button', () => {
|
9
9
|
cy.get('[data-test="dhis2-uicore-splitbutton-button"]').click({
|
10
10
|
force: true
|
11
11
|
});
|
12
12
|
});
|
13
|
-
(0,
|
13
|
+
(0, _cypressCucumberPreprocessor.Then)('the SplitButton Button is not focused', () => {
|
14
14
|
cy.focused().should('not.exist');
|
15
15
|
});
|
16
|
-
(0,
|
16
|
+
(0, _cypressCucumberPreprocessor.When)('the user clicks the SplitButton Toggle', () => {
|
17
17
|
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click({
|
18
18
|
force: true
|
19
19
|
});
|
20
20
|
});
|
21
|
-
(0,
|
21
|
+
(0, _cypressCucumberPreprocessor.Then)('the SplitButton Toggle is not focused', () => {
|
22
22
|
cy.focused().should('not.exist');
|
23
23
|
});
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
-
var
|
3
|
+
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
4
|
|
5
|
-
(0,
|
5
|
+
(0, _cypressCucumberPreprocessor.When)('the SplitButton is clicked', () => {
|
6
6
|
cy.get('[data-test="dhis2-uicore-splitbutton-button"]').click();
|
7
7
|
});
|
8
|
-
(0,
|
8
|
+
(0, _cypressCucumberPreprocessor.When)('the SplitButton toggle is clicked', () => {
|
9
9
|
cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click();
|
10
10
|
});
|
@@ -23,8 +23,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
23
23
|
|
24
24
|
var _index = require("../index.js");
|
25
25
|
|
26
|
-
var _index2 = _interopRequireDefault(require("../locales/index.js"));
|
27
|
-
|
28
26
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
29
27
|
|
30
28
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -50,18 +48,6 @@ class SplitButton extends _react.Component {
|
|
50
48
|
|
51
49
|
_defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
|
52
50
|
|
53
|
-
_defineProperty(this, "handleKeyDown", event => {
|
54
|
-
event.preventDefault();
|
55
|
-
|
56
|
-
if (event.key === 'Escape' && this.state.open) {
|
57
|
-
event.stopPropagation();
|
58
|
-
this.setState({
|
59
|
-
open: false
|
60
|
-
});
|
61
|
-
this.anchorRef.current && this.anchorRef.current.focus();
|
62
|
-
}
|
63
|
-
});
|
64
|
-
|
65
51
|
_defineProperty(this, "onClick", (payload, event) => {
|
66
52
|
if (this.props.onClick) {
|
67
53
|
this.props.onClick({
|
@@ -72,19 +58,9 @@ class SplitButton extends _react.Component {
|
|
72
58
|
}
|
73
59
|
});
|
74
60
|
|
75
|
-
_defineProperty(this, "onToggle", () => {
|
76
|
-
this.
|
77
|
-
|
78
|
-
}));
|
79
|
-
});
|
80
|
-
}
|
81
|
-
|
82
|
-
componentDidMount() {
|
83
|
-
document.addEventListener('keydown', this.handleKeyDown);
|
84
|
-
}
|
85
|
-
|
86
|
-
componentWillUnmount() {
|
87
|
-
document.removeEventListener('keydown', this.handleKeyDown);
|
61
|
+
_defineProperty(this, "onToggle", () => this.setState({
|
62
|
+
open: !this.state.open
|
63
|
+
}));
|
88
64
|
}
|
89
65
|
|
90
66
|
render() {
|
@@ -143,9 +119,7 @@ class SplitButton extends _react.Component {
|
|
143
119
|
type: type,
|
144
120
|
tabIndex: tabIndex,
|
145
121
|
className: (0, _classnames.default)(className, rightButton.className),
|
146
|
-
dataTest: "".concat(dataTest, "-toggle")
|
147
|
-
title: _index2.default.t('Toggle dropdown'),
|
148
|
-
"aria-label": _index2.default.t('Toggle dropdown')
|
122
|
+
dataTest: "".concat(dataTest, "-toggle")
|
149
123
|
}, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
150
124
|
onBackdropClick: this.onToggle,
|
151
125
|
transparent: true
|
@@ -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,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.5.0
|
3
|
+
"version": "9.5.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.5.0
|
37
|
-
"@dhis2-ui/loader": "9.5.0
|
38
|
-
"@dhis2-ui/popper": "9.5.0
|
39
|
-
"@dhis2/ui-constants": "9.5.0
|
40
|
-
"@dhis2/ui-icons": "9.5.0
|
36
|
+
"@dhis2-ui/layer": "9.5.0",
|
37
|
+
"@dhis2-ui/loader": "9.5.0",
|
38
|
+
"@dhis2-ui/popper": "9.5.0",
|
39
|
+
"@dhis2/ui-constants": "9.5.0",
|
40
|
+
"@dhis2/ui-icons": "9.5.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
|
-
});
|