@instructure/outcomes-ui 2.1.0 → 2.1.3

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

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiList = require("@instructure/ui-list");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
+
+var _index2 = _interopRequireDefault(require("../AlignmentItem/index.js"));
+
+var _index3 = _interopRequireDefault(require("../AlignmentCount/index.js"));
+
+var _shapes = require("../../store/shapes.js");
+
+var _theme = _interopRequireDefault(require("../theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'bKqnu',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__AlignmentButton--spacing {\n  padding-right: ".concat(theme.outcomeLabelsSpacing || 'inherit', ";\n}\n\n.outcomes-ui__AlignmentButton--line {\n  display: flex;\n}\n\n.outcomes-ui__AlignmentButton--button {\n  margin-top: 1rem;\n}\n");
+  },
+  'spacing': 'outcomes-ui__AlignmentButton--spacing',
+  'line': 'outcomes-ui__AlignmentButton--line',
+  'button': 'outcomes-ui__AlignmentButton--button'
+};
+var AlignmentButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AlignmentButton, _React$Component);
+
+  var _super = (0, _createSuper2.default)(AlignmentButton);
+
+  function AlignmentButton(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, AlignmentButton);
+    _this = _super.call(this, props);
+
+    _this.toggleAlignmentList = function () {
+      _this.setState(function (prevState) {
+        return {
+          renderCollapsed: !prevState.renderCollapsed
+        };
+      });
+    };
+
+    _this.renderHeader = function () {
+      var _this$props = _this.props,
+          canManageOutcomes = _this$props.canManageOutcomes,
+          alignedOutcomes = _this$props.alignedOutcomes;
+      var renderCollapsed = _this.state.renderCollapsed;
+      var enableToggleAction = alignedOutcomes.length > 0;
+
+      if (!enableToggleAction) {
+        _this.setState({
+          renderCollapsed: true
+        });
+      }
+
+      if (canManageOutcomes || alignedOutcomes.length) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.line,
+          "data-automation": "outcomeLabel__alignedOutcomes",
+          style: {
+            'align-items': 'center'
+          }
+        }, /*#__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, {
+          size: "medium"
+        }, /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.spacing
+        }, "K\u1EBFt Qu\u1EA3 \u0110\xE3 C\u0103n ch\u1EC9nh", " \xA0", /*#__PURE__*/_react.default.createElement(_index3.default, {
+          count: alignedOutcomes.length
+        }))));
+      }
+    };
+
+    _this.renderAlignmentList = function () {
+      if (_this.state.renderCollapsed) {
+        return;
+      }
+
+      var _this$props2 = _this.props,
+          alignedOutcomes = _this$props2.alignedOutcomes,
+          canManageOutcomes = _this$props2.canManageOutcomes;
+      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) {
+        return /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+          padding: "0 small 0 medium",
+          key: outcome.id
+        }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+          removeAlignment: function removeAlignment() {
+            return _this.handleRemoveAlignment(outcome, index);
+          },
+          outcome: outcome,
+          canManageOutcomes: canManageOutcomes,
+          shouldFocus: index === _this.state.focusedItem
+        }));
+      }), alignedOutcomes.length > 0 && /*#__PURE__*/_react.default.createElement(_uiList.List.Item, {
+        key: "delimiter-1"
+      }));
+    };
+
+    _this.renderTray = function () {
+      var _this$props3 = _this.props,
+          pickerProps = _this$props3.pickerProps,
+          scope = _this$props3.scope,
+          OutcomeTray = _this$props3.tray,
+          liveRegion = _this$props3.liveRegion,
+          screenreaderNotification = _this$props3.screenreaderNotification;
+      return /*#__PURE__*/_react.default.createElement(OutcomeTray, Object.assign({
+        screenreaderNotification: screenreaderNotification,
+        liveRegion: liveRegion,
+        scope: scope,
+        shouldModifyArtifact: true
+      }, pickerProps));
+    };
+
+    _this.renderButton = function () {
+      var _this$props4 = _this.props,
+          openOutcomePicker = _this$props4.openOutcomePicker,
+          canManageOutcomes = _this$props4.canManageOutcomes;
+
+      if (canManageOutcomes) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: styles.button
+        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+          ref: function ref(d) {
+            _this.align = d;
+          } // eslint-disable-line immutable/no-mutation
+          ,
+          icon: _uiIcons.IconPlusLine,
+          onClick: openOutcomePicker,
+          "data-automation": "alignmentButton__button"
+        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          alt: "C\u0103n Ch\u1EC9nh K\u1EBFt Qu\u1EA3"
+        }, "K\u1EBFt Qu\u1EA3")));
+      }
+    };
+
+    _this.state = {
+      renderCollapsed: true,
+      focusedItem: null
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(AlignmentButton, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      var alignedOutcomes = this.props.alignedOutcomes;
+
+      if (oldProps.alignedOutcomes.length && !alignedOutcomes.length) {
+        if (this.align) {
+          this.align.focus();
+        }
+      }
+    }
+  }, {
+    key: "handleRemoveAlignment",
+    value: function handleRemoveAlignment(removedOutcome, index) {
+      var _this$props5 = this.props,
+          removeAlignment = _this$props5.removeAlignment,
+          onUpdate = _this$props5.onUpdate,
+          alignedOutcomes = _this$props5.alignedOutcomes;
+      removeAlignment(removedOutcome.id, onUpdate, true);
+      this.props.screenreaderNotification("\u0110\xE3 g\u1EE1 " + removedOutcome.label + " m\u1EE5c c\u0103n ch\u1EC9nh");
+      var priorIndex = index - 1;
+
+      if (priorIndex >= 0) {
+        this.setState({
+          focusedItem: priorIndex
+        });
+      } else if (alignedOutcomes.length > 0) {
+        var nextIndex = index + 1;
+
+        if (nextIndex < alignedOutcomes.length) {
+          this.setState({
+            focusedItem: nextIndex
+          });
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderHeader(), this.renderAlignmentList(), this.renderButton(), this.renderTray());
+    }
+  }]);
+  AlignmentButton.displayName = "AlignmentButton";
+  return AlignmentButton;
+}(_react.default.Component), _class2.propTypes = {
+  alignedOutcomes: _propTypes.default.arrayOf(_shapes.outcomeShape).isRequired,
+  pickerProps: _propTypes.default.object,
+  scope: _propTypes.default.string.isRequired,
+  tray: _propTypes.default.elementType.isRequired,
+  openOutcomePicker: _propTypes.default.func.isRequired,
+  removeAlignment: _propTypes.default.func.isRequired,
+  onUpdate: _propTypes.default.func,
+  screenreaderNotification: _propTypes.default.func,
+  liveRegion: _index.default.propTypes.liveRegion,
+  canManageOutcomes: _propTypes.default.bool.isRequired
+}, _class2.defaultProps = {
+  alignedOutcomes: [],
+  pickerProps: {},
+  onUpdate: null,
+  screenreaderNotification: null,
+  liveRegion: null,
+  canManageOutcomes: true
+}, _temp)) || _class);
+exports.default = AlignmentButton;

package/lib/translated/vi/components/AlignmentButton/index.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.noAlignedOutcomes = exports.alignedOutcomes = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _constants = require("../../../.storybook/constants.js");
+
+var _default = {
+  title: 'AlignmentButton'
+};
+exports.default = _default;
+var defaultProps = {
+  openOutcomePicker: function openOutcomePicker() {},
+  removeAlignment: function removeAlignment() {},
+  tray: function tray() {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), "Tray would render on click");
+  },
+  // eslint-disable-line react/display-name
+  scope: ''
+};
+
+var alignedOutcomes = function alignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
+    alignedOutcomes: (0, _addonKnobs.object)('Outcomes', (0, _constants.defaultOutcomes)())
+  }, defaultProps));
+};
+
+exports.alignedOutcomes = alignedOutcomes;
+
+var noAlignedOutcomes = function noAlignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
+    alignedOutcomes: []
+  }, defaultProps));
+};
+
+exports.noAlignedOutcomes = noAlignedOutcomes;

package/lib/translated/vi/components/AlignmentButton/styles.css

@@ -0,0 +1,11 @@
+.spacing {
+  padding-right: var(--outcomeLabelsSpacing);
+}
+
+.line {
+  display: flex;
+}
+
+.button {
+  margin-top: 1rem;
+}

package/lib/translated/vi/components/AlignmentCount/__tests__/index.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
+
+describe('AlignmentCount', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      count: 100
+    }, props);
+  }
+
+  it('renders the count', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    (0, _chai.expect)(wrapper.text()).to.match(/\(100\)/);
+  });
+  it('does not render when count is null', function () {
+    var props = makeProps({
+      count: null
+    });
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text()).to.equal('');
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/translated/vi/components/AlignmentCount/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AlignmentCount;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _default_vi_number = Intl.NumberFormat("vi", { style: "decimal" }).format;
+
+function AlignmentCount(_ref) {
+  var count = _ref.count;
+
+  if (count != null) {
+    var _s, _n, _s2, _n2;
+
+    var title = (_s = count, _n = +_s, _n === 0 ? "Kh\xF4ng c\xF3 k\u1EBFt qu\u1EA3 n\xE0o \u0111\u01B0\u1EE3c c\u0103n ch\u1EC9nh" : (_default_vi_number(count) + " k\u1EBFt qu\u1EA3 \u0111\u01B0\u1EE3c c\u0103n ch\u1EC9nh"));
+    return /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      alt: title
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      title: title
+    }, (_s2 = count, _n2 = +_s2, _n2 === 0 ? "(0)" : ("(" + _default_vi_number(count) + ")") // eslint-disable-next-line react/jsx-closing-tag-location
+    )));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("span", null);
+}
+
+AlignmentCount.propTypes = {
+  count: _propTypes.default.number
+};
+AlignmentCount.defaultProps = {
+  count: null
+};

package/lib/translated/vi/components/AlignmentCount/index.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignedOutcomes = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'AlignmentCount'
+};
+exports.default = _default;
+
+var alignedOutcomes = function alignedOutcomes() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    count: (0, _addonKnobs.number)('Alignments', 5)
+  });
+};
+
+exports.alignedOutcomes = alignedOutcomes;

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

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
+
+describe('AlignmentItem', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        id: '1',
+        label: 'A1',
+        title: 'tA1',
+        description: 'dA1'
+      },
+      removeAlignment: _sinon.default.spy(),
+      canManageOutcomes: true,
+      isTray: false,
+      shouldFocus: false,
+      isOutcomeSelected: _sinon.default.spy(),
+      selectOutcomeIds: _sinon.default.spy(),
+      deselectOutcomeIds: _sinon.default.spy()
+    }, props);
+  }
+
+  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);
+  });
+  it('includes an OutcomeDescription', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('OutcomeDescription')).to.have.length(1);
+  });
+  it('includes a trash icon and delete button if in the alignment list', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('IconTrashLine')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(2);
+  });
+  it('does not include a trash icon and delete button if in the outcome tray', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      isTray: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('IconTrashLine')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('does not include a trash icon and delete button when 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('IconTrashLine')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(1);
+  });
+  it('focuses on the trash can icon if shouldFocus is true', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    wrapper.setProps((0, _objectSpread2.default)({}, makeProps({
+      shouldFocus: true
+    })));
+    (0, _chai.expect)(wrapper.getDOMNode().contains(document.activeElement));
+  });
+  it('does not focus on the trash can icon if shouldFocus is false', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    wrapper.setProps((0, _objectSpread2.default)({}, makeProps()));
+    (0, _chai.expect)(wrapper.getDOMNode().contains(document.activeElement)).to.be.false;
+  });
+  it('calls removeAlignment when the trash icon is clicked', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('IconButton').at(1).simulate('click');
+    (0, _chai.expect)(props.removeAlignment.calledOnce).to.be.true;
+  });
+  it('includes a checkbox if in the outcome tray', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      isTray: true
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Checkbox')).to.have.length(1);
+  });
+  it('does not include a checkbox if in the alignment list', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Checkbox')).to.have.length(0);
+  });
+  it('handles click on checkbox', function () {
+    var props = makeProps({
+      isTray: true
+    });
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    wrapper.find('Checkbox').simulate('click');
+    (0, _chai.expect)(props.isOutcomeSelected.calledOnce).to.be.true;
+  });
+  it('selects the checkbox when isOutcomeSelected', function () {
+    var isOutcomeSelected = _sinon.default.stub().withArgs(1).returns(false);
+
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Checkbox').prop('checked')).to.equal(false);
+  });
+  it('does not select the checkbox when not isOutcomeSelected', function () {
+    var isOutcomeSelected = _sinon.default.stub().withArgs(1).returns(true);
+
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Checkbox').prop('checked')).to.equal(true);
+  });
+  it('calls selectOutcomeIds when unselected and user clicks', function () {
+    var isOutcomeSelected = _sinon.default.stub().withArgs(1).returns(false);
+
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    wrapper.find('Checkbox').simulate('change');
+    (0, _chai.expect)(props.selectOutcomeIds.calledWith([1]));
+  });
+  it('calls deselectOutcomeIds when selected and user clicks', function () {
+    var isOutcomeSelected = _sinon.default.stub().withArgs(1).returns(true);
+
+    var props = makeProps({
+      isOutcomeSelected: isOutcomeSelected,
+      isTray: true
+    });
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    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()));
+    (0, _chai.expect)(widget.find('Popover')).to.have.length(1);
+    var tray = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      isTray: 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()));
+    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
+    })));
+    tray.find('IconButton').at(0).simulate('click');
+    (0, _chai.expect)(tray.find('Popover')).to.have.length(0);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});