@instructure/outcomes-ui 2.1.3 → 2.1.5

package/lib/containers/ConnectedOutcomesPerStudent.js

@@ -19,30 +19,40 @@ var _actions2 = require("../store/context/actions.js");
 
 var _selectors = require("../store/report/selectors.js");
 
+var _selectors2 = require("../store/features/selectors.js");
+
 function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
   return {
     pageCount: (0, _selectors.getPageCount)(state, scope),
     currentPage: (0, _selectors.getPageNumber)(state, scope),
     rollups: (0, _selectors.getRollups)(state, scope),
-    users: (0, _selectors.getUsers)(state, scope),
+    users: (0, _selectors.getUsers)(state, scope, (0, _selectors.getPageNumber)(state, scope)),
     getReportOutcome: _selectors.getReportOutcome.bind(null, state, scope),
+    csvFetchingStatus: (0, _selectors.getLoadingRemainingPages)(state, scope),
+    formatCSVData: _selectors.formatCSVData.bind(null, state, scope),
     hasAnyOutcomes: (0, _selectors.hasAnyOutcomes)(state, scope),
     getScore: _selectors.getScore.bind(null, state, scope),
     isOpen: _selectors.isOpen.bind(null, state, scope),
-    loading: (0, _selectors.getLoading)(state, scope)
+    loading: (0, _selectors.getLoading)(state, scope),
+    features: (0, _selectors2.getFeatures)(state)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
   return (0, _multireducer.bindActionCreators)({
     loadPage: _actions.loadPage,
+    loadRemainingPages: _actions.loadRemainingPages,
     viewReportAlignment: _actions.viewReportAlignment,
     closeReportAlignment: _actions.closeReportAlignment,
     setError: _actions2.setError
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedOutcomesPerStudent = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_index.default);
 var _default = ConnectedOutcomesPerStudent;

package/lib/containers/__tests__/AlignmentWidget.test.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _createMockStore = _interopRequireDefault(require("../../test/createMockStore.js"));
+
+var _AlignmentWidget = _interopRequireDefault(require("../AlignmentWidget.js"));
+
+describe('AlignmentWidget', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var store = (0, _createMockStore.default)();
+    return Object.assign({
+      store: store,
+      artifactType: 'foo',
+      emptySetHeading: '',
+      artifactId: '1',
+      host: 'http://foo.outcomes.foo',
+      jwt: 'secretfoo'
+    }, props);
+  }
+
+  it('renders', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
+      id: "app"
+    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, makeProps())));
+    (0, _chai.expect)(wrapper.find('AlignmentWidget')).to.have.length(1);
+  });
+  it('sets the scope', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
+      id: "app"
+    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, props)));
+    (0, _chai.expect)(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+  });
+  it('uses proper fallbacks if store is not passed in props', function () {
+    var props = makeProps({
+      store: void 0
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
+      id: "app"
+    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, props)));
+    (0, _chai.expect)(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+  });
+});

package/lib/containers/__tests__/ConnectedAlignmentWidget.test.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("react-redux");
+
+var _enzyme = require("enzyme");
+
+var _immutable = require("immutable");
+
+var _createMockStore = _interopRequireDefault(require("../../test/createMockStore.js"));
+
+var _ConnectedAlignmentWidget = _interopRequireDefault(require("../ConnectedAlignmentWidget.js"));
+
+describe('ConnectedAlignmentWidget', function () {
+  it('renders', function () {
+    var store = (0, _createMockStore.default)((0, _immutable.fromJS)({
+      OutcomePicker: {
+        state: 'loading',
+        scope: 'scopeForTest'
+      }
+    }));
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+      store: store
+    }, /*#__PURE__*/_react.default.createElement(_ConnectedAlignmentWidget.default, {
+      tray: /*#__PURE__*/_react.default.createElement("div", null)
+    })));
+    (0, _chai.expect)(wrapper.find('AlignmentWidget')).to.have.length(1);
+  });
+});

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

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

package/lib/demo.js

@@ -455,7 +455,7 @@ var DemoAlignment = function DemoAlignment(props) {
       displayMasteryDescription = props.displayMasteryDescription,
       displayMasteryPercentText = props.displayMasteryPercentText,
       jwt = props.jwt,
-      useAlignmentButton = props.useAlignmentButton;
+      useAlignmentWidget = props.useAlignmentWidget;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: styles.item,
     "data-automation": "artifact"
@@ -476,7 +476,7 @@ var DemoAlignment = function DemoAlignment(props) {
     host: outcomesHost,
     jwt: jwt,
     emptyText: "No outcomes are aligned"
-  }), useAlignmentButton ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_index.AlignmentButton, {
+  }), useAlignmentWidget ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_index.AlignmentWidget, {
     artifactType: artifactType,
     artifactTypeName: artifactTypeName,
     artifactId: artifactId,
@@ -616,14 +616,14 @@ function rerender() {
     jwt: createFirstGradeJwt
   }), /*#__PURE__*/_react.default.createElement(DemoAlignment, {
     alignmentSetId: "",
-    useAlignmentButton: true,
+    useAlignmentWidget: true,
     name: "Quiz #103",
     artifactType: "quizzes.quiz",
     artifactId: "103",
     contextUuid: "dummy_uuid",
     emptySetHeading: "Align Institution outcomes to this quiz.",
     jwt: createJwt,
-    alignmentWidget: _index.AlignmentButton
+    alignmentWidget: _index.AlignmentWidget
   })), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
     selected: currentTab === 'report',
     renderTitle: "Report",

package/lib/hooks/__tests__/useBoolean.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _dom = require("@testing-library/react-hooks/dom");
+
+var _useBoolean = _interopRequireDefault(require("../useBoolean.js"));
+
+describe('useBoolean', function () {
+  it('creates custom hook with state equal to initial value if initial value is boolean', function () {
+    var _renderHook = (0, _dom.renderHook)(function () {
+      return (0, _useBoolean.default)(false);
+    }),
+        result = _renderHook.result;
+
+    (0, _chai.expect)(result.current[0]).to.equal(false);
+  });
+  it('creates custom hook with state equal to initial value coerced to boolean if initial value is not boolean', function () {
+    var _renderHook2 = (0, _dom.renderHook)(function () {
+      return (0, _useBoolean.default)('abc');
+    }),
+        result = _renderHook2.result;
+
+    (0, _chai.expect)(result.current[0]).to.equal(true);
+  });
+  it('changes state to true when first exported fn is called', function () {
+    var _renderHook3 = (0, _dom.renderHook)(function () {
+      return (0, _useBoolean.default)();
+    }),
+        result = _renderHook3.result;
+
+    (0, _dom.act)(function () {
+      result.current[1]();
+    });
+    (0, _chai.expect)(result.current[0]).to.equal(true);
+  });
+  it('changes state to false when second exported fn is called', function () {
+    var _renderHook4 = (0, _dom.renderHook)(function () {
+      return (0, _useBoolean.default)();
+    }),
+        result = _renderHook4.result;
+
+    (0, _dom.act)(function () {
+      result.current[2]();
+    });
+    (0, _chai.expect)(result.current[0]).to.equal(false);
+  });
+});

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

@@ -0,0 +1,288 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _chai = require("chai");
+
+var _dom = require("@testing-library/react-hooks/dom");
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _useCSVExport = _interopRequireWildcard(require("../useCSVExport.js"));
+
+var _constants = require("../../constants.js");
+
+var Alerts = _interopRequireWildcard(require("../../components/FlashAlert/index.js"));
+
+describe('useCSVExport', function () {
+  var clock;
+  var showFlashAlert;
+  beforeEach(function () {
+    clock = _sinon.default.useFakeTimers();
+    showFlashAlert = _sinon.default.spy(Alerts, 'showFlashAlert');
+  });
+  afterEach(function () {
+    clock.restore();
+    showFlashAlert.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return (0, _objectSpread2.default)({
+      fetchCSVData: _sinon.default.spy(),
+      fetchingStatus: _constants.NOT_FETCHING,
+      formatCSVData: _sinon.default.spy(),
+      showProgressBar: _sinon.default.spy(),
+      hideProgressBar: _sinon.default.spy()
+    }, props);
+  };
+
+  describe('initializes', function () {
+    it('as not exporting', function () {
+      var _renderHook = (0, _dom.renderHook)(function () {
+        return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, makeProps({})));
+      }),
+          result = _renderHook.result;
+
+      (0, _chai.expect)(result.current.exportState).to.equal(_useCSVExport.NOT_EXPORTING);
+    });
+    it('formattedData as an empty array', function () {
+      var _renderHook2 = (0, _dom.renderHook)(function () {
+        return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, makeProps({})));
+      }),
+          result = _renderHook2.result;
+
+      (0, _chai.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 = (0, _dom.renderHook)(function () {
+        return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+      }),
+          result = _renderHook3.result;
+
+      result.current.beginExport();
+      (0, _chai.expect)(result.current.exportState).to.equal(_useCSVExport.FETCHING_DATA);
+      (0, _chai.expect)(props.fetchCSVData).to.have.been.called;
+      (0, _chai.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.default.stub().returns(formattedData);
+
+      var props = makeProps({
+        fetchingStatus: _constants.COMPLETED,
+        formatCSVData: formatCSVDataMock
+      });
+
+      var _renderHook4 = (0, _dom.renderHook)(function () {
+        return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+      }),
+          result = _renderHook4.result;
+
+      result.current.beginExport();
+      (0, _chai.expect)(result.current.exportState).to.equal(_useCSVExport.FORMATTING_CSV);
+      (0, _chai.expect)(props.fetchCSVData).to.not.have.been.called;
+      (0, _chai.expect)(props.formatCSVData).to.have.been.called;
+    });
+    it('calls showFlashAlert with the starting message', function () {
+      var _renderHook5 = (0, _dom.renderHook)(function () {
+        return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, makeProps({})));
+      }),
+          result = _renderHook5.result;
+
+      result.current.beginExport();
+      (0, _chai.expect)(showFlashAlert).to.have.been.calledWith(_useCSVExport.alertTypes.starting);
+    });
+    it('calls showProgressBar', function () {
+      var props = makeProps({});
+
+      var _renderHook6 = (0, _dom.renderHook)(function () {
+        return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+      }),
+          result = _renderHook6.result;
+
+      result.current.beginExport();
+      (0, _chai.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 = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    }),
+        result = _renderHook7.result;
+
+    result.current.beginExport();
+    result.current.cancelExport();
+    (0, _chai.expect)(result.current.exportState).to.equal(_useCSVExport.NOT_EXPORTING);
+    (0, _chai.expect)(props.hideProgressBar).to.have.been.calledOnce;
+    (0, _chai.expect)(showFlashAlert).to.have.been.calledWith(_useCSVExport.alertTypes.cancelled);
+  });
+  it('sets the exportState to not_fetching if fetchCSVData throws an error', function () {
+    var fetchCSVDataError = _sinon.default.stub().rejects();
+
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: _constants.ERROR
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.expect)(hook.result.current.exportState).to.equal(_constants.NOT_FETCHING);
+    });
+  });
+  it('calls showFlashAlert with the error message', function () {
+    var fetchCSVDataError = _sinon.default.stub().rejects();
+
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: _constants.ERROR
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.expect)(showFlashAlert).to.have.been.calledWith(_useCSVExport.alertTypes.error);
+    });
+  });
+  it('does not call formatCSVData if fetchingStatus is still in progress', function () {
+    var newProps = makeProps({
+      fetchingStatus: _constants.IN_PROGRESS
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, makeProps({})));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.expect)(hook.result.current.exportState).to.equal(_useCSVExport.FETCHING_DATA);
+      (0, _chai.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: _constants.NOT_FETCHING
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, makeProps({})));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.expect)(newProps.formatCSVData).to.not.have.been.called;
+    });
+  });
+  it('does not call formatCSVData if there is no export happening', function () {
+    var props = makeProps({
+      fetchingStatus: _constants.COMPLETED
+    });
+    (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    (0, _chai.expect)(props.formatCSVData).to.not.have.been.called;
+  });
+  it('does not call formatCSVData if fetching results in an error', function () {
+    var fetchCSVDataError = _sinon.default.stub().rejects();
+
+    var props = makeProps({
+      fetchCSVData: fetchCSVDataError
+    });
+    var newProps = makeProps({
+      fetchingStatus: _constants.ERROR
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.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.default.stub().returns(formattedData);
+
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: _constants.COMPLETED
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.expect)(hook.result.current.formattedData).to.deep.equal(formattedData);
+      (0, _chai.expect)(hook.result.current.exportState).to.equal(_useCSVExport.CSV_COMPLETE);
+      (0, _chai.expect)(showFlashAlert).to.have.been.calledWith(_useCSVExport.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.default.stub().returns(formattedData);
+
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: _constants.COMPLETED
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      clock.tick(2000);
+      (0, _chai.expect)(newProps.hideProgressBar).to.have.been.calledOnce;
+      (0, _chai.expect)(hook.result.exportState).to.equal(_useCSVExport.NOT_EXPORTING);
+    });
+  });
+  it('does not set the exportState to csv_complete if the formatted data is empty', function () {
+    var formatCSVDataMock = _sinon.default.stub().returns([]);
+
+    var props = makeProps({
+      formatCSVData: formatCSVDataMock
+    });
+    var newProps = makeProps({
+      fetchingStatus: _constants.COMPLETED
+    });
+    var hook = (0, _dom.renderHook)(function () {
+      return (0, _useCSVExport.default)((0, _objectSpread2.default)({}, props));
+    });
+    hook.result.current.beginExport();
+    hook.rerender(newProps);
+    hook.waitForNextUpdate(function () {
+      (0, _chai.expect)(hook.result.current.exportState).to.not.equal(_useCSVExport.CSV_COMPLETE);
+    });
+  });
+});

package/lib/hooks/useBoolean.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useBoolean = function useBoolean(initialState) {
+  var _useState = (0, _react.useState)(Boolean(initialState)),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var setTrue = (0, _react.useCallback)(function () {
+    return setState(true);
+  }, []);
+  var setFalse = (0, _react.useCallback)(function () {
+    return setState(false);
+  }, []);
+  return [state, setTrue, setFalse];
+};
+
+var _default = useBoolean;
+exports.default = _default;