@dhis2/analytics 28.0.4 → 28.1.0

package/build/es/components/DimensionsPanel/List/__tests__/DimensionItem.spec.js

@@ -1,43 +1,50 @@
-import { shallow } from 'enzyme';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { render } from '@testing-library/react';
 import React from 'react';
 import DimensionItem from '../DimensionItem.js';
-describe('DimensionItem', () => {
-  let props;
-  let shallowItem;
-  const dimensionItem = () => {
-    if (!shallowItem) {
-      shallowItem = shallow(/*#__PURE__*/React.createElement(DimensionItem, props));
-    }
-    return shallowItem;
-  };
-  beforeEach(() => {
-    props = {
-      id: 'pe',
-      name: 'Period',
-      isDeactivated: false,
-      isSelected: false,
-      isRecommended: false,
-      isLocked: false
-    };
-    shallowItem = undefined;
-  });
-  it('matches the snapshot', () => {
-    expect(dimensionItem()).toMatchSnapshot();
-  });
-  it('matches the snapshot with recommended', () => {
-    props.isRecommended = true;
-    expect(dimensionItem()).toMatchSnapshot();
-  });
-  it('matches the snapshot with selected', () => {
-    props.isSelected = true;
-    expect(dimensionItem()).toMatchSnapshot();
-  });
-  it('matches the snapshot with locked', () => {
-    props.isLocked = true;
-    expect(dimensionItem()).toMatchSnapshot();
-  });
-  it('matches the snapshot with onOptionsClick', () => {
-    props.onOptionsClick = jest.fn();
-    expect(dimensionItem()).toMatchSnapshot();
-  });
+const props = {
+  id: 'pe',
+  name: 'Period',
+  isDeactivated: false,
+  isSelected: false,
+  isRecommended: false,
+  isLocked: false
+};
+test('DimensionItem matches the snapshot', () => {
+  const {
+    container
+  } = render(/*#__PURE__*/React.createElement(DimensionItem, props));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with recommended', () => {
+  const {
+    container
+  } = render(/*#__PURE__*/React.createElement(DimensionItem, _extends({}, props, {
+    isRecommended: true
+  })));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with selected', () => {
+  const {
+    container
+  } = render(/*#__PURE__*/React.createElement(DimensionItem, _extends({}, props, {
+    isSelected: true
+  })));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with locked', () => {
+  const {
+    container
+  } = render(/*#__PURE__*/React.createElement(DimensionItem, _extends({}, props, {
+    isLocked: true
+  })));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with onOptionsClick', () => {
+  const {
+    container
+  } = render(/*#__PURE__*/React.createElement(DimensionItem, _extends({}, props, {
+    onOptionsClick: jest.fn()
+  })));
+  expect(container).toMatchSnapshot();
 });

package/build/es/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap

@@ -1,35 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionItem matches the snapshot 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-  />
+<div>
   <li
-    className="item"
+    class="item"
     name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
   >
     <div
-      className="label"
+      class="label"
       data-test="undefined-button-pe"
-      tabIndex={0}
+      tabindex="0"
     >
       <div
-        className="iconWrapper"
+        class="iconWrapper"
       >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2zm.5 1.5v4.293l2.854 2.853-.708.708L7.5 8.207V3.5z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
       <div
-        className="labelWrapper"
+        class="labelWrapper"
       >
         <span
-          className="labelText"
+          class="labelText"
         >
           <span
             data-dimensionid="pe"
@@ -37,47 +38,44 @@ exports[`DimensionItem matches the snapshot 1`] = `
             Period
           </span>
         </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
       </div>
     </div>
   </li>
   <style />
-</Fragment>
+</div>
 `;
 
 exports[`DimensionItem matches the snapshot with locked 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-  />
+<div>
   <li
-    className="item"
+    class="item"
     name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
   >
     <div
-      className="label"
+      class="label"
       data-test="undefined-button-pe"
-      tabIndex={0}
+      tabindex="0"
     >
       <div
-        className="iconWrapper"
+        class="iconWrapper"
       >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2zm.5 1.5v4.293l2.854 2.853-.708.708L7.5 8.207V3.5z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
       <div
-        className="labelWrapper"
+        class="labelWrapper"
       >
         <span
-          className="labelText"
+          class="labelText"
         >
           <span
             data-dimensionid="pe"
@@ -85,14 +83,10 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
             Period
           </span>
         </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
       </div>
     </div>
     <div
-      className="lockWrapper"
+      class="lockWrapper"
     >
       <svg
         fill="none"
@@ -101,49 +95,50 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          clipRule="evenodd"
+          clip-rule="evenodd"
           d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
           fill="none"
-          fillRule="evenodd"
+          fill-rule="evenodd"
         />
       </svg>
     </div>
     <style />
   </li>
   <style />
-</Fragment>
+</div>
 `;
 
 exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-  />
+<div>
   <li
-    className="item"
+    class="item"
     name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
   >
     <div
-      className="label"
+      class="label"
       data-test="undefined-button-pe"
-      tabIndex={0}
+      tabindex="0"
     >
       <div
-        className="iconWrapper"
+        class="iconWrapper"
       >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2zm.5 1.5v4.293l2.854 2.853-.708.708L7.5 8.207V3.5z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
       <div
-        className="labelWrapper"
+        class="labelWrapper"
       >
         <span
-          className="labelText"
+          class="labelText"
         >
           <span
             data-dimensionid="pe"
@@ -151,51 +146,48 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
             Period
           </span>
         </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
       </div>
     </div>
     <div
-      className="optionsWrapper"
+      class="optionsWrapper"
       data-test="undefined-menu-pe"
     />
   </li>
   <style />
-</Fragment>
+</div>
 `;
 
 exports[`DimensionItem matches the snapshot with recommended 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-  />
+<div>
   <li
-    className="item"
+    class="item"
     name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
   >
     <div
-      className="label"
+      class="label"
       data-test="undefined-button-pe"
-      tabIndex={0}
+      tabindex="0"
     >
       <div
-        className="iconWrapper"
+        class="iconWrapper"
       >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2zm.5 1.5v4.293l2.854 2.853-.708.708L7.5 8.207V3.5z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
       <div
-        className="labelWrapper"
+        class="labelWrapper"
       >
         <span
-          className="labelText"
+          class="labelText"
         >
           <span
             data-dimensionid="pe"
@@ -203,47 +195,55 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
             Period
           </span>
         </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={true}
-        />
+        <span
+          aria-describedby=""
+          class="jsx-237564060"
+          data-test="dhis2-uicore-tooltip-reference"
+          tabindex="0"
+        >
+          <div
+            data-test="undefined-recommended-icon"
+            style="background-color: rgb(0, 150, 136); height: 6px; width: 6px; border-radius: 4px; margin-left: 6px; display: inline-block; cursor: pointer;"
+          />
+        </span>
       </div>
     </div>
   </li>
   <style />
-</Fragment>
+</div>
 `;
 
 exports[`DimensionItem matches the snapshot with selected 1`] = `
-<Fragment>
-  <CssVariables
-    colors={true}
-  />
+<div>
   <li
-    className="item selected"
+    class="item selected"
     name="Period"
-    onClick={[Function]}
-    onMouseLeave={[Function]}
-    onMouseOver={[Function]}
-    style={Object {}}
   >
     <div
-      className="label"
+      class="label"
       data-test="undefined-button-pe"
-      tabIndex={0}
+      tabindex="0"
     >
       <div
-        className="iconWrapper"
+        class="iconWrapper"
       >
-        <SvgClock16
-          className="fixedDimensionIcon"
-        />
+        <svg
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a7 7 0 110 14A7 7 0 018 1zm0 1a6 6 0 100 12A6 6 0 008 2zm.5 1.5v4.293l2.854 2.853-.708.708L7.5 8.207V3.5z"
+            fill="currentColor"
+          />
+        </svg>
       </div>
       <div
-        className="labelWrapper"
+        class="labelWrapper"
       >
         <span
-          className="labelText"
+          class="labelText"
         >
           <span
             data-dimensionid="pe"
@@ -251,13 +251,9 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
             Period
           </span>
         </span>
-        <RecommendedIcon
-          dataTest="undefined-recommended-icon"
-          isRecommended={false}
-        />
       </div>
     </div>
   </li>
   <style />
-</Fragment>
+</div>
 `;

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

@@ -1,35 +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 DimensionsPanel from '../DimensionsPanel.js';
-import DimensionList from '../List/DimensionList.js';
-describe('The Dimensions component ', () => {
-  let shallowDimensions;
-  let props;
-  const dimensionsComponent = () => {
-    if (!shallowDimensions) {
-      shallowDimensions = shallow(/*#__PURE__*/React.createElement(DimensionsPanel, props));
-    }
-    return shallowDimensions;
-  };
-  beforeEach(() => {
-    shallowDimensions = undefined;
-    props = {
-      dimensions: []
-    };
-  });
-  it('renders a div', () => {
-    expect(dimensionsComponent().find('div').length).toEqual(1);
-  });
-  it('renders a div containing everything else', () => {
-    const wrappingDiv = dimensionsComponent().find('div').first();
-    expect(wrappingDiv.children()).toEqual(dimensionsComponent().children());
-  });
-  it('renders a DimensionList with the correct prop', () => {
-    const dimensionsComp = dimensionsComponent();
-    dimensionsComp.setState({
-      filterText: 'filteredText'
-    });
-    const filteredList = dimensionsComp.find(DimensionList).first();
-    expect(filteredList.props().filterText).toEqual(dimensionsComp.state().filterText);
-  });
+const props = {
+  dimensions: [{
+    id: 'id1',
+    name: 'Dimension 1'
+  }, {
+    id: 'id2',
+    name: 'Dimension 2'
+  }]
+};
+test('DimensionsPanel renders a DimensionList component', () => {
+  render(/*#__PURE__*/React.createElement(DimensionsPanel, props));
+  const dimensionListComponent = screen.getByTestId('dhis2-analytics-dimension-list');
+  expect(dimensionListComponent).toBeInTheDocument();
+  const liElements = screen.getAllByTestId('dimension-item');
+  expect(liElements).toHaveLength(2);
+  const dim1Element = screen.getByText(props.dimensions[0].name);
+  expect(dim1Element).toBeInTheDocument();
+  const dim2Element = screen.getByText(props.dimensions[1].name);
+  expect(dim2Element).toBeInTheDocument();
+});
+test('DimensionsPanel can filter the dimension list', async () => {
+  const user = userEvent.setup();
+  render(/*#__PURE__*/React.createElement(DimensionsPanel, props));
+  const filterComponent = screen.getByPlaceholderText('Filter dimensions');
+  expect(filterComponent).toBeInTheDocument();
+  await user.click(filterComponent);
+  await user.keyboard('1');
+  const liElements = screen.getAllByTestId('dimension-item');
+  expect(liElements).toHaveLength(1);
+  const dim1Element = screen.getByText(props.dimensions[0].name);
+  expect(dim1Element).toBeInTheDocument();
+  const dim2Element = screen.queryByText(props.dimensions[1].name);
+  expect(dim2Element).not.toBeInTheDocument();
 });

package/build/es/components/FileMenu/__tests__/DeleteDialog.spec.js

@@ -1,33 +1,30 @@
-import { Button, Modal, ModalTitle } from '@dhis2/ui';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { DeleteDialog } from '../DeleteDialog.js';
-describe('The FileMenu - DeleteDialog component', () => {
-  let shallowDeleteDialog;
-  let props;
-  const onClose = jest.fn();
-  const getDeleteDialogComponent = props => {
-    if (!shallowDeleteDialog) {
-      shallowDeleteDialog = shallow(/*#__PURE__*/React.createElement(DeleteDialog, props));
-    }
-    return shallowDeleteDialog;
+describe('FileMenu - DeleteDialog component', () => {
+  const props = {
+    type: 'visualization',
+    id: 'delete-test',
+    onClose: jest.fn()
   };
-  beforeEach(() => {
-    shallowDeleteDialog = undefined;
-    props = {
-      type: 'visualization',
-      id: 'delete-test',
-      onClose
-    };
+  test('renders a Modal component', () => {
+    render(/*#__PURE__*/React.createElement(DeleteDialog, props));
+    const modalComponent = screen.getByTestId('file-menu-delete-modal');
+    expect(modalComponent).toBeInTheDocument();
   });
-  it('renders a Modal component', () => {
-    expect(getDeleteDialogComponent(props).find(Modal)).toHaveLength(1);
+  test('renders a ModalTitle containing the type prop', () => {
+    render(/*#__PURE__*/React.createElement(DeleteDialog, props));
+    const modalTitleComponent = screen.getByText(`Delete ${props.type}`);
+    expect(modalTitleComponent).toBeInTheDocument();
   });
-  it('renders a ModalTitle containing the type prop', () => {
-    expect(getDeleteDialogComponent(props).find(ModalTitle).childAt(0).text()).toEqual(`Delete ${props.type}`);
-  });
-  it('calls the onClose callback when the Cancel button is clicked', () => {
-    getDeleteDialogComponent(props).find(Button).first().simulate('click');
-    expect(onClose).toHaveBeenCalled();
+  test('calls the onClose callback when the Cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    render(/*#__PURE__*/React.createElement(DeleteDialog, props));
+    const cancelButton = screen.getByRole('button', {
+      name: 'Cancel'
+    });
+    await user.click(cancelButton);
+    expect(props.onClose).toHaveBeenCalledTimes(1);
   });
 });