@urbanos/react-discovery-ui 2.1.43

package/lib/pages/query-view/query-view.test.js

@@ -0,0 +1,104 @@
+import { shallow } from 'enzyme'
+
+import QueryView from './query-view'
+import QueryForm from '../../components/query-form'
+import LoadingElement from '../../components/generic-elements/loading-element'
+import ReactTable from 'react-table'
+
+// Currently, shallow rendering is not compatible with React hooks.
+// We've utilized a strategy found here https://blog.carbonfive.com/2019/08/05/shallow-testing-hooks-with-enzyme/
+// which should become unneccessary in the near future
+const runUseEffect = () => {
+  const useEffect = jest.spyOn(React, 'useEffect')
+  useEffect.mockImplementationOnce(f => f())
+}
+
+describe('query view', () => {
+  let subject
+
+  describe('before load', () => {
+    beforeEach(() => {
+      subject = createSubject({ isQueryLoading: true, queryData: [] })
+    })
+
+    it('shows full page loading icon', () => {
+      expect(subject.find(LoadingElement).length).toEqual(1)
+    })
+  })
+
+  describe('after load', () => {
+    let queryCallback
+
+    beforeEach(() => {
+      runUseEffect()
+      queryCallback = jest.fn()
+      subject = createSubject({ executeQuery: queryCallback })
+    })
+
+    it('does not show full page loading icon', () => {
+      expect(subject.find(LoadingElement).length).toEqual(0)
+    })
+
+    describe('executeQuery', () => {
+      const newText = 'SELECT * FROM great_org__awesome_dataset LIMIT 55'
+
+      beforeEach(() => {
+        subject
+          .find(QueryForm)
+          .props()
+          .executeQuery(newText)
+      })
+
+      test('runs query', () => {
+        expect(queryCallback).toHaveBeenCalledWith(newText)
+      })
+    })
+  })
+
+  it('should not render full page loading when user has submitted query', () => {
+    runUseEffect()
+
+    subject = createSubject({})
+
+    subject
+      .find(QueryForm)
+      .props()
+      .executeQuery('SELECT * FROM sky')
+    subject.setProps({ isQueryLoading: true })
+
+    expect(subject.find(LoadingElement).length).toEqual(0)
+  })
+
+  it('does not automatically execute the query when instructed not to', () => {
+    runUseEffect()
+    const executeQuery = jest.fn()
+
+    subject = createSubject({ shouldAutoExecuteQuery: false, executeQuery })
+
+    expect(executeQuery).toHaveBeenCalledTimes(0)
+  })
+
+  it('automatically executes the query when instructed to', () => {
+    runUseEffect()
+    const executeQuery = jest.fn()
+
+    subject = createSubject({ shouldAutoExecuteQuery: true, executeQuery })
+
+    expect(executeQuery).toHaveBeenCalledTimes(1)
+  })
+})
+
+function createSubject (params) {
+  const defaultParams = {
+    isQueryLoading: false,
+    queryData: [{ data: {} }],
+    executeQuery: jest.fn(),
+    dataSources: { data: ['sources'] },
+    cancelQuery: jest.fn(),
+    setQueryText: jest.fn(),
+    shouldAutoExecuteQuery: false
+  }
+  const paramsWithDefaults = Object.assign({}, defaultParams, params)
+
+  return shallow(<QueryView {...paramsWithDefaults} />)
+}

package/lib/pages/user-profile-view/connector.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _userProfileView = _interopRequireDefault(require("./user-profile-view"));
+var _actions = require("../../store/actions");
+var _visualizationSelectors = require("../../store/visualization-selectors");
+var _auth0Wrapper = _interopRequireDefault(require("../../auth/auth0-wrapper"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    visualizations: (0, _visualizationSelectors.userVisualizations)(state),
+    loading: (0, _visualizationSelectors.visualizationLoading)(state),
+    loadFailure: (0, _visualizationSelectors.visualizationLoadFailure)(state),
+    loadSuccess: (0, _visualizationSelectors.visualizationLoadSuccess)(state),
+    deleteFailure: (0, _visualizationSelectors.visualizationDeleteFailure)(state),
+    deleteSuccess: (0, _visualizationSelectors.visualizationDeleteSuccess)(state),
+    deleting: (0, _visualizationSelectors.visualizationDeleting)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    getUserVisualizations: function getUserVisualizations() {
+      return dispatch((0, _actions.visualizationsLoadAll)());
+    },
+    deleteVisualization: function deleteVisualization(id) {
+      return dispatch((0, _actions.visualizationDelete)({
+        id: id
+      }));
+    },
+    clearDeleteVisualizationState: function clearDeleteVisualizationState() {
+      return dispatch((0, _actions.visualizationDeleteClear)());
+    }
+  };
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _auth0Wrapper.default)(_userProfileView.default));

package/lib/pages/user-profile-view/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _connector = _interopRequireDefault(require("./connector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _connector.default;

package/lib/pages/user-profile-view/user-profile-view.js

@@ -0,0 +1,154 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _auth0LoginZone = _interopRequireDefault(require("../../components/auth0-login-zone"));
+var _reactTable = _interopRequireDefault(require("react-table"));
+var _reactModal = _interopRequireDefault(require("react-modal"));
+var _reactAriaModal = _interopRequireDefault(require("react-aria-modal"));
+var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));
+require("./user-profile-view.scss");
+var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
+var _errorComponent = _interopRequireDefault(require("../../components/generic-elements/error-component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var UserProfileView = function UserProfileView(props) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalIsOpen = _useState2[0],
+    setModalIsOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    datasetToDelete = _useState4[0],
+    setVisualizationToDelete = _useState4[1];
+  var visualizations = props.visualizations,
+    getUserVisualizations = props.getUserVisualizations,
+    deleteVisualization = props.deleteVisualization,
+    isAuthenticated = props.auth.isAuthenticated,
+    loading = props.loading,
+    loadFailure = props.loadFailure,
+    loadSuccess = props.loadSuccess,
+    deleteFailure = props.deleteFailure,
+    deleting = props.deleting,
+    clearDeleteVisualizationState = props.clearDeleteVisualizationState;
+  var showModal = modalIsOpen || deleting || deleteFailure;
+  (0, _react.useEffect)(function () {
+    getUserVisualizations();
+  }, []);
+  var openDeleteModalForVisualization = function openDeleteModalForVisualization(id) {
+    setModalIsOpen(true);
+    setVisualizationToDelete(id);
+  };
+  var confirmDeletion = function confirmDeletion(id) {
+    deleteVisualization(id);
+    setModalIsOpen(false);
+  };
+  var cancelDeletion = function cancelDeletion() {
+    setModalIsOpen(false);
+    setVisualizationToDelete(null);
+    clearDeleteVisualizationState();
+  };
+  var requestHasNotRun = !loadFailure && !loadSuccess;
+  if (loading || requestHasNotRun) {
+    return /*#__PURE__*/_react.default.createElement("user-profile-view", null, /*#__PURE__*/_react.default.createElement(_loadingElement.default, null));
+  }
+  if (!isAuthenticated) {
+    return /*#__PURE__*/_react.default.createElement(_errorComponent.default, {
+      errorText: "You must be signed in to see your saved visualizations"
+    });
+  }
+  _reactModal.default.setAppElement('*');
+  var columns = [{
+    Header: 'Title',
+    accessor: 'title',
+    headerClassName: 'table-header'
+  }, {
+    Header: 'Date Created',
+    accessor: 'created',
+    headerClassName: 'table-header'
+  }, {
+    Header: 'Date Modified',
+    accessor: 'updated',
+    headerClassName: 'table-header'
+  }, {
+    Header: '',
+    accessor: 'delete',
+    headerClassName: 'table-header',
+    className: 'centered',
+    width: 50,
+    Cell: function Cell(_ref) {
+      var original = _ref.original;
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "delete-icon",
+        tabIndex: "0",
+        "aria-label": "Delete",
+        role: "button",
+        onKeyDownCapture: function onKeyDownCapture(event) {
+          if (event.key === ' ' || event.key === 'Enter') {
+            openDeleteModalForVisualization(original.id);
+          }
+        },
+        onClick: function onClick() {
+          openDeleteModalForVisualization(original.id);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_DeleteForever.default, null));
+    }
+  }];
+  var modal = showModal ? /*#__PURE__*/_react.default.createElement(_reactAriaModal.default, {
+    titleText: "Confirm Delete Workspace"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-header-box"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-title"
+  }, "Confirm Workspace Deletion")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "paragraph-text"
+  }, deleteFailure && /*#__PURE__*/_react.default.createElement("p", {
+    className: "modal-error-text"
+  }, "There was an error deleting the visualization")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-button-group"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "modal-confirm-button",
+    onClick: function onClick() {
+      confirmDeletion(datasetToDelete);
+    }
+  }, "Delete"), /*#__PURE__*/_react.default.createElement("button", {
+    className: "modal-cancel-button",
+    onClick: cancelDeletion
+  }, "Cancel")))) : false;
+  return /*#__PURE__*/_react.default.createElement("user-profile-view", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "left-section"
+  }, /*#__PURE__*/_react.default.createElement(_auth0LoginZone.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "saved-workspaces right-section"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header-text-items"
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "workspaces-header"
+  }, "Saved Workspaces"))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "user-visualizations-table"
+  }, /*#__PURE__*/_react.default.createElement(_reactTable.default, {
+    data: visualizations,
+    columns: columns,
+    defaultSorted: [{
+      id: 'updated',
+      desc: true
+    }],
+    loading: props.loading,
+    defaultPageSize: 10,
+    className: "-striped -highlight"
+  }))), modal);
+};
+var _default = exports.default = UserProfileView;

package/lib/pages/user-profile-view/user-profile-view.scss

@@ -0,0 +1,81 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+user-profile-view {
+  @include page-with-left-bar();
+
+  loading-element {
+    @include default-loading-icon();
+  }
+
+  .saved-workspaces {
+    border: 1px solid $light-grey;
+
+    .header-container {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .header-text-items {
+      margin: 1rem;
+    }
+
+    .table-header {
+      background-color: $header-grey;
+      text-align: left;
+      font-weight: 800;
+    }
+
+    .workspaces-header {
+      @include header();
+    }
+  }
+
+  .delete-icon {
+    text-align: center;
+    color: $almost-black;
+    margin: auto;
+    cursor: pointer;
+    
+    &:hover {
+      color: $error-color
+    }
+
+    &:active {
+      color: $medium-grey
+    }
+  }
+
+  .centered {
+    text-align: center;
+  }
+}
+
+div.modal-button-group {
+  justify-content: space-evenly;
+  display: flex;
+}
+
+button.modal-button {
+  outline: none;
+  color: white;
+  padding: 1rem;
+  letter-spacing: 0.05rem;
+
+  &:active {
+    background-color: $medium-grey;
+  }
+}
+
+button.modal-confirm {
+  @include button();
+}
+
+button.modal-cancel {
+  @include button($almost-black);
+}
+
+.modal-error-text {
+  color: $error-color;
+  text-align: center;
+}

package/lib/pages/user-profile-view/user-profile-view.test.js

@@ -0,0 +1,129 @@
+import { shallow, mount } from 'enzyme'
+import UserProfileView from './user-profile-view'
+import LoadingElement from '../../components/generic-elements/loading-element'
+import ReactTable from 'react-table'
+import ErrorComponent from '../../components/generic-elements/error-component'
+import AriaModal from 'react-aria-modal'
+import createAuth0Client from '@auth0/auth0-spa-js'
+
+jest.mock('@auth0/auth0-spa-js')
+
+createAuth0Client.mockImplementation(() => {
+  const loginWithRedirect = jest.fn()
+  const logout = jest.fn()
+
+  return Promise.resolve({
+    isAuthenticated: jest.fn(() => Promise.resolve(true)),
+    handleRedirectCallback: jest.fn(() => Promise.resolve({})),
+    loginWithRedirect,
+    logout
+  })
+})
+
+describe('user profile view', () => {
+  let subject
+
+  it('shows the loading element on page load', () => {
+    subject = createSubject()
+    expect(subject.find(LoadingElement)).toHaveLength(1)
+  })
+
+  describe('when the user is signed in', () => {
+    beforeEach(() => {
+      const visualizations = [
+        { title: 'title1', id: 'id1', created: '2019-12-09T21:04:06', updated: '2019-12-09T21:17:14' },
+        { title: 'title2', id: 'id2' }
+      ]
+
+      subject = createSubject({
+        visualizations: visualizations,
+        auth: { isAuthenticated: true },
+        loadSuccess: true
+      })
+    })
+
+    it("provides a table with the visualizations' information", () => {
+      expect(subject.find(ReactTable)).toHaveLength(1)
+      expect(subject.find(ReactTable).props().data).toHaveLength(2)
+      expect(subject.find(ReactTable).props().data[0].id).toEqual('id1')
+      expect(subject.find(ReactTable).props().data[1].id).toEqual('id2')
+    })
+  })
+
+  describe('when the user is not logged in', () => {
+    beforeEach(() => {
+      subject = createSubject({ auth: { isAuthenticated: false }, loadFailure: true })
+    })
+
+    it('shows an error message', () => {
+      expect(subject.find(ErrorComponent)).toHaveLength(1)
+      expect(subject.find(ReactTable)).toHaveLength(0)
+    })
+  })
+
+  describe('deleting a visualization', () => {
+    let deleteElements, deleteFunction, clearFunction
+    beforeEach(() => {
+      deleteFunction = jest.fn()
+      clearFunction = jest.fn()
+      subject = createSubject({ clearDeleteVisualizationState: clearFunction, deleteVisualization: deleteFunction, auth: { isAuthenticated: true }, loadSuccess: true, visualizations: [{ title: 'Bobviz', id: '2' }] }, mount)
+      deleteElements = subject.find('.delete-icon')
+      deleteElements.at(0).simulate('click')
+      setTimeout(() => {}, 100)
+    })
+
+    it('shows a delete element', () => {
+      expect(deleteElements).toHaveLength(1)
+    })
+
+    it('shows a confirmation modal, when the delete element is clicked', () => {
+      expect(subject.find(AriaModal).length).toBe(1)
+    })
+
+    it('closes the modal when the cancel button is clicked', () => {
+      subject.find('.modal-cancel-button').simulate('click')
+      expect(subject.find(AriaModal).length).toBe(0)
+    })
+
+    it('dispatches a request to clear the state, when the cancel button is clicked', () => {
+      subject.find('.modal-cancel-button').simulate('click')
+      expect(clearFunction).toHaveBeenCalled()
+    })
+
+    it('dispatches a request to delete a visualization when the confirm button is clicked', () => {
+      subject.find('.modal-confirm-button').simulate('click')
+      expect(deleteFunction).toHaveBeenCalledWith('2')
+    })
+
+    it('keeps the modal open while deleting', () => {
+      subject.find('.modal-confirm-button').simulate('click')
+      subject.setProps({ deleting: true })
+      expect(subject.find(AriaModal).length).toBe(1)
+    })
+
+    it('shows an error message and does not close the modal when deletion fails', () => {
+      subject.setProps({ deleteFailure: true })
+      expect(subject.find('.modal-error-text')).toHaveLength(1)
+      expect(subject.find(AriaModal).length).toBe(1)
+    })
+  })
+})
+
+const createSubject = (props = {}, depth = shallow) => {
+  const defaultProps = {
+    visualizations: [],
+    loading: false,
+    auth: { isAuthenticated: false },
+    loadFailure: false,
+    loadSuccess: false,
+    deleting: false,
+    deleteFailure: false,
+    getUserVisualizations: jest.fn(),
+    deleteVisualization: jest.fn(),
+    clearDeleteVisualizationState: jest.fn()
+  }
+
+  const propsWithDefaults = Object.assign({}, defaultProps, props)
+
+  return depth(<UserProfileView {...propsWithDefaults} />)
+}

package/lib/pages/visualization-view/connector.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _visualizationView = _interopRequireDefault(require("./visualization-view"));
+var _actions = require("../../store/actions");
+var _querySelectors = require("../../store/query-selectors");
+var _visualizationSelectors = require("../../store/visualization-selectors");
+var _auth0Wrapper = _interopRequireDefault(require("../../auth/auth0-wrapper"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    id: (0, _visualizationSelectors.visualizationID)(state),
+    title: (0, _visualizationSelectors.visualizationTitle)(state),
+    query: (0, _querySelectors.getFreestyleQueryText)(state),
+    allowedActions: (0, _visualizationSelectors.visualizationAllowedActions)(state),
+    isLoadFailure: (0, _visualizationSelectors.visualizationLoadFailure)(state),
+    isSaving: (0, _visualizationSelectors.visualizationSaving)(state),
+    isSaveFailure: (0, _visualizationSelectors.visualizationSaveFailure)(state),
+    isSaveSuccess: (0, _visualizationSelectors.visualizationSaveSuccess)(state),
+    isSaveable: (0, _visualizationSelectors.isVisualizationSaveable)(state),
+    chart: (0, _visualizationSelectors.visualizationChart)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    load: function load(id) {
+      return dispatch((0, _actions.visualizationLoad)(id));
+    },
+    reset: function reset() {
+      dispatch((0, _actions.visualizationReset)());
+      dispatch((0, _actions.resetQuery)());
+      dispatch((0, _actions.resetDatasetReferences)());
+    },
+    save: function save(_ref) {
+      var id = _ref.id,
+        title = _ref.title,
+        query = _ref.query,
+        shouldCreateCopy = _ref.shouldCreateCopy;
+      return dispatch((0, _actions.visualizationSave)({
+        id: id,
+        title: title,
+        query: query,
+        shouldCreateCopy: shouldCreateCopy
+      }));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _auth0Wrapper.default)(_visualizationView.default));

package/lib/pages/visualization-view/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _connector = _interopRequireDefault(require("./connector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _connector.default;

package/lib/pages/visualization-view/visualization-view-connector.test.js

@@ -0,0 +1,62 @@
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { mount } from 'enzyme'
+import { Router } from 'react-router'
+import { createMemoryHistory } from 'history'
+import ConnectedVisualizationView from '.'
+import VisualizationSaveMenuItem from '../../components/visualization-save-menu-item'
+import { visualizationSave } from '../../store/actions'
+import Auth0Client from '../../auth/auth0-client-provider'
+
+const fakeAuth0Client = {
+  isAuthenticated: () => Promise.resolve(false)
+}
+
+describe('visualization view', () => {
+  let storeMocker, state, store, subject
+
+  const id = 'id'
+  const query = 'query'
+  const title = 'title'
+  const chart = { data: [], layout: {}, frames: [] }
+
+  beforeEach(() => {
+    Auth0Client.get = jest.fn(() => Promise.resolve(fakeAuth0Client))
+    storeMocker = configureStore([])
+    state = {
+      visualization: {
+        visualization: {
+          id, title, allowedActions: [{ name: 'create_copy' }]
+        },
+        chart
+      },
+      queryReducer: { queryText: query, isQueryLoading: false },
+      datasetReducer: {},
+      presentation: {}
+    }
+
+    store = storeMocker(state)
+
+    const fakeRouterMatch = { params: { id } }
+    const history = createMemoryHistory()
+    subject = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <ConnectedVisualizationView match={fakeRouterMatch} />
+        </Router>
+      </Provider>
+    )
+  })
+
+  it('visualization allowedActions are passed to VisualizationSaveMenuItem', () => {
+    expect(subject.find(VisualizationSaveMenuItem).props().allowedActions).toEqual(['create_copy'])
+  })
+
+  it('dispatches the proper visualizationSave action when visualization is saved as a copy', () => {
+    const shouldCreateCopy = true
+
+    subject.find(VisualizationSaveMenuItem).props().handleSaveOrUpdate({ shouldCreateCopy })
+
+    expect(store.getActions()).toContainEqual(visualizationSave({ id, query, title, shouldCreateCopy }))
+  })
+})