@dhis2/analytics 25.1.21 → 25.2.0

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

@@ -1,30 +1,29 @@
 "use strict";
 
-var _ui = require("@dhis2/ui");
+var _appRuntime = require("@dhis2/app-runtime");
 
-var _enzyme = require("enzyme");
+var _react = require("@testing-library/react");
 
-var _react = _interopRequireDefault(require("react"));
+require("@testing-library/jest-dom");
 
-var _OpenFileDialog = require("../../OpenFileDialog/OpenFileDialog.js");
+var _react2 = _interopRequireDefault(require("react"));
 
-var _index = require("../../TranslationDialog/index.js");
-
-var _DeleteDialog = require("../DeleteDialog.js");
+var _index = require("../../Toolbar/index.js");
 
 var _FileMenu = require("../FileMenu.js");
 
-var _GetLinkDialog = require("../GetLinkDialog.js");
-
-var _RenameDialog = require("../RenameDialog.js");
-
-var _SaveAsDialog = require("../SaveAsDialog.js");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+jest.mock('../../TranslationDialog/TranslationModal/useTranslationsResults.js', () => ({
+  /* This will keep the translation dialog in
+   * a loading state, which prevents it from
+   * throwing other errors */
+  useTranslationsResults: () => ({
+    translationsData: undefined,
+    fetching: true
+  })
+}));
 describe('The FileMenu component ', () => {
-  let shallowFileMenu;
-  let props;
   const onDelete = jest.fn();
   const onError = jest.fn();
   const onNew = jest.fn();
@@ -34,206 +33,331 @@ describe('The FileMenu component ', () => {
   const onSaveAs = jest.fn();
   const onShare = jest.fn();
   const onTranslate = jest.fn();
-
-  const getFileMenuComponent = props => {
-    if (!shallowFileMenu) {
-      shallowFileMenu = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_FileMenu.FileMenu, props));
-    }
-
-    return shallowFileMenu;
+  const baseProps = {
+    currentUser: {
+      id: 'u1',
+      displayName: 'Test user'
+    },
+    fileType: 'visualization',
+    fileObject: undefined,
+    onDelete,
+    onError,
+    onNew,
+    onOpen,
+    onRename,
+    onSave,
+    onSaveAs,
+    onShare,
+    onTranslate
   };
-
-  beforeEach(() => {
-    shallowFileMenu = undefined;
-    props = {
-      currentUser: {
-        id: 'u1',
-        displayName: 'Test user'
-      },
-      fileType: 'visualization',
-      fileObject: undefined,
-      onDelete,
-      onError,
-      onNew,
-      onOpen,
-      onRename,
-      onSave,
-      onSaveAs,
-      onShare,
-      onTranslate
-    };
-  });
-  it('renders a button', () => {
-    expect(getFileMenuComponent(props).find('button')).toHaveLength(1);
-  });
-  it('renders some enabled buttons regardless of the access settings', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    const buttonLabels = ['New', 'Open…'];
-    buttonLabels.forEach(buttonLabel => expect(fileMenuComponent.findWhere(n => n.prop('label') === buttonLabel).prop('disabled')).toBe(undefined));
-  });
-  it('renders some disabled buttons when no fileObject is present', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    const buttonLabels = ['Save as…', 'Rename…', 'Translate…', 'Share…', 'Get link…', 'Delete'];
-    buttonLabels.forEach(buttonLabel => expect(fileMenuComponent.findWhere(n => n.prop('label') === buttonLabel).prop('disabled')).toBe(true));
-  });
-  it('renders some enabled buttons when update access is granted', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: false,
-        manage: false,
-        update: true
-      }
-    };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    const buttonLabels = ['Save', 'Rename…', 'Translate…'];
-    buttonLabels.forEach(buttonLabel => expect(fileMenuComponent.findWhere(n => n.prop('label') === buttonLabel).prop('disabled')).toBe(false));
-  });
-  it('renders enabled Delete button when delete access is granted', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: false,
-        update: false
-      }
-    };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    expect(fileMenuComponent.findWhere(n => n.prop('label') === 'Delete').prop('disabled')).toBe(false);
-  });
-  it('renders enabled Share button when manage access is granted', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: false,
-        manage: true,
-        update: false
-      }
-    };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    expect(fileMenuComponent.findWhere(n => n.prop('label') === 'Share…').prop('disabled')).toBe(false);
-  });
-  it('renders the OpenFileDialog component when the Open button is clicked', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Open…').simulate('click');
-    expect(fileMenuComponent.find(_OpenFileDialog.OpenFileDialog)).toHaveLength(1);
-  });
-  it('renders the RenameDialog when the Rename button is clicked', () => {
-    props.fileObject = {
+  const fullAccessProps = {
+    fileObject: {
       id: 'test',
       access: {
         delete: true,
         manage: true,
         update: true
-      }
+      },
+      href: 'http://dhis2.org'
+    }
+  };
+
+  const renderFileMenu = function () {
+    let customProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const props = { ...baseProps,
+      ...customProps
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Rename…').simulate('click');
-    expect(fileMenuComponent.find(_RenameDialog.RenameDialog)).toHaveLength(1);
-  });
-  it('renders the TranslationDialog when the Translate button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+    const providerData = {
+      translations: {
+        translations: {}
+      },
+      sharing: {
+        meta: {
+          allowPublicAccess: true
+        },
+        object: {
+          userAccesses: [],
+          userGroupAccesses: []
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Translate…').simulate('click');
-    expect(fileMenuComponent.find(_index.TranslationDialog)).toHaveLength(1);
+    return (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+      data: providerData
+    }, /*#__PURE__*/_react2.default.createElement(_index.HoverMenuBar, null, /*#__PURE__*/_react2.default.createElement(_FileMenu.FileMenu, props))));
+  };
+
+  const openDropdown = async () => {
+    _react.fireEvent.click(_react.screen.getByTestId('dhis2-analytics-hovermenudropdown'));
+
+    expect(await _react.screen.findByTestId('file-menu-container')).toBeVisible();
+  };
+
+  const MENU_ITEMS = {
+    NEW: {
+      testId: 'file-menu-new',
+      text: 'New'
+    },
+    OPEN: {
+      testId: 'file-menu-open',
+      text: 'Open…'
+    },
+    SAVE: {
+      testId: 'file-menu-save',
+      text: 'Save'
+    },
+    SAVE_AS: {
+      testId: 'file-menu-saveas',
+      text: 'Save as…'
+    },
+    RENAME: {
+      testId: 'file-menu-rename',
+      text: 'Rename…'
+    },
+    TRANSLATE: {
+      testId: 'file-menu-translate',
+      text: 'Translate…'
+    },
+    SHARE: {
+      testId: 'file-menu-sharing',
+      text: 'Share…'
+    },
+    GET_LINK: {
+      testId: 'file-menu-getlink',
+      text: 'Get link…'
+    },
+    DELETE: {
+      testId: 'file-menu-delete',
+      text: 'Delete'
+    }
+  };
+
+  const assertMenuItemsDisabledState = menuItems => {
+    for (const menuTitem of menuItems) {
+      const li = _react.screen.getByTestId(menuTitem.testId);
+
+      expect((0, _react.getByText)(li, menuTitem.text)).toBeVisible();
+
+      if (menuTitem.disabled) {
+        expect(li).toHaveClass('disabled');
+      } else {
+        expect(li).not.toHaveClass('disabled');
+      }
+    }
+  };
+
+  it('renders a button', () => {
+    renderFileMenu();
+    expect(_react.screen.getAllByTestId('dhis2-analytics-hovermenudropdown')).toHaveLength(1);
+
+    const button = _react.screen.getByTestId('dhis2-analytics-hovermenudropdown');
+
+    expect(button).toBeVisible();
+    expect(button).toHaveTextContent('File');
   });
-  it('renders the SharingDialog when the Share button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+  it('opens when clicking the button', async () => {
+    renderFileMenu();
+    expect(_react.screen.queryByTestId('file-menu-container')).not.toBeInTheDocument();
+    await openDropdown();
+    expect(await _react.screen.findByTestId('file-menu-container')).toBeVisible();
+  });
+  it('renders some enabled buttons regardless of the access settings', async () => {
+    renderFileMenu();
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.NEW,
+      disabled: false
+    }, { ...MENU_ITEMS.OPEN,
+      disabled: false
+    }]);
+  });
+  it('renders some disabled buttons when no fileObject is present', async () => {
+    renderFileMenu();
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.SAVE_AS,
+      disabled: true
+    }, { ...MENU_ITEMS.RENAME,
+      disabled: true
+    }, { ...MENU_ITEMS.TRANSLATE,
+      disabled: true
+    }, { ...MENU_ITEMS.SHARE,
+      disabled: true
+    }, { ...MENU_ITEMS.GET_LINK,
+      disabled: true
+    }, { ...MENU_ITEMS.DELETE,
+      disabled: true
+    }]);
+  });
+  it('renders some enabled buttons when update access is granted', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'test',
+        access: {
+          delete: false,
+          manage: false,
+          update: true
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Share…').simulate('click');
-    expect(fileMenuComponent.find(_ui.SharingDialog)).toHaveLength(1);
+    renderFileMenu(customProps);
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.SAVE,
+      disabled: false
+    }, { ...MENU_ITEMS.RENAME,
+      disabled: false
+    }, { ...MENU_ITEMS.TRANSLATE,
+      disabled: false
+    }]);
   });
-  it('renders the GetLinkDialog when the Get link button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+  it('renders enabled Delete button when delete access is granted', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'test',
+        access: {
+          delete: true,
+          manage: false,
+          update: false
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Get link…').simulate('click');
-    expect(fileMenuComponent.find(_GetLinkDialog.GetLinkDialog)).toHaveLength(1);
-  });
-  it('renders the DeleteDialog when the Delete button is clicked', () => {
-    props.fileObject = {
-      id: 'delete-test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+    renderFileMenu(customProps);
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.DELETE,
+      disabled: false
+    }]);
+  });
+  it('renders enabled Share button when manage access is granted', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'test',
+        access: {
+          delete: false,
+          manage: true,
+          update: false
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Delete').simulate('click');
-    expect(fileMenuComponent.find(_DeleteDialog.DeleteDialog)).toHaveLength(1);
+    renderFileMenu(customProps);
+    await openDropdown();
+    assertMenuItemsDisabledState([{ ...MENU_ITEMS.SHARE,
+      disabled: false
+    }]);
   });
-  it('renders the SaveAsDialog when the Save as… button is clicked', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+  it('renders the OpenFileDialog component when the Open button is clicked', async () => {
+    renderFileMenu();
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.OPEN.testId));
+
+    expect(await _react.screen.findByText('Open a visualization', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the RenameDialog when the Rename button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.RENAME.testId));
+
+    expect(await _react.screen.findByText('Rename visualization', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the TranslationDialog when the Translate button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.TRANSLATE.testId));
+
+    expect(await _react.screen.findByText('Translate', {
+      exact: false,
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the SharingDialog when the Share button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.SHARE.testId));
+
+    expect(await _react.screen.findByText('Sharing and access', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the GetLinkDialog when the Get link button is clicked', async () => {
+    const url = 'http://localhost/dhis-web-data-visualizer/#/test';
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.GET_LINK.testId));
+
+    expect(await _react.screen.findByTestId('dhis2-uicore-modal')).toBeVisible();
+    expect(_react.screen.getByRole('link', {
+      name: url
+    })).toHaveAttribute('href', url);
+  });
+  it('renders the DeleteDialog when the Delete button is clicked', async () => {
+    const customProps = {
+      fileObject: {
+        id: 'delete-test',
+        access: {
+          delete: true,
+          manage: true,
+          update: true
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Save as…').simulate('click');
-    expect(fileMenuComponent.find(_SaveAsDialog.SaveAsDialog)).toHaveLength(1);
-  });
-  it('renders the SaveAsDialog when the Save… button is clicked but no fileObject is present', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Save…').simulate('click');
-    expect(fileMenuComponent.find(_SaveAsDialog.SaveAsDialog)).toHaveLength(1);
-  });
-  it('calls the onSave callback when the Save button is clicked and a fileObject is present', () => {
-    props.fileObject = {
-      id: 'test',
-      access: {
-        delete: true,
-        manage: true,
-        update: true
+    renderFileMenu(customProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.DELETE.testId));
+
+    expect(await _react.screen.findByText('Delete visualization', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the SaveAsDialog when the Save as… button is clicked', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.SAVE_AS.testId));
+
+    expect(await _react.screen.findByText('Save visualization as', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('renders the SaveAsDialog when the Save… button is clicked but no fileObject is present', async () => {
+    const customProps = {
+      fileObject: {
+        // NOTE: no `id` field
+        access: {
+          update: true
+        }
       }
     };
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'Save').simulate('click');
-    expect(fileMenuComponent.find(_OpenFileDialog.OpenFileDialog).prop('open')).toBe(false);
-    expect(onSave).toHaveBeenCalled();
-  });
-  it('calls the onNew callback when the New button is clicked', () => {
-    const fileMenuComponent = getFileMenuComponent(props);
-    fileMenuComponent.find('button').simulate('click');
-    fileMenuComponent.findWhere(n => n.prop('label') === 'New').simulate('click');
-    expect(fileMenuComponent.find(_OpenFileDialog.OpenFileDialog).prop('open')).toBe(false);
-    expect(onNew).toHaveBeenCalled();
+    renderFileMenu(customProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.SAVE.testId));
+
+    expect(await _react.screen.findByText('Save visualization as', {
+      selector: 'h1'
+    })).toBeVisible();
+  });
+  it('calls the onSave callback when the Save button is clicked and a fileObject is present', async () => {
+    renderFileMenu(fullAccessProps);
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.SAVE.testId));
+
+    expect(_react.screen.queryByText('Open a visualization')).not.toBeVisible();
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+  it('calls the onNew callback when the New button is clicked', async () => {
+    renderFileMenu();
+    await openDropdown();
+
+    _react.fireEvent.click(_react.screen.getByTestId(MENU_ITEMS.NEW.testId));
+
+    expect(_react.screen.queryByText('Open a visualization')).not.toBeVisible();
+    expect(onNew).toHaveBeenCalledTimes(1);
   });
 });

package/build/cjs/components/Options/VisualizationOptions.js

@@ -23,11 +23,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const VisualizationOptions = _ref => {
   let {
+    initiallyActiveTabKey,
     optionsConfig,
     onClose,
     onUpdate
   } = _ref;
-  const [activeTabKey, setActiveTabKey] = (0, _react.useState)();
+  const [activeTabKey, setActiveTabKey] = (0, _react.useState)(initiallyActiveTabKey);
 
   const generateTabContent = sections => sections.map(_ref2 => {
     let {
@@ -109,6 +110,7 @@ const VisualizationOptions = _ref => {
 
 VisualizationOptions.propTypes = {
   optionsConfig: _propTypes.default.array.isRequired,
+  initiallyActiveTabKey: _propTypes.default.string,
   onClose: _propTypes.default.func,
   onUpdate: _propTypes.default.func
 };