@instructure/outcomes-ui 2.1.4 → 2.1.5

package/es/components/OutcomesPerStudent/__tests__/index.test.js

@@ -22,6 +22,7 @@ var styles = {
   'name': 'outcomes-ui__OutcomesPerStudent--name',
   'scoreCell': 'outcomes-ui__OutcomesPerStudent--scoreCell'
 };
+import { REPORT_DOWNLOAD_FF } from "../../../constants.js";
 chai.use(require('sinon-chai'));
 describe('OutcomesPerStudent/index', function () {
   function makeProps() {
@@ -73,7 +74,8 @@ describe('OutcomesPerStudent/index', function () {
       }, {
         uuid: 5,
         full_name: 'Sir Darryl Roundtree'
-      }]
+      }],
+      features: []
     }, props);
   }
 
@@ -131,6 +133,40 @@ describe('OutcomesPerStudent/index', function () {
     });
     expect(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
   });
+  describe('ExportCSVButton', function () {
+    it('renders if the FF is enabled, the page is loaded, and there are users and outcomes', function () {
+      var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+        features: [REPORT_DOWNLOAD_FF]
+      })), {
+        disableLifecycleMethods: true
+      });
+      expect(wrapper.find('ExportCSVButton')).to.have.length(1);
+    });
+    describe('does not render if', function () {
+      it('the FF is disabled', function () {
+        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({})), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no students', function () {
+        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+          users: []
+        })), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no outcomes', function () {
+        var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps({
+          hasAnyOutcomes: false
+        })), {
+          disableLifecycleMethods: true
+        });
+        expect(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+    });
+  });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()));
   });

package/es/components/OutcomesPerStudent/index.js

@@ -18,6 +18,7 @@ import shortid from 'shortid';
 import t from 'format-message';
 import { themeable } from '@instructure/ui-themeable';
 import _ from 'lodash';
+import ExportCSVButton from "./ExportCSVButton/index.js";
 import Header from "./Header/index.js";
 import HeaderDetails from "./HeaderDetails/index.js";
 import Score from "./Score/index.js";
@@ -142,6 +143,7 @@ var NoReport = function NoReport(props) {
   })));
 };
 
+import { REPORT_DOWNLOAD_FF } from "../../constants.js";
 import theme from "../theme.js";
 var styles = {
   componentId: 'eWGXc',
@@ -283,22 +285,55 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   var _super = _createSuper(OutcomesPerStudentReport);
 
   function OutcomesPerStudentReport() {
+    var _this;
+
     _classCallCheck(this, OutcomesPerStudentReport);
 
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.renderExportButton = function (hasAnyStudents) {
+      var _this$props = _this.props,
+          hasAnyOutcomes = _this$props.hasAnyOutcomes,
+          loading = _this$props.loading,
+          loadUsersOverride = _this$props.loadUsersOverride,
+          loadRemainingPages = _this$props.loadRemainingPages,
+          csvFetchingStatus = _this$props.csvFetchingStatus,
+          formatCSVData = _this$props.formatCSVData,
+          artifactType = _this$props.artifactType,
+          artifactId = _this$props.artifactId,
+          features = _this$props.features;
+      var reportDownloadEnabled = features.includes(REPORT_DOWNLOAD_FF);
+
+      var fetchCSVData = function fetchCSVData() {
+        return loadRemainingPages(artifactType, artifactId, loadUsersOverride);
+      };
+
+      if (reportDownloadEnabled && !loading && hasAnyOutcomes && hasAnyStudents) {
+        return /*#__PURE__*/React.createElement(ExportCSVButton, {
+          fetchCSVData: fetchCSVData,
+          formatCSVData: formatCSVData,
+          fetchingStatus: csvFetchingStatus,
+          artifactId: artifactId
+        });
+      }
+    };
+
+    return _this;
   }
 
   _createClass(OutcomesPerStudentReport, [{
     key: "componentWillMount",
-    value: // eslint-disable-next-line no-undef
-    // eslint-disable-next-line no-undef
-    function componentWillMount() {
-      var _this$props = this.props,
-          artifactType = _this$props.artifactType,
-          artifactId = _this$props.artifactId,
-          loadPage = _this$props.loadPage,
-          setError = _this$props.setError,
-          loadUsersOverride = _this$props.loadUsersOverride;
+    value: function componentWillMount() {
+      var _this$props2 = this.props,
+          artifactType = _this$props2.artifactType,
+          artifactId = _this$props2.artifactId,
+          loadPage = _this$props2.loadPage,
+          setError = _this$props2.setError,
+          loadUsersOverride = _this$props2.loadUsersOverride;
       loadPage(artifactType, artifactId, 1, loadUsersOverride).catch(function (e) {
         return setError(e);
       });
@@ -307,16 +342,16 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
     key: "renderReportTable",
     value: function renderReportTable() {
       var headerIds = [];
-      var _this$props2 = this.props,
-          rollups = _this$props2.rollups,
-          getReportOutcome = _this$props2.getReportOutcome,
-          getScore = _this$props2.getScore,
-          _viewReportAlignment = _this$props2.viewReportAlignment,
-          isOpen = _this$props2.isOpen,
-          closeReportAlignment = _this$props2.closeReportAlignment,
-          users = _this$props2.users,
-          showRollups = _this$props2.showRollups,
-          scope = _this$props2.scope;
+      var _this$props3 = this.props,
+          rollups = _this$props3.rollups,
+          getReportOutcome = _this$props3.getReportOutcome,
+          getScore = _this$props3.getScore,
+          _viewReportAlignment = _this$props3.viewReportAlignment,
+          isOpen = _this$props3.isOpen,
+          closeReportAlignment = _this$props3.closeReportAlignment,
+          users = _this$props3.users,
+          showRollups = _this$props3.showRollups,
+          scope = _this$props3.scope;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.reportWrapper,
         "data-automation": "outcomesPerStudent__reportWrapper"
@@ -392,12 +427,12 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this2 = this;
 
-      var _this$props3 = this.props,
-          users = _this$props3.users,
-          hasAnyOutcomes = _this$props3.hasAnyOutcomes,
-          loading = _this$props3.loading;
+      var _this$props4 = this.props,
+          users = _this$props4.users,
+          hasAnyOutcomes = _this$props4.hasAnyOutcomes,
+          loading = _this$props4.loading;
       var hasAnyStudents = users && users.length > 0;
 
       var renderReportContent = function renderReportContent() {
@@ -408,13 +443,13 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
         } else if (!hasAnyStudents) {
           return renderBillboard(noStudents());
         } else {
-          return _this.renderReportTable();
+          return _this2.renderReportTable();
         }
       };
 
       return /*#__PURE__*/React.createElement("div", {
         className: styles.background
-      }, renderReportContent());
+      }, this.renderExportButton(hasAnyStudents), renderReportContent());
     }
   }]);
 
@@ -426,6 +461,9 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   artifactId: PropTypes.string.isRequired,
   rollups: PropTypes.array.isRequired,
   loading: PropTypes.bool.isRequired,
+  loadRemainingPages: PropTypes.func.isRequired,
+  csvFetchingStatus: PropTypes.string.isRequired,
+  formatCSVData: PropTypes.func.isRequired,
   loadPage: PropTypes.func.isRequired,
   loadUsersOverride: PropTypes.func,
   setError: PropTypes.func.isRequired,
@@ -436,6 +474,7 @@ var OutcomesPerStudentReport = (_dec = themeable(theme, styles), _dec(_class = (
   viewReportAlignment: PropTypes.func.isRequired,
   isOpen: PropTypes.func.isRequired,
   closeReportAlignment: PropTypes.func.isRequired,
+  features: PropTypes.array.isRequired,
   scope: PropTypes.string.isRequired
 }, _class2.defaultProps = {
   loadUsersOverride: void 0,

package/es/components/Ratings/index.js

@@ -81,19 +81,13 @@ var Ratings = function Ratings(_ref) {
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, t('Proficiency Rating'))), !isTray && /*#__PURE__*/React.createElement(Table.ColHeader, {
+  }, t('Proficiency Rating')), !isTray && /*#__PURE__*/React.createElement(Table.ColHeader, {
     id: "points",
     textAlign: "end",
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, t('Points'))))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
+  }, t('Points')))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
     var description = _ref2.description,
         percent = _ref2.percent;
     return /*#__PURE__*/React.createElement(Table.Body, {

package/es/constants.js

@@ -43,8 +43,25 @@ export var SET_REPORT_ROLLUPS = 'SET_REPORT_ROLLUPS';
 export var SET_REPORT_RESULTS = 'SET_REPORT_RESULTS';
 export var SET_REPORT_USERS = 'SET_REPORT_USERS';
 export var SET_REPORT_LOADING = 'SET_REPORT_LOADING';
+export var SET_REMAINING_PAGES_LOADING = 'SET_REMAINING_PAGES_LOADING';
 export var VIEW_REPORT_ALIGNMENT = 'VIEW_REPORT_ALIGNMENT';
 export var CLOSE_REPORT_ALIGNMENT = 'CLOSE_REPORT_ALIGNMENT';
+export var ALL_USERS = 'ALL_USERS';
+export var NOT_FETCHING = 'NOT_FETCHING';
+export var IN_PROGRESS = 'FETCHING_IN_PROGRESS';
+export var ERROR = 'FETCHING_ERROR';
+export var COMPLETED = 'FETCHING_COMPLETED'; // CSV Report Headers
+
+export var STUDENT_NAME = 'student_name';
+export var STUDENT_UUID = 'student_uuid';
+export var ATTEMPT_COUNT = 'attempt_count';
+export var ALIGNED_QUESTIONS_COUNT = 'aligned_questions_count';
+export var LOR_POINTS = 'lor_points';
+export var LOR_POINTS_POSSIBLE = 'lor_points_possible';
+export var LO_NAME = 'lo_name';
+export var LO_ID = 'lo_id';
+export var LO_MASTERY_PERCENT = 'lo_mastery_percent';
+export var LO_MASTERED = 'lo_mastered';
 /*
  * search
  */
@@ -72,8 +89,9 @@ export var SET_INDIVIDUAL_RESULTS_STATE = 'SET_INDIVIDUAL_RESULTS_STATE';
  * this being a function allows it to be stubbed in tests
 */
 
+export var REPORT_DOWNLOAD_FF = 'report_download';
 export var getFeatureFlags = function getFeatureFlags() {
-  return [];
+  return [REPORT_DOWNLOAD_FF];
 };
 /*
  * calculation method

package/es/containers/ConnectedAlignmentCount.js

@@ -12,6 +12,8 @@ function mapStateToProps(state, ownProps) {
     count: getAlignedOutcomeCount(state, scope)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
@@ -19,6 +21,8 @@ function mapDispatchToProps(dispatch, ownProps) {
     loadAlignments: loadAlignments
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedAlignmentCount = compose(connect(mapStateToProps, mapDispatchToProps), WithAlignmentSet)(AlignmentCount);
 export default ConnectedAlignmentCount;

package/es/containers/ConnectedOutcomesPerStudent.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
 import { bindActionCreators as bindScopedActionCreators } from 'multireducer';
 import OutcomesPerStudent from "../components/OutcomesPerStudent/index.js";
-import { loadPage, viewReportAlignment, closeReportAlignment } from "../store/report/actions.js";
+import { loadPage, loadRemainingPages, viewReportAlignment, closeReportAlignment } from "../store/report/actions.js";
 import { setError } from "../store/context/actions.js";
-import { getLoading, getPageCount, getPageNumber, getUsers, getReportOutcome, getRollups, getScore, isOpen, hasAnyOutcomes } from "../store/report/selectors.js";
+import { formatCSVData, getLoading, getPageCount, getPageNumber, getUsers, getReportOutcome, getRollups, getScore, getLoadingRemainingPages, isOpen, hasAnyOutcomes } from "../store/report/selectors.js";
+import { getFeatures } from "../store/features/selectors.js";
 
 function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
@@ -11,24 +12,32 @@ function mapStateToProps(state, ownProps) {
     pageCount: getPageCount(state, scope),
     currentPage: getPageNumber(state, scope),
     rollups: getRollups(state, scope),
-    users: getUsers(state, scope),
+    users: getUsers(state, scope, getPageNumber(state, scope)),
     getReportOutcome: getReportOutcome.bind(null, state, scope),
+    csvFetchingStatus: getLoadingRemainingPages(state, scope),
+    formatCSVData: formatCSVData.bind(null, state, scope),
     hasAnyOutcomes: hasAnyOutcomes(state, scope),
     getScore: getScore.bind(null, state, scope),
     isOpen: isOpen.bind(null, state, scope),
-    loading: getLoading(state, scope)
+    loading: getLoading(state, scope),
+    features: getFeatures(state)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
   return bindScopedActionCreators({
     loadPage: loadPage,
+    loadRemainingPages: loadRemainingPages,
     viewReportAlignment: viewReportAlignment,
     closeReportAlignment: closeReportAlignment,
     setError: setError
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedOutcomesPerStudent = connect(mapStateToProps, mapDispatchToProps)(OutcomesPerStudent);
 export default ConnectedOutcomesPerStudent;

package/es/containers/__tests__/OutcomesPerStudentReport.test.js

@@ -38,7 +38,8 @@ describe('OutcomesPerStudentReport', function () {
       artifactType: '',
       artifactId: '',
       host: '',
-      jwt: ''
+      jwt: '',
+      showAlert: function showAlert() {}
     };
   }
 

package/es/hooks/__tests__/useCSVExport.test.js

@@ -0,0 +1,265 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { expect } from 'chai';
+import { renderHook } from '@testing-library/react-hooks/dom';
+import sinon from 'sinon';
+import useCSVExport, { NOT_EXPORTING, FETCHING_DATA, FORMATTING_CSV, CSV_COMPLETE, alertTypes } from "../useCSVExport.js";
+import { NOT_FETCHING, COMPLETED, IN_PROGRESS, ERROR } from "../../constants.js";
+import * as Alerts from "../../components/FlashAlert/index.js";
+describe('useCSVExport', function () {
+  var clock;
+  var showFlashAlert;
+  beforeEach(function () {
+    clock = sinon.useFakeTimers();
+    showFlashAlert = sinon.spy(Alerts, 'showFlashAlert');
+  });
+  afterEach(function () {
+    clock.restore();
+    showFlashAlert.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return _objectSpread({
+      fetchCSVData: sinon.spy(),
+      fetchingStatus: NOT_FETCHING,
+      formatCSVData: sinon.spy(),
+      showProgressBar: sinon.spy(),
+      hideProgressBar: sinon.spy()
+    }, props);
+  };
+
+  describe('initializes', function () {
+    it('as not exporting', function () {
+      var _renderHook = renderHook(function () {
+        return useCSVExport(_objectSpread({}, makeProps({})));
+      }),
+          result = _renderHook.result;
+
+      expect(result.current.exportState).to.equal(NOT_EXPORTING);
+    });
+    it('formattedData as an empty array', function () {
+      var _renderHook2 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, makeProps({})));
+      }),
+          result = _renderHook2.result;
+
+      expect(result.current.formattedData).to.be.empty;
+    });
+  });
+  describe('beginExport', function () {
+    it('when called sets the exportState to fetching_data and calls fetchCSVData if this is the first fetch', function () {
+      var props = makeProps({});
+
+      var _renderHook3 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, props));
+      }),
+          result = _renderHook3.result;
+
+      result.current.beginExport();
+      expect(result.current.exportState).to.equal(FETCHING_DATA);
+      expect(props.fetchCSVData).to.have.been.called;
+      expect(props.formatCSVData).to.not.have.been.called;
+    });
+    it('when called sets the exportState to formatting_csv and calls formatCSVData if we have already completed a fetch', function () {
+      var formattedData = [[{
+        row1: 'row1'
+      }]];
+      var formatCSVDataMock = sinon.stub().returns(formattedData);
+      var props = makeProps({
+        fetchingStatus: COMPLETED,
+        formatCSVData: formatCSVDataMock
+      });
+
+      var _renderHook4 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, props));
+      }),
+          result = _renderHook4.result;
+
+      result.current.beginExport();
+      expect(result.current.exportState).to.equal(FORMATTING_CSV);
+      expect(props.fetchCSVData).to.not.have.been.called;
+      expect(props.formatCSVData).to.have.been.called;
+    });
+    it('calls showFlashAlert with the starting message', function () {
+      var _renderHook5 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, makeProps({})));
+      }),
+          result = _renderHook5.result;
+
+      result.current.beginExport();
+      expect(showFlashAlert).to.have.been.calledWith(alertTypes.starting);
+    });
+    it('calls showProgressBar', function () {
+      var props = makeProps({});
+
+      var _renderHook6 = renderHook(function () {
+        return useCSVExport(_objectSpread({}, props));
+      }),
+          result = _renderHook6.result;
+
+      result.current.beginExport();
+      expect(props.showProgressBar).to.have.been.calledOnce;
+    });
+  });
+  it('cancelExport sets the exportState to not_exporting and calls hideProgressBar and shows the cancelled alert', function () {
+    var props = makeProps({});
+
+    var _renderHook7 = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    }),
+        result = _renderHook7.result;
+
+    result.current.beginExport();
+    result.current.cancelExport();
+    expect(result.current.exportState).to.equal(NOT_EXPORTING);
+    expect(props.hideProgressBar).to.have.been.calledOnce;
+    expect(showFlashAlert).to.have.been.calledWith(alertTypes.cancelled);
+  });
+  it('sets the exportState to not_fetching if fetchCSVData throws an error', function () {
+    var fetchCSVDataError = sinon.stub().rejects();
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: ERROR
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.exportState).to.equal(NOT_FETCHING);
+    });
+  });
+  it('calls showFlashAlert with the error message', function () {
+    var fetchCSVDataError = sinon.stub().rejects();
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: ERROR
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(showFlashAlert).to.have.been.calledWith(alertTypes.error);
+    });
+  });
+  it('does not call formatCSVData if fetchingStatus is still in progress', function () {
+    var newProps = makeProps({
+      fetchingStatus: IN_PROGRESS
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, makeProps({})));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.exportState).to.equal(FETCHING_DATA);
+      expect(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('does not call formatCSVData if we are no longer fetching and did not complete', function () {
+    var newProps = makeProps({
+      fetchingStatus: NOT_FETCHING
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, makeProps({})));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('does not call formatCSVData if there is no export happening', function () {
+    var props = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    expect(props.formatCSVData).to.not.have.been.called;
+  });
+  it('does not call formatCSVData if fetching results in an error', function () {
+    var fetchCSVDataError = sinon.stub().rejects();
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: ERROR
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('sets the exportState to csv_complete when the data is formatted and shows the success alert', function () {
+    var formattedData = [[{
+      row1: 'row1'
+    }]];
+    var formatCSVDataMock = sinon.stub().returns(formattedData);
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.formattedData).to.deep.equal(formattedData);
+      expect(hook.result.current.exportState).to.equal(CSV_COMPLETE);
+      expect(showFlashAlert).to.have.been.calledWith(alertTypes.success);
+    });
+  });
+  it('hides the progress bar and sets exportState to not_exporting once we have exported', function () {
+    var formattedData = [[{
+      row1: 'row1'
+    }]];
+    var formatCSVDataMock = sinon.stub().returns(formattedData);
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      clock.tick(2000);
+      expect(newProps.hideProgressBar).to.have.been.calledOnce;
+      expect(hook.result.exportState).to.equal(NOT_EXPORTING);
+    });
+  });
+  it('does not set the exportState to csv_complete if the formatted data is empty', function () {
+    var formatCSVDataMock = sinon.stub().returns([]);
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: COMPLETED
+    });
+    var hook = renderHook(function () {
+      return useCSVExport(_objectSpread({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      expect(hook.result.current.exportState).to.not.equal(CSV_COMPLETE);
+    });
+  });
+});