@dhis2/analytics 28.0.4 → 28.1.0

package/build/es/components/OpenFileDialog/VisTypeFilter.js

@@ -2,9 +2,46 @@ import i18n from '@dhis2/d2-i18n';
 import { SingleSelect, colors } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { getDisplayNameByVisType, visTypeIcons } from '../../modules/visTypes.js';
+import { getDisplayNameByVisType, visTypeIcons, VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, VIS_TYPE_PIVOT_TABLE } from '../../modules/visTypes.js';
 import { VisTypeIcon } from '../VisTypeIcon.js';
 import { CustomSelectOption } from './CustomSelectOption.js';
+export const formatTypeFilter = (filterVisTypes, visType) => {
+  const defaultFilterTypes = [];
+  let defaultTypeFilter;
+  if (Array.isArray(filterVisTypes)) {
+    defaultFilterTypes.push(...filterVisTypes.filter(({
+      type,
+      disabled
+    }) => !(disabled || [VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS].includes(type))).map(({
+      type
+    }) => type));
+    if (defaultFilterTypes.length) {
+      defaultTypeFilter = `type:in:[${defaultFilterTypes.join(',')}]`;
+    }
+  }
+  switch (visType) {
+    case VIS_TYPE_GROUP_ALL:
+      {
+        return defaultTypeFilter;
+      }
+    case VIS_TYPE_GROUP_CHARTS:
+      {
+        if (defaultFilterTypes.length) {
+          return `type:in:[${defaultFilterTypes.filter(item => item !== VIS_TYPE_PIVOT_TABLE).join(',')}]`;
+        } else {
+          return `type:!eq:${VIS_TYPE_PIVOT_TABLE}`;
+        }
+      }
+    default:
+      {
+        if (visType) {
+          return `type:eq:${visType}`;
+        } else if (defaultTypeFilter) {
+          return defaultTypeFilter;
+        }
+      }
+  }
+};
 export const VisTypeFilter = ({
   visTypes,
   selected,

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

@@ -0,0 +1,49 @@
+import { VIS_TYPE_COLUMN, VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, VIS_TYPE_LINE_LIST, VIS_TYPE_PIVOT_TABLE } from '../../../modules/visTypes.js';
+import { CREATED_BY_ALL, CREATED_BY_ALL_BUT_CURRENT_USER, CREATED_BY_CURRENT_USER } from '../CreatedByFilter.js';
+import { formatFilters } from '../OpenFileDialog.js';
+describe('OpenFileDialog - formatFilters', () => {
+  const currentUser = {
+    id: 'test-user'
+  };
+  const createdByTestCases = [[CREATED_BY_ALL, []], [CREATED_BY_CURRENT_USER, [`user.id:eq:${currentUser.id}`]], [CREATED_BY_ALL_BUT_CURRENT_USER, [`user.id:!eq:${currentUser.id}`]]];
+  test.each(createdByTestCases)('formats the createdBy filter given %p', (createdBy, expected) => expect(formatFilters(currentUser, {
+    createdBy
+  })).toEqual(expected));
+  test('formats the searchTerm filter', () => {
+    const testSearchTerm = 'test search term';
+    expect(formatFilters(currentUser, {
+      searchTerm: testSearchTerm
+    })).toEqual([`identifiable:token:${testSearchTerm}`]);
+  });
+  const typeTestCases = [
+  // no type filter when no visType nor filterVisTypes
+  [undefined, undefined, []],
+  // no type filter because VIS_TYPE_GROUP_ALL is selected
+  [undefined, VIS_TYPE_GROUP_ALL, []],
+  // only VIS_TYPE_PIVOT_TABLE ignored because no filterVisTypes is passed and VIS_TYPE_GROUP_CHARTS is selected
+  [undefined, VIS_TYPE_GROUP_CHARTS, [`type:!eq:${VIS_TYPE_PIVOT_TABLE}`]],
+  // no filterVisTypes and VIS_TYPE_PIVOT_TABLE selected
+  [undefined, VIS_TYPE_PIVOT_TABLE, [`type:eq:${VIS_TYPE_PIVOT_TABLE}`]],
+  // group types are ignored
+  [[VIS_TYPE_PIVOT_TABLE, VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS], VIS_TYPE_GROUP_ALL, [`type:in:[${VIS_TYPE_PIVOT_TABLE}]`]],
+  // VIS_TYPE_PIVOT_TABLE is ignored because VIS_TYPE_GROUP_CHARTS is selected
+  [[VIS_TYPE_PIVOT_TABLE, VIS_TYPE_COLUMN, VIS_TYPE_GROUP_CHARTS], VIS_TYPE_GROUP_CHARTS, [`type:in:[${VIS_TYPE_COLUMN}]`]],
+  // when filterVisTypes is passed the default type filter only include those
+  [[VIS_TYPE_PIVOT_TABLE], '', [`type:in:[${VIS_TYPE_PIVOT_TABLE}]`]], [[VIS_TYPE_LINE_LIST, VIS_TYPE_PIVOT_TABLE], '', [`type:in:[${VIS_TYPE_LINE_LIST},${VIS_TYPE_PIVOT_TABLE}]`]]];
+  test.each(typeTestCases)('formats the type filter given %p and %p', (types, visType, expected) => expect(formatFilters(currentUser, {
+    visType
+  }, types === null || types === void 0 ? void 0 : types.map(type => ({
+    type
+  })))).toEqual(expected));
+  test('combined filters', () => {
+    expect(formatFilters(currentUser, {
+      createdBy: CREATED_BY_CURRENT_USER,
+      searchTerm: 'test',
+      visType: VIS_TYPE_GROUP_ALL
+    }, [{
+      type: VIS_TYPE_LINE_LIST
+    }, {
+      type: VIS_TYPE_PIVOT_TABLE
+    }])).toEqual([`identifiable:token:test`, `user.id:eq:${currentUser.id}`, `type:in:[${VIS_TYPE_LINE_LIST},${VIS_TYPE_PIVOT_TABLE}]`]);
+  });
+});

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

@@ -1,55 +1,89 @@
-import { shallow } from 'enzyme';
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import OrgUnitDimension from '../OrgUnitDimension.js';
-describe('The OrgUnitDimension component', () => {
-  let props;
-  let shallowOrgUnitDimension;
-  const getWrapper = () => {
-    if (!shallowOrgUnitDimension) {
-      shallowOrgUnitDimension = shallow(/*#__PURE__*/React.createElement(OrgUnitDimension, props));
-    }
-    return shallowOrgUnitDimension;
+jest.mock('@dhis2-ui/organisation-unit-tree', () => {
+  const lib = jest.requireActual('@dhis2-ui/organisation-unit-tree');
+  return {
+    ...lib,
+    OrganisationUnitTree: () => /*#__PURE__*/React.createElement("div", null, "Org unit tree component mock")
   };
-  beforeEach(() => {
-    props = {
-      roots: [],
-      selected: [],
-      onSelect: jest.fn(),
-      hideGroupSelect: false,
-      hideLevelSelect: false,
-      hideUserOrgUnits: false,
-      warning: ''
-    };
-    shallowOrgUnitDimension = undefined;
-  });
-  it('matches the snapshot', () => {
-    const wrapper = getWrapper();
-    expect(wrapper).toMatchSnapshot();
+});
+describe('OrgUnitDimension', () => {
+  const onSelect = jest.fn();
+  const props = {
+    roots: [],
+    selected: [],
+    onSelect: onSelect,
+    hideGroupSelect: false,
+    hideLevelSelect: false,
+    hideUserOrgUnits: false,
+    warning: ''
+  };
+  const renderOrgUnitDimension = props => render(/*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: {
+      organisationUnitLevels: {
+        organisationUnitLevels: []
+      },
+      organisationUnitGroups: {
+        organisationUnitGroups: []
+      }
+    }
+  }, /*#__PURE__*/React.createElement(OrgUnitDimension, props)));
+  beforeEach(() => onSelect.mockClear());
+  test('OrgUnitDimension is rendered correctly', async () => {
+    renderOrgUnitDimension(props);
+
+    // wait for the component to be loaded, here done by testing that the OrganisationUnitTree component is loaded
+    // avoid the act warning due to the snapshot being taken before async code is run
+    await screen.findByText('Org unit tree component mock');
+
+    // the top user org unit checkboxes are rendered
+    expect(screen.getByLabelText('User organisation unit')).toBeInTheDocument();
+    expect(screen.getByLabelText('User sub-units')).toBeInTheDocument();
+    expect(screen.getByLabelText('User sub-x2-units')).toBeInTheDocument();
+
+    // the OrganisationUnitTree component is rendered
+    expect(screen.getByText('Org unit tree component mock')).toBeInTheDocument();
+
+    // the level selector is rendered
+    expect(screen.getByText('Select a level')).toBeInTheDocument();
+
+    // the group selector is rendered
+    expect(screen.getByText('Select a group')).toBeInTheDocument();
+
+    // the Deselect all button is rendered
+    expect(screen.getByRole('button', {
+      name: 'Deselect all'
+    })).toBeInTheDocument();
   });
-  it('calls onSelect when an organisation unit is selected', () => {
-    const wrapper = getWrapper();
-    const orgUnitTree = wrapper.find('OrganisationUnitTree');
-    const testOrgUnit = {
-      id: 'testId',
-      path: '/testPath',
-      displayName: 'Test Org Unit',
-      checked: true
-    };
-    orgUnitTree.props().onChange(testOrgUnit);
-    expect(props.onSelect).toHaveBeenCalledWith({
+  test('OrgUnitDimension calls onSelect when an organisation unit is selected', async () => {
+    const user = userEvent.setup();
+    renderOrgUnitDimension(props);
+    await user.click(screen.getByText('User organisation unit'));
+    expect(onSelect).toHaveBeenCalledWith({
       dimensionId: 'ou',
       items: [{
-        id: 'testId',
-        path: '/testPath',
-        name: 'Test Org Unit'
+        id: 'USER_ORGUNIT',
+        displayName: 'User organisation unit'
       }]
     });
   });
-  it('calls onSelect with an empty array when selection is cleared', () => {
-    const wrapper = getWrapper();
-    const deselectButton = wrapper.find('Button[onClick]');
-    deselectButton.simulate('click');
-    expect(props.onSelect).toHaveBeenCalledWith({
+  test('OrgUnitDimension calls onSelect with an empty array when selection is cleared', async () => {
+    const user = userEvent.setup();
+    renderOrgUnitDimension({
+      ...props,
+      // make some selection to enable the deselect all button
+      selected: [{
+        id: 'USER_ORGUNIT_CHILDREN',
+        name: 'User sub-units'
+      }]
+    });
+    await user.click(screen.getByRole('button', {
+      name: 'Deselect all'
+    }));
+    expect(onSelect).toHaveBeenLastCalledWith({
       dimensionId: 'ou',
       items: []
     });

package/build/es/components/PeriodDimension/FixedPeriodFilter.js

@@ -18,6 +18,7 @@ const FixedPeriodFilter = ({
 }) => {
   const onlyAllowedTypeIsSelected = Array.isArray(allowedPeriodTypes) && allowedPeriodTypes.length === 1 && allowedPeriodTypes[0] === currentPeriodType;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
     className: `jsx-${styles.__hash}` + " " + "leftSection"
   }, /*#__PURE__*/React.createElement(SingleSelectField, {
     label: i18n.t('Period type'),

package/build/es/components/PeriodDimension/RelativePeriodFilter.js

@@ -12,6 +12,7 @@ const RelativePeriodFilter = ({
   dataTest,
   excludedPeriodTypes
 }) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
   className: `jsx-${styles.__hash}` + " " + "leftSection"
 }, /*#__PURE__*/React.createElement(SingleSelectField, {
   label: i18n.t('Period type'),
@@ -21,12 +22,12 @@ const RelativePeriodFilter = ({
   dense: true,
   selected: currentFilter,
   className: "filterElement",
-  dataTest: dataTest
+  dataTest: `${dataTest}-period-type`
 }, filterPeriodTypesById(getRelativePeriodsOptions(), excludedPeriodTypes).map(option => /*#__PURE__*/React.createElement(SingleSelectOption, {
   key: option.id,
   value: option.id,
   label: option.name,
-  dataTest: `${dataTest}-option-${option.id}`
+  dataTest: `${dataTest}-period-type-option-${option.id}`
 }))), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: styles.__hash
 }, styles));

package/build/es/components/PeriodDimension/__tests__/FixedPeriodSingleSelect.spec.js

@@ -1,24 +1,17 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import FixedPeriodSelect from '../FixedPeriodSelect.js';
-describe('The Fixed Period Single Select component', () => {
-  let props;
-  let shallowFixedPeriodSelect;
-  const getWrapper = () => {
-    if (!shallowFixedPeriodSelect) {
-      shallowFixedPeriodSelect = shallow(/*#__PURE__*/React.createElement(FixedPeriodSelect, props));
-    }
-    return shallowFixedPeriodSelect;
+test('FixedPeriodSelect renders correctly', () => {
+  const props = {
+    value: '201405',
+    onChange: () => {}
   };
-  beforeEach(() => {
-    props = {
-      value: '201405',
-      onChange: () => {}
-    };
-    shallowFixedPeriodSelect = undefined;
-  });
-  it('matches the snapshot', () => {
-    const wrapper = getWrapper();
-    expect(wrapper).toMatchSnapshot();
-  });
+  render(/*#__PURE__*/React.createElement(FixedPeriodSelect, props));
+  expect(screen.getByTestId('dhis2-analytics-fixedperiodselect')).toBeInTheDocument();
+  expect(screen.getByText('Period type')).toBeInTheDocument();
+  expect(screen.getByText('Monthly')).toBeInTheDocument();
+  expect(screen.getByText('Year')).toBeInTheDocument();
+  const yearSelectEl = screen.getByPlaceholderText('Select year');
+  expect(yearSelectEl).toBeInTheDocument();
+  expect(yearSelectEl.value).toEqual('2014');
 });

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

@@ -1,4 +1,5 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import PeriodDimension from '../PeriodDimension.js';
 jest.mock('@dhis2/app-runtime', () => ({
@@ -13,26 +14,29 @@ jest.mock('@dhis2/app-runtime', () => ({
     }
   })
 }));
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn()
+}));
 afterEach(jest.clearAllMocks);
-describe('The Period Dimension component', () => {
-  let props;
-  let shallowPeriodDimension;
-  const getWrapper = () => {
-    if (!shallowPeriodDimension) {
-      shallowPeriodDimension = shallow(/*#__PURE__*/React.createElement(PeriodDimension, props));
-    }
-    return shallowPeriodDimension;
-  };
-  beforeEach(() => {
-    props = {
-      selectedPeriods: [],
-      onSelect: jest.fn(),
-      rightFooter: /*#__PURE__*/React.createElement(React.Fragment, null)
-    };
-    shallowPeriodDimension = undefined;
-  });
-  it('matches the snapshot', () => {
-    const wrapper = getWrapper();
-    expect(wrapper).toMatchSnapshot();
-  });
+const props = {
+  selectedPeriods: [],
+  onSelect: jest.fn(),
+  rightFooter: /*#__PURE__*/React.createElement(React.Fragment, null)
+};
+test('PeriodDimension renders the tabs for relative/fixed with relative pre-selected', () => {
+  render(/*#__PURE__*/React.createElement(PeriodDimension, props));
+  expect(screen.getByText('Relative periods')).toBeInTheDocument();
+  expect(screen.getByTestId('period-dimension-relative-period-filter')).toBeInTheDocument();
+  expect(screen.getByText('Fixed periods')).toBeInTheDocument();
+});
+test('PeriodDimension can toggle between relative and fixed period tab', async () => {
+  const user = userEvent.setup();
+  render(/*#__PURE__*/React.createElement(PeriodDimension, props));
+  expect(screen.getByText('Relative periods')).toBeInTheDocument();
+  const fixedPeriodButton = screen.getByText('Fixed periods');
+  expect(fixedPeriodButton).toBeInTheDocument();
+  await user.click(fixedPeriodButton);
+  expect(screen.getByTestId('period-dimension-fixed-period-filter')).toBeInTheDocument();
 });

package/build/es/components/PivotTable/PivotTableColumnHeaderCell.js

@@ -52,6 +52,9 @@ export const PivotTableColumnHeaderCell = ({
         className: `jsx-${cellStyle.__hash}` + " " + "column-header-inner"
       }, /*#__PURE__*/React.createElement("span", {
         "data-test": "visualization-column-header",
+        style: {
+          ...header.style
+        },
         className: `jsx-${cellStyle.__hash}` + " " + "column-header-label"
       }, header.label), isSortable ? /*#__PURE__*/React.createElement(PivotTableSortIcon, {
         index: index,

package/build/es/components/PivotTable/PivotTableRowHeaderCell.js

@@ -30,7 +30,8 @@ export const PivotTableRowHeaderCell = ({
         height,
         left: rowLevel > 0 ?
         // calculate the width of all row header cells on the left of current cell
-        engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0
+        engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0,
+        ...header.style
       },
       dataTest: "visualization-row-header"
     }, header.label)

package/build/es/components/RichText/Editor/__tests__/Editor.spec.js

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Editor } from '../Editor.js';
 const mockConvertCtrlKey = jest.fn();
@@ -20,16 +20,15 @@ describe('RichText: Editor component', () => {
   const renderComponent = props => {
     return render(/*#__PURE__*/React.createElement(Editor, props));
   };
-  it('renders a result', () => {
+  test('renders a result', () => {
     renderComponent(componentProps);
     expect(screen.getByTestId('@dhis2-analytics-richtexteditor')).toBeVisible();
   });
-  it('calls convertCtrlKey on keydown', () => {
+  test('calls convertCtrlKey on keydown', async () => {
+    const user = userEvent.setup();
     renderComponent(componentProps);
-    fireEvent.keyDown(screen.getByRole('textbox'), {
-      key: 'A',
-      code: 'keyA'
-    });
+    await user.click(screen.getByRole('textbox'));
+    await user.keyboard('A');
     expect(mockConvertCtrlKey).toHaveBeenCalled();
   });
 });

package/build/es/components/RichText/Parser/__tests__/MdParser.spec.js

@@ -1,7 +1,7 @@
 import { MdParser } from '../MdParser.js';
 const Parser = new MdParser();
 describe('MdParser class', () => {
-  it('converts text into HTML', () => {
+  test('converts text into HTML', () => {
     const inlineTests = [['_italic_', '<em>italic</em>'], ['*bold*', '<strong>bold</strong>'], ['_ not italic because there is a space _', '_ not italic because there is a space _'], [':-)', '<span>\u{1F642}</span>'], [':)', '<span>\u{1F642}</span>'], [':-(', '<span>\u{1F641}</span>'], [':(', '<span>\u{1F641}</span>'], [':+1', '<span>\u{1F44D}</span>'], [':-1', '<span>\u{1F44E}</span>'], ['mixed _italic_ *bold* and :+1', 'mixed <em>italic</em> <strong>bold</strong> and <span>\u{1F44D}</span>'], ['_italic with * inside_', '<em>italic with * inside</em>'], ['*bold with _ inside*', '<strong>bold with _ inside</strong>'],
     // italic marker followed by : should work
     ['_italic_:', '<em>italic</em>:'], ['_italic_: some text, *bold*: some other text', '<em>italic</em>: some text, <strong>bold</strong>: some other text'],

package/build/es/components/RichText/Parser/__tests__/Parser.spec.js

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Parser } from '../Parser.js';
 jest.mock('../MdParser.js', () => ({
@@ -9,30 +9,29 @@ jest.mock('../MdParser.js', () => ({
   })
 }));
 describe('RichText: Parser component', () => {
-  let richTextParser;
-  const defaultProps = {
-    style: {
+  test('should have rendered a result with the style prop', () => {
+    const style = {
       color: 'blue',
       whiteSpace: 'pre-line'
-    }
-  };
-  const renderComponent = (props, text) => {
-    return shallow(/*#__PURE__*/React.createElement(Parser, props, text));
-  };
-  it('should have rendered a result', () => {
-    richTextParser = renderComponent({}, 'test');
-    expect(richTextParser).toHaveLength(1);
-  });
-  it('should have rendered a result with the style prop', () => {
-    richTextParser = renderComponent(defaultProps, 'test prop');
-    expect(richTextParser.props().style).toEqual(defaultProps.style);
+    };
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(Parser, {
+      style: style
+    }, 'test prop'));
+    const divEl = container.querySelector('div');
+    expect(divEl.style.color).toBe(style.color);
+    expect(divEl.style.whiteSpace).toBe(style.whiteSpace);
   });
-  it('should have rendered content', () => {
-    richTextParser = renderComponent({}, 'plain text');
-    expect(richTextParser.html()).toEqual('<div>converted text</div>');
+  test('should have rendered content', () => {
+    render(/*#__PURE__*/React.createElement(Parser, null, 'plain text'));
+    expect(screen.getByText('converted text')).toBeInTheDocument();
   });
-  it('should return null if no children is passed', () => {
-    richTextParser = renderComponent({}, undefined);
-    expect(richTextParser.html()).toBe(null);
+  test('should return null if no children is passed', () => {
+    const {
+      container
+    } = render(/*#__PURE__*/React.createElement(Parser, null));
+    const divEl = container.querySelector('div');
+    expect(divEl).toBe(null);
   });
 });

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]]);
     });