@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/fr-CA/components/OutcomesPerStudent/styles.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    reportWrapper: {
+      position: 'relative',
+      paddingLeft: '13rem'
+    },
+    background: {
+      backgroundColor: 'white'
+    },
+    table: {
+      overflowX: 'scroll'
+    },
+    headerRow: {
+      display: 'flex',
+      alignItems: 'stretch'
+    },
+    corner: {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      width: '13rem',
+      left: '0',
+      top: 'auto',
+      fontSize: '3rem',
+      fontWeight: 'normal',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    '.headerCell, .corner': {
+      boxSizing: 'border-box',
+      height: '5.5rem',
+      borderRight: 'var(--reportBorder)',
+      borderBottom: 'var(--reportBorder)'
+    },
+    headerCell: {
+      boxSizing: 'border-box',
+      borderTop: 'var(--reportBorder)',
+      padding: '0.5rem',
+      flex: '1 0 10rem',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    loadingSpinner: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      padding: '1.25rem 0.3125rem 1.25rem 0'
+    },
+    studentRow: {
+      boxSizing: 'border-box',
+      height: '4rem',
+      display: 'flex',
+      alignItems: 'stretch'
+    },
+    studentName: {
+      position: 'absolute',
+      boxSizing: 'border-box',
+      left: '0',
+      top: 'auto',
+      width: '13rem',
+      height: '4rem',
+      paddingLeft: '0.5rem',
+      borderRight: 'var(--reportBorder)',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      borderBottom: 'var(--reportBorder)',
+      alignItems: 'center',
+      '& .avatar': {
+        paddingRight: '.5rem'
+      },
+      '& .name': {
+        textAlign: 'left',
+        textOverflow: 'ellipsis',
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap'
+      }
+    },
+    scoreCell: {
+      boxSizing: 'border-box',
+      flex: '1 0 10rem',
+      borderBottom: 'var(--reportBorder)'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/fr-CA/components/Ratings/__tests__/index.test.js

@@ -14,6 +14,8 @@ var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
 var _mockOutcomesData = require("../../../test/mockOutcomesData.js");
 
+var _uiText = require("@instructure/ui-text");
+
 describe('Ratings', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -30,9 +32,17 @@ describe('Ratings', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       masteryPercent: 0.6,
       pointsPossible: 5
-    })));
-    (0, _chai.expect)(wrapper.find('Text')).to.have.length(5);
-    var text = wrapper.find('Text').at(4);
+    }))); // Text components render description in this way:
+    // 0: Exceeds Expectations
+    // 1: Meets Expectations
+    // 2: Does Not Meet Expectations
+    // 3: Mastery at:
+    // 4: 3 points
+
+    var text_component_count = 5;
+    var mastery_points_position = 4;
+    (0, _chai.expect)(wrapper.find(_uiText.Text)).to.have.length(text_component_count);
+    var text = wrapper.find(_uiText.Text).at(mastery_points_position);
     (0, _chai.expect)(text.text()).to.match(/3 points/);
   });
   it('calculates the ratings points correctly', function () {

package/lib/translated/fr-CA/components/Ratings/index.js

@@ -78,18 +78,18 @@ var Ratings = function Ratings(_ref) {
     caption: "Ratings table",
     layout: "fixed"
   }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
-    theme: {
+    themeOverride: {
       borderColor: 'white'
     }
   }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
     id: "rating",
-    theme: {
+    themeOverride: {
       padding: '0.5rem 0rem'
     }
   }, "Proficiency Rating"), !isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
     id: "points",
     textAlign: "end",
-    theme: {
+    themeOverride: {
       padding: '0.5rem 0rem'
     }
   }, "Points"))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
@@ -98,25 +98,25 @@ var Ratings = function Ratings(_ref) {
     return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, {
       key: index
     }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
-      theme: {
+      themeOverride: {
         borderColor: 'white'
       }
     }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-      theme: {
+      themeOverride: {
         padding: '0.5rem 0rem'
       }
     }, renderRatingDescription(description, index + 1)), !isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
       textAlign: "end",
-      theme: {
+      themeOverride: {
         padding: '0rem 2.25rem'
       }
     }, renderRatingsPoints(percentToPoints(percent), index + 1))), isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
-      theme: {
+      themeOverride: {
         borderColor: 'white',
         padding: '0rem 0rem'
       }
     }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, {
-      theme: {
+      themeOverride: {
         padding: '0.5rem 0rem'
       }
     }, renderRatingsPoints(percentToPoints(percent), index + 1))));

package/lib/translated/fr-CA/components/SearchInput/__tests__/index.test.js

@@ -16,6 +16,8 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _uiButtons = require("@instructure/ui-buttons");
+
 describe('SearchInput', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -41,14 +43,14 @@ describe('SearchInput', function () {
       searchText: 'x'
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    (0, _chai.expect)(wrapper.find('IconButton')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiButtons.IconButton)).to.have.length(1);
   });
   it('calls onClear when button is clicked', function () {
     var props = makeProps({
       searchText: 'x'
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-    var clear = wrapper.find('IconButton');
+    var clear = wrapper.find(_uiButtons.IconButton);
     clear.simulate('click');
     (0, _chai.expect)(props.onClear.calledOnce).to.be.true;
   });

package/lib/translated/fr-CA/components/SearchInput/index.js

@@ -19,8 +19,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiButtons = require("@instructure/ui-buttons");
@@ -29,18 +27,17 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiTextInput = require("@instructure/ui-text-input");
 
+var _emotion = require("@instructure/emotion");
+
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _shapes = require("../../store/shapes.js");
+
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'baFFb',
-  template: function template(theme) {
-    return "\n\n\n.outcomes-ui__SearchInput--search input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }\n.outcomes-ui__SearchInput--search input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }\n\n\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-decoration,\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-cancel-button,\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-results-button,\n.outcomes-ui__SearchInput--search input[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n";
-  },
-  'search': 'outcomes-ui__SearchInput--search'
-};
-var SearchInput = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var SearchInput = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(SearchInput, _React$Component);
 
   var _super = (0, _createSuper2.default)(SearchInput);
@@ -55,13 +52,13 @@ var SearchInput = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
     value: // eslint-disable-next-line no-undef
     function renderClearSearchButton() {
       var onClear = this.props.onClear;
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         onClick: onClear,
         screenReaderLabel: "Effacer le champ de recherche"
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconEndSolid, {
+      }, (0, _emotion.jsx)(_uiIcons.IconEndSolid, {
         size: "x-small"
       }));
     }
@@ -71,16 +68,16 @@ var SearchInput = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       var _this$props = this.props,
           onChange = _this$props.onChange,
           searchText = _this$props.searchText;
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.search
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      return (0, _emotion.jsx)("span", {
+        css: this.props.styles.search
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         type: "search",
-        label: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, "R\xE9sultats de recherche"),
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, "R\xE9sultats de recherche"),
         placeholder: "R\xE9sultats de recherche",
         value: searchText,
         onChange: onChange,
         size: "medium",
-        renderAfterInput: searchText ? this.renderClearSearchButton() : /*#__PURE__*/_react.default.createElement(_uiIcons.IconSearchLine, {
+        renderAfterInput: searchText ? this.renderClearSearchButton() : (0, _emotion.jsx)(_uiIcons.IconSearchLine, {
           size: "x-small"
         })
       }));
@@ -91,6 +88,7 @@ var SearchInput = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
 }(_react.default.Component), _class2.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   onClear: _propTypes.default.func.isRequired,
-  searchText: _propTypes.default.string.isRequired
+  searchText: _propTypes.default.string.isRequired,
+  styles: _shapes.stylesShape
 }, _temp)) || _class);
 exports.default = SearchInput;

package/lib/translated/fr-CA/components/SearchInput/styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    search: {
+      'input[type=search]::-ms-clear': {
+        display: 'none',
+        width: '0',
+        height: '0'
+      },
+      'input[type=search]::-ms-reveal': {
+        display: 'none',
+        width: '0',
+        height: '0'
+      },
+      "input[type='search']::-webkit-search-decoration": {
+        display: 'none'
+      },
+      "input[type='search']::-webkit-search-cancel-button": {
+        display: 'none'
+      },
+      "input[type='search']::-webkit-search-results-button": {
+        display: 'none'
+      },
+      "input[type='search']::-webkit-search-results-decoration": {
+        display: 'none'
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/fr-CA/components/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       spacing = _ref.spacing,
       colors = _ref.colors;
@@ -20,4 +20,7 @@ function generator(_ref) {
     checkboxDescriptionLeftPadding: '2.25rem' // checkboxLabelLeftPadding + CheckboxFacade/facadeSizeMedium + CheckboxFacade/marginRight
 
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/translated/fr-CA/containers/__tests__/AlignmentWidget.test.js

@@ -30,14 +30,15 @@ describe('AlignmentWidget', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
     }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, makeProps())));
-    (0, _chai.expect)(wrapper.find('AlignmentWidget')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_AlignmentWidget.default)).to.have.length(1);
   });
   it('sets the scope', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, props)));
-    (0, _chai.expect)(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, props))); // Enzyme finds two AlignmentWidget components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentWidget').at(0).prop('scope')).to.equal('foo:::1');
   });
   it('uses proper fallbacks if store is not passed in props', function () {
     var props = makeProps({
@@ -45,7 +46,8 @@ describe('AlignmentWidget', function () {
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, props)));
-    (0, _chai.expect)(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/_react.default.createElement(_AlignmentWidget.default, props))); // Enzyme finds two Link components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentWidget').at(0).prop('scope')).to.equal('foo:::1');
   });
 });

package/lib/translated/fr-CA/containers/__tests__/ConnectedAlignmentLabels.test.js

@@ -37,8 +37,9 @@ describe('ConnectedAlignmentLabels', function () {
       store: store
     }, /*#__PURE__*/_react.default.createElement(_ConnectedAlignmentLabels.default, {
       scope: "scopeForTest"
-    })));
-    (0, _chai.expect)(wrapper.find('OutcomeLabels')).to.have.length(1);
+    }))); // Enzyme finds two OutcomeLabels components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('OutcomeLabels')).to.have.length(2);
     (0, _chai.expect)(wrapper.text()).to.match(/baz,woz/);
   });
 });

package/lib/translated/fr-CA/containers/__tests__/ConnectedAlignmentList.test.js

@@ -29,7 +29,8 @@ describe('ConnectedAlignmentList', function () {
     }, /*#__PURE__*/_react.default.createElement(_ConnectedAlignmentList.default, {
       scope: "scopeForTest",
       addModal: /*#__PURE__*/_react.default.createElement("div", null)
-    })));
-    (0, _chai.expect)(wrapper.find('AlignmentList')).to.have.length(1);
+    }))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentList')).to.have.length(2);
   });
 });

package/lib/translated/fr-CA/containers/__tests__/ConnectedAlignmentWidget.test.js

@@ -28,7 +28,8 @@ describe('ConnectedAlignmentWidget', function () {
       store: store
     }, /*#__PURE__*/_react.default.createElement(_ConnectedAlignmentWidget.default, {
       tray: /*#__PURE__*/_react.default.createElement("div", null)
-    })));
-    (0, _chai.expect)(wrapper.find('AlignmentWidget')).to.have.length(1);
+    }))); // Enzyme finds two AlignmentWidget components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentWidget')).to.have.length(2);
   });
 });

package/lib/translated/fr-CA/containers/__tests__/ConnectedOutcomeTray.test.js

@@ -37,7 +37,8 @@ describe('ConnectedOutcomeTray', function () {
       store: store
     }, /*#__PURE__*/_react.default.createElement(_ConnectedOutcomeTray.default, {
       scope: "scopeForTest"
-    })));
-    (0, _chai.expect)(wrapper.find('OutcomeTray')).to.have.length(1);
+    }))); // Enzyme finds two OutcomeTray components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('OutcomeTray')).to.have.length(2);
   });
 });

package/lib/translated/fr-CA/containers/__tests__/ConnectedOutcomeTree.test.js

@@ -33,7 +33,8 @@ describe('ConnectedOutcomeTree', function () {
     }, /*#__PURE__*/_react.default.createElement(_ConnectedOutcomeTree.default, {
       contextUuid: "course_100",
       scope: "scopeForTest"
-    })));
-    (0, _chai.expect)(wrapper.find('OutcomeTree')).to.have.length(1);
+    }))); // Enzyme finds two OutcomeTree components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('OutcomeTree')).to.have.length(2);
   });
 });

package/lib/translated/fr-CA/containers/__tests__/ConnectedOutcomeView.test.js

@@ -42,7 +42,8 @@ describe('ConnectedOutcomeView', function () {
       scope: "scope_name",
       description: "Description",
       title: "Title"
-    })));
-    (0, _chai.expect)(wrapper.find('OutcomeView')).to.have.length(1);
+    }))); // Enzyme finds two OutcomeView components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('OutcomeView')).to.have.length(2);
   });
 });

package/lib/translated/fr-CA/containers/__tests__/OutcomeAlignments.test.js

@@ -29,15 +29,17 @@ describe('OutcomeAlignments', function () {
   it('renders', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, makeProps())));
-    (0, _chai.expect)(wrapper.find('AlignmentList')).to.have.length(1);
+    }, /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, makeProps()))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentList')).to.have.length(2);
   });
   it('sets the scope', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, props)));
-    (0, _chai.expect)(wrapper.find('AlignmentList').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, props))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentList').at(0).prop('scope')).to.equal('foo:::1');
   });
   it('uses proper fallbacks if store is not passed in props', function () {
     var props = makeProps({
@@ -45,7 +47,8 @@ describe('OutcomeAlignments', function () {
     });
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, props)));
-    (0, _chai.expect)(wrapper.find('AlignmentList').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, props))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('AlignmentList').at(0).prop('scope')).to.equal('foo:::1');
   });
 });

package/lib/translated/fr-CA/containers/__tests__/OutcomeList.test.js

@@ -27,14 +27,16 @@ describe('OutcomeList', function () {
   it('renders', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_OutcomeList.default, makeProps())));
-    (0, _chai.expect)(wrapper.find('OutcomeLabels')).to.have.length(1);
+    }, /*#__PURE__*/_react.default.createElement(_OutcomeList.default, makeProps()))); // Enzyme finds two OutcomeLabels components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('OutcomeLabels')).to.have.length(2);
   });
   it('sets the scope', function () {
     var props = makeProps();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/_react.default.createElement(_OutcomeList.default, props)));
-    (0, _chai.expect)(wrapper.find('OutcomeLabels').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/_react.default.createElement(_OutcomeList.default, props))); // Enzyme finds two Link components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('OutcomeLabels').at(0).prop('scope')).to.equal('foo:::1');
   });
 });

package/lib/translated/fr-CA/containers/__tests__/OutcomesPerStudentReport.test.js

@@ -10,24 +10,10 @@ var _enzyme = require("enzyme");
 
 var _OutcomesPerStudentReport = _interopRequireDefault(require("../OutcomesPerStudentReport.js"));
 
-var styles = {
-  componentId: 'baFFb',
-  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 _styles = _interopRequireDefault(require("../../components/OutcomesPerStudent/styles.js"));
+
+var _findElementsWithStyle = require("../../util/__tests__/findElementsWithStyle.js");
+
 describe('OutcomesPerStudentReport', function () {
   function makeProps() {
     return {
@@ -55,6 +41,6 @@ describe('OutcomesPerStudentReport', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement("div", {
       id: "app"
     }, /*#__PURE__*/_react.default.createElement(_OutcomesPerStudentReport.default, makeProps())));
-    (0, _chai.expect)(wrapper.find(".".concat(styles.background))).to.have.length(1);
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().background)).to.have.length(1);
   });
 });