@dhis2/analytics 28.0.3 → 28.0.5

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

@@ -1,46 +1,53 @@
 "use strict";
 
-var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
 var _DimensionItem = _interopRequireDefault(require("../DimensionItem.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-describe('DimensionItem', () => {
-  let props;
-  let shallowItem;
-  const dimensionItem = () => {
-    if (!shallowItem) {
-      shallowItem = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_DimensionItem.default, 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();
-  });
+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); }
+const props = {
+  id: 'pe',
+  name: 'Period',
+  isDeactivated: false,
+  isSelected: false,
+  isRecommended: false,
+  isLocked: false
+};
+test('DimensionItem matches the snapshot', () => {
+  const {
+    container
+  } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionItem.default, props));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with recommended', () => {
+  const {
+    container
+  } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionItem.default, _extends({}, props, {
+    isRecommended: true
+  })));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with selected', () => {
+  const {
+    container
+  } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionItem.default, _extends({}, props, {
+    isSelected: true
+  })));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with locked', () => {
+  const {
+    container
+  } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionItem.default, _extends({}, props, {
+    isLocked: true
+  })));
+  expect(container).toMatchSnapshot();
+});
+test('DimensionItem matches the snapshot with onOptionsClick', () => {
+  const {
+    container
+  } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionItem.default, _extends({}, props, {
+    onOptionsClick: jest.fn()
+  })));
+  expect(container).toMatchSnapshot();
 });

package/build/cjs/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/cjs/components/DimensionsPanel/__tests__/DimensionsPanel.spec.js

@@ -1,38 +1,41 @@
 "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 _DimensionsPanel = _interopRequireDefault(require("../DimensionsPanel.js"));
-var _DimensionList = _interopRequireDefault(require("../List/DimensionList.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-describe('The Dimensions component ', () => {
-  let shallowDimensions;
-  let props;
-  const dimensionsComponent = () => {
-    if (!shallowDimensions) {
-      shallowDimensions = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_DimensionsPanel.default, 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.default).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', () => {
+  (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionsPanel.default, props));
+  const dimensionListComponent = _react.screen.getByTestId('dhis2-analytics-dimension-list');
+  expect(dimensionListComponent).toBeInTheDocument();
+  const liElements = _react.screen.getAllByTestId('dimension-item');
+  expect(liElements).toHaveLength(2);
+  const dim1Element = _react.screen.getByText(props.dimensions[0].name);
+  expect(dim1Element).toBeInTheDocument();
+  const dim2Element = _react.screen.getByText(props.dimensions[1].name);
+  expect(dim2Element).toBeInTheDocument();
+});
+test('DimensionsPanel can filter the dimension list', async () => {
+  const user = _userEvent.default.setup();
+  (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_DimensionsPanel.default, props));
+  const filterComponent = _react.screen.getByPlaceholderText('Filter dimensions');
+  expect(filterComponent).toBeInTheDocument();
+  await user.click(filterComponent);
+  await user.keyboard('1');
+  const liElements = _react.screen.getAllByTestId('dimension-item');
+  expect(liElements).toHaveLength(1);
+  const dim1Element = _react.screen.getByText(props.dimensions[0].name);
+  expect(dim1Element).toBeInTheDocument();
+  const dim2Element = _react.screen.queryByText(props.dimensions[1].name);
+  expect(dim2Element).not.toBeInTheDocument();
 });

package/build/cjs/components/DynamicDimension/DynamicDimension.js

@@ -15,15 +15,15 @@ var _ItemSelector = _interopRequireDefault(require("./ItemSelector.js"));
 var _DynamicDimensionStyle = _interopRequireDefault(require("./styles/DynamicDimension.style.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ALL_DYNAMIC_DIMENSION_ITEMS = exports.ALL_DYNAMIC_DIMENSION_ITEMS = 'ALL_ITEMS';
-const DynamicDimension = _ref => {
-  let {
-    dimensionId,
-    onSelect,
-    selectedItems,
-    rightFooter,
-    dimensionTitle,
-    displayNameProp
-  } = _ref;
+const SELECTED_ITEMS_PROP_DEFAULT = [];
+const DynamicDimension = ({
+  dimensionId,
+  onSelect = Function.prototype,
+  selectedItems = SELECTED_ITEMS_PROP_DEFAULT,
+  rightFooter,
+  dimensionTitle,
+  displayNameProp
+}) => {
   const dataEngine = (0, _appRuntime.useDataEngine)();
   const fetchItems = (page, searchTerm) => (0, _dimensions.apiFetchItemsByDimension)({
     dataEngine,
@@ -104,8 +104,4 @@ DynamicDimension.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
   rightFooter: _propTypes.default.node
 };
-DynamicDimension.defaultProps = {
-  selectedItems: [],
-  onSelect: Function.prototype
-};
 var _default = exports.default = DynamicDimension;