@instructure/outcomes-ui 2.1.9 → 3.0.0

package/es/translated/pt/components/OutcomeTree/styles.js

@@ -0,0 +1,28 @@
+var generateStyle = function generateStyle() {
+  return {
+    outcomeTree: {
+      overflow: 'scroll',
+      height: '100%'
+    },
+    outcomeContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      overflowY: 'scroll'
+    },
+    selectedOutcomeCollection: {
+      paddingBottom: '1rem',
+      paddingLeft: '1rem',
+      paddingTop: '1rem',
+      '.selectedOutcomeCollection .outcomeDescription > p': {
+        marginTop: '0.75rem',
+        marginBottom: '0.75rem',
+        '&:last-child': {
+          marginBottom: '0'
+        }
+      }
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/pt/components/OutcomeView/MasteryCounts/__tests__/index.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import MasteryCounts from "../index.js";
 import checkA11y from "../../../../test/checkA11y.js";
+import { ProgressBar } from '@instructure/ui-progress';
 describe('OutcomeView MasteryCounts', function () {
   var scoringMethod = {
     id: 1,
@@ -26,7 +27,7 @@ describe('OutcomeView MasteryCounts', function () {
 
   it('includes a progress bar', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryCounts, makeProps()));
-    expect(wrapper.find('ProgressBar')).to.have.length(1);
+    expect(wrapper.find(ProgressBar)).to.have.length(1);
   });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(MasteryCounts, makeProps()));

package/es/translated/pt/components/OutcomeView/MasteryCounts/index.js

@@ -5,26 +5,16 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
 import React from 'react';
-import { themeable } from '@instructure/ui-themeable';
 import { Text } from '@instructure/ui-text';
 import { ProgressBar } from '@instructure/ui-progress';
-import { outcomeResultShape, scoringMethodShape } from "../../../store/shapes.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import { outcomeResultShape, scoringMethodShape, stylesShape } from "../../../store/shapes.js";
 import convertToPoints from "../convertToPoints.js";
-import theme from "../../theme.js";
-var styles = {
-  componentId: 'dIVYN',
-  template: function template(theme) {
-    return "\n\n@media screen and (min-width: 768px) {\n  .outcomes-ui__MasteryCounts--masteryBarGraph {\n    margin-top: 2rem;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreSection {\n    display: none;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .outcomes-ui__MasteryCounts--masteryBarGraph {\n    display: none;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreSection {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-evenly;\n    margin-top: 2rem;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    color: ".concat(theme.masteryColor || 'inherit', ";\n    display: flex;\n    flex-direction: column;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  [dir=\"ltr\"] .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    text-align: center;\n  }\n\n  [dir=\"rtl\"] .outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery {\n    text-align: center;\n  }\n\n  .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    display: flex;\n    flex-direction: column;\n    font-weight: bold;\n    text-align: center;\n  }\n\n  [dir=\"ltr\"] .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    text-align: center;\n  }\n\n  [dir=\"rtl\"] .outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery {\n    text-align: center;\n  }\n}\n\n.outcomes-ui__MasteryCounts--masteryBarDetails {\n  display: flex;\n  justify-content: space-between;\n  padding-top: 0.25rem;\n}\n\n.outcomes-ui__MasteryCounts--masteryCountText {\n  color: ").concat(theme.masteryColor || 'inherit', ";\n}\n");
-  },
-  'masteryBarGraph': 'outcomes-ui__MasteryCounts--masteryBarGraph',
-  'masteryScoreSection': 'outcomes-ui__MasteryCounts--masteryScoreSection',
-  'masteryScoreBoxAboveMastery': 'outcomes-ui__MasteryCounts--masteryScoreBoxAboveMastery',
-  'masteryScoreBoxBelowMastery': 'outcomes-ui__MasteryCounts--masteryScoreBoxBelowMastery',
-  'masteryBarDetails': 'outcomes-ui__MasteryCounts--masteryBarDetails',
-  'masteryCountText': 'outcomes-ui__MasteryCounts--masteryCountText'
-};
-var MasteryCounts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+import generateComponentTheme from "../../theme.js";
+import generateStyle from "./styles.js";
+var MasteryCounts = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(MasteryCounts, _React$Component);
 
   var _super = _createSuper(MasteryCounts);
@@ -43,38 +33,38 @@ var MasteryCounts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
           outcomeResult = _this$props.outcomeResult,
           scoringMethod = _this$props.scoringMethod;
       var masteryPoints = convertToPoints(scoringMethod.mastery_percent, scoringMethod);
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryScoreSection
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryScoreBoxAboveMastery
-      }, /*#__PURE__*/React.createElement(Text, {
+      return jsx("div", null, jsx("div", {
+        css: this.props.styles.masteryScoreSection
+      }, jsx("div", {
+        css: this.props.styles.masteryScoreBoxAboveMastery
+      }, jsx(Text, {
         size: "x-large"
-      }, outcomeResult.masteryCount), /*#__PURE__*/React.createElement(Text, {
+      }, outcomeResult.masteryCount), jsx(Text, {
         size: "small"
-      }, "Dom\xEDnio nos " + masteryPoints + " pts")), /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryScoreBoxBelowMastery
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, "Dom\xEDnio nos " + masteryPoints + " pts")), jsx("div", {
+        css: this.props.styles.masteryScoreBoxBelowMastery
+      }, jsx(Text, {
         size: "x-large"
-      }, outcomeResult.count - outcomeResult.masteryCount), /*#__PURE__*/React.createElement(Text, {
+      }, outcomeResult.count - outcomeResult.masteryCount), jsx(Text, {
         size: "small"
-      }, "N\xE3o reuniu"))), /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryBarGraph,
+      }, "N\xE3o reuniu"))), jsx("div", {
+        css: this.props.styles.masteryBarGraph,
         "data-automation": "outcomeView__masteryBarGraph"
-      }, /*#__PURE__*/React.createElement(ProgressBar, {
+      }, jsx(ProgressBar, {
         size: "small",
         screenReaderLabel: outcomeResult.masteryCount + " de " + outcomeResult.count + " dom\xEDnio conhecido",
         meterColor: "success",
         valueMax: outcomeResult.count,
         valueNow: outcomeResult.masteryCount
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryBarDetails,
+      }), jsx("div", {
+        css: this.props.styles.masteryBarDetails,
         "data-automation": "outcomeView__masteryBarDetails"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.masteryCountText
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx("div", {
+        css: this.props.styles.masteryCountText
+      }, jsx(Text, {
         size: "small",
         "data-automation": "outcomeView__masteryCount"
-      }, outcomeResult.masteryCount + " Dom\xEDnio nos " + masteryPoints + " pts")), /*#__PURE__*/React.createElement(Text, {
+      }, outcomeResult.masteryCount + " Dom\xEDnio nos " + masteryPoints + " pts")), jsx(Text, {
         size: "small",
         "data-automation": "outcomeView__noMasteryCount"
       }, outcomeResult.count - outcomeResult.masteryCount + " N\xE3o reuniu"))));
@@ -85,6 +75,7 @@ var MasteryCounts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   return MasteryCounts;
 }(React.Component), _class2.propTypes = {
   outcomeResult: outcomeResultShape.isRequired,
-  scoringMethod: scoringMethodShape.isRequired
+  scoringMethod: scoringMethodShape.isRequired,
+  styles: stylesShape
 }, _temp)) || _class);
 export { MasteryCounts as default };

package/es/translated/pt/components/OutcomeView/MasteryCounts/styles.js

@@ -0,0 +1,46 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    '@media screen and (min-width: 768px)': {
+      masteryBarGraph: {
+        marginTop: '2rem'
+      },
+      masteryScoreSection: {
+        display: 'none'
+      }
+    },
+    '@media screen and (max-width: 768px)': {
+      masteryBarGraph: {
+        display: 'none'
+      },
+      masteryScoreSection: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-evenly',
+        marginTop: '2rem'
+      },
+      masteryScoreBoxAboveMastery: {
+        color: componentTheme.masteryColor,
+        display: 'flex',
+        flexDirection: 'column',
+        fontWeight: 'bold',
+        textAlign: 'center'
+      },
+      masteryScoreBoxBelowMastery: {
+        display: 'flex',
+        flexDirection: 'column',
+        fontWeight: 'bold',
+        textAlign: 'center'
+      }
+    },
+    masteryBarDetails: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingTop: '0.25rem'
+    },
+    masteryCountText: {
+      color: componentTheme.masteryColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/pt/components/OutcomeView/MasteryDescription/__tests__/index.test.js

@@ -4,14 +4,9 @@ import React from 'react';
 import { mount } from 'enzyme';
 import MasteryDescription from "../index.js";
 import checkA11y from "../../../../test/checkA11y.js";
-var styles = {
-  componentId: 'IalyE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
-  },
-  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
-  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
-};
+import { Spinner } from '@instructure/ui-spinner';
+import styles from "../styles.js";
+import { findElementsWithStyle } from "../../../../util/__tests__/findElementsWithStyle.js";
 describe('MasteryDescription', function () {
   var scoringMethod = {
     id: 1,
@@ -38,7 +33,7 @@ describe('MasteryDescription', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryDescription, props), {
       attachTo: document.body
     });
-    expect(wrapper.find('Spinner')).to.have.length(1);
+    expect(wrapper.find(Spinner)).to.have.length(1);
   });
   it('does not render mastery percent text if displayMasteryPercentText is false', function () {
     var props = makeProps({
@@ -58,7 +53,7 @@ describe('MasteryDescription', function () {
   });
   it('renders mastery percent text', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryDescription, makeProps()));
-    var scoreMastery = wrapper.find(".".concat(styles.scoreMasteryText));
+    var scoreMastery = findElementsWithStyle(wrapper, styles().scoreMasteryText);
     expect(scoreMastery.length).to.equal(1);
   });
   it('renders mastery description for decaying_average', function () {
@@ -69,7 +64,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryDescription, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = findElementsWithStyle(wrapper, styles().scoreMastery);
     expect(txt.first().text()).to.match(/Decaying Average/);
   });
   it('renders mastery description for n_mastery', function () {
@@ -80,7 +75,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryDescription, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = findElementsWithStyle(wrapper, styles().scoreMastery).find('Text');
     expect(txt.first().text()).to.match(/n Number of Times/);
   });
   it('renders mastery description for highest', function () {
@@ -91,7 +86,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryDescription, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = findElementsWithStyle(wrapper, styles().scoreMastery).find('Text');
     expect(txt.first().text()).to.match(/Highest Score/);
   });
   it('renders mastery description for latest', function () {
@@ -102,7 +97,7 @@ describe('MasteryDescription', function () {
       })
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(MasteryDescription, props));
-    var txt = wrapper.find(".".concat(styles.scoreMastery)).find('Text');
+    var txt = findElementsWithStyle(wrapper, styles().scoreMastery).find('Text');
     expect(txt.first().text()).to.match(/Most Recent Score/);
   });
   it('meets a11y standards', function () {

package/es/translated/pt/components/OutcomeView/MasteryDescription/index.js

@@ -10,22 +10,16 @@ var _percent_pt_number = Intl.NumberFormat("pt", { style: "percent" }).format,
     _class2,
     _temp;
 
+/** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
 import { Spinner } from '@instructure/ui-spinner';
-import { themeable } from '@instructure/ui-themeable';
-import { scoringMethodShape } from "../../../store/shapes.js";
+import { scoringMethodShape, stylesShape } from "../../../store/shapes.js";
 import { NEW_DECAYING_AVERAGE_FF } from "../../../constants.js";
-import theme from "../../theme.js";
-var styles = {
-  componentId: 'IalyE',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__MasteryDescription--scoreMastery {\n  background-color: #F5F5F5;\n  border: solid 1px #999999;\n  border-radius: 0.25rem;\n  margin-top: 2rem;\n  padding: 1.0rem 1.0rem;\n}\n\n.outcomes-ui__MasteryDescription--scoreMasteryText {\n  margin-top: 1rem;\n}\n";
-  },
-  'scoreMastery': 'outcomes-ui__MasteryDescription--scoreMastery',
-  'scoreMasteryText': 'outcomes-ui__MasteryDescription--scoreMasteryText'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "../../theme.js";
+import generateStyle from "./styles.js";
 
 var renderUserFacingMethod = function renderUserFacingMethod(scoringMethod, newDecayingAvgFFEnabled) {
   var legacyDecayingAverage = "Dom\xEDnio calculado pela m\xE9dia de decaimento. As contagens mais recentes a partir " + _percent_pt_number(scoringMethod.algorithm_data.decaying_average_percent) + " do peso de dom\xEDnio, a m\xE9dia de todos os outros resultados contam " + _percent_pt_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " como de peso. Se houver apenas um resultado, a pontua\xE7\xE3o ser\xE1 retornada.";
@@ -72,7 +66,7 @@ var masteryText = function masteryText(masteryPercent, artifactTypeName) {
   return "Ao alinhar a isso " + artifactTypeName + " se as pontua\xE7\xF5es acima do aluno " + _percent_pt_number(masteryPercent) + " do dom\xEDnio forem alcan\xE7adas.";
 };
 
-var MasteryDescription = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var MasteryDescription = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(MasteryDescription, _React$Component);
 
   var _super = _createSuper(MasteryDescription);
@@ -95,19 +89,19 @@ var MasteryDescription = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var newDecayingAvgFFEnabled = features.includes(NEW_DECAYING_AVERAGE_FF);
 
       if (!scoringMethod) {
-        return /*#__PURE__*/React.createElement(Spinner, {
+        return jsx(Spinner, {
           renderTitle: "A carregar"
         });
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.scoreMastery,
+      return jsx("div", {
+        css: this.props.styles.scoreMastery,
         "data-automation": "outcomeView__scoreMethodDescription"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      }, jsx("div", null, jsx(Text, {
         size: "small"
-      }, scoringText(scoringMethod, newDecayingAvgFFEnabled))), displayMasteryPercentText && artifactTypeName && /*#__PURE__*/React.createElement("div", {
-        className: styles.scoreMasteryText
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, scoringText(scoringMethod, newDecayingAvgFFEnabled))), displayMasteryPercentText && artifactTypeName && jsx("div", {
+        css: this.props.styles.scoreMasteryText
+      }, jsx(Text, {
         size: "small"
       }, masteryText(scoringMethod.mastery_percent, artifactTypeName))));
     }
@@ -119,7 +113,8 @@ var MasteryDescription = (_dec = themeable(theme, styles), _dec(_class = (_temp
   artifactTypeName: PropTypes.string,
   displayMasteryPercentText: PropTypes.bool.isRequired,
   scoringMethod: scoringMethodShape,
-  features: PropTypes.array
+  features: PropTypes.array,
+  styles: stylesShape
 }, _class2.defaultProps = {
   artifactTypeName: null,
   scoringMethod: null,

package/es/translated/pt/components/OutcomeView/MasteryDescription/styles.js

@@ -0,0 +1,16 @@
+var generateStyle = function generateStyle() {
+  return {
+    scoreMastery: {
+      backgroundColor: '#F5F5F5',
+      border: 'solid 1px #999999',
+      borderRadius: '0.25rem',
+      marginTop: '2rem',
+      padding: '1.0rem 1.0rem'
+    },
+    scoreMasteryText: {
+      marginTop: '1rem'
+    }
+  };
+};
+
+export default generateStyle;

package/es/translated/pt/components/OutcomeView/ScoringTiers/__tests__/index.test.js

@@ -5,21 +5,10 @@ import { mount } from 'enzyme';
 import { IconEmptyLine, IconStarSolid } from '@instructure/ui-icons';
 import ScoringTiers from "../index.js";
 import checkA11y from "../../../../test/checkA11y.js";
-var styles = {
-  componentId: 'bCFPW',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__ScoringTiers--score {\n  border: 1px solid #ccc;\n  color: #888;\n  border-radius: 100%;\n  width: 2.25rem;\n  height: 2.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 0.1rem;\n  margin-right: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--description {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.outcomes-ui__ScoringTiers--mastery {\n  margin-top: 0.25rem;\n}\n\n.outcomes-ui__ScoringTiers--rating {\n  display: flex;\n  margin-bottom: 0.5rem;\n}\n\n.outcomes-ui__ScoringTiers--scoringTier {\n  margin-bottom: 1.0rem;\n}\n\n.outcomes-ui__ScoringTiers--masteryCount {\n  font-weight: bold;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--gap:not(:empty) {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n  margin-left: 3.5rem;\n}\n\n.outcomes-ui__ScoringTiers--pill {\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--mastery {\n  color: ".concat(theme.masteryColor || 'inherit', ";\n}\n\n.outcomes-ui__ScoringTiers--pill.outcomes-ui__ScoringTiers--average {\n  color: ").concat(theme.averageColor || 'inherit', "\n}\n\n.outcomes-ui__ScoringTiers--pill:not(:last-child) {\n  margin-bottom: 0.75rem;\n}\n");
-  },
-  'score': 'outcomes-ui__ScoringTiers--score',
-  'description': 'outcomes-ui__ScoringTiers--description',
-  'mastery': 'outcomes-ui__ScoringTiers--mastery',
-  'rating': 'outcomes-ui__ScoringTiers--rating',
-  'scoringTier': 'outcomes-ui__ScoringTiers--scoringTier',
-  'masteryCount': 'outcomes-ui__ScoringTiers--masteryCount',
-  'gap': 'outcomes-ui__ScoringTiers--gap',
-  'pill': 'outcomes-ui__ScoringTiers--pill',
-  'average': 'outcomes-ui__ScoringTiers--average'
-};
+import styles from "../styles.js"; // import { find } from 'lodash'
+
+import { findElementsWithStyle } from "../../../../util/__tests__/findElementsWithStyle.js";
+import generateComponentTheme from "../../../theme.js";
 describe('OutcomeView ScoringTiers', function () {
   var scoringMethod = {
     id: 1,
@@ -36,43 +25,44 @@ describe('OutcomeView ScoringTiers', function () {
     averageScore: 0.6,
     outcomeId: 'foo'
   };
+  var scoringTiers = [{
+    id: 1,
+    description: 'Cri 1',
+    percent: 1.0
+  }, {
+    id: 2,
+    description: 'Cri 2',
+    percent: 0.6
+  }, {
+    id: 3,
+    description: 'Cri 3',
+    percent: 0.22222222
+  }];
 
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
       scoringMethod: scoringMethod,
-      scoringTiers: [{
-        id: 1,
-        description: 'Cri 1',
-        percent: 1.0
-      }, {
-        id: 2,
-        description: 'Cri 2',
-        percent: 0.6
-      }, {
-        id: 3,
-        description: 'Cri 3',
-        percent: 0.22222222
-      }]
+      scoringTiers: scoringTiers
     }, props);
   }
 
   it('displays scoring tiers', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(ScoringTiers, makeProps()));
-    expect(wrapper.find(".".concat(styles.rating))).to.have.length(3);
+    expect(findElementsWithStyle(wrapper, styles(generateComponentTheme).rating)).to.have.length(scoringTiers.length);
   });
 
-  var nextScore = function nextScore(pillWrapper) {
-    var gapNode = pillWrapper.closest(".".concat(styles.gap)).instance();
+  var nextScore = function nextScore(pillWrapper, wrapper) {
+    var gapNode = pillWrapper.closest('.outcomeViewGap').instance();
     var tierNode = gapNode.nextSibling;
-    var score = tierNode ? tierNode.getElementsByClassName(styles.score)[0].innerText : null;
+    var score = tierNode ? tierNode.getElementsByClassName('outcomeViewScore')[0].innerText : null;
     return score;
   };
 
   it('shows mastery between correct tiers', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(ScoringTiers, makeProps()));
     var mastery = wrapper.find(IconStarSolid);
-    var score = nextScore(mastery);
+    var score = nextScore(mastery, wrapper);
     expect(score).to.equal('1.11');
   });
   it('shows average between the correct tiers', function () {
@@ -93,14 +83,15 @@ describe('OutcomeView ScoringTiers', function () {
       }, outcomeResult)
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(ScoringTiers, props));
-    var gap = wrapper.find(IconStarSolid).closest(".".concat(styles.gap));
-    expect(gap.childAt(0).hasClass(styles.mastery)).to.be.true;
-    expect(gap.childAt(1).hasClass(styles.average)).to.be.true;
+    var gap = wrapper.find(IconStarSolid).closest('.outcomeViewGap');
+    expect(gap.childAt(0).find('span').at(0).hasClass('outcomeViewMastery')).to.be.true;
+    expect(gap.childAt(1).find('span').at(0).hasClass('outcomeViewAverage')).to.be.true;
   });
   it('rounds mastery points', function () {
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement(ScoringTiers, props));
-    var score = wrapper.find(".".concat(styles.rating)).last().find(".".concat(styles.score));
+    var rating = findElementsWithStyle(wrapper, styles(generateComponentTheme).rating).last();
+    var score = findElementsWithStyle(rating, styles(generateComponentTheme).score);
     expect(score.text()).to.equal('1.11');
   });
   it('renders tier mastery count', function () {
@@ -113,7 +104,7 @@ describe('OutcomeView ScoringTiers', function () {
       }]
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(ScoringTiers, props));
-    var txt = wrapper.find(".".concat(styles.masteryCount)).find('Text');
+    var txt = findElementsWithStyle(wrapper, styles(generateComponentTheme).masteryCount).find('Text');
     expect(txt.first().text()).to.match(/Students/);
   });
   it('meets a11y standards', function () {