@instructure/outcomes-ui 2.1.8 → 3.0.0

package/es/components/OutcomesPerStudent/styles.js

@@ -0,0 +1,87 @@
+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)'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -4,6 +4,7 @@ import { shallow, mount } from 'enzyme';
 import Ratings from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
 import { ratings } from "../../../test/mockOutcomesData.js";
+import { Text } from '@instructure/ui-text';
 describe('Ratings', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -20,9 +21,17 @@ describe('Ratings', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(Ratings, makeProps({
       masteryPercent: 0.6,
       pointsPossible: 5
-    })));
-    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;
+    expect(wrapper.find(Text)).to.have.length(text_component_count);
+    var text = wrapper.find(Text).at(mastery_points_position);
     expect(text.text()).to.match(/3 points/);
   });
   it('calculates the ratings points correctly', function () {

package/es/components/Ratings/index.js

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

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

@@ -5,6 +5,7 @@ import { mount } from 'enzyme';
 import { IconSearchLine, IconEndSolid } from '@instructure/ui-icons';
 import SearchInput from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
+import { IconButton } from '@instructure/ui-buttons';
 describe('SearchInput', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -30,14 +31,14 @@ describe('SearchInput', function () {
       searchText: 'x'
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(SearchInput, props));
-    expect(wrapper.find('IconButton')).to.have.length(1);
+    expect(wrapper.find(IconButton)).to.have.length(1);
   });
   it('calls onClear when button is clicked', function () {
     var props = makeProps({
       searchText: 'x'
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(SearchInput, props));
-    var clear = wrapper.find('IconButton');
+    var clear = wrapper.find(IconButton);
     clear.simulate('click');
     expect(props.onClear.calledOnce).to.be.true;
   });

package/es/components/SearchInput/index.js

@@ -5,23 +5,19 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import t from 'format-message';
-import { themeable } from '@instructure/ui-themeable';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconEndSolid, IconSearchLine } from '@instructure/ui-icons';
 import { TextInput } from '@instructure/ui-text-input';
-import theme from "../theme.js";
-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 = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../theme.js";
+import generateStyle from "./styles.js";
+import { stylesShape } from "../../store/shapes.js";
+var SearchInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(SearchInput, _React$Component);
 
   var _super = _createSuper(SearchInput);
@@ -37,13 +33,13 @@ var SearchInput = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     value: // eslint-disable-next-line no-undef
     function renderClearSearchButton() {
       var onClear = this.props.onClear;
-      return /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(IconButton, {
         size: "small",
         withBackground: false,
         withBorder: false,
         onClick: onClear,
         screenReaderLabel: t('Clear search field')
-      }, /*#__PURE__*/React.createElement(IconEndSolid, {
+      }, jsx(IconEndSolid, {
         size: "x-small"
       }));
     }
@@ -53,16 +49,16 @@ var SearchInput = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var _this$props = this.props,
           onChange = _this$props.onChange,
           searchText = _this$props.searchText;
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.search
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      return jsx("span", {
+        css: this.props.styles.search
+      }, jsx(TextInput, {
         type: "search",
-        label: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Search outcomes')),
+        renderLabel: jsx(ScreenReaderContent, null, t('Search outcomes')),
         placeholder: t('Search Outcomes'),
         value: searchText,
         onChange: onChange,
         size: "medium",
-        renderAfterInput: searchText ? this.renderClearSearchButton() : /*#__PURE__*/React.createElement(IconSearchLine, {
+        renderAfterInput: searchText ? this.renderClearSearchButton() : jsx(IconSearchLine, {
           size: "x-small"
         })
       }));
@@ -74,6 +70,7 @@ var SearchInput = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 }(React.Component), _class2.propTypes = {
   onChange: PropTypes.func.isRequired,
   onClear: PropTypes.func.isRequired,
-  searchText: PropTypes.string.isRequired
+  searchText: PropTypes.string.isRequired,
+  styles: stylesShape
 }, _temp)) || _class);
 export { SearchInput as default };

package/es/components/SearchInput/styles.js

@@ -0,0 +1,30 @@
+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'
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/components/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       spacing = _ref.spacing,
       colors = _ref.colors;
@@ -13,4 +13,6 @@ export default function generator(_ref) {
     checkboxDescriptionLeftPadding: '2.25rem' // checkboxLabelLeftPadding + CheckboxFacade/facadeSizeMedium + CheckboxFacade/marginRight
 
   };
-}
+};
+
+export default generateComponentTheme;

package/es/constants.js

@@ -91,8 +91,9 @@ export var SET_INDIVIDUAL_RESULTS_STATE = 'SET_INDIVIDUAL_RESULTS_STATE';
 */
 
 export var REPORT_DOWNLOAD_FF = 'report_download';
+export var NEW_DECAYING_AVERAGE_FF = 'outcomes_new_decaying_average_calculation';
 export var getFeatureFlags = function getFeatureFlags() {
-  return [REPORT_DOWNLOAD_FF];
+  return [REPORT_DOWNLOAD_FF, NEW_DECAYING_AVERAGE_FF];
 };
 /*
  * calculation method
@@ -102,5 +103,7 @@ export var HIGHEST = 'highest';
 export var LATEST = 'latest';
 export var N_MASTERY = 'n_mastery';
 export var DECAYING_AVERAGE = 'decaying_average';
+export var STANDARD_DECAYING_AVERAGE = 'standard_decaying_average';
+export var WEIGHTED_AVERAGE = 'weighted_average';
 export var AVERAGE = 'average';
-export var CALCULATION_METHODS = (_CALCULATION_METHODS = {}, _defineProperty(_CALCULATION_METHODS, HIGHEST, 'Highest Score'), _defineProperty(_CALCULATION_METHODS, LATEST, 'Most Recent Score'), _defineProperty(_CALCULATION_METHODS, N_MASTERY, 'Achieve Mastery {n} times'), _defineProperty(_CALCULATION_METHODS, DECAYING_AVERAGE, 'Decaying Average - {percent}%/{complement}%'), _defineProperty(_CALCULATION_METHODS, AVERAGE, 'Average'), _CALCULATION_METHODS);
+export var CALCULATION_METHODS = (_CALCULATION_METHODS = {}, _defineProperty(_CALCULATION_METHODS, HIGHEST, 'Highest Score'), _defineProperty(_CALCULATION_METHODS, LATEST, 'Most Recent Score'), _defineProperty(_CALCULATION_METHODS, N_MASTERY, 'Achieve Mastery {n} times'), _defineProperty(_CALCULATION_METHODS, DECAYING_AVERAGE, 'Decaying Average - {percent}%/{complement}%'), _defineProperty(_CALCULATION_METHODS, WEIGHTED_AVERAGE, 'Weighted Average - {percent}%/{complement}%'), _defineProperty(_CALCULATION_METHODS, STANDARD_DECAYING_AVERAGE, 'Decaying Average - {percent}%/{complement}%'), _defineProperty(_CALCULATION_METHODS, AVERAGE, 'Average'), _CALCULATION_METHODS);

package/es/containers/ConnectedAlignmentWidget.js

@@ -8,12 +8,14 @@ import * as outcomePickerActions from "../store/OutcomePicker/actions.js";
 import AlignmentWidget from "../components/AlignmentWidget/index.js";
 import WithArtifact from "../components/WithArtifact.js";
 import ConnectedOutcomeTray from "./ConnectedOutcomeTray.js";
+import { getFeatures } from "../store/features/selectors.js";
 
 var mapStateToProps = function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
   return {
     tray: ConnectedOutcomeTray,
-    alignedOutcomes: getAlignedOutcomes(state, scope)
+    alignedOutcomes: getAlignedOutcomes(state, scope),
+    features: getFeatures(state)
   };
 };
 

package/es/containers/ConnectedOutcomeTray.js

@@ -11,6 +11,7 @@ import { getFocusedOutcome, getSelectedOutcomeIds, getOutcomePickerState, makeIs
 import { getOutcomeList, getListPage, getListTotal } from "../store/OutcomeTray/selectors.js";
 import OutcomeTray from "../components/OutcomeTray/index.js";
 import { isOpen } from "../store/activePicker/selectors.js";
+import { getFeatures } from "../store/features/selectors.js";
 
 function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
@@ -27,7 +28,8 @@ function mapStateToProps(state, ownProps) {
     outcomes: getOutcomeList(state, scope),
     listPage: getListPage(state, scope),
     listTotal: getListTotal(state, scope),
-    focusedOutcome: getFocusedOutcome(state, scope)
+    focusedOutcome: getFocusedOutcome(state, scope),
+    features: getFeatures(state)
   };
 }
 

package/es/containers/ConnectedOutcomeView.js

@@ -1,13 +1,15 @@
 import { connect } from 'react-redux';
 import OutcomeView from "../components/OutcomeView/index.js";
 import { getContextByScope } from "../store/context/selectors.js";
+import { getFeatures } from "../store/features/selectors.js";
 
 var mapStateToProps = function mapStateToProps(state, ownProps) {
   var _getContextByScope;
 
   var scope = ownProps.scope;
   return {
-    context: (_getContextByScope = getContextByScope(state, scope)) === null || _getContextByScope === void 0 ? void 0 : _getContextByScope.data
+    context: (_getContextByScope = getContextByScope(state, scope)) === null || _getContextByScope === void 0 ? void 0 : _getContextByScope.data,
+    features: getFeatures(state)
   };
 };
 

package/es/containers/__tests__/AlignmentWidget.test.js

@@ -21,14 +21,15 @@ describe('AlignmentWidget', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
     }, /*#__PURE__*/React.createElement(AlignmentWidget, makeProps())));
-    expect(wrapper.find('AlignmentWidget')).to.have.length(1);
+    expect(wrapper.find(AlignmentWidget)).to.have.length(1);
   });
   it('sets the scope', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/React.createElement(AlignmentWidget, props)));
-    expect(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/React.createElement(AlignmentWidget, props))); // Enzyme finds two AlignmentWidget components because of the instui decorator on the component
+
+    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({
@@ -36,7 +37,8 @@ describe('AlignmentWidget', function () {
     });
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/React.createElement(AlignmentWidget, props)));
-    expect(wrapper.find('AlignmentWidget').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/React.createElement(AlignmentWidget, props))); // Enzyme finds two Link components because of the instui decorator on the component
+
+    expect(wrapper.find('AlignmentWidget').at(0).prop('scope')).to.equal('foo:::1');
   });
 });

package/es/containers/__tests__/ConnectedAlignmentLabels.test.js

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

package/es/containers/__tests__/ConnectedAlignmentList.test.js

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

package/es/containers/__tests__/ConnectedAlignmentWidget.test.js

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

package/es/containers/__tests__/ConnectedOutcomeTray.test.js

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

package/es/containers/__tests__/ConnectedOutcomeTree.test.js

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

package/es/containers/__tests__/ConnectedOutcomeView.test.js

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

package/es/containers/__tests__/OutcomeAlignments.test.js

@@ -20,15 +20,17 @@ describe('OutcomeAlignments', function () {
   it('renders', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/React.createElement(OutcomeAlignments, makeProps())));
-    expect(wrapper.find('AlignmentList')).to.have.length(1);
+    }, /*#__PURE__*/React.createElement(OutcomeAlignments, makeProps()))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    expect(wrapper.find('AlignmentList')).to.have.length(2);
   });
   it('sets the scope', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/React.createElement(OutcomeAlignments, props)));
-    expect(wrapper.find('AlignmentList').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/React.createElement(OutcomeAlignments, props))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    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({
@@ -36,7 +38,8 @@ describe('OutcomeAlignments', function () {
     });
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
-    }, /*#__PURE__*/React.createElement(OutcomeAlignments, props)));
-    expect(wrapper.find('AlignmentList').prop('scope')).to.equal('foo:::1');
+    }, /*#__PURE__*/React.createElement(OutcomeAlignments, props))); // Enzyme finds two AlignmentList components because of the instui decorator on the component
+
+    expect(wrapper.find('AlignmentList').at(0).prop('scope')).to.equal('foo:::1');
   });
 });

package/es/containers/__tests__/OutcomeList.test.js

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

package/es/containers/__tests__/OutcomesPerStudentReport.test.js

@@ -2,24 +2,8 @@ import { expect } from 'chai';
 import React from 'react';
 import { mount } from 'enzyme';
 import OutcomesPerStudentReport from "../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'
-};
+import styles from '../../components/OutcomesPerStudent/styles.js';
+import { findElementsWithStyle } from "../../util/__tests__/findElementsWithStyle.js";
 describe('OutcomesPerStudentReport', function () {
   function makeProps() {
     return {
@@ -47,6 +31,6 @@ describe('OutcomesPerStudentReport', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement("div", {
       id: "app"
     }, /*#__PURE__*/React.createElement(OutcomesPerStudentReport, makeProps())));
-    expect(wrapper.find(".".concat(styles.background))).to.have.length(1);
+    expect(findElementsWithStyle(wrapper, styles().background)).to.have.length(1);
   });
 });