@dhis2/analytics 28.0.4 → 28.1.0

package/build/cjs/components/Toolbar/HoverMenuBar/__tests__/HoverMenuBar.spec.js

@@ -1,105 +1,115 @@
 "use strict";
 
-require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _enzyme = require("enzyme");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<HoverMenuBar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, childNode));
+    expect(_react.screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, {
       dataTest: dataTest
     }, "children"));
-    expect(wrapper.find('div').prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
   describe('mouse interactions', () => {
-    it('does not open on hover before a dropdown anchor is clicked', async () => {
+    test('does not open on hover before a dropdown anchor is clicked', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu A'));
+      await user.hover(_react.screen.getByText('Menu A'));
       await expectMenuItemsInDocument([['Menu item A.1', false], ['Menu item A.2', false], ['Menu item A.3', false]]);
     });
-    it('does not open when a disabled dropdown anchor is clicked', async () => {
+    test('does not open when a disabled dropdown anchor is clicked', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu C'));
+      await user.click(_react.screen.getByText('Menu C'));
       await expectMenuItemsInDocument([['Menu item A.1', false], ['Menu item A.2', false], ['Menu item A.3', false]]);
     });
-    it('opens menu list when clicked', async () => {
+    test('opens menu list when clicked', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu A'));
+      await user.click(_react.screen.getByText('Menu A'));
       await expectMenuItemsInDocument([['Menu item A.1', true], ['Menu item B.1', false], ['Menu item C.1', false]]);
     });
-    it('responds to hover once open', async () => {
+    test('responds to hover once open', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu A'));
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu B'));
+      await user.click(_react.screen.getByText('Menu A'));
+      await user.hover(_react.screen.getByText('Menu B'));
       await expectMenuItemsInDocument([['Menu item A.1', false], ['Menu item B.1', true], ['Menu item C.1', false]]);
     });
-    it('does not open disabled dropdown on hover in hover mode', async () => {
+    test('does not open disabled dropdown on hover in hover mode', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu B'));
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu C'));
+      await user.click(_react.screen.getByText('Menu B'));
+      await user.hover(_react.screen.getByText('Menu C'));
       await expectMenuItemsInDocument([['Menu item B.1', true], ['Menu item C.1', false]]);
     });
-    it('opens submenus when in hover mode', async () => {
+    test('opens submenus when in hover mode', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu B'));
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.1'));
+      await user.click(_react.screen.getByText('Menu B'));
+      await user.hover(_react.screen.getByText('Menu item B.1'));
       await expectMenuItemsInDocument([['Menu item B.1.1', true], ['Menu item B.1.2', true], ['Menu item B.1.3', true], ['Menu item B.2.1', false], ['Menu item B.2.2', false], ['Menu item B.2.3', false]]);
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.2'));
+      await user.hover(_react.screen.getByText('Menu item B.2'));
       await expectMenuItemsInDocument([['Menu item B.1.1', false], ['Menu item B.1.2', false], ['Menu item B.1.3', false], ['Menu item B.2.1', true], ['Menu item B.2.2', true], ['Menu item B.2.3', true]]);
     });
-    it('does not open disabled submenus when in hover mode', async () => {
+    test('does not open disabled submenus when in hover mode', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu B'));
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.2'));
+      await user.click(_react.screen.getByText('Menu B'));
+      await user.hover(_react.screen.getByText('Menu item B.2'));
       await expectMenuItemsInDocument([['Menu item B.2.1', true], ['Menu item B.2.2', true], ['Menu item B.2.3', true], ['Menu item B.3.1', false], ['Menu item B.3.2', false], ['Menu item B.3.3', false]]);
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.3'));
+      await user.hover(_react.screen.getByText('Menu item B.3'));
       await expectMenuItemsInDocument([['Menu item B.2.1', true], ['Menu item B.2.2', true], ['Menu item B.2.3', true], ['Menu item B.3.1', false], ['Menu item B.3.2', false], ['Menu item B.3.3', false]]);
     });
-    it('closes when clicking on then document', async () => {
+    test('closes when clicking on then document', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu A'));
+      await user.click(_react.screen.getByText('Menu A'));
       await expectMenuItemsInDocument([['Menu item A.1', true]]);
-      _react.fireEvent.click(document);
+      await user.click(document.body);
       await expectMenuItemsInDocument([['Menu item A.1', false]]);
     });
-    it('stays open when clicking a open submenu anchor', async () => {
+    test('stays open when clicking a open submenu anchor', async () => {
+      const user = _userEvent.default.setup();
       createFullMenuBarWrapper();
-      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+      await user.click(_react.screen.getByText('Menu B'));
       await expectMenuItemsInDocument([['Menu item B.1', true]]);
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.1'));
+      await user.hover(_react.screen.getByText('Menu item B.1'));
       await expectMenuItemsInDocument([['Menu item B.1', true], ['Menu item B.1.1', true], ['Menu item B.1.2', true], ['Menu item B.1.3', true]]);
-      _react.fireEvent.click(_react.screen.getByText('Menu item B.1'));
+      await user.click(_react.screen.getByText('Menu item B.1'));
       await expectMenuItemsInDocument([['Menu item B.1', true], ['Menu item B.1.1', true], ['Menu item B.1.2', true], ['Menu item B.1.3', true]]);
     });
-    it('calls the onClick of the menu item and closes when clicking a menu item', async () => {
+    test('calls the onClick of the menu item and closes when clicking a menu item', async () => {
+      const user = _userEvent.default.setup();
       const menuItemOnClickSpy = jest.fn();
       createFullMenuBarWrapper({
         menuItemOnClickSpy
       });
-      _react.fireEvent.click(_react.screen.getByText('Menu A'));
+      await user.click(_react.screen.getByText('Menu A'));
       await expectMenuItemsInDocument([['Menu item A.1', true]]);
-      _react.fireEvent.click(_react.screen.getByText('Menu item A.1'));
+      await user.click(_react.screen.getByText('Menu item A.1'));
       expect(menuItemOnClickSpy).toHaveBeenCalledTimes(1);
       await expectMenuItemsInDocument([['Menu item A.1', false]]);
     });
-    it('calls the onClick of the menu item and closes when clicking a submenu item', async () => {
+    test('calls the onClick of the menu item and closes when clicking a submenu item', async () => {
+      const user = _userEvent.default.setup();
       const subMenuItemOnClickSpy = jest.fn();
       createFullMenuBarWrapper({
         subMenuItemOnClickSpy
       });
-      _react.fireEvent.click(_react.screen.getByText('Menu B'));
+      await user.click(_react.screen.getByText('Menu B'));
       await expectMenuItemsInDocument([['Menu item B.1', true]]);
-      _react.fireEvent.mouseOver(_react.screen.getByText('Menu item B.1'));
+      await user.hover(_react.screen.getByText('Menu item B.1'));
       await expectMenuItemsInDocument([['Menu item B.1.1', true]]);
-      _react.fireEvent.click(_react.screen.getByText('Menu item B.1.1'));
+      await user.click(_react.screen.getByText('Menu item B.1.1'));
       expect(subMenuItemOnClickSpy).toHaveBeenCalledTimes(1);
       await expectMenuItemsInDocument([['Menu item B.1', false], ['Menu item B.1.1', false], ['Menu item B.1.1', false]]);
     });

package/build/cjs/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<HoverMenuDropdown/>', () => {
@@ -9,20 +9,20 @@ describe('<HoverMenuDropdown/>', () => {
    * in the mouse interaction tests for the HoverMenuBar.
    * Only the `dataTest` prop needs to be verified here. */
 
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuDropdown, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
       label: "test dropdown",
       dataTest: dataTest
     }, "children"));
-    expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `className` prop', () => {
+  test('accepts a `className` prop', () => {
     const className = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuDropdown, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
       label: "test dropdown",
       className: className
     }, "children"));
-    expect(wrapper.find('button')).toHaveClassName(className);
+    expect(_react.screen.getByRole('button')).toHaveClass(className);
   });
 });

package/build/cjs/components/Toolbar/HoverMenuBar/__tests__/HoverMenuList.spec.js

@@ -1,32 +1,31 @@
 "use strict";
 
-require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
-var _enzyme = require("enzyme");
 var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<HoverMenuList/>', () => {
   const dataTest = 'test';
   const childNode = 'children';
-  it('renders children', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  test('renders children', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, childNode));
+    expect(_react.screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accept a `className` prop', () => {
+  test('accept a `className` prop', () => {
     const className = 'className';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+      dataTest: dataTest,
       className: className
     }, childNode));
-    expect(wrapper.find('ul')).toHaveClassName(className);
+    expect(_react.screen.getByTestId(dataTest)).toHaveClass(className);
   });
-  it('accepts a `dataTest` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+  test('accepts a `dataTest` prop', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
       dataTest: dataTest
     }, childNode));
-    expect(wrapper.find('ul').prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accept a `dense` prop', () => {
+  test('accept a `dense` prop', () => {
     (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
       dense: true
     }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
@@ -37,18 +36,24 @@ describe('<HoverMenuList/>', () => {
     expect(_react.screen.getByText('item 1').closest('li')).toHaveClass('dense');
     expect(_react.screen.getByText('item 2').closest('li')).toHaveClass('dense');
   });
-  it('accept a `maxHeight` prop', () => {
+  test('accept a `maxHeight` prop', () => {
     const maxHeight = '100000px';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+    const {
+      container
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+      dataTest: dataTest,
       maxHeight: maxHeight
     }, childNode));
-    expect(wrapper.find('style').text()).toContain(`max-height: ${maxHeight}`);
+    expect(container).toMatchSnapshot();
   });
-  it('accept a `maxWidth` prop', () => {
+  test('accept a `maxWidth` prop', () => {
     const maxWidth = '100000px';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+    const {
+      container
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
+      dataTest: dataTest,
       maxWidth: maxWidth
     }, childNode));
-    expect(wrapper.find('style').text()).toContain(`max-width: ${maxWidth}`);
+    expect(container).toMatchSnapshot();
   });
 });

package/build/cjs/components/Toolbar/HoverMenuBar/__tests__/HoverMenuListItem.spec.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<HoverMenuListItem/>', () => {
@@ -10,36 +10,42 @@ describe('<HoverMenuListItem/>', () => {
    * Only the `className`, `dataTest`, `destructive` and
    * `icon` prop need to be verified here. */
 
-  it('accepts a `className` prop', () => {
+  test('accepts a `className` prop', () => {
     const className = 'className';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuListItem, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
       className: className
     }));
-    expect(wrapper.find('li')).toHaveClassName(className);
+    expect(_react.screen.getByTestId('dhis2-uicore-hovermenulistitem')).toHaveClass(className);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuListItem, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
       dataTest: dataTest
     }));
-    expect(wrapper.find('li').prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `destructive` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuListItem, {
+  test('accepts a `destructive` prop', () => {
+    const dataTest = 'test';
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+      dataTest: dataTest,
       destructive: true
     }));
-    expect(wrapper.find('li')).toHaveClassName('destructive');
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts an `icon` prop', () => {
+  test('accepts an `icon` prop', () => {
+    const dataTest = 'test';
     const iconText = 'I am an icon';
-    const icon = /*#__PURE__*/_react.default.createElement("span", {
+    const icon = /*#__PURE__*/_react2.default.createElement("span", {
       id: "testicon"
     }, iconText);
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuListItem, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
+      dataTest: dataTest,
       icon: icon
     }));
-    expect(wrapper.find('span.icon')).toExist();
-    expect(wrapper.find('span#testicon')).toExist();
-    expect(wrapper.find('span#testicon').text()).toBe(iconText);
+    const iconWrapperEl = _react.screen.getByTestId(dataTest).firstChild;
+    expect(iconWrapperEl).toBeInTheDocument();
+    expect(iconWrapperEl).toHaveClass('icon');
+    const iconEl = iconWrapperEl.closest('span');
+    expect(iconEl).toHaveTextContent(iconText);
   });
 });

package/build/cjs/components/Toolbar/HoverMenuBar/__tests__/__snapshots__/HoverMenuList.spec.js.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HoverMenuList/> accept a \`maxHeight\` prop 1`] = `
+<div>
+  <ul
+    data-test="test"
+  >
+    children
+    <style>
+      
+                    ul {
+                        position: relative;
+                        margin: 0;
+                        padding: 0;
+                        user-select: none;
+                        background: #ffffff;
+                        border: 1px solid #f3f5f7;
+                        border-radius: 3px;
+                        box-shadow: 0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05);
+                        display: inline-block;
+                        min-width: 128px;
+                        max-width: 380px;
+                        max-height: 100000px;
+                        padding: 4px 0;
+                        overflow: auto;
+                        list-style: none;
+                    }
+                
+    </style>
+  </ul>
+</div>
+`;
+
+exports[`<HoverMenuList/> accept a \`maxWidth\` prop 1`] = `
+<div>
+  <ul
+    data-test="test"
+  >
+    children
+    <style>
+      
+                    ul {
+                        position: relative;
+                        margin: 0;
+                        padding: 0;
+                        user-select: none;
+                        background: #ffffff;
+                        border: 1px solid #f3f5f7;
+                        border-radius: 3px;
+                        box-shadow: 0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05);
+                        display: inline-block;
+                        min-width: 128px;
+                        max-width: 100000px;
+                        max-height: auto;
+                        padding: 4px 0;
+                        overflow: auto;
+                        list-style: none;
+                    }
+                
+    </style>
+  </ul>
+</div>
+`;

package/build/cjs/components/Toolbar/InterpretationsAndDetailsToggler.js

@@ -21,7 +21,9 @@ const InterpretationsAndDetailsToggler = ({
   disabled: disabled,
   "data-test": dataTest,
   className: "jsx-1238484262 " + `jsx-${_MenuButtonStyles.default.__hash}`
-}, isShowing ? /*#__PURE__*/_react.default.createElement(_ui.IconChevronRight24, null) : /*#__PURE__*/_react.default.createElement(_ui.IconChevronLeft24, null), _d2I18n.default.t('Interpretations and details'), /*#__PURE__*/_react.default.createElement(_style.default, {
+}, isShowing ? /*#__PURE__*/_react.default.createElement(_ui.IconChevronRight24, {
+  dataTest: `${dataTest}-showing`
+}) : /*#__PURE__*/_react.default.createElement(_ui.IconChevronLeft24, null), _d2I18n.default.t('Interpretations and details'), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: _MenuButtonStyles.default.__hash
 }, _MenuButtonStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "1238484262"

package/build/cjs/components/Toolbar/__tests__/InterpretationsAndDetailsToggler.spec.js

@@ -1,45 +1,46 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<InterpretationsAndDetailsToggler/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = _userEvent.default.setup();
     const onClick = jest.fn();
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.InterpretationsAndDetailsToggler, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.InterpretationsAndDetailsToggler, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(_react.screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.InterpretationsAndDetailsToggler, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.InterpretationsAndDetailsToggler, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.InterpretationsAndDetailsToggler, {
+  test('accepts a `disabled` prop', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.InterpretationsAndDetailsToggler, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(_react.screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `isShowing` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.InterpretationsAndDetailsToggler, {
+  test('accepts an `isShowing` prop', () => {
+    const showingDataTest = 'dhis2-analytics-interpretationsanddetailstoggler-showing';
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.InterpretationsAndDetailsToggler, {
       onClick: noop
     }));
-    const wrapperWithIsShowing = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.InterpretationsAndDetailsToggler, {
+    expect(_react.screen.queryByTestId(showingDataTest)).not.toBeInTheDocument();
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.InterpretationsAndDetailsToggler, {
       isShowing: true,
       onClick: noop
     }));
-    expect(wrapper.find('SvgChevronRight24')).toHaveLength(0);
-    expect(wrapper.find('SvgChevronLeft24')).toHaveLength(1);
-    expect(wrapperWithIsShowing.find('SvgChevronRight24')).toHaveLength(1);
-    expect(wrapperWithIsShowing.find('SvgChevronLeft24')).toHaveLength(0);
+    expect(_react.screen.getByTestId(showingDataTest)).toBeInTheDocument();
   });
 });

package/build/cjs/components/Toolbar/__tests__/Toolbar.spec.js

@@ -1,20 +1,20 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<Toolbar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.Toolbar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.Toolbar, null, childNode));
+    expect(_react.screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.Toolbar, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.Toolbar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
 });

package/build/cjs/components/Toolbar/__tests__/ToolbarSidebar.spec.js

@@ -1,26 +1,29 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<ToolbarSidebar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.ToolbarSidebar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.ToolbarSidebar, null, childNode));
+    expect(_react.screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.ToolbarSidebar, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.ToolbarSidebar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `isHidden` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.ToolbarSidebar, {
+  test('accepts a `isHidden` prop', () => {
+    const {
+      container
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.ToolbarSidebar, {
       isHidden: true
     }));
-    expect(wrapper.find('div').hasClass('isHidden')).toEqual(true);
+    const divEl = container.querySelector('div');
+    expect(divEl).toHaveClass('isHidden');
   });
 });

package/build/cjs/components/Toolbar/__tests__/UpdateButton.spec.js

@@ -1,39 +1,41 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _react2 = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<UpdateButton/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = _userEvent.default.setup();
     const onClick = jest.fn();
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.UpdateButton, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.UpdateButton, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(_react.screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.UpdateButton, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.UpdateButton, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(_react.screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.UpdateButton, {
+  test('accepts a `disabled` prop', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.UpdateButton, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(_react.screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `loading` prop', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.UpdateButton, {
+  test('accepts an `loading` prop', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.UpdateButton, {
       onClick: noop,
       loading: true
     }));
-    expect(wrapper.find('CircularLoader')).toHaveLength(1);
+    expect(_react.screen.getByTestId('dhis2-uicore-circularloader')).toBeInTheDocument();
   });
 });

package/build/cjs/components/TranslationDialog/TranslationModal/TranslationModal.js

@@ -37,7 +37,8 @@ const TranslationModal = ({
   return /*#__PURE__*/_react.default.createElement(_ui.Modal, {
     large: true,
     position: "middle",
-    onClose: onClose
+    onClose: onClose,
+    dataTest: "dhis2-analytics-translation-modal"
   }, /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _d2I18n.default.t('Translate: {{objectName}}', {
     objectName: objectToTranslate.name || 'TEXT',
     // XXX