@instructure/outcomes-ui 3.1.0 → 3.2.0

package/es/translated/en-CA/components/OutcomeLabels/styles.js

@@ -13,10 +13,6 @@ var generateStyle = function generateStyle(componentTheme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap'
-    },
-    comma: {
-      cssFloat: 'left',
-      width: '0.5rem'
     }
   };
 };

package/es/translated/en-CA/components/OutcomePicker/__tests__/index.test.js

@@ -34,7 +34,10 @@ describe('OutcomePicker', function () {
       treeView: OutcomeTree,
       scope: 'scopeForTest',
       artifactTypeName: '',
-      isSearchLoading: false
+      isSearchLoading: false,
+      toggleExpandedIds: function toggleExpandedIds() {
+        return null;
+      }
     }, props);
   }
   it('passes correct params to OutcomeTags component', function () {
@@ -95,7 +98,7 @@ describe('OutcomePicker', function () {
   it('shows NoResults billboard when there are no outcomes present and single shared context', function () {
     var props = makeProps({
       hasOutcomes: false,
-      sharedContexts: [{
+      launchContexts: [{
         uuid: 'uuid',
         name: 'name'
       }]
@@ -108,7 +111,7 @@ describe('OutcomePicker', function () {
   it('does not display billboard when there are no outcomes present but user can select another context', function () {
     var props = makeProps({
       hasOutcomes: false,
-      sharedContexts: [{
+      launchContexts: [{
         uuid: 'uuid1',
         name: 'name1'
       }, {
@@ -124,7 +127,7 @@ describe('OutcomePicker', function () {
   it('shows the NoResults billboard when there are no outcomes present and single shared context', function () {
     var props = makeProps({
       hasOutcomes: false,
-      sharedContexts: [{
+      launchContexts: [{
         uuid: 'uuid',
         name: 'name'
       }]
@@ -137,7 +140,7 @@ describe('OutcomePicker', function () {
   it('does not display billboard when there are no outcomes present but user can select another context', function () {
     var props = makeProps({
       hasOutcomes: false,
-      sharedContexts: [{
+      launchContexts: [{
         uuid: 'uuid1',
         name: 'name1'
       }, {

package/es/translated/en-CA/components/OutcomePicker/index.js

@@ -11,7 +11,7 @@ import OutcomeTags from "../OutcomeTags/index.js";
 import OutcomeViewModal from "../OutcomeViewModal/index.js";
 import SearchInput from "../SearchInput/index.js";
 import SearchResults from "../SearchResults/index.js";
-import { outcomeShape, sharedContextsShape } from "../../store/shapes.js";
+import { outcomeShape, launchContextsShape } from "../../store/shapes.js";
 import NoResults from "../NoResults/index.js";
 var OutcomePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomePicker, _React$Component);
@@ -123,11 +123,11 @@ var OutcomePicker = /*#__PURE__*/function (_React$Component) {
       var _this$props5 = this.props,
         hasOutcomes = _this$props5.hasOutcomes,
         searchText = _this$props5.searchText,
-        sharedContexts = _this$props5.sharedContexts;
-      // If there are shared contexts, we cannot render this billboard because hasOutcomes is evaluated only for
+        launchContexts = _this$props5.launchContexts;
+      // If there are launch contexts, we cannot render this billboard because hasOutcomes is evaluated only for
       // the currently selected context. This would prevent users from selecting another context if the first
-      // context failed to be retrieved OR had no contexts.
-      var hasMultipleContexts = (sharedContexts === null || sharedContexts === void 0 ? void 0 : sharedContexts.length) > 1;
+      // context failed to be retrieved OR had no outcomes.
+      var hasMultipleContexts = (launchContexts === null || launchContexts === void 0 ? void 0 : launchContexts.length) > 1;
       if (!hasOutcomes && !hasMultipleContexts) {
         return /*#__PURE__*/React.createElement(NoResults, null);
       }
@@ -170,12 +170,12 @@ OutcomePicker.propTypes = {
   updateSearchPage: PropTypes.func.isRequired,
   hasOutcomes: PropTypes.bool.isRequired,
   scope: PropTypes.string.isRequired,
-  sharedContexts: sharedContextsShape,
+  launchContexts: launchContextsShape,
   treeView: PropTypes.func.isRequired
 };
 OutcomePicker.defaultProps = {
   focusedOutcome: null,
-  sharedContexts: null,
+  launchContexts: null,
   artifactTypeName: null,
   displayMasteryDescription: false,
   displayMasteryPercentText: false,

package/es/translated/en-CA/components/OutcomePicker/index.stories.js

@@ -36,6 +36,7 @@ export var collapsed = function collapsed() {
     treeView: function treeView() {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), " OutcomeTree Placeholder ");
     },
-    hasOutcomes: true
+    hasOutcomes: true,
+    scope: "outcomePicker::story"
   })));
 };

package/es/translated/en-CA/components/OutcomePickerLoader/__tests__/index.test.js

@@ -26,21 +26,6 @@ describe('OutcomePickerLoader', function () {
     expect(props.loadOutcomePicker.calledOnce).to.be.true;
     expect(props.loadOutcomePicker.calledWith()).to.be.true;
   });
-  it('calls loadOutcomePicker with sharedContexts on mount', function () {
-    var sharedContexts = [{
-      uuid: 'foo',
-      name: 'bar'
-    }, {
-      uuid: 'fuz',
-      name: 'baz'
-    }];
-    var props = makeProps({
-      sharedContexts: sharedContexts
-    });
-    shallow( /*#__PURE__*/React.createElement(OutcomePickerLoader, props));
-    expect(props.loadOutcomePicker.calledOnce).to.be.true;
-    expect(props.loadOutcomePicker.calledWith(sharedContexts)).to.be.true;
-  });
   it('displays nothing when closed', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(OutcomePickerLoader, makeProps()));
     expect(wrapper.equals( /*#__PURE__*/React.createElement("div", null))).to.be.true;

package/es/translated/en-CA/components/OutcomePickerLoader/index.js

@@ -6,7 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Spinner } from '@instructure/ui-spinner';
 import { Flex } from '@instructure/ui-flex';
-import { sharedContextsShape } from "../../store/shapes.js";
+import { launchContextsShape } from "../../store/shapes.js";
 var OutcomePickerLoader = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomePickerLoader, _React$Component);
   var _super = _createSuper(OutcomePickerLoader);
@@ -17,10 +17,8 @@ var OutcomePickerLoader = /*#__PURE__*/function (_React$Component) {
   _createClass(OutcomePickerLoader, [{
     key: "componentWillMount",
     value: function componentWillMount() {
-      var _this$props = this.props,
-        loadOutcomePicker = _this$props.loadOutcomePicker,
-        sharedContexts = _this$props.sharedContexts;
-      loadOutcomePicker(sharedContexts);
+      var loadOutcomePicker = this.props.loadOutcomePicker;
+      loadOutcomePicker();
     }
   }, {
     key: "render",
@@ -39,7 +37,7 @@ var OutcomePickerLoader = /*#__PURE__*/function (_React$Component) {
             var OutcomePicker = this.props.outcomePicker;
             return /*#__PURE__*/React.createElement(OutcomePicker, {
               scope: this.props.scope,
-              sharedContexts: this.props.sharedContexts,
+              launchContexts: this.props.launchContexts,
               artifactTypeName: this.props.artifactTypeName,
               displayMasteryDescription: this.props.displayMasteryDescription,
               displayMasteryPercentText: this.props.displayMasteryPercentText,
@@ -72,14 +70,14 @@ OutcomePickerLoader.propTypes = {
   outcomePickerState: PropTypes.string.isRequired,
   outcomePicker: PropTypes.func.isRequired,
   scope: PropTypes.string.isRequired,
-  sharedContexts: sharedContextsShape,
+  launchContexts: launchContextsShape,
   artifactTypeName: PropTypes.string,
   displayMasteryDescription: PropTypes.bool,
   displayMasteryPercentText: PropTypes.bool,
   screenreaderNotification: PropTypes.func
 };
 OutcomePickerLoader.defaultProps = {
-  sharedContexts: null,
+  launchContexts: null,
   artifactTypeName: null,
   displayMasteryDescription: false,
   displayMasteryPercentText: false,

package/es/translated/en-CA/components/OutcomePickerModal/index.js

@@ -9,7 +9,7 @@ import { Text } from '@instructure/ui-text';
 import { Heading } from '@instructure/ui-heading';
 import { Modal } from '@instructure/ui-modal';
 import OutcomePickerLoader from "../OutcomePickerLoader/index.js";
-import { sharedContextsShape } from "../../store/shapes.js";
+import { launchContextsShape } from "../../store/shapes.js";
 var ModalHeader = Modal.Header,
   ModalBody = Modal.Body,
   ModalFooter = Modal.Footer;
@@ -88,7 +88,7 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
         loadOutcomePicker = _this$props2.loadOutcomePicker,
         setFocusedOutcome = _this$props2.setFocusedOutcome,
         scope = _this$props2.scope,
-        sharedContexts = _this$props2.sharedContexts,
+        launchContexts = _this$props2.launchContexts,
         artifactTypeName = _this$props2.artifactTypeName,
         displayMasteryDescription = _this$props2.displayMasteryDescription,
         displayMasteryPercentText = _this$props2.displayMasteryPercentText,
@@ -147,7 +147,7 @@ var OutcomePickerModal = /*#__PURE__*/function (_React$Component) {
         loadOutcomePicker: loadOutcomePicker,
         setFocusedOutcome: setFocusedOutcome,
         scope: scope,
-        sharedContexts: sharedContexts,
+        launchContexts: launchContexts,
         artifactTypeName: artifactTypeName,
         displayMasteryDescription: displayMasteryDescription,
         displayMasteryPercentText: displayMasteryPercentText,
@@ -187,7 +187,7 @@ OutcomePickerModal.propTypes = {
   anyOutcomeSelected: PropTypes.bool.isRequired,
   trigger: PropTypes.object,
   scope: PropTypes.string.isRequired,
-  sharedContexts: sharedContextsShape,
+  launchContexts: launchContextsShape,
   artifactTypeName: PropTypes.string,
   displayMasteryDescription: PropTypes.bool,
   displayMasteryPercentText: PropTypes.bool,
@@ -200,7 +200,7 @@ OutcomePickerModal.defaultProps = {
   onModalOpen: null,
   onUpdate: null,
   trigger: null,
-  sharedContexts: null,
+  launchContexts: null,
   artifactTypeName: null,
   displayMasteryDescription: false,
   displayMasteryPercentText: false,

package/es/translated/en-CA/components/OutcomePickerModal/index.stories.js

@@ -16,13 +16,14 @@ export var standard = function standard() {
     onModalClose: function onModalClose() {},
     onModalOpen: function onModalOpen() {},
     onUpdate: function onUpdate() {},
+    closeOutcomePicker: function closeOutcomePicker() {},
     trigger: _this,
     scope: "",
     artifactTypeName: "Quiz",
     displayMasteryDescription: true,
     displayMasteryPercentText: true,
     screenreaderNotification: function screenreaderNotification() {},
-    liveRegion: "",
+    liveRegion: function liveRegion() {},
     mountNode: function mountNode() {},
     outcomePicker: function outcomePicker() {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), "OutcomePicker would go here");

package/es/translated/en-CA/components/OutcomeSelectionList/__tests__/index.test.js

@@ -120,7 +120,7 @@ describe('OutcomeSelectionList', function () {
     // Enzyme finds extra Checkbox components because of the instui decorator on the component
     var change = wrapper.find('Checkbox[value="selectAll"]').at(0).prop('onChange');
     change();
-    expect(props.selectOutcomeIds.calledWith(['1', '2', '3']));
+    expect(props.selectOutcomeIds.calledWith(['1', '2', '3'])).to.be.true;
   });
   it('calls unselect function on all outcomes when select all is checked and clicked', function () {
     var props = makeProps({
@@ -131,7 +131,7 @@ describe('OutcomeSelectionList', function () {
     });
     var change = wrapper.find('Checkbox[value="selectAll"]').at(0).prop('onChange');
     change();
-    expect(props.deselectOutcomeIds.calledWith(['1', '2', '3']));
+    expect(props.deselectOutcomeIds.calledWith(['1', '2', '3'])).to.be.true;
   });
   it('meets a11y standards', function () {
     return checkA11y( /*#__PURE__*/React.createElement(OutcomeSelectionList, makeProps()));

package/es/translated/en-CA/components/OutcomeTags/__tests__/index.test.js

@@ -97,6 +97,8 @@ describe('OutcomeTags', function () {
       }, 1);
     }, 1);
   });
+
+  // TODO: Fix this test
   it('focuses on empty results div when all tags are deleted', function (done) {
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTags, makeProps()));
     setTimeout(function () {

package/es/translated/en-CA/components/OutcomeTray/__tests__/index.test.js

@@ -15,6 +15,8 @@ describe('OutcomeTray', function () {
     return Object.assign({
       searchText: '',
       updateSearchText: sinon.spy(),
+      updateSearchPage: sinon.spy(),
+      saveOutcomePickerAlignments: sinon.spy(),
       setSearchLoading: sinon.spy(),
       setSearchEntries: sinon.spy(),
       isSearchLoading: false,

package/es/translated/en-CA/components/OutcomeTree/__tests__/index.test.js

@@ -43,7 +43,7 @@ describe('OutcomeTree', function () {
       isOutcomeSelected: sinon.stub().returns(false),
       getOutcomeSummary: sinon.spy(),
       selectOutcomeIds: sinon.spy(),
-      changeSelectedSharedContext: sinon.spy(),
+      changeSelectedLaunchContext: sinon.spy(),
       deselectOutcomeIds: sinon.spy(),
       setFocusedOutcome: sinon.spy(),
       setActiveCollection: sinon.spy(),
@@ -164,23 +164,31 @@ describe('OutcomeTree', function () {
   });
   it('resets focus on update', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, makeProps()));
+
+    // It is not very apparent how this test works. At this point, wrapper.getDOMNode()
+    // returns the outcome tree with outcome 100 as active (see makeProps()). The next
+    // line sets the collection to 101, which cannot be found, so the outcome description
+    // title and header is not rendered. This test would be more readable if it was
+    // asserting that, because it is not clear what document.activeElement is.
+
     wrapper.setProps(_objectSpread({}, makeProps({
       activeCollection: {
-        id: '101'
+        id: '101',
+        header: 'Foo'
       }
     })));
     expect(wrapper.getDOMNode().contains(document.activeElement));
   });
-  it('does not render context selector if missing sharedContexts', function () {
-    // Make props does not set the sharedContexts property
+  it('does not render context selector if missing launchContexts', function () {
+    // Make props does not set the launchContexts property
     var props = makeProps();
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeTree, props));
     expect(wrapper.find(SimpleSelect)).to.have.length(0);
   });
   it('does not render context selector if only one context', function () {
-    // Make props does not set the sharedContexts property
+    // Make props does not set the launchContexts property
     var props = makeProps();
-    props.sharedContexts = [{
+    props.launchContexts = [{
       uuid: 'foo',
       name: 'bar'
     }];
@@ -188,16 +196,16 @@ describe('OutcomeTree', function () {
     expect(wrapper.find(SimpleSelect)).to.have.length(0);
   });
   it('render context selector if more than one context', function () {
-    // Make props does not set the sharedContexts property
+    // Make props does not set the launchContexts property
     var props = makeProps({
-      sharedContexts: [{
+      launchContexts: [{
         uuid: 'foo',
         name: 'bar'
       }, {
         uuid: 'fuz',
         name: 'baz'
       }],
-      selectedSharedContext: {
+      selectedLaunchContext: {
         uuid: 'fuz',
         name: 'baz'
       }

package/es/translated/en-CA/components/OutcomeTree/index.js

@@ -97,7 +97,7 @@ var AlignOutcomes = function AlignOutcomes(props) {
 import generateComponentTheme from "../theme.js";
 import generateStyle from "./styles.js";
 import { sanitizeHtml } from "../../lib/sanitize.js";
-import { selectedSharedContextShape, sharedContextsShape, stylesShape } from "../../store/shapes.js";
+import { selectedLaunchContextShape, launchContextsShape, stylesShape } from "../../store/shapes.js";
 var OutcomeTree = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = /*#__PURE__*/function (_React$Component) {
   _inherits(OutcomeTree, _React$Component);
   var _super = _createSuper(OutcomeTree);
@@ -158,28 +158,28 @@ var OutcomeTree = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     key: "renderContextSelector",
     value: function renderContextSelector() {
       var _this$props = this.props,
-        sharedContexts = _this$props.sharedContexts,
-        selectedSharedContext = _this$props.selectedSharedContext,
-        changeSelectedSharedContext = _this$props.changeSelectedSharedContext;
-      var hasMoreThanOneContext = (sharedContexts === null || sharedContexts === void 0 ? void 0 : sharedContexts.length) >= 2;
+        launchContexts = _this$props.launchContexts,
+        selectedLaunchContext = _this$props.selectedLaunchContext,
+        changeSelectedLaunchContext = _this$props.changeSelectedLaunchContext;
+      var hasMoreThanOneContext = (launchContexts === null || launchContexts === void 0 ? void 0 : launchContexts.length) >= 2;
       if (hasMoreThanOneContext) {
         return jsx(View, {
           as: "div",
           padding: "small small none",
-          "data-automation": "outcomeTree__outcomesSharedContextSelector"
+          "data-automation": "outcomeTree__outcomesLaunchContextSelector"
         }, jsx(SimpleSelect, {
           renderLabel: "Source",
-          value: selectedSharedContext.name,
+          value: selectedLaunchContext.name,
           onChange: function onChange(e, _ref) {
             var id = _ref.id,
               value = _ref.value;
-            return changeSelectedSharedContext({
+            return changeSelectedLaunchContext({
               uuid: id,
               name: value
             });
           }
-        }, sharedContexts.map(function (context) {
-          var isSelected = selectedSharedContext.uuid === context.uuid;
+        }, launchContexts.map(function (context) {
+          var isSelected = selectedLaunchContext.uuid === context.uuid;
           return isSelected ? jsx(SimpleSelect.Option, {
             id: context.uuid,
             key: context.uuid,
@@ -272,9 +272,9 @@ var OutcomeTree = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   getOutcomeSummary: PropTypes.func.isRequired,
   isOutcomeSelected: PropTypes.func.isRequired,
   selectOutcomeIds: PropTypes.func.isRequired,
-  sharedContexts: sharedContextsShape,
-  selectedSharedContext: selectedSharedContextShape,
-  changeSelectedSharedContext: PropTypes.func.isRequired,
+  launchContexts: launchContextsShape,
+  selectedLaunchContext: selectedLaunchContextShape,
+  changeSelectedLaunchContext: PropTypes.func.isRequired,
   deselectOutcomeIds: PropTypes.func.isRequired,
   collections: PropTypes.object.isRequired,
   setActiveCollection: PropTypes.func.isRequired,
@@ -297,7 +297,7 @@ var OutcomeTree = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     groups: [],
     nonGroups: []
   },
-  sharedContexts: null,
-  selectedSharedContext: null
+  launchContexts: null,
+  selectedLaunchContext: null
 }, _class2)) || _class);
 export default OutcomeTree;

package/es/translated/en-CA/components/OutcomeTree/styles.js

@@ -1,6 +1,6 @@
 var generateStyle = function generateStyle() {
   return {
-    outcomesSharedContextSelector: {},
+    outcomesLaunchContextSelector: {},
     outcomeTree: {
       overflow: 'scroll',
       height: '100%'

package/es/translated/en-CA/components/OutcomeView/MasteryCounts/__tests__/index.test.js

@@ -19,7 +19,10 @@ describe('OutcomeView MasteryCounts', function () {
       scoringMethod: scoringMethod,
       outcomeResult: {
         masteryCount: 10,
-        count: 20
+        count: 20,
+        averageScore: 0.5,
+        childArtifactCount: 1,
+        outcomeId: '1'
       }
     }, props);
   }

package/es/translated/en-CA/components/OutcomeView/__tests__/index.test.js

@@ -25,7 +25,10 @@ var sharedSpecs = function sharedSpecs(makeProps) {
     var props = makeProps({
       outcomeResult: {
         count: 100,
-        masteryCount: 50
+        masteryCount: 50,
+        averageScore: 0.5,
+        childArtifactCount: 1,
+        outcomeId: '1'
       }
     });
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
@@ -183,7 +186,10 @@ describe('OutcomeView', function () {
         var props = makeProps({
           outcomeResult: {
             count: 100,
-            masteryCount: 50
+            masteryCount: 50,
+            averageScore: 0.5,
+            childArtifactCount: 1,
+            outcomeId: '1'
           }
         });
         var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {
@@ -195,7 +201,10 @@ describe('OutcomeView', function () {
         var props = makeProps({
           outcomeResult: {
             count: 100,
-            masteryCount: 50
+            masteryCount: 50,
+            averageScore: 0.5,
+            childArtifactCount: 1,
+            outcomeId: '1'
           },
           scoringTiers: defaultProps.scoringTiers
         });
@@ -209,7 +218,10 @@ describe('OutcomeView', function () {
           displayMasteryDescription: true,
           outcomeResult: {
             count: 100,
-            masteryCount: 50
+            masteryCount: 50,
+            averageScore: 0.5,
+            childArtifactCount: 1,
+            outcomeId: '1'
           }
         });
         var wrapper = mount( /*#__PURE__*/React.createElement(OutcomeView, props), {

package/es/translated/en-CA/components/OutcomeView/index.js

@@ -101,7 +101,7 @@ var OutcomeView = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           // eslint-disable-line react/no-danger
           __html: sanitizeHtml(description)
         }
-      }))), scoringTiers && scoringMethod && displayMasteryInformation && jsx(ScoringTiers, {
+      }))), scoringTiers && scoringMethod && jsx(ScoringTiers, {
         outcomeResult: outcomeResult,
         scoringTiers: scoringTiers,
         scoringMethod: scoringMethod

package/es/translated/en-CA/components/OutcomesPerStudent/Header/__tests__/index.test.js

@@ -23,6 +23,7 @@ describe('OutcomesPerStudent/Header', function () {
         mastery_count: 5,
         childArtifactCount: 12
       },
+      scope: 'artifactType::artifactId',
       viewReportAlignment: sinon.spy(),
       getReportOutcome: sinon.stub().returns({
         id: '1',

package/es/translated/en-CA/components/OutcomesPerStudent/__tests__/index.test.js

@@ -5,19 +5,24 @@ import { shallow, mount } from 'enzyme';
 import OutcomesPerStudent from "../index.js";
 import checkA11y from "../../../test/checkA11y.js";
 import styles from '../styles.js';
-import { REPORT_DOWNLOAD_FF } from "../../../constants.js";
+import { COMPLETED, REPORT_DOWNLOAD_FF } from "../../../constants.js";
 import Header from "../Header/index.js";
 import Score from "../Score/index.js";
 import { PaginationButton } from '@instructure/ui-pagination';
 import { Billboard } from '@instructure/ui-billboard';
 import ExportCSVButton from "../ExportCSVButton/index.js";
 import { findElementsWithStyle } from "../../../util/__tests__/findElementsWithStyle.js";
+import generateComponentTheme from "../../theme.js";
 chai.use(require('sinon-chai'));
 describe('OutcomesPerStudent/index', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return Object.assign({
       loadPage: sinon.stub().returns(Promise.resolve()),
+      loading: false,
+      loadRemainingPages: sinon.spy(),
+      csvFetchingStatus: COMPLETED,
+      formatCSVData: sinon.spy(),
       clearReportStore: sinon.spy(),
       getReportOutcome: sinon.stub().returns({
         id: 1,
@@ -31,6 +36,7 @@ describe('OutcomesPerStudent/index', function () {
       closeReportAlignment: sinon.spy(),
       artifactType: 'foo',
       artifactId: 'bar',
+      scope: 'foo:bar',
       hasAnyOutcomes: true,
       currentPage: 3,
       pageCount: 5,
@@ -89,8 +95,7 @@ describe('OutcomesPerStudent/index', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {
       disableLifecycleMethods: true
     });
-    // expect(wrapper.find(`.${styles.studentRow}`)).to.have.length(5)
-    expect(findElementsWithStyle(wrapper, styles().studentRow)).to.have.length(5);
+    expect(findElementsWithStyle(wrapper, styles(generateComponentTheme).studentRow)).to.have.length(5);
   });
   it('renders a score for each student score', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(OutcomesPerStudent, makeProps()), {

package/es/translated/en-CA/components/OutcomesPerStudent/styles.js

@@ -1,4 +1,4 @@
-var generateStyle = function generateStyle() {
+var generateStyle = function generateStyle(componentTheme) {
   return {
     reportWrapper: {
       position: 'relative',
@@ -25,21 +25,21 @@ var generateStyle = function generateStyle() {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
-      justifyContent: 'center'
-    },
-    '.headerCell, .corner': {
-      boxSizing: 'border-box',
+      justifyContent: 'center',
       height: '5.5rem',
-      borderRight: 'var(--reportBorder)',
-      borderBottom: 'var(--reportBorder)'
+      borderRight: componentTheme.reportBorder,
+      borderBottom: componentTheme.reportBorder
     },
     headerCell: {
       boxSizing: 'border-box',
-      borderTop: 'var(--reportBorder)',
+      borderTop: componentTheme.reportBorder,
       padding: '0.5rem',
       flex: '1 0 10rem',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      height: '5.5rem',
+      borderRight: componentTheme.reportBorder,
+      borderBottom: componentTheme.reportBorder
     },
     loadingSpinner: {
       width: '100%',
@@ -61,25 +61,25 @@ var generateStyle = function generateStyle() {
       width: '13rem',
       height: '4rem',
       paddingLeft: '0.5rem',
-      borderRight: 'var(--reportBorder)',
+      borderRight: componentTheme.reportBorder,
       display: 'flex',
       justifyContent: 'flex-start',
-      borderBottom: 'var(--reportBorder)',
-      alignItems: 'center',
-      '& .avatar': {
-        paddingRight: '.5rem'
-      },
-      '& .name': {
-        textAlign: 'left',
-        textOverflow: 'ellipsis',
-        overflowX: 'hidden',
-        whiteSpace: 'nowrap'
-      }
+      borderBottom: componentTheme.reportBorder,
+      alignItems: 'center'
+    },
+    avatar: {
+      paddingRight: '0.5rem'
+    },
+    name: {
+      textAlign: 'left',
+      textOverflow: 'ellipsis',
+      overflowX: 'hidden',
+      whiteSpace: 'nowrap'
     },
     scoreCell: {
       boxSizing: 'border-box',
       flex: '1 0 10rem',
-      borderBottom: 'var(--reportBorder)'
+      borderBottom: componentTheme.reportBorder
     }
   };
 };

package/es/translated/en-CA/components/Ratings/index.js

@@ -101,9 +101,9 @@ var Ratings = function Ratings(_ref) {
   }))), renderDisplayMasteryPoints());
 };
 Ratings.propTypes = {
-  ratings: PropTypes.arrayOf(scoringTierShape).isRequired,
-  masteryPercent: PropTypes.number.isRequired,
-  pointsPossible: PropTypes.number.isRequired,
+  ratings: PropTypes.arrayOf(scoringTierShape),
+  masteryPercent: PropTypes.number,
+  pointsPossible: PropTypes.number,
   isTray: PropTypes.bool
 };
 Ratings.defaultProps = {