@instructure/outcomes-ui 2.1.8 → 3.0.0

package/lib/translated/en-GB-x-ukhe/components/OutcomeTray/index.js

@@ -27,14 +27,14 @@ var _uiFlex = require("@instructure/ui-flex");
 
 var _uiModal = require("@instructure/ui-modal");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
 var _uiView = require("@instructure/ui-view");
 
 var _uiTray = require("@instructure/ui-tray");
 
 var _uiSpinner = require("@instructure/ui-spinner");
 
+var _emotion = require("@instructure/emotion");
+
 var _index = _interopRequireDefault(require("./OutcomeList/index.js"));
 
 var _index2 = _interopRequireDefault(require("../SearchInput/index.js"));
@@ -43,21 +43,14 @@ var _index3 = _interopRequireDefault(require("../SearchResults/index.js"));
 
 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: 'fPfsV',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeTray--outcomeTray {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  min-height: 0;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.outcomes-ui__OutcomeTray--trayContainer {\n  padding: 1rem;\n  flex-grow: 1;\n  overflow: auto;\n  min-height: 0;\n}\n\n.outcomes-ui__OutcomeTray--footerContainer {\n  bottom: 0;\n  position: sticky;\n}\n";
-  },
-  'outcomeTray': 'outcomes-ui__OutcomeTray--outcomeTray',
-  'trayContainer': 'outcomes-ui__OutcomeTray--trayContainer',
-  'footerContainer': 'outcomes-ui__OutcomeTray--footerContainer'
-};
 var ModalFooter = _uiModal.Modal.Footer;
-var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var OutcomeTray = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(OutcomeTray, _React$Component);
 
   var _super = (0, _createSuper2.default)(OutcomeTray);
@@ -95,11 +88,12 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
           isFetching = _this$props2.isFetching,
           listPage = _this$props2.listPage,
           listTotal = _this$props2.listTotal,
-          getOutcomesList = _this$props2.getOutcomesList;
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          getOutcomesList = _this$props2.getOutcomesList,
+          features = _this$props2.features;
+      return (0, _emotion.jsx)(_uiView.View, {
         display: "block",
         padding: "small none none none"
-      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, (0, _emotion.jsx)(_index.default, {
         outcomes: outcomes,
         isOutcomeSelected: isOutcomeSelected,
         selectOutcomeIds: selectOutcomeIds,
@@ -107,7 +101,8 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
         isLoading: isFetching,
         listPage: listPage,
         listTotal: listTotal,
-        getOutcomesList: getOutcomesList
+        getOutcomesList: getOutcomesList,
+        features: features
       }));
     }
   }, {
@@ -126,7 +121,7 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
           searchTotal = _this$props3.searchTotal,
           selectOutcomeIds = _this$props3.selectOutcomeIds,
           deselectOutcomeIds = _this$props3.deselectOutcomeIds;
-      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return (0, _emotion.jsx)(_index3.default, {
         screenreaderNotification: screenreaderNotification,
         setSearchLoading: setSearchLoading,
         setSearchEntries: setSearchEntries,
@@ -149,11 +144,11 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
           isFetching = _this$props4.isFetching;
 
       if (isFetching) {
-        return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        return (0, _emotion.jsx)(_uiFlex.Flex, {
           justifyItems: "center"
-        }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
           padding: "small"
-        }, /*#__PURE__*/_react.default.createElement(_uiSpinner.Spinner, {
+        }, (0, _emotion.jsx)(_uiSpinner.Spinner, {
           renderTitle: "Loading"
         })));
       }
@@ -182,15 +177,14 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
       var _this2 = this;
 
       var closeOutcomePicker = this.props.closeOutcomePicker;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.footerContainer
-      }, /*#__PURE__*/_react.default.createElement(ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.footerContainer
+      }, (0, _emotion.jsx)(ModalFooter, null, (0, _emotion.jsx)(_uiButtons.Button, {
         margin: "xxx-small",
-        variant: "default",
         onClick: closeOutcomePicker
-      }, "Cancel"), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, "Cancel"), (0, _emotion.jsx)(_uiButtons.Button, {
         margin: "xxx-small",
-        variant: "primary",
+        color: "primary",
         onClick: function onClick() {
           return _this2.handleSubmit();
         }
@@ -213,28 +207,29 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
         placement: placement,
         size: size
       };
-      return /*#__PURE__*/_react.default.createElement(_uiTray.Tray, Object.assign({
+      return (0, _emotion.jsx)(_uiTray.Tray, Object.assign({
         "data-automation": "outcomeTrayPicker__view",
         liveRegion: liveRegion,
         mountNode: mountNode,
         open: isOpen,
         onExiting: resetOutcomePicker,
         label: "Align outcomes"
-      }, trayProps), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.outcomeTray
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.trayContainer
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      }, trayProps), (0, _emotion.jsx)("div", {
+        css: this.props.styles.outcomeTray
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.trayContainer
+      }, (0, _emotion.jsx)(_uiFlex.Flex, {
         margin: "none none small none"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3",
         margin: "0 0 x-small"
-      }, "Align outcomes")), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
-        onClick: closeOutcomePicker
-      }, "Cancel"))), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      }, "Align outcomes")), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_uiButtons.CloseButton, {
+        onClick: closeOutcomePicker,
+        screenReaderLabel: "Cancel"
+      }))), (0, _emotion.jsx)(_index2.default, {
         onChange: function onChange(_, value) {
           return updateSearchText(value);
         },
@@ -283,7 +278,9 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   displayMasteryPercentText: _propTypes.default.bool,
   shouldModifyArtifact: _propTypes.default.bool,
   scope: _propTypes.default.string.isRequired,
-  showAlert: _propTypes.default.func
+  showAlert: _propTypes.default.func,
+  features: _propTypes.default.array,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   screenreaderNotification: null,
   liveRegion: null,
@@ -298,6 +295,7 @@ var OutcomeTray = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _
   shouldModifyArtifact: false,
   searchTotal: null,
   listTotal: null,
-  showAlert: function showAlert() {}
+  showAlert: function showAlert() {},
+  features: []
 }, _temp)) || _class);
 exports.default = OutcomeTray;

package/lib/translated/en-GB-x-ukhe/components/OutcomeTray/styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    outcomeTray: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      minHeight: '0',
+      position: 'absolute',
+      top: '0',
+      bottom: '0',
+      left: '0',
+      right: '0'
+    },
+    trayContainer: {
+      padding: '1rem',
+      flexGrow: 1,
+      overflow: 'auto',
+      minHeight: '0'
+    },
+    footerContainer: {
+      bottom: '0',
+      position: 'sticky'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/en-GB-x-ukhe/components/OutcomeTree/TreeBrowser/__tests__/index.test.js

@@ -56,18 +56,20 @@ describe('TreeBrowser', function () {
 
   it('renders a TreeBrowser component', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('TreeBrowser')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_index.default)).to.have.length(1);
   });
   it('does not require a set of rootOutcomeIds', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(3);
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps())); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(6);
   });
   it('does not render a Home directory if only existing root is a collection', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       rootOutcomeIds: [1],
       collections: collectionsWithRoot([1])
-    })));
-    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(2);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(4);
     (0, _chai.expect)(wrapper.find('TreeButton').at(0).text()).to.include('Collectiony Collectionface');
   });
   it('renders a Home directory if only existing root is not a collection', function () {
@@ -75,8 +77,9 @@ describe('TreeBrowser', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       rootOutcomeIds: rootIds,
       collections: collectionsWithRoot(rootIds, [])
-    })));
-    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(1);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(2);
     (0, _chai.expect)(wrapper.find('TreeButton').at(0).text()).to.include('Home');
   });
   it('does not render Home level if all roots are collections', function () {
@@ -84,8 +87,9 @@ describe('TreeBrowser', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
       rootOutcomeIds: rootIds,
       collections: collectionsWithRoot(rootIds)
-    })));
-    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(2);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(4);
   });
   it('passes children of root collections', function () {
     var rootIds = ['1', '2'];
@@ -93,8 +97,9 @@ describe('TreeBrowser', function () {
       rootOutcomeIds: rootIds,
       collections: collectionsWithRoot(rootIds),
       expandedIds: ['1']
-    })));
-    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(3);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(6);
   });
   it('can expand non-root collections', function () {
     var collections = {
@@ -129,8 +134,9 @@ describe('TreeBrowser', function () {
       rootOutcomeIds: rootIds,
       collections: collections,
       expandedIds: ['2', '3']
-    })));
-    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(4);
+    }))); // Enzyme finds extra TreeButton components because of the instui decorator on the component
+
+    (0, _chai.expect)(wrapper.find('TreeButton')).to.have.length(8);
   });
   it('does not render if collections are undefined', function () {
     var props = makeProps({

package/lib/translated/en-GB-x-ukhe/components/OutcomeTree/__tests__/index.test.js

@@ -14,18 +14,24 @@ var _enzyme = require("enzyme");
 
 var _index = _interopRequireDefault(require("../index.js"));
 
+var _styles = _interopRequireDefault(require("../styles.js"));
+
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
-var styles = {
-  componentId: 'bkdMu',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__OutcomeTree--outcomeTree {\n  overflow: scroll;\n  height: 100%;\n}\n\n.outcomes-ui__OutcomeTree--outcomeContent {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow-y: scroll;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection {\n  padding-bottom: 1rem;\n  padding-left: 1rem;\n  padding-top: 1rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.outcomes-ui__OutcomeTree--selectedOutcomeCollection .outcomes-ui__OutcomeTree--outcomeDescription > p:last-child {\n    margin-bottom: 0\n  }\n";
-  },
-  'outcomeTree': 'outcomes-ui__OutcomeTree--outcomeTree',
-  'outcomeContent': 'outcomes-ui__OutcomeTree--outcomeContent',
-  'selectedOutcomeCollection': 'outcomes-ui__OutcomeTree--selectedOutcomeCollection',
-  'outcomeDescription': 'outcomes-ui__OutcomeTree--outcomeDescription'
-};
+var _index2 = _interopRequireDefault(require("../TreeBrowser/index.js"));
+
+var _index3 = _interopRequireDefault(require("../../OutcomeSelectionList/index.js"));
+
+var _index4 = _interopRequireDefault(require("../../OutcomeFolderList/index.js"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _uiBillboard = require("@instructure/ui-billboard");
+
+var _findElementsWithStyle = require("../../../util/__tests__/findElementsWithStyle.js");
+
 describe('OutcomeTree', function () {
   var outcomeData = {
     label: 'FOO',
@@ -77,40 +83,40 @@ describe('OutcomeTree', function () {
 
   it('passes the correct params to OutcomeBrowser', function () {
     var props = makeProps();
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('OutcomeBrowser')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('OutcomeBrowser').prop('collections')).to.deep.equal(props.collections);
-    (0, _chai.expect)(wrapper.find('OutcomeBrowser').prop('rootOutcomeIds')).to.deep.equal(props.rootOutcomeIds);
-    (0, _chai.expect)(wrapper.find('OutcomeBrowser').prop('expandedIds')).to.deep.equal(props.expandedIds);
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_index2.default).prop('collections')).to.deep.equal(props.collections);
+    (0, _chai.expect)(wrapper.find(_index2.default).prop('rootOutcomeIds')).to.deep.equal(props.rootOutcomeIds);
+    (0, _chai.expect)(wrapper.find(_index2.default).prop('expandedIds')).to.deep.equal(props.expandedIds);
   });
   it('wraps the browser with the proper CSS styling', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find(".".concat(styles.outcomeTree)).exists()).to.equal(true);
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().outcomeTree).exists()).to.equal(true);
   });
   it('passes correct params to OutcomeSelectionList component', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('OutcomeSelectionList').prop('outcomes')).to.deep.equal(nonGroups);
+    (0, _chai.expect)(wrapper.find(_index3.default).prop('outcomes')).to.deep.equal(nonGroups);
   });
   it('passes correct params to OutcomeFolderList component', function () {
     var props = makeProps();
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('OutcomeFolderList').prop('outcomes')).to.deep.equal(groups);
-    (0, _chai.expect)(wrapper.find('OutcomeFolderList').prop('activeCollectionId')).to.deep.equal(props.activeCollection.id);
+    (0, _chai.expect)(wrapper.find(_index4.default).prop('outcomes')).to.deep.equal(groups);
+    (0, _chai.expect)(wrapper.find(_index4.default).prop('activeCollectionId')).to.deep.equal(props.activeCollection.id);
   });
   it('passes correct params to the Text components', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    var texts = wrapper.find('Text');
-    var header = wrapper.find('Heading');
+    var texts = wrapper.find(_uiText.Text);
+    var header = wrapper.find(_uiHeading.Heading);
     (0, _chai.expect)(texts.at(0).render().text()).to.equal('1 outcome');
     (0, _chai.expect)(texts.at(1).render().text()).to.equal('This is the description');
     (0, _chai.expect)(header.at(0).render().text()).to.equal('Outcome group');
@@ -122,29 +128,29 @@ describe('OutcomeTree', function () {
     (0, _chai.expect)(wrapper.html()).to.include('</blink>');
   });
   it('sets the CSS styling when there is a description', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find(".".concat(styles.outcomeDescription)).exists()).to.equal(true);
+    (0, _chai.expect)(wrapper.find('.outcomeTreeOutcomeDescription').exists()).to.equal(true);
   });
   it('shows the proper billboard when there are no active collection details', function () {
     var props = makeProps({
       activeCollection: {}
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Billboard')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('Align Outcomes');
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard).prop('heading')).to.equal('Align Outcomes');
   });
   it('shows the proper billboard when there is no active collection id', function () {
     var props = makeProps();
     delete props.activeCollection.id;
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Billboard')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('Align Outcomes');
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard)).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiBillboard.Billboard).prop('heading')).to.equal('Align Outcomes');
   });
   it('does not set the CSS description styling when there are no active collection details', function () {
     var props = makeProps({
@@ -153,16 +159,16 @@ describe('OutcomeTree', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find(".".concat(styles.outcomeDescription)).exists()).to.equal(false);
+    (0, _chai.expect)(wrapper.find(".".concat(_styles.default.outcomeDescription)).exists()).to.equal(false);
   });
   it('sets the CSS content styling', function () {
     var props = makeProps({
       activeCollection: {}
     });
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find(".".concat(styles.outcomeContent)).exists()).to.equal(true);
+    (0, _chai.expect)((0, _findElementsWithStyle.findElementsWithStyle)(wrapper, (0, _styles.default)().outcomeContent).exists()).to.equal(true);
   });
   it('handles missing activeCollection props', function () {
     var props = makeProps();