@instructure/outcomes-ui 2.1.3 → 2.1.4

package/lib/translated/sv/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;

package/lib/translated/sv/index.js

@@ -29,10 +29,10 @@ Object.defineProperty(exports, "OutcomeList", {
     return _OutcomeList.default;
   }
 });
-Object.defineProperty(exports, "AlignmentButton", {
+Object.defineProperty(exports, "AlignmentWidget", {
   enumerable: true,
   get: function get() {
-    return _AlignmentButton.default;
+    return _AlignmentWidget.default;
   }
 });
 
@@ -44,4 +44,4 @@ var _OutcomesPerStudentReport = _interopRequireDefault(require("./containers/Out
 
 var _OutcomeList = _interopRequireDefault(require("./containers/OutcomeList.js"));
 
-var _AlignmentButton = _interopRequireDefault(require("./containers/AlignmentButton.js"));
+var _AlignmentWidget = _interopRequireDefault(require("./containers/AlignmentWidget.js"));

package/lib/translated/sv/services/OutcomesService.js

@@ -248,7 +248,8 @@ var OutcomesService = /*#__PURE__*/function () {
       var artifactType = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : null;
       var params = {
         per_page: 10,
-        page: page
+        page: page,
+        includes: 'scoring_method'
       };
 
       if (contextUuid) {

package/lib/translated/sv/services/__tests__/OutcomesService.test.js

@@ -496,7 +496,7 @@ describe('OutcomesService', function () {
   describe('listOutcomes', function () {
     it('uses correct query', function () {
       _fetchMock.default.getOnce(function (url, opts) {
-        var exp_url = /\/outcomes\/list\?artifact_id=103&artifact_type=quizzes\.quiz&context_uuid=def&page=999&per_page=10$/;
+        var exp_url = /\/outcomes\/list\?artifact_id=103&artifact_type=quizzes\.quiz&context_uuid=def&includes=scoring_method&page=999&per_page=10$/;
         (0, _chai.expect)(url).to.match(exp_url);
         return true;
       }, []);
@@ -516,7 +516,7 @@ describe('OutcomesService', function () {
       var headers = {
         total: 101
       };
-      var url = '/api/outcomes/list?context_uuid=def&page=999&per_page=10';
+      var url = '/api/outcomes/list?context_uuid=def&includes=scoring_method&page=999&per_page=10';
       mockGet(url, {
         body: body,
         headers: headers
@@ -529,7 +529,7 @@ describe('OutcomesService', function () {
       });
     });
     it('rejects on error', function () {
-      var url = '/api/outcomes/list?artifact_id=103&artifact_type=quizzes.quiz&context_uuid=def&page=999&per_page=10';
+      var url = '/api/outcomes/list?artifact_id=103&artifact_type=quizzes.quiz&context_uuid=def&includes=scoring_method&page=999&per_page=10';
       mockGet(url, 500);
       return subject.listOutcomes(host, jwt, 999, 'def', '103', 'quizzes.quiz').catch(function (err) {
         (0, _chai.expect)(err).to.have.property('status', 500);
@@ -548,7 +548,7 @@ describe('OutcomesService', function () {
       var headers = {
         total: 101
       };
-      var url = '/api/outcomes/list?artifact_id=103&artifact_type=quizzes.quiz&context_uuid=def&page=999&per_page=10';
+      var url = '/api/outcomes/list?artifact_id=103&artifact_type=quizzes.quiz&context_uuid=def&includes=scoring_method&page=999&per_page=10';
       mockGet(url, {
         body: body,
         headers: headers

package/lib/translated/sv/store/shapes.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.contextShape = exports.outcomeProficiencyShape = exports.outcomeProficiencyRatingShape = exports.outcomeCalculationMethodShape = exports.individualResultShape = exports.scoringTierShape = exports.outcomeResultShape = exports.outcomeShape = exports.scoringMethodShape = void 0;
+exports.algorithmDataShape = exports.decayingAverageDataShape = exports.nMasteryDataShape = exports.contextShape = exports.outcomeProficiencyShape = exports.outcomeProficiencyRatingShape = exports.outcomeCalculationMethodShape = exports.individualResultShape = exports.scoringTierShape = exports.outcomeResultShape = exports.outcomeShape = exports.scoringMethodShape = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,7 +13,8 @@ var scoringMethodShape = _propTypes.default.shape({
   algorithm: _propTypes.default.isRequired,
   algorithm_data: _propTypes.default.object,
   mastery_percent: _propTypes.default.number,
-  points_possible: _propTypes.default.number
+  points_possible: _propTypes.default.number,
+  scoring_tiers: _propTypes.default.arrayOf(scoringTierShape)
 });
 
 exports.scoringMethodShape = scoringMethodShape;
@@ -88,4 +89,20 @@ var contextShape = _propTypes.default.shape({
   outcome_proficiency: outcomeProficiencyShape
 });
 
-exports.contextShape = contextShape;
+exports.contextShape = contextShape;
+
+var nMasteryDataShape = _propTypes.default.shape({
+  n_mastery_count: _propTypes.default.number.isRequired
+});
+
+exports.nMasteryDataShape = nMasteryDataShape;
+
+var decayingAverageDataShape = _propTypes.default.shape({
+  decaying_average_percent: _propTypes.default.number.isRequired
+});
+
+exports.decayingAverageDataShape = decayingAverageDataShape;
+
+var algorithmDataShape = _propTypes.default.oneOf([nMasteryDataShape, decayingAverageDataShape]);
+
+exports.algorithmDataShape = algorithmDataShape;

package/lib/translated/sv/test/mockOutcomesData.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ratings = exports.OUTCOME_3 = exports.OUTCOME_2 = exports.OUTCOME_1 = void 0;
+
+/*
+ * This file contains mock data for outcomes. This mock data is centralized in this file and imported by several
+ * component test files.
+ */
+var OUTCOME_1 = {
+  id: '1',
+  label: 'A1',
+  title: 'tA1',
+  description: 'dA1',
+  friendly_description: 'fdA1',
+  scoring_method: {
+    algorithm: 'highest',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5,
+    scoring_tiers: ratings
+  }
+};
+exports.OUTCOME_1 = OUTCOME_1;
+var OUTCOME_2 = {
+  id: '2',
+  label: 'B2',
+  title: 'tB2',
+  description: 'dB2',
+  friendly_description: 'fdB2',
+  scoring_method: {
+    algorithm: 'latest',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5,
+    scoring_tiers: ratings
+  }
+};
+exports.OUTCOME_2 = OUTCOME_2;
+var OUTCOME_3 = {
+  id: '3',
+  label: 'C3',
+  title: 'tC3',
+  description: 'dC3',
+  friendly_description: 'fdC3',
+  scoring_method: {
+    algorithm: 'average',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5,
+    scoring_tiers: ratings
+  }
+};
+exports.OUTCOME_3 = OUTCOME_3;
+var ratings = [{
+  id: '91',
+  description: 'Exceeds Expectations',
+  percent: 1,
+  count: 20
+}, {
+  id: '92',
+  description: 'Meets Expectations',
+  percent: 0.6,
+  count: 5
+}, {
+  id: '93',
+  description: 'Does Not Meet Expectations',
+  percent: 0,
+  count: 25
+}];
+exports.ratings = ratings;

package/lib/translated/sv-x-k12/components/AlignmentButton/AlignmentItem/__tests__/index.test.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+describe('AlignmentItem', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '1',
+        label: 'A1',
+        title: 'tA1',
+        description: 'dA1'
+      },
+      removeAlignment: _sinon.default.spy()
+    }, props);
+  }
+
+  it('includes an OutcomeDescription', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('OutcomeDescription')).to.have.length(1);
+  });
+  it('includes a trash icon and delete button', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('IconTrashLine')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('does not include a trash icon and delete button when readOnly is true', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      readOnly: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('IconTrashLine')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(0);
+  });
+  it('calls removeAlignment when the trash icon is clicked', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('IconButton').simulate('click');
+    (0, _chai.expect)(props.removeAlignment.calledOnce).to.be.true;
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/translated/sv-x-k12/components/AlignmentButton/AlignmentItem/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _formatMessage = _interopRequireDefault(require("format-message"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../OutcomeDescription/index.js"));
+
+var _shapes = require("../../../store/shapes.js");
+
+var _theme = _interopRequireDefault(require("../../theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fztAm',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__AlignmentItem--deleteButton {\n  flex: 0 0 1rem;\n}\n\n.outcomes-ui__AlignmentItem--outcomeTitle {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n";
+  },
+  'deleteButton': 'outcomes-ui__AlignmentItem--deleteButton',
+  'outcomeTitle': 'outcomes-ui__AlignmentItem--outcomeTitle'
+};
+var AlignmentItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AlignmentItem, _React$Component);
+
+  var _super = (0, _createSuper2.default)(AlignmentItem);
+
+  function AlignmentItem() {
+    (0, _classCallCheck2.default)(this, AlignmentItem);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(AlignmentItem, [{
+    key: "focus",
+    value: function focus() {
+      this.focusLink.focus();
+    }
+  }, {
+    key: "renderDeleteButton",
+    value: function renderDeleteButton() {
+      var _this = this;
+
+      var _this$props = this.props,
+          outcome = _this$props.outcome,
+          removeAlignment = _this$props.removeAlignment,
+          readOnly = _this$props.readOnly;
+
+      if (!readOnly) {
+        return /*#__PURE__*/_react.default.createElement("span", {
+          className: styles.deleteButton,
+          "data-automation": "outcomeAlignmentItem__delete"
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+          withBackground: false,
+          withBorder: false,
+          screenReaderLabel: (0, _formatMessage.default)("Remove ".concat(outcome.title)),
+          elementRef: function elementRef(link) {
+            _this.focusLink = link;
+          } // eslint-disable-line immutable/no-mutation
+          ,
+          onClick: removeAlignment
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconTrashLine, null)));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var outcome = this.props.outcome;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, outcome.label), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.outcomeTitle,
+        "data-automation": "outcomeAlignmentItem__title"
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        weight: "bold",
+        size: "small"
+      }, outcome.title), this.renderDeleteButton()), /*#__PURE__*/_react.default.createElement(_index.default, {
+        description: outcome.description
+      }));
+    }
+  }]);
+  AlignmentItem.displayName = "AlignmentItem";
+  return AlignmentItem;
+}(_react.default.Component), _class2.propTypes = {
+  outcome: _shapes.outcomeShape.isRequired,
+  removeAlignment: _propTypes.default.func.isRequired,
+  readOnly: _propTypes.default.bool.isRequired
+}, _class2.defaultProps = {
+  readOnly: false
+}, _temp)) || _class);
+exports.default = AlignmentItem;

package/lib/translated/sv-x-k12/components/AlignmentButton/AlignmentItem/styles.css

@@ -0,0 +1,9 @@
+.deleteButton {
+  flex: 0 0 1rem;
+}
+
+.outcomeTitle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/lib/translated/sv-x-k12/components/AlignmentButton/__tests__/index.test.js

@@ -49,20 +49,20 @@ describe('AlignmentButton', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('Button')).to.have.length(1);
     (0, _chai.expect)(wrapper.find('AccessibleContent')).to.have.length(1);
   });
-  it('does not render an alignment button if canManageOutcomes is false', function () {
+  it('does not render an alignment button if readOnly is true', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
-      canManageOutcomes: false
+      readOnly: true
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('Button')).to.have.length(0);
   });
-  it('does not render header if canManageOutcomes is false and no outcomes are aligned', function () {
+  it('does not render header if readOnly is true and no outcomes are aligned', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
-      canManageOutcomes: false,
+      readOnly: true,
       alignedOutcomes: []
     })), {
       disableLifecycleMethods: true
@@ -71,45 +71,16 @@ describe('AlignmentButton', function () {
     (0, _chai.expect)(wrapper.find('IconOutcomesLine')).to.have.length(0);
     (0, _chai.expect)(wrapper.find('AlignmentCount')).to.have.length(0);
   });
-  it('disables the expansion toggle button if no outcomes are aligned', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
-      alignedOutcomes: []
-    })), {
-      disableLifecycleMethods: true
-    });
-    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').props('style');
-    (0, _chai.expect)(buttonStyle.interaction).to.equal('disabled');
-  });
-  it('renders the alignment list collapsed by default', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(0);
-  });
-  it('expansion toggle click is correctly handled', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
-    (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Collapse the list of aligned Outcomes');
-    (0, _chai.expect)(wrapper.find('IconArrowOpenDownLine')).to.have.length(1);
-  });
-  it('collapse toggle button click is correctly handled', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(0);
-    (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Expand the list of aligned Outcomes');
-    (0, _chai.expect)(wrapper.find('IconArrowOpenEndLine')).to.have.length(1);
-  });
   it('calls openOutcomePicker when the button is pressed', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Button[data-automation="alignmentButton__button"]').simulate('click');
+    wrapper.find('Button').simulate('click');
     (0, _chai.expect)(props.openOutcomePicker.calledOnce).to.be.true;
   });
   it('renders AlignmentItems for each aligned outcome', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
     (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
   });
   it('renders an AlignmentCount object', function () {
@@ -123,7 +94,6 @@ describe('AlignmentButton', function () {
     it('calls the removeAlignment action with shouldUpdateArtifact equal to true', function () {
       var props = makeProps();
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
       var remove = first.prop('removeAlignment');
       var outcome = first.prop('outcome');
@@ -132,19 +102,27 @@ describe('AlignmentButton', function () {
     });
     it('focuses on the previous alignment when the second alignment deleted', function () {
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
+      var first = wrapper.find('AlignmentItem').at(0);
       var next = wrapper.find('AlignmentItem').at(1);
+
+      var focus = _sinon.default.spy(first.instance(), 'focus');
+
       var remove = next.prop('removeAlignment');
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(0);
+      (0, _chai.expect)(focus.calledOnce).to.be.true;
+      (0, _chai.expect)(focus.calledWith()).to.be.true;
     });
     it('focuses on the next alignment when first alignment deleted', function () {
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
+      var next = wrapper.find('AlignmentItem').at(1);
       var remove = first.prop('removeAlignment');
+
+      var focus = _sinon.default.spy(next.instance(), 'focus');
+
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(1);
+      (0, _chai.expect)(focus.calledOnce).to.be.true;
+      (0, _chai.expect)(focus.calledWith()).to.be.true;
     });
   });
   describe('componentDidUpdate', function () {
@@ -157,14 +135,14 @@ describe('AlignmentButton', function () {
         }]
       };
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps(outcomes)));
-      var trigger = wrapper.find('Button[data-automation="alignmentButton__button"]').last();
+      var trigger = wrapper.find('button').last();
 
       var focus = _sinon.default.spy(trigger.instance(), 'focus');
 
       wrapper.setProps({
         alignedOutcomes: []
       }, function () {
-        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
+        (0, _chai.expect)(wrapper.find('button')).to.have.length(1);
         (0, _chai.expect)(focus.calledOnce).to.be.true;
         (0, _chai.expect)(focus.calledWith()).to.be.true;
         done();