@dhis2-ui/button 10.0.0-alpha.7 → 10.0.0-alpha.8

Sign up to get free protection for your applications and to get access to all the features.
@@ -15,22 +15,22 @@ describe('<Button>', () => {
15
15
  });
16
16
  describe('warning for missing aria-label and title', () => {
17
17
  it('No warning if children exist but aria-label and title is missing', () => {
18
- (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
18
+ (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
19
19
  expect(consoleSpy).not.toHaveBeenCalled();
20
20
  });
21
21
  it('does not warn if aria-label and title is present', () => {
22
- (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
22
+ (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
23
23
  "aria-label": "Test",
24
24
  title: "Test"
25
25
  }, "Children content"));
26
26
  expect(consoleSpy).not.toHaveBeenCalled();
27
27
  });
28
28
  it('warns if no children are present with no arial-label and title', () => {
29
- (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null));
29
+ (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, null));
30
30
  expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
31
31
  });
32
32
  it('No warning if there are no children but arial label and title', () => {
33
- (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
33
+ (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
34
34
  "aria-label": "Test",
35
35
  title: "Test"
36
36
  }));
@@ -39,7 +39,7 @@ describe('<Button>', () => {
39
39
  });
40
40
  it('renders a default data-test attribute', () => {
41
41
  const dataTest = 'dhis2-uicore-button';
42
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
42
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
43
43
  dataTest: dataTest
44
44
  }));
45
45
  const actual = wrapper.find({
@@ -49,7 +49,7 @@ describe('<Button>', () => {
49
49
  });
50
50
  it('renders a custom data-test attribute', () => {
51
51
  const dataTest = 'button-data-test';
52
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
52
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
53
53
  dataTest: dataTest
54
54
  }));
55
55
  const actual = wrapper.find({
@@ -59,7 +59,7 @@ describe('<Button>', () => {
59
59
  });
60
60
  it('has the accessibility attributes', () => {
61
61
  const dataTest = 'button-data-test';
62
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
62
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
63
63
  dataTest: dataTest,
64
64
  ariaLabel: "test aria label",
65
65
  title: "title for button"
@@ -70,21 +70,21 @@ describe('<Button>', () => {
70
70
  });
71
71
  describe('toggle', () => {
72
72
  it('should have class "toggled" if toggled-prop is true', () => {
73
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
73
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
74
74
  toggled: true
75
75
  }));
76
76
  const actual = wrapper.find('button');
77
77
  expect(actual.hasClass('toggled')).toBe(true);
78
78
  });
79
79
  it('should not have class "toggled" if toggled-prop is not passed', () => {
80
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, null));
80
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, null));
81
81
  const actual = wrapper.find('button');
82
82
  expect(actual.hasClass('toggled')).toBe(false);
83
83
  });
84
84
  });
85
85
  it('should call the onKeyDown callback when provided', () => {
86
86
  const onKeyDown = jest.fn();
87
- (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
87
+ (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
88
88
  name: "button-name",
89
89
  value: "button-value",
90
90
  onKeyDown: onKeyDown
@@ -44,7 +44,7 @@ describe('<DropdownButton>', () => {
44
44
  const {
45
45
  getByTestId,
46
46
  queryByText
47
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
47
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
48
48
  component: componentText
49
49
  }));
50
50
  const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
@@ -68,7 +68,7 @@ describe('<DropdownButton>', () => {
68
68
  const {
69
69
  getByTestId,
70
70
  queryByText
71
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
71
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
72
72
  hide: false,
73
73
  onClose: () => {}
74
74
  }, modalContent));
@@ -88,7 +88,7 @@ describe('<DropdownButton>', () => {
88
88
  });
89
89
  describe('closed state', () => {
90
90
  const onClick = jest.fn();
91
- const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
91
+ const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
92
92
  onClick: onClick,
93
93
  open: false,
94
94
  component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
@@ -2,7 +2,6 @@
2
2
 
3
3
  var _react = require("@testing-library/react");
4
4
  var _react2 = _interopRequireDefault(require("react"));
5
- require("@testing-library/jest-dom/extend-expect");
6
5
  var _splitButton = require("./split-button.js");
7
6
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
8
7
  describe('SplitButton', () => {
@@ -10,14 +9,14 @@ describe('SplitButton', () => {
10
9
  it('renders button with children', () => {
11
10
  const {
12
11
  getByText
13
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
12
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
14
13
  expect(getByText('Click me')).toBeInTheDocument();
15
14
  });
16
15
  it('toggles dropdown when left button is clicked', () => {
17
16
  const {
18
17
  getByTestId,
19
18
  queryByTestId
20
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
19
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
21
20
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
22
21
  _react.fireEvent.click(toggleButton);
23
22
  expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
@@ -27,7 +26,7 @@ describe('SplitButton', () => {
27
26
  it('renders dropdown content when open is true', () => {
28
27
  const {
29
28
  getByTestId
30
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
29
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
31
30
  component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
32
31
  }));
33
32
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
@@ -37,7 +36,7 @@ describe('SplitButton', () => {
37
36
  it("does not close dropdown 'Enter' key is pressed", async () => {
38
37
  const {
39
38
  getByTestId
40
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
39
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
41
40
  component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
42
41
  }));
43
42
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
@@ -56,7 +55,7 @@ describe('SplitButton', () => {
56
55
  const {
57
56
  getByTestId,
58
57
  queryByTestId
59
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
58
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
60
59
  component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
61
60
  }));
62
61
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
@@ -74,7 +73,7 @@ describe('SplitButton', () => {
74
73
  it('adds title and aria-label attributes to the right button', () => {
75
74
  const {
76
75
  getByTestId
77
- } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
76
+ } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
78
77
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
79
78
  expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
80
79
  expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
@@ -12,22 +12,22 @@ describe('<Button>', () => {
12
12
  });
13
13
  describe('warning for missing aria-label and title', () => {
14
14
  it('No warning if children exist but aria-label and title is missing', () => {
15
- render( /*#__PURE__*/React.createElement(Button, null, "Children content"));
15
+ render(/*#__PURE__*/React.createElement(Button, null, "Children content"));
16
16
  expect(consoleSpy).not.toHaveBeenCalled();
17
17
  });
18
18
  it('does not warn if aria-label and title is present', () => {
19
- render( /*#__PURE__*/React.createElement(Button, {
19
+ render(/*#__PURE__*/React.createElement(Button, {
20
20
  "aria-label": "Test",
21
21
  title: "Test"
22
22
  }, "Children content"));
23
23
  expect(consoleSpy).not.toHaveBeenCalled();
24
24
  });
25
25
  it('warns if no children are present with no arial-label and title', () => {
26
- render( /*#__PURE__*/React.createElement(Button, null));
26
+ render(/*#__PURE__*/React.createElement(Button, null));
27
27
  expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
28
28
  });
29
29
  it('No warning if there are no children but arial label and title', () => {
30
- render( /*#__PURE__*/React.createElement(Button, {
30
+ render(/*#__PURE__*/React.createElement(Button, {
31
31
  "aria-label": "Test",
32
32
  title: "Test"
33
33
  }));
@@ -36,7 +36,7 @@ describe('<Button>', () => {
36
36
  });
37
37
  it('renders a default data-test attribute', () => {
38
38
  const dataTest = 'dhis2-uicore-button';
39
- const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
39
+ const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
40
40
  dataTest: dataTest
41
41
  }));
42
42
  const actual = wrapper.find({
@@ -46,7 +46,7 @@ describe('<Button>', () => {
46
46
  });
47
47
  it('renders a custom data-test attribute', () => {
48
48
  const dataTest = 'button-data-test';
49
- const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
49
+ const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
50
50
  dataTest: dataTest
51
51
  }));
52
52
  const actual = wrapper.find({
@@ -56,7 +56,7 @@ describe('<Button>', () => {
56
56
  });
57
57
  it('has the accessibility attributes', () => {
58
58
  const dataTest = 'button-data-test';
59
- const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
59
+ const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
60
60
  dataTest: dataTest,
61
61
  ariaLabel: "test aria label",
62
62
  title: "title for button"
@@ -67,21 +67,21 @@ describe('<Button>', () => {
67
67
  });
68
68
  describe('toggle', () => {
69
69
  it('should have class "toggled" if toggled-prop is true', () => {
70
- const wrapper = mount( /*#__PURE__*/React.createElement(Button, {
70
+ const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
71
71
  toggled: true
72
72
  }));
73
73
  const actual = wrapper.find('button');
74
74
  expect(actual.hasClass('toggled')).toBe(true);
75
75
  });
76
76
  it('should not have class "toggled" if toggled-prop is not passed', () => {
77
- const wrapper = mount( /*#__PURE__*/React.createElement(Button, null));
77
+ const wrapper = mount(/*#__PURE__*/React.createElement(Button, null));
78
78
  const actual = wrapper.find('button');
79
79
  expect(actual.hasClass('toggled')).toBe(false);
80
80
  });
81
81
  });
82
82
  it('should call the onKeyDown callback when provided', () => {
83
83
  const onKeyDown = jest.fn();
84
- render( /*#__PURE__*/React.createElement(Button, {
84
+ render(/*#__PURE__*/React.createElement(Button, {
85
85
  name: "button-name",
86
86
  value: "button-value",
87
87
  onKeyDown: onKeyDown
@@ -41,7 +41,7 @@ describe('<DropdownButton>', () => {
41
41
  const {
42
42
  getByTestId,
43
43
  queryByText
44
- } = render( /*#__PURE__*/React.createElement(DropdownButton, {
44
+ } = render(/*#__PURE__*/React.createElement(DropdownButton, {
45
45
  component: componentText
46
46
  }));
47
47
  const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
@@ -65,7 +65,7 @@ describe('<DropdownButton>', () => {
65
65
  const {
66
66
  getByTestId,
67
67
  queryByText
68
- } = render( /*#__PURE__*/React.createElement(Modal, {
68
+ } = render(/*#__PURE__*/React.createElement(Modal, {
69
69
  hide: false,
70
70
  onClose: () => {}
71
71
  }, modalContent));
@@ -85,7 +85,7 @@ describe('<DropdownButton>', () => {
85
85
  });
86
86
  describe('closed state', () => {
87
87
  const onClick = jest.fn();
88
- const wrapper = mount( /*#__PURE__*/React.createElement(DropdownButton, {
88
+ const wrapper = mount(/*#__PURE__*/React.createElement(DropdownButton, {
89
89
  onClick: onClick,
90
90
  open: false,
91
91
  component: /*#__PURE__*/React.createElement("span", null, "test")
@@ -1,20 +1,19 @@
1
1
  import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
2
2
  import React from 'react';
3
- import '@testing-library/jest-dom/extend-expect';
4
3
  import { SplitButton } from './split-button.js';
5
4
  describe('SplitButton', () => {
6
5
  afterEach(cleanup);
7
6
  it('renders button with children', () => {
8
7
  const {
9
8
  getByText
10
- } = render( /*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
9
+ } = render(/*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
11
10
  expect(getByText('Click me')).toBeInTheDocument();
12
11
  });
13
12
  it('toggles dropdown when left button is clicked', () => {
14
13
  const {
15
14
  getByTestId,
16
15
  queryByTestId
17
- } = render( /*#__PURE__*/React.createElement(SplitButton, null));
16
+ } = render(/*#__PURE__*/React.createElement(SplitButton, null));
18
17
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
19
18
  fireEvent.click(toggleButton);
20
19
  expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
@@ -24,7 +23,7 @@ describe('SplitButton', () => {
24
23
  it('renders dropdown content when open is true', () => {
25
24
  const {
26
25
  getByTestId
27
- } = render( /*#__PURE__*/React.createElement(SplitButton, {
26
+ } = render(/*#__PURE__*/React.createElement(SplitButton, {
28
27
  component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
29
28
  }));
30
29
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
@@ -34,7 +33,7 @@ describe('SplitButton', () => {
34
33
  it("does not close dropdown 'Enter' key is pressed", async () => {
35
34
  const {
36
35
  getByTestId
37
- } = render( /*#__PURE__*/React.createElement(SplitButton, {
36
+ } = render(/*#__PURE__*/React.createElement(SplitButton, {
38
37
  component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
39
38
  }));
40
39
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
@@ -53,7 +52,7 @@ describe('SplitButton', () => {
53
52
  const {
54
53
  getByTestId,
55
54
  queryByTestId
56
- } = render( /*#__PURE__*/React.createElement(SplitButton, {
55
+ } = render(/*#__PURE__*/React.createElement(SplitButton, {
57
56
  component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
58
57
  }));
59
58
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
@@ -71,7 +70,7 @@ describe('SplitButton', () => {
71
70
  it('adds title and aria-label attributes to the right button', () => {
72
71
  const {
73
72
  getByTestId
74
- } = render( /*#__PURE__*/React.createElement(SplitButton, null));
73
+ } = render(/*#__PURE__*/React.createElement(SplitButton, null));
75
74
  const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
76
75
  expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
77
76
  expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/button",
3
- "version": "10.0.0-alpha.7",
3
+ "version": "10.0.0-alpha.8",
4
4
  "description": "UI Button",
5
5
  "repository": {
6
6
  "type": "git",
@@ -27,17 +27,17 @@
27
27
  "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
28
28
  },
29
29
  "peerDependencies": {
30
- "react": "^16.13",
31
- "react-dom": "^16.13",
30
+ "react": "^16.13 || ^18",
31
+ "react-dom": "^16.13 || ^18",
32
32
  "styled-jsx": "^4"
33
33
  },
34
34
  "dependencies": {
35
35
  "@dhis2/prop-types": "^3.1.2",
36
- "@dhis2-ui/layer": "10.0.0-alpha.7",
37
- "@dhis2-ui/loader": "10.0.0-alpha.7",
38
- "@dhis2-ui/popper": "10.0.0-alpha.7",
39
- "@dhis2/ui-constants": "10.0.0-alpha.7",
40
- "@dhis2/ui-icons": "10.0.0-alpha.7",
36
+ "@dhis2-ui/layer": "10.0.0-alpha.8",
37
+ "@dhis2-ui/loader": "10.0.0-alpha.8",
38
+ "@dhis2-ui/popper": "10.0.0-alpha.8",
39
+ "@dhis2/ui-constants": "10.0.0-alpha.8",
40
+ "@dhis2/ui-icons": "10.0.0-alpha.8",
41
41
  "classnames": "^2.3.1",
42
42
  "prop-types": "^15.7.2"
43
43
  },
@@ -46,8 +46,8 @@
46
46
  "types"
47
47
  ],
48
48
  "devDependencies": {
49
- "react": "16.13",
50
- "react-dom": "16.13",
49
+ "react": "^18.3.1",
50
+ "react-dom": "^18.3.1",
51
51
  "styled-jsx": "^4.0.1"
52
52
  },
53
53
  "types": "types"