@instructure/outcomes-ui 2.1.9 → 3.0.0

package/lib/translated/ca/components/AlignmentList/index.js

@@ -27,131 +27,125 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../Alignment/index.js"));
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _index2 = _interopRequireDefault(require("../OutcomePickerModal/index.js"));
 
-var _dec, _class, _class2, _temp;
+var _shapes = require("../../store/shapes.js");
 
-var styles = {
-  componentId: 'sJofx',
-  template: function template(theme) {
-    return "\n\n.outcomes-ui__AlignmentList--header {\n  background-color: #BBBBBB;\n  border: solid 1px #999999;\n  border-radius: 5px;\n  padding: 10px 20px;\n}\n\n.outcomes-ui__AlignmentList--list {\n  list-style: none;\n  padding-left: 0;\n  border: solid 1px #BBBBBB;\n  border-radius: 5px;\n}\n\n.outcomes-ui__AlignmentList--list > li {\n  padding: 10px 20px;\n}\n\n.outcomes-ui__AlignmentList--list > li + li {\n  border-top: dashed 1px #BBBBBB;\n}\n\n.outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n[dir=\"ltr\"] .outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n[dir=\"rtl\"] .outcomes-ui__AlignmentList--addOutcome {\n  text-align: center;\n}\n\n.outcomes-ui__AlignmentList--addOutcome button {\n  padding: 0;\n}\n";
-  },
-  'header': 'outcomes-ui__AlignmentList--header',
-  'list': 'outcomes-ui__AlignmentList--list',
-  'addOutcome': 'outcomes-ui__AlignmentList--addOutcome'
-};
+var _dec, _class, _class2, _temp;
 
 var Clipboard = function Clipboard(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
+  return (0, _emotion.jsx)("svg", Object.assign({
     width: "70",
     height: "96",
     viewBox: "0 0 70 96",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, props), /*#__PURE__*/_react.default.createElement("title", null, "ClipBoard"), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("path", {
+  }, props), (0, _emotion.jsx)("title", null, "ClipBoard"), (0, _emotion.jsx)("defs", null, (0, _emotion.jsx)("path", {
     id: "a",
     d: "M0 96h70V0H0z"
-  })), /*#__PURE__*/_react.default.createElement("g", {
+  })), (0, _emotion.jsx)("g", {
     fill: "none",
     fillRule: "evenodd"
-  }, /*#__PURE__*/_react.default.createElement("path", {
+  }, (0, _emotion.jsx)("path", {
     d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
     fill: "#F7F8F7"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M65 95H5a4 4 0 0 1-4-4V22a4 4 0 0 1 4-4h60a4 4 0 0 1 4 4v69a4 4 0 0 1-4 4z",
     stroke: "#3F5463",
     strokeWidth: "2"
-  }), /*#__PURE__*/_react.default.createElement("mask", {
+  }), (0, _emotion.jsx)("mask", {
     id: "b",
     fill: "#fff"
-  }, /*#__PURE__*/_react.default.createElement("use", {
+  }, (0, _emotion.jsx)("use", {
     xlinkHref: "#a"
-  })), /*#__PURE__*/_react.default.createElement("path", {
+  })), (0, _emotion.jsx)("path", {
     fill: "#FFF",
     mask: "url(#b)",
     d: "M9 46h13V33H9z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     stroke: "#3F5463",
     strokeWidth: "2",
     mask: "url(#b)",
     d: "M9 46h13V33H9z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#3F5463",
     mask: "url(#b)",
     d: "M28 36h23v-3H28zM28 46h14v-3H28zM28 41h31v-3H28z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     stroke: "#00B517",
     strokeWidth: "2",
     mask: "url(#b)",
     d: "M12 39l3 2.655 4.398-5.265"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#FFF",
     mask: "url(#b)",
     d: "M9 67h13V54H9z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     stroke: "#3F5463",
     strokeWidth: "2",
     mask: "url(#b)",
     d: "M9 67h13V54H9z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#3F5463",
     mask: "url(#b)",
     d: "M28 57h23v-3H28zM28 77h23v-3H28zM28 67h14v-3H28zM28 62h31v-3H28z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     stroke: "#00B517",
     strokeWidth: "2",
     mask: "url(#b)",
     d: "M12 60l3 2.655 4.398-5.265"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#FFF",
     mask: "url(#b)",
     d: "M9 87h13V74H9z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     stroke: "#3F5463",
     strokeWidth: "2",
     mask: "url(#b)",
     d: "M9 87h13V74H9z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     fill: "#3F5463",
     mask: "url(#b)",
     d: "M28 87h14v-3H28zM28 82h31v-3H28z"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     stroke: "#00B517",
     strokeWidth: "2",
     mask: "url(#b)",
     d: "M12 80l3 2.655 4.398-5.265"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25",
     fill: "#C0C6CB",
     mask: "url(#b)"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M55.874 25H14.126a2 2 0 0 1-1.816-2.838L17 12h36l4.69 10.162A2 2 0 0 1 55.874 25z",
     stroke: "#3F5463",
     strokeWidth: "2",
     mask: "url(#b)"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1",
     fill: "#E5E8EA",
     mask: "url(#b)"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M35 1C24 1 24 12 24 12h22S44.667 1 35 1z",
     stroke: "#3F5463",
     strokeWidth: "2",
     mask: "url(#b)"
-  }), /*#__PURE__*/_react.default.createElement("path", {
+  }), (0, _emotion.jsx)("path", {
     d: "M36.667 6.551a2 2 0 1 1-4 .002 2 2 0 0 1 4-.002",
     fill: "#3F5463",
     mask: "url(#b)"
   })));
 };
 
-var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+var AlignmentList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(AlignmentList, _React$Component);
 
   var _super = (0, _createSuper2.default)(AlignmentList);
@@ -218,19 +212,22 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function renderAddOutcomeButton() {
       var _this2 = this;
 
-      return /*#__PURE__*/_react.default.createElement("li", {
-        className: styles.addOutcome
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
-        ref: function ref(d) {
-          _this2.triggerRoot = d;
+      return (0, _emotion.jsx)("li", {
+        css: this.props.styles.addOutcome
+      }, (0, _emotion.jsx)(_uiButtons.IconButton, {
+        elementRef: function elementRef(d) {
+          return _this2.triggerRoot = d;
         } // eslint-disable-line immutable/no-mutation
         ,
-        variant: "circle-primary",
+        shape: "circle",
+        color: "primary",
         size: "small",
         onClick: function onClick() {
           return _this2.handleModalOpen();
-        }
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPlusLine, {
+        },
+        screenReaderLabel: "",
+        css: this.props.styles.addOutcomeButton
+      }, (0, _emotion.jsx)(_uiIcons.IconPlusLine, {
         title: "Alinea els resultats nous"
       })));
     }
@@ -249,10 +246,10 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           displayMasteryPercentText = _this$props2.displayMasteryPercentText,
           readOnly = _this$props2.readOnly,
           scope = _this$props2.scope;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
-        className: styles.list
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("ul", {
+        css: this.props.styles.list
       }, alignedOutcomes.map(function (outcome, index) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
+        return (0, _emotion.jsx)(_index.default, {
           key: outcome.id,
           ref: function ref(o) {
             _this3["position".concat(index)] = o;
@@ -271,7 +268,8 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           displayMasteryDescription: displayMasteryDescription,
           displayMasteryPercentText: displayMasteryPercentText,
           readOnly: readOnly,
-          scope: scope
+          scope: scope,
+          index: index
         });
       }), !readOnly && this.renderAddOutcomeButton()));
     }
@@ -280,9 +278,9 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function renderEmpty() {
       var _this4 = this;
 
-      return !this.props.readOnly && /*#__PURE__*/_react.default.createElement(_uiBillboard.Billboard, {
-        ref: function ref(d) {
-          _this4.triggerRoot = d;
+      return !this.props.readOnly && (0, _emotion.jsx)(_uiBillboard.Billboard, {
+        elementRef: function elementRef(d) {
+          return _this4.triggerRoot = d;
         } // eslint-disable-line immutable/no-mutation
         ,
         heading: this.props.emptySetHeading,
@@ -290,7 +288,7 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         headingAs: "h3",
         headingLevel: "h3",
         size: "small",
-        hero: /*#__PURE__*/_react.default.createElement(Clipboard, null),
+        hero: (0, _emotion.jsx)(Clipboard, null),
         type: "button",
         onClick: this.handleModalOpen
       });
@@ -322,7 +320,7 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           screenreaderNotification = _this$props3.screenreaderNotification,
           liveRegion = _this$props3.liveRegion,
           mountNode = _this$props3.mountNode;
-      return /*#__PURE__*/_react.default.createElement(OutcomePickerModal, Object.assign({
+      return (0, _emotion.jsx)(OutcomePickerModal, Object.assign({
         onModalClose: onModalClose,
         onModalOpen: onModalOpen,
         onUpdate: onUpdate,
@@ -346,7 +344,9 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, this.renderBody(), this.renderModal());
+      return (0, _emotion.jsx)("div", {
+        "data-testid": "alignment-list"
+      }, this.renderBody(), this.renderModal());
     }
   }]);
   AlignmentList.displayName = "AlignmentList";
@@ -376,7 +376,8 @@ var AlignmentList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   displayMasteryPercentText: _propTypes.default.bool,
   screenreaderNotification: _propTypes.default.func,
   liveRegion: _index2.default.propTypes.liveRegion,
-  mountNode: _index2.default.propTypes.mountNode
+  mountNode: _index2.default.propTypes.mountNode,
+  styles: _shapes.stylesShape
 }, _class2.defaultProps = {
   pickerType: 'dialog',
   pickerProps: {},

package/lib/translated/ca/components/AlignmentList/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle() {
+  return {
+    header: {
+      backgroundColor: '#BBBBBB',
+      border: 'solid 1px #999999',
+      borderRadius: '5px',
+      padding: '10px 20px'
+    },
+    list: {
+      listStyle: 'none',
+      paddingLeft: '0',
+      border: 'solid 1px #BBBBBB',
+      borderRadius: '10px'
+    },
+    addOutcome: {
+      textAlign: 'center',
+      padding: '0.5rem',
+      borderTop: 'dashed 1px #BBBBBB'
+    },
+    addOutcomeButton: {
+      padding: '0'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/translated/ca/components/AlignmentWidget/__tests__/index.test.js

@@ -2,6 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _chai = require("chai");
 
 var _react = _interopRequireDefault(require("react"));
@@ -16,6 +20,12 @@ var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
 var _mockOutcomesData = require("../../../test/mockOutcomesData.js");
 
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _index2 = _interopRequireDefault(require("../../AlignmentItem/index.js"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
 describe('AlignmentWidget', function () {
   function makeProps() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
@@ -36,19 +46,20 @@ describe('AlignmentWidget', function () {
   }
 
   it('renders a button with a11y 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
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(1);
-    (0, _chai.expect)(wrapper.find('AccessibleContent')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiButtons.Button)).to.have.length(1);
+    var matchingElement = wrapper.find('AccessibleContent[data-automation="alignmentWidget__AccessibleContent"]');
+    (0, _chai.expect)(matchingElement).to.have.length(1);
   });
   it('does not render an alignment button if canManageOutcomes is false', 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({
       canManageOutcomes: false
     })), {
       disableLifecycleMethods: true
     });
-    (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(0);
+    (0, _chai.expect)(wrapper.find(_uiButtons.Button)).to.have.length(0);
   });
   it('does not render header if canManageOutcomes is false and no outcomes are aligned', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
@@ -62,12 +73,13 @@ describe('AlignmentWidget', function () {
     (0, _chai.expect)(wrapper.find('AlignmentCount')).to.have.length(0);
   });
   it('disables the expansion toggle button if no outcomes are aligned', 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({
       alignedOutcomes: []
     })), {
       disableLifecycleMethods: true
-    });
-    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').props('style');
+    }); // Enzyme finds two IconButton components because of the instui decorator on the component
+
+    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').at(0).props('style');
     (0, _chai.expect)(buttonStyle.interaction).to.equal('disabled');
   });
   it('renders the alignment list collapsed by default', function () {
@@ -76,31 +88,43 @@ describe('AlignmentWidget', function () {
   });
   it('expansion toggle click is correctly handled', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
+    wrapper.find(_uiButtons.IconButton).simulate('click');
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(3);
     (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Collapse the list of aligned Outcomes');
-    (0, _chai.expect)(wrapper.find('IconArrowOpenDownLine')).to.have.length(1);
-  });
-  it('collapse toggle button click is correctly handled', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
-    wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(0);
-    (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Expand the list of aligned Outcomes');
-    (0, _chai.expect)(wrapper.find('IconArrowOpenEndLine')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find(_uiIcons.IconArrowOpenDownLine)).to.have.length(1);
   });
+  it('collapse toggle button click is correctly handled', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var wrapper;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
+            wrapper.find("IconButton[data-automation='alignmentWidget__collapseButton']").last().simulate('click');
+            wrapper.find("IconButton[data-automation='alignmentWidget__collapseButton']").last().simulate('click');
+            (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(0);
+            (0, _chai.expect)(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Expand the list of aligned Outcomes');
+            (0, _chai.expect)(wrapper.find(_uiIcons.IconArrowOpenEndLine)).to.have.length(1);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
   it('calls openOutcomePicker when the button is pressed', 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
     });
-    wrapper.find('Button[data-automation="alignmentWidget__button"]').simulate('click');
+    wrapper.find(_uiButtons.Button).simulate('click');
     (0, _chai.expect)(props.openOutcomePicker.calledOnce).to.be.true;
   });
   it('renders AlignmentItems for each aligned outcome', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
-    (0, _chai.expect)(wrapper.find('AlignmentItem')).to.have.length(3);
+    wrapper.find(_uiButtons.IconButton).simulate('click');
+    (0, _chai.expect)(wrapper.find(_index2.default)).to.have.length(3);
   });
   it('renders an AlignmentCount object', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
@@ -113,8 +137,8 @@ describe('AlignmentWidget', function () {
     it('calls the removeAlignment action with shouldUpdateArtifact equal to true', function () {
       var props = makeProps();
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, props));
-      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
-      var first = wrapper.find('AlignmentItem').at(0);
+      wrapper.find(_uiButtons.IconButton).simulate('click');
+      var first = wrapper.find(_index2.default).at(0);
       var remove = first.prop('removeAlignment');
       var outcome = first.prop('outcome');
       remove();
@@ -122,19 +146,21 @@ describe('AlignmentWidget', function () {
     });
     it('focuses on the previous alignment when the second alignment deleted', function () {
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
+      wrapper.find(_uiButtons.IconButton).simulate('click');
       var next = wrapper.find('AlignmentItem').at(1);
       var remove = next.prop('removeAlignment');
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(0);
+      wrapper.update();
+      (0, _chai.expect)(wrapper.find('AlignmentItem').at(0).prop('shouldFocus')).to.be.true;
     });
     it('focuses on the next alignment when first alignment deleted', function () {
       var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').simulate('click');
+      wrapper.find('IconButton[data-automation="alignmentWidget__collapseButton"]').at(0).simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
       var remove = first.prop('removeAlignment');
       remove();
-      (0, _chai.expect)(wrapper.state().focusedItem).to.eq(1);
+      wrapper.update();
+      (0, _chai.expect)(wrapper.find('AlignmentItem').at(1).prop('shouldFocus')).to.be.true;
     });
   });
   describe('componentDidUpdate', function () {
@@ -154,7 +180,8 @@ describe('AlignmentWidget', function () {
       wrapper.setProps({
         alignedOutcomes: []
       }, function () {
-        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(1);
+        // Enzyme finds two Button components because of the instui decorator on the component
+        (0, _chai.expect)(wrapper.find('Button[data-automation="alignmentWidget__button"]')).to.have.length(2);
         (0, _chai.expect)(focus.calledOnce).to.be.true;
         (0, _chai.expect)(focus.calledWith()).to.be.true;
         done();