@instructure/outcomes-ui 2.1.2 → 2.1.3

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

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _reactRedux = require("react-redux");
+
+var _createMockStore = _interopRequireDefault(require("../../../test/createMockStore.js"));
+
+var _immutable = require("immutable");
+
+describe('OutcomeViewModal', function () {
+  function makeProps() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return Object.assign({
+      outcome: {
+        label: 'Foo',
+        title: 'Bar',
+        scoring_method: {
+          scoring_tiers: [{
+            description: 'it brings a tier to your eye',
+            points: 100
+          }]
+        }
+      },
+      closeAlignment: _sinon.default.spy(),
+      isOpen: true
+    }, props);
+  }
+
+  var store = (0, _createMockStore.default)((0, _immutable.fromJS)({}));
+  it('displays when isOpen true', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    var modal = wrapper.find('Modal');
+    (0, _chai.expect)(modal.prop('open')).to.be.true;
+  });
+  it('does not display when isOpen false', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, makeProps(), {
+      isOpen: false
+    })));
+    var modal = wrapper.find('Modal');
+    (0, _chai.expect)(modal.prop('open')).to.be.false;
+  });
+  it('calls closeAlignment on close', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var modal = wrapper.find('Modal');
+    modal.simulate('close');
+    (0, _chai.expect)(props.closeAlignment.calledWith()).to.be.true;
+  });
+  it('calls closeAlignment on requestClose', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var modal = wrapper.find('Modal');
+    modal.simulate('dismiss');
+    (0, _chai.expect)(props.closeAlignment.calledWith()).to.be.true;
+  });
+  it('includes a close button in the footer', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var closeButton = wrapper.find('ModalFooter Button');
+    (0, _chai.expect)(closeButton.length).to.equal(1);
+    closeButton.simulate('click');
+    (0, _chai.expect)(props.closeAlignment.calledWith()).to.be.true;
+  });
+  it('uses standard header', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find('ModalHeader Heading Text');
+    (0, _chai.expect)(txt.render().text()).to.equal('View Outcome');
+  });
+  it('uses provided header', function () {
+    var props = makeProps({
+      header: 'Overriding'
+    });
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    var txt = wrapper.find('ModalHeader Heading Text');
+    (0, _chai.expect)(txt.render().text()).to.equal('Overriding');
+  });
+  it('renders an outcome view when loaded', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+      store: store
+    }, /*#__PURE__*/_react.default.createElement(_index.default, props)));
+    (0, _chai.expect)(wrapper.find('OutcomeView')).to.have.length(1);
+  });
+});

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

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiModal = require("@instructure/ui-modal");
+
+var _uiFocusable = require("@instructure/ui-focusable");
+
+var _uiView = require("@instructure/ui-view");
+
+var _ConnectedOutcomeView = _interopRequireDefault(require("../../containers/ConnectedOutcomeView.js"));
+
+var ModalHeader = _uiModal.Modal.Header,
+    ModalBody = _uiModal.Modal.Body,
+    ModalFooter = _uiModal.Modal.Footer;
+
+var OutcomeViewModal = function OutcomeViewModal(props) {
+  var header = props.header,
+      outcome = props.outcome,
+      outcomeResult = props.outcomeResult,
+      artifactTypeName = props.artifactTypeName,
+      displayMasteryDescription = props.displayMasteryDescription,
+      displayMasteryPercentText = props.displayMasteryPercentText,
+      scope = props.scope;
+  var title = outcome.title,
+      description = outcome.description,
+      scoringMethod = outcome.scoring_method,
+      friendlyDescription = outcome.friendly_description;
+  var scoringTiers = outcome.scoring_method ? outcome.scoring_method.scoring_tiers : [];
+  return /*#__PURE__*/_react.default.createElement(_uiModal.Modal, {
+    open: props.isOpen,
+    shouldCloseOnDocumentClick: true,
+    onDismiss: function onDismiss() {
+      return props.closeAlignment();
+    },
+    onClose: function onClose() {
+      props.closeAlignment();
+    },
+    transition: "fade",
+    size: "fullscreen",
+    label: "K\u1EBFt Qu\u1EA3",
+    zIndex: "9999",
+    "data-automation": "outcomeView__modal"
+  }, /*#__PURE__*/_react.default.createElement(ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+    offset: "medium",
+    onClick: function onClick() {
+      return props.closeAlignment();
+    },
+    placement: "end",
+    variant: "icon",
+    "data-automation": "outcomeView__closeButton"
+  }, "\u0110\xF3ng"), /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "large",
+    "data-automation": "outcomeView__header"
+  }, header || "Xem K\u1EBFt Qu\u1EA3"))), /*#__PURE__*/_react.default.createElement(ModalBody, {
+    padding: "none"
+  }, /*#__PURE__*/_react.default.createElement(_uiFocusable.Focusable, null, function (_ref) {
+    var focusVisible = _ref.focusVisible;
+    return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      as: "div",
+      tabIndex: "0",
+      padding: "medium",
+      position: "relative",
+      focusPosition: "inset",
+      withFocusOutline: focusVisible
+    }, /*#__PURE__*/_react.default.createElement(_ConnectedOutcomeView.default, {
+      scope: scope,
+      description: description,
+      title: title,
+      scoringMethod: scoringMethod,
+      scoringTiers: scoringTiers,
+      artifactTypeName: artifactTypeName,
+      displayMasteryDescription: displayMasteryDescription,
+      displayMasteryPercentText: displayMasteryPercentText,
+      outcomeResult: outcomeResult,
+      friendlyDescription: friendlyDescription
+    }));
+  })), /*#__PURE__*/_react.default.createElement(ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+    onClick: function onClick() {
+      return props.closeAlignment();
+    },
+    variant: "primary",
+    "data-automation": "outcomeView__submitButton"
+  }, "OK")));
+};
+
+OutcomeViewModal.propTypes = {
+  outcome: _propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    title: _propTypes.default.string.isRequired,
+    description: _propTypes.default.string,
+    scoring_method: _propTypes.default.object,
+    friendly_description: _propTypes.default.string
+  }).isRequired,
+  outcomeResult: _propTypes.default.object,
+  closeAlignment: _propTypes.default.func.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  artifactTypeName: _propTypes.default.string,
+  displayMasteryDescription: _propTypes.default.bool,
+  displayMasteryPercentText: _propTypes.default.bool,
+  header: _propTypes.default.string,
+  scope: _propTypes.default.string.isRequired
+};
+OutcomeViewModal.defaultProps = {
+  outcomeResult: null,
+  artifactTypeName: null,
+  displayMasteryDescription: false,
+  displayMasteryPercentText: false,
+  header: null
+};
+var _default = OutcomeViewModal;
+exports.default = _default;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.results = exports.noResults = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../.storybook/constants.js");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'OutcomeViewModal'
+};
+exports.default = _default;
+
+var noResults = function noResults() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcome: (0, _addonKnobs.object)('Outcome', _constants.outcomeWithoutResults),
+    closeAlignment: function closeAlignment() {},
+    isOpen: true,
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: (0, _addonKnobs.boolean)('Display Mastery Description', true),
+    displayMasteryPercentText: (0, _addonKnobs.boolean)('Display Mastery Percent Text', true)
+  });
+};
+
+exports.noResults = noResults;
+
+var results = function results() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcome: (0, _addonKnobs.object)('Outcome', _constants.outcomeViewWithResults),
+    outcomeResult: (0, _addonKnobs.object)('Outcome Result', _constants.outcomeRollup),
+    closeAlignment: function closeAlignment() {},
+    isOpen: true,
+    artifactTypeName: "Quiz",
+    displayMasteryDescription: (0, _addonKnobs.boolean)('Display Mastery Description', true),
+    displayMasteryPercentText: (0, _addonKnobs.boolean)('Display Mastery Percent Text', true)
+  });
+};
+
+exports.results = results;

package/lib/translated/vi/components/OutcomesPerStudent/Header/__tests__/index.test.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+var styles = {
+  componentId: 'fbTpU',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
+  },
+  'header': 'outcomes-ui__Header--header'
+};
+describe('OutcomesPerStudent/Header', function () {
+  function makeProps(props) {
+    return Object.assign({
+      outcomeResult: {
+        outcome: {
+          id: '1',
+          label: 'FOO'
+        },
+        count: 10,
+        mastery_count: 5,
+        childArtifactCount: 12
+      },
+      viewReportAlignment: _sinon.default.spy(),
+      getReportOutcome: _sinon.default.stub().returns({
+        id: '1',
+        label: 'FOO',
+        title: 'bar'
+      }),
+      isOpen: false,
+      closeReportAlignment: _sinon.default.spy()
+    }, props);
+  }
+
+  it('includes a details object', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('HeaderDetails')).to.have.length(1);
+  });
+  it('renders outcome link with title', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text()).to.match(/bar/);
+  });
+  it('calls viewReportAlignment when the link is clicked', function () {
+    var props = makeProps();
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+      disableLifecycleMethods: true
+    });
+    var link = wrapper.find(".".concat(styles.header)).find('Link');
+    link.simulate('click');
+    (0, _chai.expect)(props.viewReportAlignment.calledOnce).to.be.true;
+  });
+  it('conditionally renders tooltip based on state.showTooltip', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Tooltip')).to.have.length(0);
+    wrapper.setState({
+      showTooltip: true
+    });
+    (0, _chai.expect)(wrapper.find('Tooltip')).to.have.length(1);
+  });
+  it('includes a TruncateText element that can update state', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    (0, _chai.expect)(wrapper.find('TruncateText')).to.have.length(1);
+    wrapper.find('TruncateText').props().onUpdate(true);
+    (0, _chai.expect)(wrapper.state().showTooltip).to.equal(true);
+  });
+  it('includes a AccessibleContent element', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('AccessibleContent')).to.have.length(1);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});

package/lib/translated/vi/components/OutcomesPerStudent/Header/index.js

@@ -0,0 +1,133 @@
+"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 _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiTooltip = require("@instructure/ui-tooltip");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiTruncateText = require("@instructure/ui-truncate-text");
+
+var _index = _interopRequireDefault(require("../../OutcomeViewModal/index.js"));
+
+var _index2 = _interopRequireDefault(require("../HeaderDetails/index.js"));
+
+var _theme = _interopRequireDefault(require("../../theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fbTpU',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__Header--header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-weight: normal;\n  line-height: 1.3rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__Header--header {\n  text-align: left;\n}\n";
+  },
+  'header': 'outcomes-ui__Header--header'
+};
+var Header = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Header, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Header);
+
+  // eslint-disable-next-line no-undef
+  // eslint-disable-next-line no-undef
+  function Header(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Header);
+    _this = _super.call(this, props);
+
+    _this.renderTitle = function (outcome) {
+      var viewReportAlignment = _this.props.viewReportAlignment;
+      return /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        onClick: viewReportAlignment
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "medium",
+        transform: "uppercase"
+      }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
+        maxLines: 1,
+        position: 'middle',
+        onUpdate: function onUpdate(isTruncated) {
+          return _this.setState({
+            showTooltip: isTruncated
+          });
+        }
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: outcome.title
+      }, outcome.title))));
+    };
+
+    _this.state = {
+      showTooltip: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(Header, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          outcomeResult = _this$props.outcomeResult,
+          getReportOutcome = _this$props.getReportOutcome,
+          isOpen = _this$props.isOpen,
+          closeReportAlignment = _this$props.closeReportAlignment,
+          showRollups = _this$props.showRollups,
+          scope = _this$props.scope;
+      var showTooltip = this.state.showTooltip;
+      var outcome = getReportOutcome(outcomeResult.outcomeId);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.header
+      }, showTooltip ? /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
+        tip: outcome.title,
+        placement: "bottom",
+        variant: "inverse"
+      }, this.renderTitle(outcome)) : this.renderTitle(outcome), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        outcomeResult: outcomeResult,
+        showRollups: showRollups
+      })), /*#__PURE__*/_react.default.createElement(_index.default, {
+        header: "Chi Ti\u1EBFt K\u1EBFt Qu\u1EA3",
+        outcome: outcome,
+        outcomeResult: outcomeResult,
+        closeAlignment: closeReportAlignment,
+        isOpen: isOpen,
+        scope: scope,
+        displayMasteryDescription: true
+      }));
+    }
+  }]);
+  Header.displayName = "Header";
+  return Header;
+}(_react.default.Component), _class2.propTypes = {
+  outcomeResult: _propTypes.default.object.isRequired,
+  getReportOutcome: _propTypes.default.func.isRequired,
+  viewReportAlignment: _propTypes.default.func.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  closeReportAlignment: _propTypes.default.func.isRequired,
+  scope: _propTypes.default.string.isRequired,
+  showRollups: _propTypes.default.bool
+}, _class2.defaultProps = {
+  showRollups: true
+}, _temp)) || _class);
+exports.default = Header;

package/lib/translated/vi/components/OutcomesPerStudent/Header/index.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.standard = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _constants = require("../../../../.storybook/constants.js");
+
+var _index = _interopRequireDefault(require("./index.js"));
+
+var _default = {
+  title: 'OutcomesPerStudent Header'
+};
+exports.default = _default;
+
+var standard = function standard() {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    outcomeResult: (0, _addonKnobs.object)('Result Summary', _constants.outcomeRollup),
+    getReportOutcome: function getReportOutcome() {
+      return (0, _addonKnobs.object)('Outcome', _constants.basicOutcome);
+    },
+    viewReportAlignment: function viewReportAlignment() {},
+    isOpen: (0, _addonKnobs.boolean)('Is Open', false),
+    closeReportAlignment: function closeReportAlignment() {},
+    showRollups: (0, _addonKnobs.boolean)('Show Rollups', true)
+  });
+};
+
+exports.standard = standard;

package/lib/translated/vi/components/OutcomesPerStudent/Header/styles.css

@@ -0,0 +1,8 @@
+.header {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-weight: normal;
+  line-height: 1.3rem;
+  text-align: left;
+}

package/lib/translated/vi/components/OutcomesPerStudent/HeaderDetails/__tests__/index.test.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _chai = require("chai");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sinon = _interopRequireDefault(require("sinon"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("../index.js"));
+
+var _checkA11y = _interopRequireDefault(require("../../../../test/checkA11y.js"));
+
+var styles = {
+  componentId: 'ffgIr',
+  template: function template(theme) {
+    return "\n\n.outcomes-ui__HeaderDetails--numQuestions {\n  box-sizing: border-box;\n  height: 1.5rem;\n  text-align: left;\n}\n\n[dir=\"ltr\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n[dir=\"rtl\"] .outcomes-ui__HeaderDetails--numQuestions {\n  text-align: left;\n}\n\n.outcomes-ui__HeaderDetails--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n}\n";
+  },
+  'numQuestions': 'outcomes-ui__HeaderDetails--numQuestions',
+  'masteryBarDetails': 'outcomes-ui__HeaderDetails--masteryBarDetails'
+};
+describe('OutcomesPerStudent/HeaderDetails', function () {
+  function makeProps(props) {
+    return Object.assign({
+      outcomeResult: {
+        outcome: {
+          id: '1',
+          label: 'FOO'
+        },
+        count: 10,
+        mastery_count: 5,
+        childArtifactCount: 12
+      },
+      viewReportAlignment: _sinon.default.spy(),
+      getReportOutcome: _sinon.default.stub().returns({
+        id: '1',
+        label: 'FOO',
+        title: 'bar'
+      }),
+      isOpen: false,
+      closeReportAlignment: _sinon.default.spy(),
+      showRollups: true
+    }, props);
+  }
+
+  it('includes a progress bar', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('ProgressBar')).to.have.length(1);
+  });
+  it('hides the progress bar when rollups are hidden', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      showRollups: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('ProgressBar')).to.have.length(0);
+  });
+  it('includes the rollup summary', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find(".".concat(styles.masteryBarDetails)).find('Text')).to.have.length(2);
+  });
+  it('hides the rollup summary when rollups are hidden', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      showRollups: false
+    })), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find(".".concat(styles.masteryBarDetails))).to.have.length(0);
+  });
+  it('does include tooltip', function () {
+    var withUsesBank = {
+      outcomeResult: {
+        outcome: {
+          id: '1',
+          label: 'FOO'
+        },
+        count: 10,
+        mastery_count: 5,
+        childArtifactCount: 12,
+        usesBank: true
+      }
+    };
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps(withUsesBank)), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Tooltip')).to.have.length(1);
+  });
+  it('does not include tooltip', function () {
+    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+      disableLifecycleMethods: true
+    });
+    (0, _chai.expect)(wrapper.find('Tooltip')).to.have.length(0);
+  });
+  it('includes the count of aligned items', function () {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+    (0, _chai.expect)(wrapper.text()).to.match(/12 Questions/);
+  });
+  it('does not include the count of aligned items if not specified', function () {
+    var props = makeProps();
+    props.outcomeResult.childArtifactCount = null; // eslint-disable-line immutable/no-mutation
+
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
+    (0, _chai.expect)(wrapper.text()).not.to.match(/Questions/);
+  });
+  it('meets a11y standards', function () {
+    return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+  });
+});