@instructure/outcomes-ui 2.1.3 → 2.1.5

package/es/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,
@@ -27,7 +23,14 @@ describe('AlignmentItem', function () {
 
   it('renders title', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentItem, makeProps()));
-    expect(wrapper.find('Text')).to.have.length(1);
+    expect(wrapper.find('Heading')).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()), {
@@ -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()));
   });

package/es/components/AlignmentItem/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import t from 'format-message';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { Flex } from '@instructure/ui-flex';
+import { Heading } from '@instructure/ui-heading';
 import { Text } from '@instructure/ui-text';
 import { IconArrowOpenDownLine, IconArrowOpenEndLine, IconTrashLine } from '@instructure/ui-icons';
 import { IconButton } from '@instructure/ui-buttons';
@@ -13,6 +14,7 @@ import { TruncateText } from '@instructure/ui-truncate-text';
 import { View } from '@instructure/ui-view';
 import OutcomeDescription from "../OutcomeDescription/index.js";
 import { outcomeShape } from "../../store/shapes.js";
+import useBoolean from "../../hooks/useBoolean.js";
 
 var AlignmentItem = function AlignmentItem(_ref) {
   var outcome = _ref.outcome,
@@ -29,10 +31,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
       truncated = _useState2[0],
       setTruncated = _useState2[1];
 
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_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 = useRef();
 
   var toggleExpandOutcomeDetails = function toggleExpandOutcomeDetails() {
@@ -41,6 +55,13 @@ var AlignmentItem = function AlignmentItem(_ref) {
     });
   };
 
+  var _useBoolean = useBoolean(false),
+      _useBoolean2 = _slicedToArray(_useBoolean, 3),
+      isShowingTooltip = _useBoolean2[0],
+      showTooltip = _useBoolean2[1],
+      hideTooltip = _useBoolean2[2];
+
+  var displayTitle = !canManageOutcomes && label ? label : title;
   useEffect(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -57,12 +78,10 @@ var AlignmentItem = function AlignmentItem(_ref) {
     }
   };
 
-  var renderTitleText = function renderTitleText(size, weight) {
-    return /*#__PURE__*/React.createElement(Text, {
-      size: size,
-      weight: weight,
-      wrap: "break-word"
-    }, title);
+  var handleUpdate = function handleUpdate(isTruncated) {
+    if (titleTruncated !== isTruncated) {
+      setTitleTruncated(isTruncated);
+    }
   };
 
   var renderOutcomeTitle = function renderOutcomeTitle() {
@@ -71,9 +90,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
         padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
       },
       "data-automation": "alignmentItem__outcomeName"
-    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenReaderContent, null, title), /*#__PURE__*/React.createElement(TruncateText, {
-      position: "middle"
-    }, renderTitleText('medium', 'bold'), /*#__PURE__*/React.createElement("span", null))) : renderTitleText('medium', 'bold'));
+    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, /*#__PURE__*/React.createElement(TruncateText, {
+      position: "middle",
+      onUpdate: handleUpdate
+    }, displayTitle, /*#__PURE__*/React.createElement("span", null)))) : /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, displayTitle));
   };
 
   var renderDeleteButton = function renderDeleteButton() {
@@ -100,7 +132,8 @@ var AlignmentItem = function AlignmentItem(_ref) {
 
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
-    padding: "x-small 0"
+    padding: "x-small 0",
+    "data-automation": "outcomeAlignment__item"
   }, /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     alignItems: "start"
@@ -126,7 +159,8 @@ var AlignmentItem = function AlignmentItem(_ref) {
     checked: isOutcomeSelected(id),
     onChange: toggleOutcomeSelection
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "div"
+    as: "div",
+    "data-automation": "alignmentItem-expand-description"
   }, /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     screenReaderLabel: truncated ? t('Expand description for outcome {title}', {
@@ -147,8 +181,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     alignItems: "center",
     size: "50%",
     shouldGrow: true
-  }, truncated ? /*#__PURE__*/React.createElement(Popover, {
+  }, truncated && titleTruncated ? /*#__PURE__*/React.createElement(Popover, {
     renderTrigger: renderOutcomeTitle(),
+    isShowingContent: isShowingTooltip,
+    onShowContent: showTooltip,
+    onHideContent: hideTooltip,
     color: "primary-inverse",
     placement: "top start",
     offsetY: '-10rem'
@@ -156,7 +193,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     as: "div",
     maxWidth: "19rem",
     padding: "small"
-  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    weight: "normal",
+    wrap: "break-word"
+  }, displayTitle))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     alignItems: "start"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
@@ -168,7 +209,16 @@ var AlignmentItem = function AlignmentItem(_ref) {
     padding: "0 0 x-small"
   }, /*#__PURE__*/React.createElement(OutcomeDescription, {
     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/es/components/AlignmentItem/index.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
-import { basicOutcome } from "../../../.storybook/constants.js";
+import { object, boolean } from '@storybook/addon-knobs';
+import { outcomeViewWithResults } from "../../../.storybook/constants.js";
 import AlignmentItem from "./index.js";
 export default {
   title: 'AlignmentItem'
@@ -10,34 +10,10 @@ var noOp = function noOp() {};
 
 export var alignment = function alignment() {
   return /*#__PURE__*/React.createElement(AlignmentItem, {
-    outcome: object('Outcome', basicOutcome),
+    outcome: object('Outcome', outcomeViewWithResults),
     removeAlignment: noOp,
-    readOnly: false,
-    isTray: false,
-    setFocusedOutcome: noOp,
-    isOutcomeSelected: noOp,
-    selectOutcomeIds: noOp,
-    deselectOutcomeIds: noOp
-  });
-};
-export var readOnlyAlignment = function readOnlyAlignment() {
-  return /*#__PURE__*/React.createElement(AlignmentItem, {
-    outcome: object('Outcome', basicOutcome),
-    removeAlignment: noOp,
-    readOnly: true,
-    isTray: false,
-    setFocusedOutcome: noOp,
-    isOutcomeSelected: noOp,
-    selectOutcomeIds: noOp,
-    deselectOutcomeIds: noOp
-  });
-};
-export var outcome = function outcome() {
-  return /*#__PURE__*/React.createElement(AlignmentItem, {
-    outcome: object('Outcome', basicOutcome),
-    removeAlignment: noOp,
-    readOnly: false,
-    isTray: true,
+    isTray: boolean('Render in Outcome Tray?', false),
+    canManageOutcomes: boolean('User can manage outcomes', true),
     setFocusedOutcome: noOp,
     isOutcomeSelected: noOp,
     selectOutcomeIds: noOp,

package/es/components/AlignmentWidget/__tests__/index.test.js

@@ -0,0 +1,151 @@
+import { expect } from 'chai';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+import AlignmentWidget from "../index.js";
+import checkA11y from "../../../test/checkA11y.js";
+import { OUTCOME_1, OUTCOME_2, OUTCOME_3 } from "../../../test/mockOutcomesData.js";
+describe('AlignmentWidget', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      alignedOutcomes: [OUTCOME_1, OUTCOME_2, OUTCOME_3],
+      tray: function tray() {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "outcomeTray"
+        });
+      },
+      // eslint-disable-line react/display-name
+      scope: 'scopeForTest',
+      openOutcomePicker: sinon.spy(),
+      removeAlignment: sinon.spy(),
+      onUpdate: sinon.spy(),
+      screenreaderNotification: sinon.spy()
+    }, props);
+  }
+
+  it('renders a button with a11y components', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Button[data-automation="alignmentWidget__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 () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps({
+      canManageOutcomes: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    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 = shallow( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps({
+      canManageOutcomes: false,
+      alignedOutcomes: []
+    })), {
+      disableLifecycleMethods: true
+    });
+    expect(wrapper.find('Text')).to.have.length(0);
+    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(AlignmentWidget, makeProps({
+      alignedOutcomes: []
+    })), {
+      disableLifecycleMethods: true
+    });
+    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').props('style');
+    expect(buttonStyle.interaction).to.equal('disabled');
+  });
+  it('renders the alignment list collapsed by default', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+    expect(wrapper.find('AlignmentItem')).to.have.length(0);
+  });
+  it('expansion toggle click is correctly handled', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+    wrapper.find('IconButton[data-automation="alignmentWidget__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(AlignmentWidget, makeProps()));
+    wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
+    wrapper.find('IconButton[data-automation="alignmentWidget__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(AlignmentWidget, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('Button[data-automation="alignmentWidget__button"]').simulate('click');
+    expect(props.openOutcomePicker.calledOnce).to.be.true;
+  });
+  it('renders AlignmentItems for each aligned outcome', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+    wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
+    expect(wrapper.find('AlignmentItem')).to.have.length(3);
+  });
+  it('renders an AlignmentCount object', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+    expect(wrapper.find('AlignmentCount')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+  });
+  describe('when an alignment is removed', function () {
+    it('calls the removeAlignment action with shouldUpdateArtifact equal to true', function () {
+      var props = makeProps();
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentWidget, 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();
+      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 = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
+      var next = wrapper.find('AlignmentItem').at(1);
+      var remove = next.prop('removeAlignment');
+      remove();
+      expect(wrapper.state().focusedItem).to.eq(0);
+    });
+    it('focuses on the next alignment when first alignment deleted', function () {
+      var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps()));
+      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
+      var first = wrapper.find('AlignmentItem').at(0);
+      var remove = first.prop('removeAlignment');
+      remove();
+      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 = mount( /*#__PURE__*/React.createElement(AlignmentWidget, makeProps(outcomes)));
+      var trigger = wrapper.find('Button[data-automation="alignmentWidget__button"]').last();
+      var focus = sinon.spy(trigger.instance(), 'focus');
+      wrapper.setProps({
+        alignedOutcomes: []
+      }, function () {
+        expect(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(1);
+        expect(focus.calledOnce).to.be.true;
+        expect(focus.calledWith()).to.be.true;
+        done();
+      });
+    });
+  });
+});