@instructure/outcomes-ui 2.1.8 → 3.0.0

package/lib/translated/da/components/OutcomesPerStudent/HeaderDetails/index.js

@@ -19,31 +19,26 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiText = require("@instructure/ui-text");
 
 var _uiProgress = require("@instructure/ui-progress");
 
 var _uiTooltip = require("@instructure/ui-tooltip");
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _shapes = require("../../../store/shapes.js");
+
 var _default_da_number = Intl.NumberFormat("da", { style: "decimal" }).format,
     _dec,
     _class,
     _class2,
     _temp;
 
-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'
-};
-
 var numQuestionsText = function numQuestionsText(count, usesBank) {
   var _s, _n, _t, _i;
 
@@ -52,16 +47,16 @@ var numQuestionsText = function numQuestionsText(count, usesBank) {
   }
 
   if (usesBank) {
-    return /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
-      tip: "Variabel p\xE5 grund af Alle / Tilf\xE6ldigt valg fra elementbank",
-      variant: "inverse"
+    return (0, _emotion.jsx)(_uiTooltip.Tooltip, {
+      renderTip: "Variabel p\xE5 grund af Alle / Tilf\xE6ldigt valg fra elementbank",
+      color: "primary"
     }, "Variable sp\xF8rgsm\xE5l");
   }
 
   return _s = count, _n = +_s, (_t = +('' + _s).replace(/^[^.]*.?|0+$/g, ''), _i = Math.floor(Math.abs(+_s)), _n === 1 || _t !== 0 && (_i === 0 || _i === 1) ? "1 sp\xF8rgsm\xE5l" : _default_da_number(count) + " sp\xF8rgsm\xE5l");
 };
 
-var HeaderDetails = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var HeaderDetails = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(HeaderDetails, _React$Component);
 
   var _super = (0, _createSuper2.default)(HeaderDetails);
@@ -78,29 +73,29 @@ var HeaderDetails = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var _this$props = this.props,
           outcomeResult = _this$props.outcomeResult,
           showRollups = _this$props.showRollups;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.numQuestions,
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("span", {
+        css: this.props.styles.numQuestions,
         "data-automation": "outcomesPerStudent__numQuestions"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
       }, numQuestionsText(outcomeResult.childArtifactCount, outcomeResult.usesBank))), showRollups ? this.renderRollup(outcomeResult) : null);
     }
   }, {
     key: "renderRollup",
     value: function renderRollup(outcomeResult) {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiProgress.ProgressBar, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiProgress.ProgressBar, {
         size: "x-small",
         screenReaderLabel: outcomeResult.masteryCount + " af " + outcomeResult.count + " opn\xE5et beherskelse",
         meterColor: "success",
         valueMax: outcomeResult.count,
         valueNow: outcomeResult.masteryCount
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.masteryBarDetails,
+      }), (0, _emotion.jsx)("div", {
+        css: this.props.styles.masteryBarDetails,
         "data-automation": "outcomesPerStudent__masteryBarDetails"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
         "data-automation": "outcomesPerStudent__masteryCount"
-      }, outcomeResult.masteryCount + " beherskelse"), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, outcomeResult.masteryCount + " beherskelse"), (0, _emotion.jsx)(_uiText.Text, {
         size: "x-small",
         "data-automation": "outcomesPerStudent__noMasteryCount"
       }, outcomeResult.count - outcomeResult.masteryCount + " Opn\xE5ede ikke")));
@@ -110,6 +105,7 @@ var HeaderDetails = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   return HeaderDetails;
 }(_react.default.Component), _class2.propTypes = {
   outcomeResult: _propTypes.default.object.isRequired,
-  showRollups: _propTypes.default.bool.isRequired
+  showRollups: _propTypes.default.bool.isRequired,
+  styles: _shapes.stylesShape
 }, _temp)) || _class);
 exports.default = HeaderDetails;

package/lib/translated/da/components/OutcomesPerStudent/HeaderDetails/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    numQuestions: {
+      boxSizing: 'border-box',
+      height: '1.5rem',
+      textAlign: 'left'
+    },
+    masteryBarDetails: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/da/components/OutcomesPerStudent/Score/__tests__/index.test.js

@@ -44,10 +44,10 @@ describe('OutcomesPerStudent/Score', function () {
       }
     };
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, noPoints));
-    (0, _chai.expect)(wrapper.children()).to.have.length(0);
+    (0, _chai.expect)(wrapper.find('div[data-automation="outcomesPerStudent__score"]')).to.have.length(0);
   });
   it('includes a star if percentScore is greater than mastery', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
     (0, _chai.expect)(wrapper.find(_uiIcons.IconStarSolid)).to.have.length(1);
@@ -56,7 +56,7 @@ describe('OutcomesPerStudent/Score', function () {
     var props = makeProps();
     props.score.percentScore = 0.4; // eslint-disable-line immutable/no-mutation
 
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
     (0, _chai.expect)(wrapper.find(_uiIcons.IconStarSolid)).to.have.length(1);

package/lib/translated/da/components/OutcomesPerStudent/Score/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -25,28 +25,17 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _theme = _interopRequireDefault(require("../../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _outcomesReportUtils = require("../../../util/outcomesReportUtils.js");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'ctmoA',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__Score--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__Score--score {\n  box-sizing: border-box;\n  display: flex;\n  height: 4rem;\n}\n\n.outcomes-ui__Score--score .outcomes-ui__Score--scoreText {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n  }\n\n.outcomes-ui__Score--score .outcomes-ui__Score--scoreSpacer {\n    flex-grow: 1;\n  }\n\n.outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    flex-basis: 0;\n    flex-grow: 1;\n    text-align: right;\n    vertical-align: middle;\n    padding-right: 0.5rem;\n    font-size: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    text-align: right;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__Score--score .outcomes-ui__Score--masteryStar {\n    text-align: right;\n  }\n");
-  },
-  'mastery': 'outcomes-ui__Score--mastery',
-  'score': 'outcomes-ui__Score--score',
-  'scoreText': 'outcomes-ui__Score--scoreText',
-  'scoreSpacer': 'outcomes-ui__Score--scoreSpacer',
-  'masteryStar': 'outcomes-ui__Score--masteryStar'
-};
-var Score = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var Score = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Score, _React$Component);
 
   var _super = (0, _createSuper2.default)(Score);
@@ -60,29 +49,28 @@ var Score = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
     key: "render",
     value: // eslint-disable-next-line no-undef
     function render() {
-      var _classNames;
-
       var _this$props = this.props,
           score = _this$props.score,
           outcome = _this$props.outcome;
       var mastery = (0, _outcomesReportUtils.hasMastery)(score, outcome);
-      var outerStyle = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.score, true), (0, _defineProperty2.default)(_classNames, styles.mastery, mastery), _classNames));
-      return score && /*#__PURE__*/_react.default.createElement("div", {
-        className: outerStyle
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.masteryStar
-      }, mastery && /*#__PURE__*/_react.default.createElement(_uiIcons.IconStarSolid, {
+      var outerStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.score), mastery ? this.props.styles.mastery : {});
+      return score && (0, _emotion.jsx)("div", {
+        css: outerStyle,
+        "data-automation": "outcomesPerStudent__score"
+      }, (0, _emotion.jsx)("span", {
+        css: this.props.styles.masteryStar
+      }, mastery && (0, _emotion.jsx)(_uiIcons.IconStarSolid, {
         "data-automation": "outcomesPerStudent__masteryStar"
       }) // eslint-disable-next-line react/jsx-closing-tag-location
-      ), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.scoreText
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      ), (0, _emotion.jsx)("div", {
+        css: this.props.styles.scoreText
+      }, (0, _emotion.jsx)(_uiText.Text, {
         size: "small",
         "data-automation": "outcomesPerStudent__scoreText"
-      }, score.points, "/", score.pointsPossible), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, score.points, "/", score.pointsPossible), (0, _emotion.jsx)(_uiText.Text, {
         size: "small"
-      }, mastery ? "Beherskelse" : "Opn\xE5ede ikke")), /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.scoreSpacer
+      }, mastery ? "Beherskelse" : "Opn\xE5ede ikke")), (0, _emotion.jsx)("span", {
+        css: this.props.styles.scoreSpacer
       }));
     }
   }]);
@@ -90,7 +78,9 @@ var Score = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   return Score;
 }(_react.default.Component), _class2.propTypes = {
   score: _propTypes.default.object,
-  outcome: _propTypes.default.object.isRequired
+  outcome: _propTypes.default.object.isRequired,
+  // eslint-disable-next-line react/require-default-props
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   score: null
 }, _temp)) || _class);

package/lib/translated/da/components/OutcomesPerStudent/Score/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    mastery: {
+      color: componentTheme.masteryColor
+    },
+    score: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      height: '4rem'
+    },
+    scoreText: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    scoreSpacer: {
+      flexGrow: 1
+    },
+    masteryStar: {
+      flexBasis: '0',
+      flexGrow: 1,
+      textAlign: 'right',
+      verticalAlign: 'middle',
+      paddingRight: '0.5rem',
+      fontSize: '1.5rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/da/components/OutcomesPerStudent/__tests__/index.test.js

@@ -16,26 +16,21 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _styles = _interopRequireDefault(require("../styles.js"));
+
 var _constants = require("../../../constants.js");
 
-var styles = {
-  componentId: 'eWGXc',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomesPerStudent--reportWrapper {\n  position: relative;\n  padding-left: 13rem;\n}\n\n.outcomes-ui__OutcomesPerStudent--background {\n  background-color: white;\n}\n\n.outcomes-ui__OutcomesPerStudent--table {\n  overflow-x: scroll;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerRow {\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--corner {\n  position: absolute;\n  box-sizing: border-box;\n  width: 13rem;\n  left: 0;\n  top: auto;\n  font-size: 3rem;\n  font-weight: normal;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell, .outcomes-ui__OutcomesPerStudent--corner {\n  box-sizing: border-box;\n  height: 5.5rem;\n  border-right: ".concat(theme.reportBorder || 'inherit', ";\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n\n.outcomes-ui__OutcomesPerStudent--headerCell {\n  box-sizing: border-box;\n  border-top: ").concat(theme.reportBorder || 'inherit', ";\n  padding: 0.5rem;\n  flex: 1 0 10rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.outcomes-ui__OutcomesPerStudent--loadingSpinner {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 1.25rem 0.3125rem 1.25rem 0;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentRow {\n  box-sizing: border-box;\n  height: 4rem;\n  display: flex;\n  align-items: stretch;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName {\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: auto;\n  width: 13rem;\n  height: 4rem;\n  padding-left: 0.5rem;\n  border-right: ").concat(theme.reportBorder || 'inherit', ";\n  display: flex;\n  justify-content: flex-start;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n  align-items: center;\n}\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--avatar {\n    padding-right: .5rem;\n  }\n\n.outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n    text-overflow: ellipsis;\n    overflow-x: hidden;\n    white-space: nowrap;\n  }\n\n[dir=\"ltr\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n[dir=\"rtl\"] .outcomes-ui__OutcomesPerStudent--studentName .outcomes-ui__OutcomesPerStudent--name {\n    text-align: left;\n  }\n\n.outcomes-ui__OutcomesPerStudent--scoreCell {\n  box-sizing: border-box;\n  flex: 1 0 10rem;\n  border-bottom: ").concat(theme.reportBorder || 'inherit', ";\n}\n");
-  },
-  'reportWrapper': 'outcomes-ui__OutcomesPerStudent--reportWrapper',
-  'background': 'outcomes-ui__OutcomesPerStudent--background',
-  'table': 'outcomes-ui__OutcomesPerStudent--table',
-  'headerRow': 'outcomes-ui__OutcomesPerStudent--headerRow',
-  'corner': 'outcomes-ui__OutcomesPerStudent--corner',
-  'headerCell': 'outcomes-ui__OutcomesPerStudent--headerCell',
-  'loadingSpinner': 'outcomes-ui__OutcomesPerStudent--loadingSpinner',
-  'studentRow': 'outcomes-ui__OutcomesPerStudent--studentRow',
-  'studentName': 'outcomes-ui__OutcomesPerStudent--studentName',
-  'avatar': 'outcomes-ui__OutcomesPerStudent--avatar',
-  'name': 'outcomes-ui__OutcomesPerStudent--name',
-  'scoreCell': 'outcomes-ui__OutcomesPerStudent--scoreCell'
-};
+var _index2 = _interopRequireDefault(require("../Header/index.js"));
+
+var _index3 = _interopRequireDefault(require("../Score/index.js"));
+
+var _uiPagination = require("@instructure/ui-pagination");
+
+var _uiBillboard = require("@instructure/ui-billboard");
+
+var _index4 = _interopRequireDefault(require("../ExportCSVButton/index.js"));
+
+var _findElementsWithStyle = require("../../../util/__tests__/findElementsWithStyle.js");
 
 _chai.default.use(require('sinon-chai'));
 
@@ -96,67 +91,68 @@ describe('OutcomesPerStudent/index', function () {
   }
 
   it('renders a header for each outcome', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Header')).to.have.length(3);
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(3);
   });
   it('generates the correct viewReportAlignment method for each header', function () {
     var props = makeProps();
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    var header = wrapper.find('Header').last();
+    var header = wrapper.find(_index2.default).last();
     var viewReportAlignment = header.prop('viewReportAlignment');
     viewReportAlignment();
     (0, _chai.expect)(props.viewReportAlignment).to.have.been.calledOnce;
     (0, _chai.expect)(props.viewReportAlignment).to.have.been.calledWith(303);
   });
   it('renders a row for each student', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
-    });
-    (0, _chai.expect)(wrapper.find(".".concat(styles.studentRow))).to.have.length(5);
+    }); // expect(wrapper.find(`.${styles.studentRow}`)).to.have.length(5)
+
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().studentRow)).to.have.length(5);
   });
   it('renders a score for each student score', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Score')).to.have.length(15);
+    (0, _chai.expect)(wrapper.find(_index3.default)).to.have.length(15);
   });
   it('renders pagination', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('PaginationButton')).to.have.length(5);
+    (0, _chai.expect)(wrapper.find(_uiPagination.PaginationButton)).to.have.length(5);
   });
   it('renders the billboard message if no results yet exist', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       users: [],
       hasAnyOutcomes: true
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Billboard')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('Looks like you\'re a little early');
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard).prop('heading')).to.equal('Looks like you\'re a little early');
   });
   it('renders the billboard message if no outcomes are aligned', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       users: [],
       hasAnyOutcomes: false
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard).prop('heading')).to.equal('There is no report here to show');
   });
   describe('ExportCSVButton', function () {
     it('renders if the FF is enabled, the page is loaded, and there are users and outcomes', function () {
-      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
         features: [_constants.REPORT_DOWNLOAD_FF]
       })), {
         disableLifecycleMethods: true
       });
-      (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(1);
+      (0, _chai.expect)(wrapper.find(_index4.default)).to.have.length(1);
     });
     describe('does not render if', function () {
       it('the FF is disabled', function () {