@instructure/outcomes-ui 2.1.3 → 2.1.4

package/es/translated/da-x-k12/test/mockOutcomesData.js

@@ -0,0 +1,62 @@
+/*
+ * This file contains mock data for outcomes. This mock data is centralized in this file and imported by several
+ * component test files.
+ */
+export 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
+  }
+};
+export 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
+  }
+};
+export 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
+  }
+};
+export 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
+}];

package/es/translated/de/components/AlignmentButton/AlignmentItem/__tests__/index.test.js

@@ -0,0 +1,54 @@
+import { expect } from 'chai';
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import AlignmentItem from "../index.js";
+import checkA11y from "../../../../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.spy()
+    }, props);
+  }
+
+  it('includes an OutcomeDescription', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('OutcomeDescription')).to.have.length(1);
+  });
+  it('includes a trash icon and delete button', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('IconTrashLine')).to.have.length(1);
+    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 = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps({
+      readOnly: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('IconTrashLine')).to.have.length(0);
+    expect(wrapper.find('IconButton')).to.have.length(0);
+  });
+  it('calls removeAlignment when the trash icon is clicked', function () {
+    var props = makeProps();
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('IconButton').simulate('click');
+    expect(props.removeAlignment.calledOnce).to.be.true;
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
+  });
+});

package/es/translated/de/components/AlignmentButton/AlignmentItem/index.js

@@ -0,0 +1,95 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import t from 'format-message';
+import { IconButton } from '@instructure/ui-buttons';
+import { Text } from '@instructure/ui-text';
+import { IconTrashLine } from '@instructure/ui-icons';
+import { themeable } from '@instructure/ui-themeable';
+import OutcomeDescription from "../../OutcomeDescription/index.js";
+import { outcomeShape } from "../../../store/shapes.js";
+import theme from "../../theme.js";
+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 = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inherits(AlignmentItem, _React$Component);
+
+  var _super = _createSuper(AlignmentItem);
+
+  function AlignmentItem() {
+    _classCallCheck(this, AlignmentItem);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(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.createElement("span", {
+          className: styles.deleteButton,
+          "data-automation": "outcomeAlignmentItem__delete"
+        }, /*#__PURE__*/React.createElement(IconButton, {
+          withBackground: false,
+          withBorder: false,
+          screenReaderLabel: t("Remove ".concat(outcome.title)),
+          elementRef: function elementRef(link) {
+            _this.focusLink = link;
+          } // eslint-disable-line immutable/no-mutation
+          ,
+          onClick: removeAlignment
+        }, /*#__PURE__*/React.createElement(IconTrashLine, null)));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var outcome = this.props.outcome;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, outcome.label), /*#__PURE__*/React.createElement("div", {
+        className: styles.outcomeTitle,
+        "data-automation": "outcomeAlignmentItem__title"
+      }, /*#__PURE__*/React.createElement(Text, {
+        weight: "bold",
+        size: "small"
+      }, outcome.title), this.renderDeleteButton()), /*#__PURE__*/React.createElement(OutcomeDescription, {
+        description: outcome.description
+      }));
+    }
+  }]);
+
+  AlignmentItem.displayName = "AlignmentItem";
+  return AlignmentItem;
+}(React.Component), _class2.propTypes = {
+  outcome: outcomeShape.isRequired,
+  removeAlignment: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool.isRequired
+}, _class2.defaultProps = {
+  readOnly: false
+}, _temp)) || _class);
+export { AlignmentItem as default };

package/es/translated/de/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/es/translated/de/components/AlignmentButton/__tests__/index.test.js

@@ -39,20 +39,20 @@ describe('AlignmentButton', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
+    expect(wrapper.find('Button')).to.have.length(1);
     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 = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps({
-      canManageOutcomes: false
+      readOnly: true
     })), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(0);
+    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 = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps({
-      canManageOutcomes: false,
+      readOnly: true,
       alignedOutcomes: []
     })), {
       disableLifecycleMethods: true
@@ -61,45 +61,16 @@ describe('AlignmentButton', function () {
     expect(wrapper.find('IconOutcomesLine')).to.have.length(0);
     expect(wrapper.find('AlignmentCount')).to.have.length(0);
   });
-  it('disables the expansion toggle button if no outcomes are aligned', function () {
-    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps({
-      alignedOutcomes: []
-    })), {
-      disableLifecycleMethods: true
-    });
-    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').props('style');
-    expect(buttonStyle.interaction).to.equal('disabled');
-  });
-  it('renders the alignment list collapsed by default', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
-    expect(wrapper.find('AlignmentItem')).to.have.length(0);
-  });
-  it('expansion toggle click is correctly handled', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    expect(wrapper.find('AlignmentItem')).to.have.length(3);
-    expect(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Collapse the list of aligned Outcomes');
-    expect(wrapper.find('IconArrowOpenDownLine')).to.have.length(1);
-  });
-  it('collapse toggle button click is correctly handled', function () {
-    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
-    expect(wrapper.find('AlignmentItem')).to.have.length(0);
-    expect(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Expand the list of aligned Outcomes');
-    expect(wrapper.find('IconArrowOpenEndLine')).to.have.length(1);
-  });
   it('calls openOutcomePicker when the button is pressed', function () {
     var props = makeProps();
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Button[data-automation="alignmentButton__button"]').simulate('click');
+    wrapper.find('Button').simulate('click');
     expect(props.openOutcomePicker.calledOnce).to.be.true;
   });
   it('renders AlignmentItems for each aligned outcome', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
     expect(wrapper.find('AlignmentItem')).to.have.length(3);
   });
   it('renders an AlignmentCount object', function () {
@@ -113,7 +84,6 @@ describe('AlignmentButton', function () {
     it('calls the removeAlignment action with shouldUpdateArtifact equal to true', function () {
       var props = makeProps();
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, 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');
@@ -122,19 +92,23 @@ describe('AlignmentButton', function () {
     });
     it('focuses on the previous alignment when the second alignment deleted', function () {
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, 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.spy(first.instance(), 'focus');
       var remove = next.prop('removeAlignment');
       remove();
-      expect(wrapper.state().focusedItem).to.eq(0);
+      expect(focus.calledOnce).to.be.true;
+      expect(focus.calledWith()).to.be.true;
     });
     it('focuses on the next alignment when first alignment deleted', function () {
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, 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.spy(next.instance(), 'focus');
       remove();
-      expect(wrapper.state().focusedItem).to.eq(1);
+      expect(focus.calledOnce).to.be.true;
+      expect(focus.calledWith()).to.be.true;
     });
   });
   describe('componentDidUpdate', function () {
@@ -147,12 +121,12 @@ describe('AlignmentButton', function () {
         }]
       };
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps(outcomes)));
-      var trigger = wrapper.find('Button[data-automation="alignmentButton__button"]').last();
+      var trigger = wrapper.find('button').last();
       var focus = sinon.spy(trigger.instance(), 'focus');
       wrapper.setProps({
         alignedOutcomes: []
       }, function () {
-        expect(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
+        expect(wrapper.find('button')).to.have.length(1);
         expect(focus.calledOnce).to.be.true;
         expect(focus.calledWith()).to.be.true;
         done();

package/es/translated/de/components/AlignmentButton/index.js

@@ -8,13 +8,13 @@ var _dec, _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
-import { Button, IconButton } from '@instructure/ui-buttons';
+import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { IconArrowOpenEndLine, IconArrowOpenDownLine, IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
+import { IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
 import { List } from '@instructure/ui-list';
 import { themeable } from '@instructure/ui-themeable';
 import OutcomePickerModal from "../OutcomePickerModal/index.js";
-import AlignmentItem from "../AlignmentItem/index.js";
+import AlignmentItem from "./AlignmentItem/index.js";
 import AlignmentCount from "../AlignmentCount/index.js";
 import { outcomeShape } from "../../store/shapes.js";
 import theme from "../theme.js";
@@ -32,62 +32,31 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
 
   var _super = _createSuper(AlignmentButton);
 
-  function AlignmentButton(props) {
+  function AlignmentButton() {
     var _this;
 
     _classCallCheck(this, AlignmentButton);
 
-    _this = _super.call(this, props);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.toggleAlignmentList = function () {
-      _this.setState(function (prevState) {
-        return {
-          renderCollapsed: !prevState.renderCollapsed
-        };
-      });
-    };
+    _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.createElement("div", {
           className: styles.line,
-          "data-automation": "outcomeLabel__alignedOutcomes",
-          style: {
-            'align-items': 'center'
-          }
+          "data-automation": "outcomeLabel__alignedOutcomes"
         }, /*#__PURE__*/React.createElement(Text, {
           size: "medium"
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.spacing
-        }, /*#__PURE__*/React.createElement("span", {
-          style: {
-            'padding-right': '0.5em'
-          }
-        }, /*#__PURE__*/React.createElement(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.createElement(IconArrowOpenEndLine, {
-          "data-testid": "icon-arrow-right"
-        }) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, {
-          "data-testid": "icon-arrow-down"
-        }))), /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
+        }, /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
           size: "medium"
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.spacing
@@ -98,33 +67,28 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     };
 
     _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.createElement(List, {
         isUnstyled: true,
         margin: "small 0",
         delimiter: "solid"
-      }, alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
-        key: "delimiter-0"
-      }), alignedOutcomes.map(function (outcome, index) {
+      }, alignedOutcomes.map(function (outcome, index) {
         return /*#__PURE__*/React.createElement(List.Item, {
-          padding: "0 small 0 medium",
+          margin: "small 0",
           key: outcome.id
         }, /*#__PURE__*/React.createElement(AlignmentItem, {
           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.createElement(List.Item, {
-        key: "delimiter-1"
       }));
     };
 
@@ -146,9 +110,9 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     _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.createElement("div", {
           className: styles.button
         }, /*#__PURE__*/React.createElement(Button, {
@@ -165,10 +129,6 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
       }
     };
 
-    _this.state = {
-      renderCollapsed: true,
-      focusedItem: null
-    };
     return _this;
   }
 
@@ -192,19 +152,15 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           alignedOutcomes = _this$props5.alignedOutcomes;
       removeAlignment(removedOutcome.id, onUpdate, true);
       this.props.screenreaderNotification(removedOutcome.label + " Anpassung entfernt");
-      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();
         }
       }
     }
@@ -227,13 +183,13 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   onUpdate: PropTypes.func,
   screenreaderNotification: PropTypes.func,
   liveRegion: OutcomePickerModal.propTypes.liveRegion,
-  canManageOutcomes: PropTypes.bool.isRequired
+  readOnly: PropTypes.bool.isRequired
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
   onUpdate: null,
   screenreaderNotification: null,
   liveRegion: null,
-  canManageOutcomes: true
+  readOnly: false
 }, _temp)) || _class);
 export { AlignmentButton as default };

package/es/translated/de/components/AlignmentItem/__tests__/index.test.js

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