@dhis2/analytics 28.0.4 → 28.0.5

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

@@ -1,102 +1,112 @@
-import '@testing-library/jest-dom';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { HoverMenuBar, HoverMenuDropdown, HoverMenuList, HoverMenuListItem } from '../index.js';
 describe('<HoverMenuBar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuBar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(HoverMenuBar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuBar, {
+    render(/*#__PURE__*/React.createElement(HoverMenuBar, {
       dataTest: dataTest
     }, "children"));
-    expect(wrapper.find('div').prop('data-test')).toBe(dataTest);
+    expect(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.mouseOver(screen.getByText('Menu A'));
+      await user.hover(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu C'));
+      await user.click(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu A'));
+      await user.click(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu A'));
-      fireEvent.mouseOver(screen.getByText('Menu B'));
+      await user.click(screen.getByText('Menu A'));
+      await user.hover(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu B'));
-      fireEvent.mouseOver(screen.getByText('Menu C'));
+      await user.click(screen.getByText('Menu B'));
+      await user.hover(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu B'));
-      fireEvent.mouseOver(screen.getByText('Menu item B.1'));
+      await user.click(screen.getByText('Menu B'));
+      await user.hover(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]]);
-      fireEvent.mouseOver(screen.getByText('Menu item B.2'));
+      await user.hover(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu B'));
-      fireEvent.mouseOver(screen.getByText('Menu item B.2'));
+      await user.click(screen.getByText('Menu B'));
+      await user.hover(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]]);
-      fireEvent.mouseOver(screen.getByText('Menu item B.3'));
+      await user.hover(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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu A'));
+      await user.click(screen.getByText('Menu A'));
       await expectMenuItemsInDocument([['Menu item A.1', true]]);
-      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.setup();
       createFullMenuBarWrapper();
-      fireEvent.click(screen.getByText('Menu B'));
+      await user.click(screen.getByText('Menu B'));
       await expectMenuItemsInDocument([['Menu item B.1', true]]);
-      fireEvent.mouseOver(screen.getByText('Menu item B.1'));
+      await user.hover(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]]);
-      fireEvent.click(screen.getByText('Menu item B.1'));
+      await user.click(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.setup();
       const menuItemOnClickSpy = jest.fn();
       createFullMenuBarWrapper({
         menuItemOnClickSpy
       });
-      fireEvent.click(screen.getByText('Menu A'));
+      await user.click(screen.getByText('Menu A'));
       await expectMenuItemsInDocument([['Menu item A.1', true]]);
-      fireEvent.click(screen.getByText('Menu item A.1'));
+      await user.click(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.setup();
       const subMenuItemOnClickSpy = jest.fn();
       createFullMenuBarWrapper({
         subMenuItemOnClickSpy
       });
-      fireEvent.click(screen.getByText('Menu B'));
+      await user.click(screen.getByText('Menu B'));
       await expectMenuItemsInDocument([['Menu item B.1', true]]);
-      fireEvent.mouseOver(screen.getByText('Menu item B.1'));
+      await user.hover(screen.getByText('Menu item B.1'));
       await expectMenuItemsInDocument([['Menu item B.1.1', true]]);
-      fireEvent.click(screen.getByText('Menu item B.1.1'));
+      await user.click(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/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { HoverMenuDropdown } from '../index.js';
 describe('<HoverMenuDropdown/>', () => {
@@ -6,20 +6,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 = shallow(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    render(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
       label: "test dropdown",
       dataTest: dataTest
     }, "children"));
-    expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `className` prop', () => {
+  test('accepts a `className` prop', () => {
     const className = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
+    render(/*#__PURE__*/React.createElement(HoverMenuDropdown, {
       label: "test dropdown",
       className: className
     }, "children"));
-    expect(wrapper.find('button')).toHaveClassName(className);
+    expect(screen.getByRole('button')).toHaveClass(className);
   });
 });

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

@@ -1,29 +1,28 @@
-import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { shallow } from 'enzyme';
 import React from 'react';
 import { HoverMenuList, HoverMenuListItem } from '../index.js';
 describe('<HoverMenuList/>', () => {
   const dataTest = 'test';
   const childNode = 'children';
-  it('renders children', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+  test('renders children', () => {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accept a `className` prop', () => {
+  test('accept a `className` prop', () => {
     const className = 'className';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, {
+      dataTest: dataTest,
       className: className
     }, childNode));
-    expect(wrapper.find('ul')).toHaveClassName(className);
+    expect(screen.getByTestId(dataTest)).toHaveClass(className);
   });
-  it('accepts a `dataTest` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+  test('accepts a `dataTest` prop', () => {
+    render(/*#__PURE__*/React.createElement(HoverMenuList, {
       dataTest: dataTest
     }, childNode));
-    expect(wrapper.find('ul').prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accept a `dense` prop', () => {
+  test('accept a `dense` prop', () => {
     render(/*#__PURE__*/React.createElement(HoverMenuList, {
       dense: true
     }, /*#__PURE__*/React.createElement(HoverMenuListItem, {
@@ -34,18 +33,24 @@ describe('<HoverMenuList/>', () => {
     expect(screen.getByText('item 1').closest('li')).toHaveClass('dense');
     expect(screen.getByText('item 2').closest('li')).toHaveClass('dense');
   });
-  it('accept a `maxHeight` prop', () => {
+  test('accept a `maxHeight` prop', () => {
     const maxHeight = '100000px';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(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 = shallow(/*#__PURE__*/React.createElement(HoverMenuList, {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(HoverMenuList, {
+      dataTest: dataTest,
       maxWidth: maxWidth
     }, childNode));
-    expect(wrapper.find('style').text()).toContain(`max-width: ${maxWidth}`);
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { HoverMenuListItem } from '../index.js';
 describe('<HoverMenuListItem/>', () => {
@@ -7,36 +7,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 = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
       className: className
     }));
-    expect(wrapper.find('li')).toHaveClassName(className);
+    expect(screen.getByTestId('dhis2-uicore-hovermenulistitem')).toHaveClass(className);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
       dataTest: dataTest
     }));
-    expect(wrapper.find('li').prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `destructive` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+  test('accepts a `destructive` prop', () => {
+    const dataTest = 'test';
+    render(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+      dataTest: dataTest,
       destructive: true
     }));
-    expect(wrapper.find('li')).toHaveClassName('destructive');
+    expect(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.createElement("span", {
       id: "testicon"
     }, iconText);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(HoverMenuListItem, {
+    render(/*#__PURE__*/React.createElement(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 = screen.getByTestId(dataTest).firstChild;
+    expect(iconWrapperEl).toBeInTheDocument();
+    expect(iconWrapperEl).toHaveClass('icon');
+    const iconEl = iconWrapperEl.closest('span');
+    expect(iconEl).toHaveTextContent(iconText);
   });
 });

package/build/es/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/es/components/Toolbar/InterpretationsAndDetailsToggler.js

@@ -14,7 +14,9 @@ export const InterpretationsAndDetailsToggler = ({
   disabled: disabled,
   "data-test": dataTest,
   className: "jsx-1238484262 " + `jsx-${menuButtonStyles.__hash}`
-}, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, null) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
+}, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, {
+  dataTest: `${dataTest}-showing`
+}) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: menuButtonStyles.__hash
 }, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "1238484262"

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

@@ -1,42 +1,43 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { InterpretationsAndDetailsToggler } from '../index.js';
 describe('<InterpretationsAndDetailsToggler/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+  test('accepts a `disabled` prop', () => {
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `isShowing` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+  test('accepts an `isShowing` prop', () => {
+    const showingDataTest = 'dhis2-analytics-interpretationsanddetailstoggler-showing';
+    render(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
       onClick: noop
     }));
-    const wrapperWithIsShowing = shallow(/*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {
+    expect(screen.queryByTestId(showingDataTest)).not.toBeInTheDocument();
+    render(/*#__PURE__*/React.createElement(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(screen.getByTestId(showingDataTest)).toBeInTheDocument();
   });
 });

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

@@ -1,17 +1,17 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Toolbar } from '../index.js';
 describe('<Toolbar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Toolbar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(Toolbar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(Toolbar, {
+    render(/*#__PURE__*/React.createElement(Toolbar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
 });

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

@@ -1,23 +1,26 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { ToolbarSidebar } from '../index.js';
 describe('<ToolbarSidebar/>', () => {
-  it('renders children', () => {
+  test('renders children', () => {
     const childNode = 'text node';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, null, childNode));
-    expect(wrapper.containsMatchingElement(childNode)).toBe(true);
+    render(/*#__PURE__*/React.createElement(ToolbarSidebar, null, childNode));
+    expect(screen.getByText(childNode)).toBeInTheDocument();
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, {
+    render(/*#__PURE__*/React.createElement(ToolbarSidebar, {
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `isHidden` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ToolbarSidebar, {
+  test('accepts a `isHidden` prop', () => {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(ToolbarSidebar, {
       isHidden: true
     }));
-    expect(wrapper.find('div').hasClass('isHidden')).toEqual(true);
+    const divEl = container.querySelector('div');
+    expect(divEl).toHaveClass('isHidden');
   });
 });

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

@@ -1,36 +1,38 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { UpdateButton } from '../index.js';
 describe('<UpdateButton/>', () => {
   const noop = () => {};
-  it('accepts an `onClick` prop', () => {
+  test('accepts an `onClick` prop', async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: onClick
     }));
-    wrapper.simulate('click');
+    await user.click(screen.getByRole('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('accepts a `dataTest` prop', () => {
+  test('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: noop,
       dataTest: dataTest
     }));
-    expect(wrapper.prop('data-test')).toBe(dataTest);
+    expect(screen.getByTestId(dataTest)).toBeInTheDocument();
   });
-  it('accepts a `disabled` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+  test('accepts a `disabled` prop', () => {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       disabled: true,
       onClick: noop
     }));
-    expect(wrapper.find('button').prop('disabled')).toEqual(true);
+    expect(screen.getByRole('button')).toBeDisabled();
   });
-  it('accepts an `loading` prop', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(UpdateButton, {
+  test('accepts an `loading` prop', () => {
+    render(/*#__PURE__*/React.createElement(UpdateButton, {
       onClick: noop,
       loading: true
     }));
-    expect(wrapper.find('CircularLoader')).toHaveLength(1);
+    expect(screen.getByTestId('dhis2-uicore-circularloader')).toBeInTheDocument();
   });
 });

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

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