@instructure/outcomes-ui 2.1.3 → 2.1.4

package/lib/translated/pt/components/AlignmentButton/index.js

@@ -33,7 +33,7 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _index = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
 
-var _index2 = _interopRequireDefault(require("../AlignmentItem/index.js"));
+var _index2 = _interopRequireDefault(require("./AlignmentItem/index.js"));
 
 var _index3 = _interopRequireDefault(require("../AlignmentCount/index.js"));
 
@@ -57,61 +57,31 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
   var _super = (0, _createSuper2.default)(AlignmentButton);
 
-  function AlignmentButton(props) {
+  function AlignmentButton() {
     var _this;
 
     (0, _classCallCheck2.default)(this, AlignmentButton);
-    _this = _super.call(this, props);
-
-    _this.toggleAlignmentList = function () {
-      _this.setState(function (prevState) {
-        return {
-          renderCollapsed: !prevState.renderCollapsed
-        };
-      });
-    };
+
+    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.renderHeader = function () {
       var _this$props = _this.props,
-          canManageOutcomes = _this$props.canManageOutcomes,
+          readOnly = _this$props.readOnly,
           alignedOutcomes = _this$props.alignedOutcomes;
-      var renderCollapsed = _this.state.renderCollapsed;
-      var enableToggleAction = alignedOutcomes.length > 0;
-
-      if (!enableToggleAction) {
-        _this.setState({
-          renderCollapsed: true
-        });
-      }
 
-      if (canManageOutcomes || alignedOutcomes.length) {
+      if (!readOnly || alignedOutcomes.length) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.line,
-          "data-automation": "outcomeLabel__alignedOutcomes",
-          style: {
-            'align-items': 'center'
-          }
+          "data-automation": "outcomeLabel__alignedOutcomes"
         }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
           size: "medium"
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: styles.spacing
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          style: {
-            'padding-right': '0.5em'
-          }
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
-          size: "small",
-          screenReaderLabel: renderCollapsed ? "Expand the list of aligned Outcomes" : "Collapse the list of aligned Outcomes",
-          withBackground: false,
-          withBorder: false,
-          interaction: enableToggleAction ? 'enabled' : 'disabled',
-          onClick: _this.toggleAlignmentList,
-          "data-automation": "alignmentButton__collapseButton"
-        }, renderCollapsed ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenEndLine, {
-          "data-testid": "icon-arrow-right"
-        }) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, {
-          "data-testid": "icon-arrow-down"
-        }))), /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null))), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconOutcomesLine, null))), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
           size: "medium"
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: styles.spacing
@@ -122,33 +92,28 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     };
 
     _this.renderAlignmentList = function () {
-      if (_this.state.renderCollapsed) {
-        return;
-      }
-
       var _this$props2 = _this.props,
           alignedOutcomes = _this$props2.alignedOutcomes,
-          canManageOutcomes = _this$props2.canManageOutcomes;
+          readOnly = _this$props2.readOnly;
       return /*#__PURE__*/_react.default.createElement(_uiList.List, {
         isUnstyled: true,
         margin: "small 0",
         delimiter: "solid"
-      }, alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
-        key: "delimiter-0"
-      }), alignedOutcomes.map(function (outcome, index) {
+      }, alignedOutcomes.map(function (outcome, index) {
         return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
-          padding: "0 small 0 medium",
+          margin: "small 0",
           key: outcome.id
         }, /*#__PURE__*/_react.default.createElement(_index2.default, {
           removeAlignment: function removeAlignment() {
             return _this.handleRemoveAlignment(outcome, index);
           },
+          ref: function ref(o) {
+            _this["position".concat(index)] = o;
+          } // eslint-disable-line immutable/no-mutation
+          ,
           outcome: outcome,
-          canManageOutcomes: canManageOutcomes,
-          shouldFocus: index === _this.state.focusedItem
+          readOnly: readOnly
         }));
-      }), alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
-        key: "delimiter-1"
       }));
     };
 
@@ -170,9 +135,9 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _this.renderButton = function () {
       var _this$props4 = _this.props,
           openOutcomePicker = _this$props4.openOutcomePicker,
-          canManageOutcomes = _this$props4.canManageOutcomes;
+          readOnly = _this$props4.readOnly;
 
-      if (canManageOutcomes) {
+      if (!readOnly) {
         return /*#__PURE__*/_react.default.createElement("div", {
           className: styles.button
         }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
@@ -189,10 +154,6 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }
     };
 
-    _this.state = {
-      renderCollapsed: true,
-      focusedItem: null
-    };
     return _this;
   }
 
@@ -216,19 +177,15 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           alignedOutcomes = _this$props5.alignedOutcomes;
       removeAlignment(removedOutcome.id, onUpdate, true);
       this.props.screenreaderNotification(removedOutcome.label + " Alinhamento removido");
-      var priorIndex = index - 1;
+      var priorListItem = this["position".concat(index - 1)];
 
-      if (priorIndex >= 0) {
-        this.setState({
-          focusedItem: priorIndex
-        });
+      if (priorListItem) {
+        priorListItem.focus();
       } else if (alignedOutcomes.length > 0) {
-        var nextIndex = index + 1;
+        var nextListItem = this["position".concat(index + 1)];
 
-        if (nextIndex < alignedOutcomes.length) {
-          this.setState({
-            focusedItem: nextIndex
-          });
+        if (nextListItem) {
+          nextListItem.focus();
         }
       }
     }
@@ -250,13 +207,13 @@ var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   onUpdate: _propTypes.default.func,
   screenreaderNotification: _propTypes.default.func,
   liveRegion: _index.default.propTypes.liveRegion,
-  canManageOutcomes: _propTypes.default.bool.isRequired
+  readOnly: _propTypes.default.bool.isRequired
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
   onUpdate: null,
   screenreaderNotification: null,
   liveRegion: null,
-  canManageOutcomes: true
+  readOnly: false
 }, _temp)) || _class);
 exports.default = AlignmentButton;

package/lib/translated/pt/components/AlignmentItem/__tests__/index.test.js

@@ -16,16 +16,13 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _mockOutcomesData = require("../../../test/mockOutcomesData.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'
-      },
+      outcome: _mockOutcomesData.OUTCOME_1,
       removeAlignment: _sinon.default.spy(),
       canManageOutcomes: true,
       isTray: false,
@@ -40,6 +37,13 @@ describe('AlignmentItem', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
     (0, _chai.expect)(wrapper.find('Text')).to.have.length(1);
   });
+  it('renders the friendly name if user cannot manage outcomes', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      canManageOutcomes: false
+    })));
+    var friendlyName = wrapper.find('Text').at(0);
+    (0, _chai.expect)(friendlyName.text()).to.match(/A1/);
+  });
   it('includes an OutcomeDescription', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
@@ -163,24 +167,66 @@ describe('AlignmentItem', function () {
     wrapper.find('Checkbox').simulate('change');
     (0, _chai.expect)(props.deselectOutcomeIds.calledWith([1]));
   });
-  it('shows the popover when the item is truncated', function () {
-    var widget = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  it('displays the popover when the outcome title is truncated', function () {
+    var widget = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    var update = widget.find('TruncateText').at(0).prop('onUpdate');
+    update(true);
     (0, _chai.expect)(widget.find('Popover')).to.have.length(1);
     var tray = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       isTray: true
-    })));
+    })), {
+      disableLifecycleMethods: true
+    });
+    update = tray.find('TruncateText').at(0).prop('onUpdate');
+    update(true);
     (0, _chai.expect)(tray.find('Popover')).to.have.length(1);
   });
-  it('does not show the popover when the item is expanded', function () {
-    var widget = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  it('does not display the popover when the outcome title is fully rendered', function () {
+    var widget = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    var update = widget.find('TruncateText').at(0).prop('onUpdate');
+    update(false);
+    (0, _chai.expect)(widget.find('Popover')).to.have.length(0);
+    var tray = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      isTray: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    update = tray.find('TruncateText').at(0).prop('onUpdate');
+    update(false);
+    (0, _chai.expect)(tray.find('Popover')).to.have.length(0);
+  });
+  it('does not display the popover when the item is expanded', function () {
+    var widget = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    var update = widget.find('TruncateText').at(0).prop('onUpdate');
+    update(true);
+    (0, _chai.expect)(widget.find('Popover')).to.have.length(1);
     widget.find('IconButton').at(0).simulate('click');
     (0, _chai.expect)(widget.find('Popover')).to.have.length(0);
     var tray = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       isTray: true
-    })));
+    })), {
+      disableLifecycleMethods: true
+    });
+    update = tray.find('TruncateText').at(0).prop('onUpdate');
+    update(true);
+    (0, _chai.expect)(tray.find('Popover')).to.have.length(1);
     tray.find('IconButton').at(0).simulate('click');
     (0, _chai.expect)(tray.find('Popover')).to.have.length(0);
   });
+  it('expands the outcome details when the item is expanded', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('OutcomeDescription').at(0).prop('truncated')).to.be.true;
+    wrapper.find('IconButton').at(0).simulate('click');
+    (0, _chai.expect)(wrapper.find('OutcomeDescription').at(0).prop('truncated')).to.be.false;
+  });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
   });

package/lib/translated/pt/components/AlignmentItem/index.js

@@ -37,6 +37,8 @@ var _index = _interopRequireDefault(require("../OutcomeDescription/index.js"));
 
 var _shapes = require("../../store/shapes.js");
 
+var _useBoolean3 = _interopRequireDefault(require("../../hooks/useBoolean.js"));
+
 var AlignmentItem = function AlignmentItem(_ref) {
   var outcome = _ref.outcome,
       removeAlignment = _ref.removeAlignment,
@@ -52,10 +54,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
       truncated = _useState2[0],
       setTruncated = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      titleTruncated = _useState4[0],
+      setTitleTruncated = _useState4[1];
+
   var id = outcome.id,
       label = outcome.label,
       title = outcome.title,
-      description = outcome.description;
+      description = outcome.description,
+      friendly_description = outcome.friendly_description,
+      scoring_method = outcome.scoring_method;
+  var algorithm = scoring_method.algorithm,
+      algorithm_data = scoring_method.algorithm_data,
+      mastery_percent = scoring_method.mastery_percent,
+      points_possible = scoring_method.points_possible,
+      scoring_tiers = scoring_method.scoring_tiers;
   var trashIconRef = (0, _react.useRef)();
 
   var toggleExpandOutcomeDetails = function toggleExpandOutcomeDetails() {
@@ -64,6 +78,12 @@ var AlignmentItem = function AlignmentItem(_ref) {
     });
   };
 
+  var _useBoolean = (0, _useBoolean3.default)(false),
+      _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 3),
+      isShowingTooltip = _useBoolean2[0],
+      showTooltip = _useBoolean2[1],
+      hideTooltip = _useBoolean2[2];
+
   (0, _react.useEffect)(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -85,7 +105,13 @@ var AlignmentItem = function AlignmentItem(_ref) {
       size: size,
       weight: weight,
       wrap: "break-word"
-    }, title);
+    }, !canManageOutcomes && label ? label : title);
+  };
+
+  var handleUpdate = function handleUpdate(isTruncated) {
+    if (titleTruncated !== isTruncated) {
+      setTitleTruncated(isTruncated);
+    }
   };
 
   var renderOutcomeTitle = function renderOutcomeTitle() {
@@ -94,8 +120,9 @@ var AlignmentItem = function AlignmentItem(_ref) {
         padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
       },
       "data-automation": "alignmentItem__outcomeName"
-    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, title), /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
-      position: "middle"
+    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
+      position: "middle",
+      onUpdate: handleUpdate
     }, renderTitleText('medium', 'bold'), /*#__PURE__*/_react.default.createElement("span", null))) : renderTitleText('medium', 'bold'));
   };
 
@@ -121,7 +148,8 @@ var AlignmentItem = function AlignmentItem(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_uiView.View, {
     as: "div",
-    padding: "x-small 0"
+    padding: "x-small 0",
+    "data-automation": "outcomeAlignment__item"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     as: "div",
     alignItems: "start"
@@ -145,7 +173,8 @@ var AlignmentItem = function AlignmentItem(_ref) {
     checked: isOutcomeSelected(id),
     onChange: toggleOutcomeSelection
   }))), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
-    as: "div"
+    as: "div",
+    "data-automation": "alignmentItem-expand-description"
   }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
     size: "small",
     screenReaderLabel: truncated ? "Expand description for outcome " + title : "Collapse description for outcome " + title,
@@ -162,8 +191,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     alignItems: "center",
     size: "50%",
     shouldGrow: true
-  }, truncated ? /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
+  }, truncated && titleTruncated ? /*#__PURE__*/_react.default.createElement(_uiPopover.Popover, {
     renderTrigger: renderOutcomeTitle(),
+    isShowingContent: isShowingTooltip,
+    onShowContent: showTooltip,
+    onHideContent: hideTooltip,
     color: "primary-inverse",
     placement: "top start",
     offsetY: '-10rem'
@@ -183,7 +215,16 @@ var AlignmentItem = function AlignmentItem(_ref) {
     padding: "0 0 x-small"
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     label: label,
-    description: description
+    description: description,
+    friendlyDescription: friendly_description,
+    calculationMethod: algorithm,
+    calculationInt: algorithm_data,
+    masteryPercent: mastery_percent,
+    pointsPossible: points_possible,
+    ratings: scoring_tiers,
+    truncated: truncated,
+    isTray: isTray,
+    canManageOutcomes: canManageOutcomes
   })))));
 };
 

package/lib/translated/pt/components/AlignmentItem/index.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.outcome = exports.readOnlyAlignment = exports.alignment = exports.default = void 0;
+exports.alignment = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -24,10 +24,10 @@ var noOp = function noOp() {};
 
 var alignment = function alignment() {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
-    outcome: (0, _addonKnobs.object)('Outcome', _constants.basicOutcome),
+    outcome: (0, _addonKnobs.object)('Outcome', _constants.outcomeViewWithResults),
     removeAlignment: noOp,
-    readOnly: false,
-    isTray: false,
+    isTray: (0, _addonKnobs.boolean)('Render in Outcome Tray?', false),
+    canManageOutcomes: (0, _addonKnobs.boolean)('User can manage outcomes', true),
     setFocusedOutcome: noOp,
     isOutcomeSelected: noOp,
     selectOutcomeIds: noOp,
@@ -35,34 +35,4 @@ var alignment = function alignment() {
   });
 };
 
-exports.alignment = alignment;
-
-var readOnlyAlignment = function readOnlyAlignment() {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    outcome: (0, _addonKnobs.object)('Outcome', _constants.basicOutcome),
-    removeAlignment: noOp,
-    readOnly: true,
-    isTray: false,
-    setFocusedOutcome: noOp,
-    isOutcomeSelected: noOp,
-    selectOutcomeIds: noOp,
-    deselectOutcomeIds: noOp
-  });
-};
-
-exports.readOnlyAlignment = readOnlyAlignment;
-
-var outcome = function outcome() {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    outcome: (0, _addonKnobs.object)('Outcome', _constants.basicOutcome),
-    removeAlignment: noOp,
-    readOnly: false,
-    isTray: true,
-    setFocusedOutcome: noOp,
-    isOutcomeSelected: noOp,
-    selectOutcomeIds: noOp,
-    deselectOutcomeIds: noOp
-  });
-};
-
-exports.outcome = outcome;
+exports.alignment = alignment;

package/lib/translated/pt/components/AlignmentWidget/__tests__/index.test.js

@@ -0,0 +1,164 @@
+"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"));
+
+var _mockOutcomesData = require("../../../test/mockOutcomesData.js");
+
+describe('AlignmentWidget', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      alignedOutcomes: [_mockOutcomesData.OUTCOME_1, _mockOutcomesData.OUTCOME_2, _mockOutcomesData.OUTCOME_3],
+      tray: function tray() {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "outcomeTray"
+        });
+      },
+      // eslint-disable-line react/display-name
+      scope: 'scopeForTest',
+      openOutcomePicker: _sinon.default.spy(),
+      removeAlignment: _sinon.default.spy(),
+      onUpdate: _sinon.default.spy(),
+      screenreaderNotification: _sinon.default.spy()
+    }, props);
+  }
+
+  it('renders a button with a11y components', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__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 () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      canManageOutcomes: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(0);
+  });
+  it('does not render header if canManageOutcomes is false and no outcomes are aligned', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      canManageOutcomes: false,
+      alignedOutcomes: []
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Text')).to.have.length(0);
+    (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="alignmentWidget__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="alignmentWidget__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="alignmentWidget__collapseButton"]').simulate('click');
+    wrapper.find('IconButton[data-automation="alignmentWidget__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="alignmentWidget__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="alignmentWidget__collapseButton"]').simulate('click');
+    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
+  });
+  it('renders an AlignmentCount object', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    (0, _chai.expect)(wrapper.find('AlignmentCount')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+  describe('when an alignment is removed', 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="alignmentWidget__collapseButton"]').simulate('click');
+      var first = wrapper.find('AlignmentItem').at(0);
+      var remove = first.prop('removeAlignment');
+      var outcome = first.prop('outcome');
+      remove();
+      (0, _chai.expect)(props.removeAlignment.getCall(0).args).to.include(outcome.id, true);
+    });
+    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="alignmentWidget__collapseButton"]').simulate('click');
+      var next = wrapper.find('AlignmentItem').at(1);
+      var remove = next.prop('removeAlignment');
+      remove();
+      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(0);
+    });
+    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="alignmentWidget__collapseButton"]').simulate('click');
+      var first = wrapper.find('AlignmentItem').at(0);
+      var remove = first.prop('removeAlignment');
+      remove();
+      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(1);
+    });
+  });
+  describe('componentDidUpdate', function () {
+    it('shifts focus to the |+Outcome| Button when alignments are removed', function (done) {
+      var outcomes = {
+        alignedOutcomes: [{
+          id: '1',
+          label: 'A1',
+          title: 'tA1'
+        }]
+      };
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps(outcomes)));
+      var trigger = wrapper.find('Button[data-automation="alignmentWidget__button"]').last();
+
+      var focus = _sinon.default.spy(trigger.instance(), 'focus');
+
+      wrapper.setProps({
+        alignedOutcomes: []
+      }, function () {
+        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(1);
+        (0, _chai.expect)(focus.calledOnce).to.be.true;
+        (0, _chai.expect)(focus.calledWith()).to.be.true;
+        done();
+      });
+    });
+  });
+});