@instructure/outcomes-ui 2.1.3 → 2.1.5

package/lib/translated/en-IE/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/en-IE/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/en-IE/util/__tests__/flashAlertUtils.test.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _chai = require("chai");
+
+var _flashAlertUtils = require("../flashAlertUtils.js");
+
+describe('findDetailMessage', function () {
+  it('returns just the message if there is no response', function () {
+    var error = {
+      message: 'Error!'
+    };
+    (0, _chai.expect)((0, _flashAlertUtils.findDetailMessage)(error)).to.deep.eq({
+      a: error.message,
+      b: void 0
+    });
+  });
+  it('returns both messages if errors is not an array', function () {
+    var error = {
+      message: 'Error!',
+      response: {
+        data: {
+          message: 'Message!',
+          errors: ''
+        }
+      }
+    };
+    (0, _chai.expect)((0, _flashAlertUtils.findDetailMessage)(error)).to.deep.eq({
+      a: error.response.data.message,
+      b: error.message
+    });
+  });
+  it('returns the message and first error if errors is an array', function () {
+    var error = {
+      message: 'Error!',
+      response: {
+        data: {
+          message: 'Message!',
+          errors: [{
+            message: 'First error!'
+          }, {
+            message: 'Second error!'
+          }]
+        }
+      }
+    };
+    (0, _chai.expect)((0, _flashAlertUtils.findDetailMessage)(error)).to.deep.eq({
+      a: error.response.data.errors[0].message,
+      b: error.message
+    });
+  });
+});
+describe('isLoadingChunkError', function () {
+  it('returns true if the string contains loading chunk text', function () {
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('loading chunk')).to.be.true;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('loading chunk error')).to.be.true;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('error loading chunk')).to.be.true;
+  });
+  it('returns false if the string does not contain loading chunk text', function () {
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('loading')).to.be.false;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('chunk')).to.be.false;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('error loading')).to.be.false;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('loading error')).to.be.false;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('error chunk')).to.be.false;
+    (0, _chai.expect)((0, _flashAlertUtils.isLoadingChunkError)('chunk error')).to.be.false;
+  });
+});

package/lib/translated/en-IE/util/__tests__/outcomesReportUtils.test.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _chai = require("chai");
+
+var _outcomesReportUtils = require("../outcomesReportUtils.js");
+
+var _constants = require("../../constants.js");
+
+var user1 = {
+  uuid: 'user1-uuid',
+  full_name: 'Student 1'
+};
+var user2 = {
+  uuid: 'user2-uuid',
+  full_name: 'Student 2'
+};
+var rollup = {
+  outcomeId: '1',
+  childArtifactCount: 1,
+  usesBank: false
+};
+var outcome = {
+  id: '1',
+  guid: 'outcome-guid',
+  group: false,
+  label: 'outcome friendly name',
+  title: 'outcome name',
+  description: 'outcome description',
+  external_id: 10,
+  scoring_method: {
+    algorithm: 'average',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5
+  }
+};
+var masteryResult = {
+  userId: user1.uuid,
+  percentScore: 0.6667,
+  points: 2,
+  pointsPossible: 3,
+  attempt: 1
+};
+var nonMasteryResult = {
+  userId: user2.uuid,
+  percentScore: 0.3333,
+  points: 1,
+  pointsPossible: 3,
+  attempt: 1
+};
+describe('outcomesReportUtils', function () {
+  describe('formatDataInRow', function () {
+    it('returns the correct value for each row header', function () {
+      var formattedRow = (0, _outcomesReportUtils.formatDataIntoRow)(user1, outcome, rollup, masteryResult);
+      (0, _chai.expect)(formattedRow[_constants.STUDENT_NAME]).to.eq(user1.full_name);
+      (0, _chai.expect)(formattedRow[_constants.STUDENT_UUID]).to.eq(user1.uuid);
+      (0, _chai.expect)(formattedRow[_constants.ATTEMPT_COUNT]).to.eq(masteryResult.attempt);
+      (0, _chai.expect)(formattedRow[_constants.ALIGNED_QUESTIONS_COUNT]).to.eq(rollup.childArtifactCount);
+      (0, _chai.expect)(formattedRow[_constants.LOR_POINTS]).to.eq(masteryResult.points);
+      (0, _chai.expect)(formattedRow[_constants.LOR_POINTS_POSSIBLE]).to.eq(masteryResult.pointsPossible);
+      (0, _chai.expect)(formattedRow[_constants.LO_NAME]).to.eq(outcome.title);
+      (0, _chai.expect)(formattedRow[_constants.LO_ID]).to.eq(outcome.id);
+      (0, _chai.expect)(formattedRow[_constants.LO_MASTERY_PERCENT]).to.eq(outcome.scoring_method.mastery_percent);
+      (0, _chai.expect)(formattedRow[_constants.LO_MASTERED]).to.be.true;
+      (0, _chai.expect)(Object.keys(formattedRow).length).eq(10);
+    });
+    describe('for aligned questions count row', function () {
+      it('returns Variable Questions for aligned questions count if a bank was used', function () {
+        var usesBank = {
+          outcomeId: '1',
+          usesBank: true
+        };
+        var formattedRow = (0, _outcomesReportUtils.formatDataIntoRow)(user1, outcome, usesBank, masteryResult);
+        (0, _chai.expect)(formattedRow[_constants.ALIGNED_QUESTIONS_COUNT]).to.eq('Variable Questions');
+      });
+    });
+  });
+  describe('hasMastery', function () {
+    it('returns true if the student achieved mastery for the given outcome', function () {
+      (0, _chai.expect)((0, _outcomesReportUtils.hasMastery)(masteryResult, outcome)).to.be.true;
+    });
+    it('returns false if the student did not reach mastery for the given outcome', function () {
+      (0, _chai.expect)((0, _outcomesReportUtils.hasMastery)(nonMasteryResult, outcome)).to.be.false;
+    });
+  });
+  describe('fileName', function () {
+    it('returns the file name for the csv report', function () {
+      var name = (0, _outcomesReportUtils.fileName)(1);
+      (0, _chai.expect)(name.includes('outcome_analysis_csv_')).to.be.true;
+      (0, _chai.expect)(name.includes('_quiz_1.csv')).to.be.true;
+    });
+  });
+  describe('getDate', function () {
+    // Regex for yyyy-mm-dd format was found here:
+    // https://stackoverflow.com/questions/22061723/regex-date-validation-for-yyyy-mm-dd
+    it('returns the date in yyyy-mm-dd format', function () {
+      (0, _chai.expect)((0, _outcomesReportUtils.getDate)().match(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/)).not.to.empty;
+    });
+  });
+  describe('formatPercentage', function () {
+    it('formats two numbers into a percentage', function () {
+      (0, _chai.expect)((0, _outcomesReportUtils.formatPercentage)(50, 100)).to.eq(50);
+      (0, _chai.expect)((0, _outcomesReportUtils.formatPercentage)(5, 10)).to.eq(50);
+    });
+    it('formats two numbers into a percentage and rounds', function () {
+      (0, _chai.expect)((0, _outcomesReportUtils.formatPercentage)(1, 3)).to.eq(33);
+    });
+  });
+});

package/lib/translated/en-IE/util/flashAlertUtils.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findDetailMessage = findDetailMessage;
+exports.isLoadingChunkError = void 0;
+
+function findDetailMessage(err) {
+  var a = err.message;
+  var b;
+
+  if (err.response) {
+    if (err.response.data) {
+      try {
+        if (Array.isArray(err.response.data.errors)) {
+          // probably a canvas api
+          a = err.response.data.errors[0].message;
+          b = err.message;
+        } else if (err.response.data.message) {
+          // probably a canvas api too
+          a = err.response.data.message;
+          b = err.message;
+        }
+      } catch (ignore) {
+        a = err.message;
+      }
+    }
+  }
+
+  return {
+    a: a,
+    b: b
+  };
+}
+
+var isLoadingChunkError = function isLoadingChunkError(a) {
+  return typeof a === 'string' && a.toLowerCase().includes('loading chunk');
+};
+
+exports.isLoadingChunkError = isLoadingChunkError;

package/lib/translated/en-IE/util/outcomesReportUtils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatPercentage = exports.getDate = exports.fileName = exports.hasMastery = exports.formatDataIntoRow = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _constants = require("../constants.js");
+
+var formatDataIntoRow = function formatDataIntoRow(user, outcome, rollup, result) {
+  var _ref;
+
+  return _ref = {}, (0, _defineProperty2.default)(_ref, _constants.STUDENT_NAME, user.full_name), (0, _defineProperty2.default)(_ref, _constants.STUDENT_UUID, user.uuid), (0, _defineProperty2.default)(_ref, _constants.ATTEMPT_COUNT, result.attempt), (0, _defineProperty2.default)(_ref, _constants.ALIGNED_QUESTIONS_COUNT, getAlignedQuestionsCount(rollup)), (0, _defineProperty2.default)(_ref, _constants.LOR_POINTS, result.points), (0, _defineProperty2.default)(_ref, _constants.LOR_POINTS_POSSIBLE, result.pointsPossible), (0, _defineProperty2.default)(_ref, _constants.LO_NAME, outcome.title), (0, _defineProperty2.default)(_ref, _constants.LO_ID, outcome.id), (0, _defineProperty2.default)(_ref, _constants.LO_MASTERY_PERCENT, outcome.scoring_method.mastery_percent), (0, _defineProperty2.default)(_ref, _constants.LO_MASTERED, hasMastery(result, outcome)), _ref;
+};
+
+exports.formatDataIntoRow = formatDataIntoRow;
+
+var hasMastery = function hasMastery(result, outcome) {
+  return result && result.percentScore >= outcome.scoring_method.mastery_percent;
+};
+
+exports.hasMastery = hasMastery;
+
+var fileName = function fileName(id) {
+  var date = getDate();
+  return "outcome_analysis_csv_".concat(date, "_quiz_").concat(id, ".csv");
+};
+
+exports.fileName = fileName;
+
+var getDate = function getDate() {
+  // Found this solution on stackoverflow:
+  // https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd
+  var now = new Date(Date.now());
+  var offset = now.getTimezoneOffset();
+  return new Date(now.getTime() - offset * 60 * 1000).toISOString().split('T')[0];
+};
+
+exports.getDate = getDate;
+
+var formatPercentage = function formatPercentage(value, maxValue) {
+  return Math.round(value / maxValue * 100);
+}; // Note: Once OS has Item Bank alignments, this will need to be updated
+
+
+exports.formatPercentage = formatPercentage;
+
+var getAlignedQuestionsCount = function getAlignedQuestionsCount(rollup) {
+  return rollup.usesBank ? "Variable questions" : rollup.childArtifactCount;
+};

package/lib/translated/es/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,
@@ -38,7 +35,14 @@ describe('AlignmentItem', function () {
 
   it('renders title', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('Text')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('Heading')).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()), {
@@ -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/es/components/AlignmentItem/index.js

@@ -19,6 +19,8 @@ var _uiCheckbox = require("@instructure/ui-checkbox");
 
 var _uiFlex = require("@instructure/ui-flex");
 
+var _uiHeading = require("@instructure/ui-heading");
+
 var _uiText = require("@instructure/ui-text");
 
 var _uiIcons = require("@instructure/ui-icons");
@@ -37,6 +39,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 +56,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 +80,13 @@ 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];
+
+  var displayTitle = !canManageOutcomes && label ? label : title;
   (0, _react.useEffect)(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -80,12 +103,10 @@ var AlignmentItem = function AlignmentItem(_ref) {
     }
   };
 
-  var renderTitleText = function renderTitleText(size, weight) {
-    return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-      size: size,
-      weight: weight,
-      wrap: "break-word"
-    }, title);
+  var handleUpdate = function handleUpdate(isTruncated) {
+    if (titleTruncated !== isTruncated) {
+      setTitleTruncated(isTruncated);
+    }
   };
 
   var renderOutcomeTitle = function renderOutcomeTitle() {
@@ -94,9 +115,22 @@ 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"
-    }, renderTitleText('medium', 'bold'), /*#__PURE__*/_react.default.createElement("span", null))) : renderTitleText('medium', 'bold'));
+    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
+      position: "middle",
+      onUpdate: handleUpdate
+    }, displayTitle, /*#__PURE__*/_react.default.createElement("span", null)))) : /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, displayTitle));
   };
 
   var renderDeleteButton = function renderDeleteButton() {
@@ -121,7 +155,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 +180,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 +198,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'
@@ -171,7 +210,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     as: "div",
     maxWidth: "19rem",
     padding: "small"
-  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, renderDeleteButton())), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "small",
+    weight: "normal",
+    wrap: "break-word"
+  }, displayTitle))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, renderDeleteButton())), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     as: "div",
     alignItems: "start"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
@@ -183,7 +226,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
   })))));
 };