@dhis2-ui/button 9.5.0-alpha.1 → 9.5.0
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/button/__tests__/Button.test.js +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
|
-
});
|