@dhis2/analytics 28.0.4 → 28.1.0

package/build/cjs/components/OpenFileDialog/OpenFileDialog.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.OpenFileDialog = void 0;
+exports.formatFilters = exports.default = exports.OpenFileDialog = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _appRuntime = require("@dhis2/app-runtime");
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
@@ -11,7 +11,6 @@ var _ui = require("@dhis2/ui");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _visTypes = require("../../modules/visTypes.js");
 var _CreatedByFilter = require("./CreatedByFilter.js");
 var _FileList = require("./FileList.js");
 var _NameFilter = require("./NameFilter.js");
@@ -44,6 +43,16 @@ const getQuery = type => ({
     }
   }
 });
+const formatFilters = (currentUser, filters, filterVisTypes) => {
+  const queryFilters = [];
+  filters.searchTerm && queryFilters.push(`identifiable:token:${filters.searchTerm}`);
+  const userFilter = (0, _CreatedByFilter.formatUserFilter)(filters.createdBy, currentUser.id);
+  userFilter && queryFilters.push(userFilter);
+  const typeFilter = (0, _VisTypeFilter.formatTypeFilter)(filterVisTypes, filters.visType);
+  typeFilter && queryFilters.push(typeFilter);
+  return queryFilters;
+};
+exports.formatFilters = formatFilters;
 const OpenFileDialog = ({
   type,
   open,
@@ -76,36 +85,7 @@ const OpenFileDialog = ({
   });
   const [nameFilterValue, setNameFilterValue] = (0, _react.useState)(defaultFilters.searchTerm);
   const [searchTimeout, setSearchTimeout] = (0, _react.useState)(null);
-  const formatFilters = (0, _react.useCallback)(() => {
-    const queryFilters = [];
-    switch (filters.createdBy) {
-      case _CreatedByFilter.CREATED_BY_ALL_BUT_CURRENT_USER:
-        queryFilters.push(`user.id:!eq:${currentUser.id}`);
-        break;
-      case _CreatedByFilter.CREATED_BY_CURRENT_USER:
-        queryFilters.push(`user.id:eq:${currentUser.id}`);
-        break;
-      case _CreatedByFilter.CREATED_BY_ALL:
-      default:
-        break;
-    }
-    if (filters.visType) {
-      switch (filters.visType) {
-        case _visTypes.VIS_TYPE_GROUP_ALL:
-          break;
-        case _visTypes.VIS_TYPE_GROUP_CHARTS:
-          queryFilters.push('type:!eq:PIVOT_TABLE');
-          break;
-        default:
-          queryFilters.push(`type:eq:${filters.visType}`);
-          break;
-      }
-    }
-    if (filters.searchTerm) {
-      queryFilters.push(`identifiable:token:${filters.searchTerm}`);
-    }
-    return queryFilters;
-  }, [currentUser, filters]);
+  const formatFiltersCb = (0, _react.useCallback)(() => formatFilters(currentUser, filters, filterVisTypes), [currentUser, filters, filterVisTypes]);
   const formatSortDirection = (0, _react.useCallback)(() => {
     if (sortField === 'displayName' && sortDirection !== 'default') {
       return `i${sortDirection}`;
@@ -150,10 +130,10 @@ const OpenFileDialog = ({
         page,
         sortField,
         sortDirection: formatSortDirection(),
-        filters: formatFilters()
+        filters: formatFiltersCb()
       });
     }
-  }, [open, page, sortField, filters, refetch, formatFilters, formatSortDirection]);
+  }, [open, page, sortField, filters, refetch, formatFiltersCb, formatSortDirection]);
   const headers = [{
     field: 'displayName',
     label: _d2I18n.default.t('Name'),

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VisTypeFilter = void 0;
+exports.formatTypeFilter = exports.default = exports.VisTypeFilter = void 0;
 var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -12,6 +12,44 @@ var _visTypes = require("../../modules/visTypes.js");
 var _VisTypeIcon = require("../VisTypeIcon.js");
 var _CustomSelectOption = require("./CustomSelectOption.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const formatTypeFilter = (filterVisTypes, visType) => {
+  const defaultFilterTypes = [];
+  let defaultTypeFilter;
+  if (Array.isArray(filterVisTypes)) {
+    defaultFilterTypes.push(...filterVisTypes.filter(({
+      type,
+      disabled
+    }) => !(disabled || [_visTypes.VIS_TYPE_GROUP_ALL, _visTypes.VIS_TYPE_GROUP_CHARTS].includes(type))).map(({
+      type
+    }) => type));
+    if (defaultFilterTypes.length) {
+      defaultTypeFilter = `type:in:[${defaultFilterTypes.join(',')}]`;
+    }
+  }
+  switch (visType) {
+    case _visTypes.VIS_TYPE_GROUP_ALL:
+      {
+        return defaultTypeFilter;
+      }
+    case _visTypes.VIS_TYPE_GROUP_CHARTS:
+      {
+        if (defaultFilterTypes.length) {
+          return `type:in:[${defaultFilterTypes.filter(item => item !== _visTypes.VIS_TYPE_PIVOT_TABLE).join(',')}]`;
+        } else {
+          return `type:!eq:${_visTypes.VIS_TYPE_PIVOT_TABLE}`;
+        }
+      }
+    default:
+      {
+        if (visType) {
+          return `type:eq:${visType}`;
+        } else if (defaultTypeFilter) {
+          return defaultTypeFilter;
+        }
+      }
+  }
+};
+exports.formatTypeFilter = formatTypeFilter;
 const VisTypeFilter = ({
   visTypes,
   selected,

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

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

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

@@ -1,58 +1,92 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _appRuntime = require("@dhis2/app-runtime");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _react2 = _interopRequireDefault(require("react"));
 var _OrgUnitDimension = _interopRequireDefault(require("../OrgUnitDimension.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-describe('The OrgUnitDimension component', () => {
-  let props;
-  let shallowOrgUnitDimension;
-  const getWrapper = () => {
-    if (!shallowOrgUnitDimension) {
-      shallowOrgUnitDimension = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_OrgUnitDimension.default, props));
-    }
-    return shallowOrgUnitDimension;
+jest.mock('@dhis2-ui/organisation-unit-tree', () => {
+  const lib = jest.requireActual('@dhis2-ui/organisation-unit-tree');
+  return {
+    ...lib,
+    OrganisationUnitTree: () => /*#__PURE__*/_react2.default.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 => (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+    data: {
+      organisationUnitLevels: {
+        organisationUnitLevels: []
+      },
+      organisationUnitGroups: {
+        organisationUnitGroups: []
+      }
+    }
+  }, /*#__PURE__*/_react2.default.createElement(_OrgUnitDimension.default, 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 _react.screen.findByText('Org unit tree component mock');
+
+    // the top user org unit checkboxes are rendered
+    expect(_react.screen.getByLabelText('User organisation unit')).toBeInTheDocument();
+    expect(_react.screen.getByLabelText('User sub-units')).toBeInTheDocument();
+    expect(_react.screen.getByLabelText('User sub-x2-units')).toBeInTheDocument();
+
+    // the OrganisationUnitTree component is rendered
+    expect(_react.screen.getByText('Org unit tree component mock')).toBeInTheDocument();
+
+    // the level selector is rendered
+    expect(_react.screen.getByText('Select a level')).toBeInTheDocument();
+
+    // the group selector is rendered
+    expect(_react.screen.getByText('Select a group')).toBeInTheDocument();
+
+    // the Deselect all button is rendered
+    expect(_react.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.default.setup();
+    renderOrgUnitDimension(props);
+    await user.click(_react.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.default.setup();
+    renderOrgUnitDimension({
+      ...props,
+      // make some selection to enable the deselect all button
+      selected: [{
+        id: 'USER_ORGUNIT_CHILDREN',
+        name: 'User sub-units'
+      }]
+    });
+    await user.click(_react.screen.getByRole('button', {
+      name: 'Deselect all'
+    }));
+    expect(onSelect).toHaveBeenLastCalledWith({
       dimensionId: 'ou',
       items: []
     });

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

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

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

@@ -19,6 +19,7 @@ const RelativePeriodFilter = ({
   dataTest,
   excludedPeriodTypes
 }) => /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest,
   className: `jsx-${_PeriodFilterStyle.default.__hash}` + " " + "leftSection"
 }, /*#__PURE__*/_react.default.createElement(_ui.SingleSelectField, {
   label: _index.default.t('Period type'),
@@ -28,12 +29,12 @@ const RelativePeriodFilter = ({
   dense: true,
   selected: currentFilter,
   className: "filterElement",
-  dataTest: dataTest
+  dataTest: `${dataTest}-period-type`
 }, (0, _index2.filterPeriodTypesById)((0, _relativePeriods.getRelativePeriodsOptions)(), excludedPeriodTypes).map(option => /*#__PURE__*/_react.default.createElement(_ui.SingleSelectOption, {
   key: option.id,
   value: option.id,
   label: option.name,
-  dataTest: `${dataTest}-option-${option.id}`
+  dataTest: `${dataTest}-period-type-option-${option.id}`
 }))), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: _PeriodFilterStyle.default.__hash
 }, _PeriodFilterStyle.default));

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

@@ -1,27 +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 _FixedPeriodSelect = _interopRequireDefault(require("../FixedPeriodSelect.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-describe('The Fixed Period Single Select component', () => {
-  let props;
-  let shallowFixedPeriodSelect;
-  const getWrapper = () => {
-    if (!shallowFixedPeriodSelect) {
-      shallowFixedPeriodSelect = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_FixedPeriodSelect.default, 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();
-  });
+  (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_FixedPeriodSelect.default, props));
+  expect(_react.screen.getByTestId('dhis2-analytics-fixedperiodselect')).toBeInTheDocument();
+  expect(_react.screen.getByText('Period type')).toBeInTheDocument();
+  expect(_react.screen.getByText('Monthly')).toBeInTheDocument();
+  expect(_react.screen.getByText('Year')).toBeInTheDocument();
+  const yearSelectEl = _react.screen.getByPlaceholderText('Select year');
+  expect(yearSelectEl).toBeInTheDocument();
+  expect(yearSelectEl.value).toEqual('2014');
 });

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

@@ -1,7 +1,8 @@
 "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 _PeriodDimension = _interopRequireDefault(require("../PeriodDimension.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 jest.mock('@dhis2/app-runtime', () => ({
@@ -16,26 +17,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 = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_PeriodDimension.default, props));
-    }
-    return shallowPeriodDimension;
-  };
-  beforeEach(() => {
-    props = {
-      selectedPeriods: [],
-      onSelect: jest.fn(),
-      rightFooter: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)
-    };
-    shallowPeriodDimension = undefined;
-  });
-  it('matches the snapshot', () => {
-    const wrapper = getWrapper();
-    expect(wrapper).toMatchSnapshot();
-  });
+const props = {
+  selectedPeriods: [],
+  onSelect: jest.fn(),
+  rightFooter: /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null)
+};
+test('PeriodDimension renders the tabs for relative/fixed with relative pre-selected', () => {
+  (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_PeriodDimension.default, props));
+  expect(_react.screen.getByText('Relative periods')).toBeInTheDocument();
+  expect(_react.screen.getByTestId('period-dimension-relative-period-filter')).toBeInTheDocument();
+  expect(_react.screen.getByText('Fixed periods')).toBeInTheDocument();
+});
+test('PeriodDimension can toggle between relative and fixed period tab', async () => {
+  const user = _userEvent.default.setup();
+  (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_PeriodDimension.default, props));
+  expect(_react.screen.getByText('Relative periods')).toBeInTheDocument();
+  const fixedPeriodButton = _react.screen.getByText('Fixed periods');
+  expect(fixedPeriodButton).toBeInTheDocument();
+  await user.click(fixedPeriodButton);
+  expect(_react.screen.getByTestId('period-dimension-fixed-period-filter')).toBeInTheDocument();
 });

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

@@ -59,6 +59,9 @@ const PivotTableColumnHeaderCell = ({
         className: `jsx-${_PivotTableStyle.cell.__hash}` + " " + "column-header-inner"
       }, /*#__PURE__*/_react.default.createElement("span", {
         "data-test": "visualization-column-header",
+        style: {
+          ...header.style
+        },
         className: `jsx-${_PivotTableStyle.cell.__hash}` + " " + "column-header-label"
       }, header.label), isSortable ? /*#__PURE__*/_react.default.createElement(_PivotTableSortIcon.PivotTableSortIcon, {
         index: index,

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

@@ -37,7 +37,8 @@ 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/cjs/components/RichText/Editor/__tests__/Editor.spec.js

@@ -1,7 +1,7 @@
 "use strict";
 
-require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _react2 = _interopRequireDefault(require("react"));
 var _Editor = require("../Editor.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -23,16 +23,15 @@ describe('RichText: Editor component', () => {
   const renderComponent = props => {
     return (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_Editor.Editor, props));
   };
-  it('renders a result', () => {
+  test('renders a result', () => {
     renderComponent(componentProps);
     expect(_react.screen.getByTestId('@dhis2-analytics-richtexteditor')).toBeVisible();
   });
-  it('calls convertCtrlKey on keydown', () => {
+  test('calls convertCtrlKey on keydown', async () => {
+    const user = _userEvent.default.setup();
     renderComponent(componentProps);
-    _react.fireEvent.keyDown(_react.screen.getByRole('textbox'), {
-      key: 'A',
-      code: 'keyA'
-    });
+    await user.click(_react.screen.getByRole('textbox'));
+    await user.keyboard('A');
     expect(mockConvertCtrlKey).toHaveBeenCalled();
   });
 });

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

@@ -3,7 +3,7 @@
 var _MdParser = require("../MdParser.js");
 const Parser = new _MdParser.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/cjs/components/RichText/Parser/__tests__/Parser.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 _Parser = require("../Parser.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 jest.mock('../MdParser.js', () => ({
@@ -12,30 +12,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 (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_Parser.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
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_Parser.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', () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_Parser.Parser, null, 'plain text'));
+    expect(_react.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
+    } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_Parser.Parser, null));
+    const divEl = container.querySelector('div');
+    expect(divEl).toBe(null);
   });
 });