@dhis2/analytics 28.0.3 → 28.0.5

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

@@ -11,17 +11,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _MenuButtonStyles = _interopRequireDefault(require("../MenuButton.styles.js"));
 var _HoverMenuBar = require("./HoverMenuBar.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const HoverMenuDropdown = _ref => {
-  let {
-    children,
-    className,
-    label,
-    dataTest,
-    disabled
-  } = _ref;
+const HoverMenuDropdown = ({
+  children,
+  className,
+  label,
+  dataTest = 'dhis2-analytics-hovermenudropdown',
+  disabled
+}) => {
   const buttonRef = (0, _react.useRef)();
   const {
     onDropDownButtonClick,
@@ -46,9 +44,6 @@ const HoverMenuDropdown = _ref => {
   }, children)));
 };
 exports.HoverMenuDropdown = HoverMenuDropdown;
-HoverMenuDropdown.defaultProps = {
-  dataTest: 'dhis2-analytics-hovermenudropdown'
-};
 HoverMenuDropdown.propTypes = {
   children: _propTypes.default.node.isRequired,
   label: _propTypes.default.node.isRequired,

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

@@ -9,8 +9,7 @@ var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _HoverMenuBar = require("./HoverMenuBar.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const throwErrorIfNotInitialized = () => {
   throw new Error('`HoverMenuListContext` has not been initialised');
@@ -23,15 +22,14 @@ const HoverMenuListContext = /*#__PURE__*/(0, _react.createContext)({
 });
 const useHoverMenuListContext = () => (0, _react.useContext)(HoverMenuListContext);
 exports.useHoverMenuListContext = useHoverMenuListContext;
-const HoverMenuList = _ref => {
-  let {
-    children,
-    className,
-    dataTest,
-    dense,
-    maxHeight,
-    maxWidth
-  } = _ref;
+const HoverMenuList = ({
+  children,
+  className,
+  dataTest = 'dhis2-analytics-hovermenulist',
+  dense = true,
+  maxHeight = 'auto',
+  maxWidth = '380px'
+}) => {
   const {
     setLastHoveredSubMenuEl
   } = (0, _HoverMenuBar.useHoverMenubarContext)();
@@ -62,12 +60,6 @@ const HoverMenuList = _ref => {
   }, [`ul.__jsx-style-dynamic-selector{position:relative;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:${_ui.colors.white};border:1px solid ${_ui.colors.grey200};border-radius:3px;box-shadow:${_ui.elevations.e300};display:inline-block;min-width:${dense ? '128' : '180'}px;max-width:${maxWidth};max-height:${maxHeight};padding:${_ui.spacers.dp4} 0;overflow:auto;list-style:none;}`])));
 };
 exports.HoverMenuList = HoverMenuList;
-HoverMenuList.defaultProps = {
-  dataTest: 'dhis2-analytics-hovermenulist',
-  maxWidth: '380px',
-  maxHeight: 'auto',
-  dense: true
-};
 HoverMenuList.propTypes = {
   /** Typically `MenuItem`, `MenuDivider`, and `MenuSectionHeader` */
   children: _propTypes.default.node,

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

@@ -11,20 +11,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _HoverMenuList = require("./HoverMenuList.js");
 var _HoverMenuListItemStyles = _interopRequireDefault(require("./HoverMenuListItem.styles.js"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const HoverMenuListItem = _ref => {
-  let {
-    onClick,
-    children,
-    icon,
-    className,
-    destructive,
-    disabled,
-    dataTest,
-    label
-  } = _ref;
+const HoverMenuListItem = ({
+  onClick,
+  children,
+  icon,
+  className,
+  destructive,
+  disabled,
+  dataTest = 'dhis2-uicore-hovermenulistitem',
+  label
+}) => {
   const ref = (0, _react.useRef)();
   const {
     onSubmenuAnchorMouseEnter,
@@ -61,9 +59,6 @@ const HoverMenuListItem = _ref => {
   }, children))));
 };
 exports.HoverMenuListItem = HoverMenuListItem;
-HoverMenuListItem.defaultProps = {
-  dataTest: 'dhis2-uicore-hovermenulistitem'
-};
 HoverMenuListItem.propTypes = {
   // Nested menu items become submenus
   children: _propTypes.default.node,

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

@@ -1,115 +1,124 @@
 "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]]);
     });
   });
 });
-function createFullMenuBarWrapper() {
-  let {
-    menuItemOnClickSpy,
-    subMenuItemOnClickSpy
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function createFullMenuBarWrapper({
+  menuItemOnClickSpy,
+  subMenuItemOnClickSpy
+} = {}) {
   return (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuDropdown, {
     label: "Menu A"
   }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, null, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {

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,52 +1,59 @@
 "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('<HoverMenuList/>', () => {
   const dataTest = 'test';
   const childNode = 'children';
-  it('renders children', () => {
-    const wrapper = (0, _enzyme.shallow)(/*#__PURE__*/_react.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__*/_react.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__*/_react.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', () => {
-    const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.HoverMenuList, {
+  test('accept a `dense` prop', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_index.HoverMenuList, {
       dense: true
-    }, /*#__PURE__*/_react.default.createElement(_index.HoverMenuListItem, {
+    }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
       label: "item 1"
-    }), /*#__PURE__*/_react.default.createElement(_index.HoverMenuListItem, {
+    }), /*#__PURE__*/_react2.default.createElement(_index.HoverMenuListItem, {
       label: "item 2"
     })));
-    expect(wrapper.find('li').first()).toHaveClassName('dense');
-    expect(wrapper.find('li').last()).toHaveClassName('dense');
+    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__*/_react.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__*/_react.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

@@ -11,28 +11,24 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _MenuButtonStyles = _interopRequireDefault(require("./MenuButton.styles.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const InterpretationsAndDetailsToggler = _ref => {
-  let {
-    onClick,
-    dataTest,
-    disabled,
-    isShowing
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: onClick,
-    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, {
-    id: _MenuButtonStyles.default.__hash
-  }, _MenuButtonStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1238484262"
-  }, ["button.jsx-1238484262{gap:8px;}"]));
-};
+const InterpretationsAndDetailsToggler = ({
+  onClick,
+  dataTest = 'dhis2-analytics-interpretationsanddetailstoggler',
+  disabled,
+  isShowing
+}) => /*#__PURE__*/_react.default.createElement("button", {
+  onClick: onClick,
+  disabled: disabled,
+  "data-test": dataTest,
+  className: "jsx-1238484262 " + `jsx-${_MenuButtonStyles.default.__hash}`
+}, 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"
+}, ["button.jsx-1238484262{gap:8px;}"]));
 exports.InterpretationsAndDetailsToggler = InterpretationsAndDetailsToggler;
-InterpretationsAndDetailsToggler.defaultProps = {
-  dataTest: 'dhis2-analytics-interpretationsanddetailstoggler'
-};
 InterpretationsAndDetailsToggler.propTypes = {
   onClick: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,