newspack-components 4.10.0 → 4.11.0

package/dist/esm/reorder-modal/index.test.js

@@ -0,0 +1,1224 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * External dependencies
+ */
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import ReorderModal, { findOverlay, moveItem } from '.';
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('@wordpress/a11y', function () {
+  return {
+    speak: jest.fn()
+  };
+});
+beforeEach(function () {
+  speak.mockClear();
+});
+describe('moveItem', function () {
+  it('moves an item down', function () {
+    expect(moveItem(['a', 'b', 'c'], 0, 2)).toEqual(['b', 'c', 'a']);
+  });
+  it('moves an item up', function () {
+    expect(moveItem(['a', 'b', 'c'], 2, 0)).toEqual(['c', 'a', 'b']);
+  });
+  it('returns the original array when the indices match', function () {
+    var items = ['a', 'b'];
+    expect(moveItem(items, 1, 1)).toBe(items);
+  });
+  it('returns the original array when an index is out of range', function () {
+    var items = ['a', 'b'];
+    expect(moveItem(items, 0, 5)).toBe(items);
+    expect(moveItem(items, -1, 0)).toBe(items);
+  });
+});
+var ITEMS = [{
+  value: 11,
+  label: 'Alpha'
+}, {
+  value: 22,
+  label: 'Beta'
+}, {
+  value: 33,
+  label: 'Gamma'
+}];
+var renderModal = function renderModal() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var onSave = jest.fn();
+  var onClose = jest.fn();
+  render(/*#__PURE__*/_jsx(ReorderModal, _objectSpread({
+    title: "Reorder Content",
+    ids: [11, 22, 33],
+    fetchItems: function fetchItems() {
+      return Promise.resolve(ITEMS);
+    },
+    onSave: onSave,
+    onClose: onClose
+  }, props)));
+  return {
+    onSave: onSave,
+    onClose: onClose
+  };
+};
+var titles = function titles() {
+  return Array.from(document.querySelectorAll('.newspack-reorder-modal__title')).map(function (el) {
+    return el.textContent;
+  });
+};
+var overlay = function overlay() {
+  return document.querySelector('.components-modal__screen-overlay');
+};
+var discardPrompt = function discardPrompt() {
+  return screen.queryByRole('dialog', {
+    name: 'Discard the new order?'
+  });
+};
+
+// jsdom has no `PointerEvent`, and `fireEvent.pointerDown` would fall back to a
+// plain `Event` and drop `button`.
+var press = function press(from, to) {
+  var button = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  fireEvent(from, new MouseEvent('pointerdown', {
+    bubbles: true,
+    button: button
+  }));
+  fireEvent(to, new MouseEvent('pointerup', {
+    bubbles: true,
+    button: button
+  }));
+};
+describe('ReorderModal', function () {
+  it('lists the items in the order the IDs were given', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          renderModal();
+          _t = expect;
+          _context.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          _t(_context.v).toBeInTheDocument();
+          expect(titles()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  })));
+  it('falls back to (no title) for IDs the fetch does not resolve', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
+        case 0:
+          renderModal({
+            ids: [11, 99],
+            fetchItems: function fetchItems() {
+              return Promise.resolve([ITEMS[0]]);
+            }
+          });
+          _t2 = expect;
+          _context2.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          _t2(_context2.v).toBeInTheDocument();
+          expect(titles()).toEqual(['Alpha', '(no title)']);
+        case 2:
+          return _context2.a(2);
+      }
+    }, _callee2);
+  })));
+  it('moves an item up with the chevron', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var _t3;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          renderModal();
+          _t3 = fireEvent;
+          _context3.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t3.click.call(_t3, _context3.v);
+          expect(titles()).toEqual(['Alpha', 'Gamma', 'Beta']);
+        case 2:
+          return _context3.a(2);
+      }
+    }, _callee3);
+  })));
+  it('moves an item down with the chevron', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var _t4;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.n) {
+        case 0:
+          renderModal();
+          _t4 = fireEvent;
+          _context4.n = 1;
+          return screen.findByLabelText('Move Down: Alpha');
+        case 1:
+          _t4.click.call(_t4, _context4.v);
+          expect(titles()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        case 2:
+          return _context4.a(2);
+      }
+    }, _callee4);
+  })));
+  it('disables the chevrons at the ends of the list', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var _t5;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          renderModal();
+          _t5 = expect;
+          _context5.n = 1;
+          return screen.findByLabelText('Move Up: Alpha');
+        case 1:
+          _t5(_context5.v).toHaveAttribute('aria-disabled', 'true');
+          expect(screen.getByLabelText('Move Down: Gamma')).toHaveAttribute('aria-disabled', 'true');
+          expect(screen.getByLabelText('Move Down: Alpha')).not.toHaveAttribute('aria-disabled');
+        case 2:
+          return _context5.a(2);
+      }
+    }, _callee5);
+  })));
+  it('keeps a disabled chevron focusable but inert', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+    var chevron;
+    return _regenerator().w(function (_context6) {
+      while (1) switch (_context6.n) {
+        case 0:
+          renderModal();
+          _context6.n = 1;
+          return screen.findByLabelText('Move Up: Alpha');
+        case 1:
+          chevron = _context6.v;
+          chevron.focus();
+          expect(document.activeElement).toBe(chevron);
+          fireEvent.click(chevron);
+          expect(titles()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        case 2:
+          return _context6.a(2);
+      }
+    }, _callee6);
+  })));
+  it('keeps the disabled Save button focusable but inert', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+    var _renderModal, onSave, save;
+    return _regenerator().w(function (_context7) {
+      while (1) switch (_context7.n) {
+        case 0:
+          _renderModal = renderModal(), onSave = _renderModal.onSave;
+          _context7.n = 1;
+          return screen.findByRole('button', {
+            name: 'Save'
+          });
+        case 1:
+          save = _context7.v;
+          save.focus();
+          expect(document.activeElement).toBe(save);
+          fireEvent.click(save);
+          expect(onSave).not.toHaveBeenCalled();
+        case 2:
+          return _context7.a(2);
+      }
+    }, _callee7);
+  })));
+  it('keeps the item title in the accessible name and out of the tooltip', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+    var chevron, tooltip;
+    return _regenerator().w(function (_context8) {
+      while (1) switch (_context8.n) {
+        case 0:
+          renderModal();
+          _context8.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          chevron = _context8.v;
+          expect(screen.queryAllByLabelText('Move Up')).toHaveLength(0);
+          chevron.focus();
+          _context8.n = 2;
+          return screen.findByRole('tooltip');
+        case 2:
+          tooltip = _context8.v;
+          expect(tooltip).toHaveTextContent('Move Up');
+          expect(tooltip).not.toHaveTextContent('Gamma');
+        case 3:
+          return _context8.a(2);
+      }
+    }, _callee8);
+  })));
+  it('starts the accessible name with the visible label', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+    var chevron;
+    return _regenerator().w(function (_context9) {
+      while (1) switch (_context9.n) {
+        case 0:
+          renderModal();
+          _context9.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          chevron = _context9.v;
+          expect(chevron.getAttribute('aria-label')).toContain('Move Up');
+          expect(screen.getByLabelText('Move Down: Alpha').getAttribute('aria-label')).toContain('Move Down');
+        case 2:
+          return _context9.a(2);
+      }
+    }, _callee9);
+  })));
+  it('keeps focus on the pressed chevron while it stays enabled', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+    var _t6;
+    return _regenerator().w(function (_context0) {
+      while (1) switch (_context0.n) {
+        case 0:
+          renderModal();
+          _t6 = fireEvent;
+          _context0.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t6.click.call(_t6, _context0.v);
+          expect(document.activeElement).toBe(screen.getByLabelText('Move Up: Gamma'));
+        case 2:
+          return _context0.a(2);
+      }
+    }, _callee0);
+  })));
+  it('moves focus to the other chevron when the pressed one disables', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+    var _t7;
+    return _regenerator().w(function (_context1) {
+      while (1) switch (_context1.n) {
+        case 0:
+          renderModal();
+          _t7 = fireEvent;
+          _context1.n = 1;
+          return screen.findByLabelText('Move Up: Beta');
+        case 1:
+          _t7.click.call(_t7, _context1.v);
+          expect(screen.getByLabelText('Move Up: Beta')).toHaveAttribute('aria-disabled', 'true');
+          expect(document.activeElement).toBe(screen.getByLabelText('Move Down: Beta'));
+        case 2:
+          return _context1.a(2);
+      }
+    }, _callee1);
+  })));
+  it('names the loading state and announces the list once it arrives', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
+    return _regenerator().w(function (_context10) {
+      while (1) switch (_context10.n) {
+        case 0:
+          renderModal();
+          expect(screen.getByText('Loading content…')).toBeInTheDocument();
+          _context10.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          expect(screen.queryByText('Loading content…')).not.toBeInTheDocument();
+          expect(speak).toHaveBeenCalledWith('3 items ready to reorder.');
+        case 2:
+          return _context10.a(2);
+      }
+    }, _callee10);
+  })));
+  it('names the row it moved, not just the position', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11() {
+    var _t8;
+    return _regenerator().w(function (_context11) {
+      while (1) switch (_context11.n) {
+        case 0:
+          renderModal();
+          _t8 = fireEvent;
+          _context11.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t8.click.call(_t8, _context11.v);
+          expect(speak).toHaveBeenCalledWith('Gamma moved to position 2 of 3.');
+        case 2:
+          return _context11.a(2);
+      }
+    }, _callee11);
+  })));
+  it('saves the reordered IDs', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12() {
+    var _renderModal2, onSave, _t9;
+    return _regenerator().w(function (_context12) {
+      while (1) switch (_context12.n) {
+        case 0:
+          _renderModal2 = renderModal(), onSave = _renderModal2.onSave;
+          _t9 = fireEvent;
+          _context12.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t9.click.call(_t9, _context12.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Save'
+          }));
+          expect(onSave).toHaveBeenCalledWith([11, 33, 22]);
+        case 2:
+          return _context12.a(2);
+      }
+    }, _callee12);
+  })));
+  it('discards the new order once the discard is confirmed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee13() {
+    var _renderModal3, onSave, onClose, _t0;
+    return _regenerator().w(function (_context13) {
+      while (1) switch (_context13.n) {
+        case 0:
+          _renderModal3 = renderModal(), onSave = _renderModal3.onSave, onClose = _renderModal3.onClose;
+          _t0 = fireEvent;
+          _context13.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t0.click.call(_t0, _context13.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Cancel'
+          }));
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Discard'
+          }));
+          expect(onSave).not.toHaveBeenCalled();
+          expect(onClose).toHaveBeenCalled();
+        case 2:
+          return _context13.a(2);
+      }
+    }, _callee13);
+  })));
+  it('disables saving until the order changes', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee14() {
+    var _t1;
+    return _regenerator().w(function (_context14) {
+      while (1) switch (_context14.n) {
+        case 0:
+          renderModal();
+          _t1 = expect;
+          _context14.n = 1;
+          return screen.findByRole('button', {
+            name: 'Save'
+          });
+        case 1:
+          _t1(_context14.v).toHaveAttribute('aria-disabled', 'true');
+          fireEvent.click(screen.getByLabelText('Move Up: Gamma'));
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).not.toHaveAttribute('aria-disabled');
+        case 2:
+          return _context14.a(2);
+      }
+    }, _callee14);
+  })));
+  it('disables saving again when the order is moved back', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee15() {
+    var _t10;
+    return _regenerator().w(function (_context15) {
+      while (1) switch (_context15.n) {
+        case 0:
+          renderModal();
+          _t10 = fireEvent;
+          _context15.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t10.click.call(_t10, _context15.v);
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).not.toHaveAttribute('aria-disabled');
+          fireEvent.click(screen.getByLabelText('Move Down: Gamma'));
+          expect(titles()).toEqual(['Alpha', 'Beta', 'Gamma']);
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).toHaveAttribute('aria-disabled', 'true');
+        case 2:
+          return _context15.a(2);
+      }
+    }, _callee15);
+  })));
+  it('closes without confirming when nothing was reordered', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee16() {
+    var _renderModal4, onClose, _t11;
+    return _regenerator().w(function (_context16) {
+      while (1) switch (_context16.n) {
+        case 0:
+          _renderModal4 = renderModal(), onClose = _renderModal4.onClose;
+          _t11 = fireEvent;
+          _context16.n = 1;
+          return screen.findByRole('button', {
+            name: 'Cancel'
+          });
+        case 1:
+          _t11.click.call(_t11, _context16.v);
+          expect(onClose).toHaveBeenCalled();
+          expect(discardPrompt()).not.toBeInTheDocument();
+        case 2:
+          return _context16.a(2);
+      }
+    }, _callee16);
+  })));
+  it('asks before discarding and holds the modal open until answered', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee17() {
+    var _renderModal5, onSave, onClose, _t12;
+    return _regenerator().w(function (_context17) {
+      while (1) switch (_context17.n) {
+        case 0:
+          _renderModal5 = renderModal(), onSave = _renderModal5.onSave, onClose = _renderModal5.onClose;
+          _t12 = fireEvent;
+          _context17.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t12.click.call(_t12, _context17.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Cancel'
+          }));
+          expect(discardPrompt()).toBeInTheDocument();
+          expect(onClose).not.toHaveBeenCalled();
+          expect(onSave).not.toHaveBeenCalled();
+        case 2:
+          return _context17.a(2);
+      }
+    }, _callee17);
+  })));
+
+  // The modal takes Escape over from `Modal`, whose own handler defers the close
+  // request behind an exit animation, so the confirmation is up synchronously.
+  it('asks before discarding when Escape dismisses the modal', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee18() {
+    var _renderModal6, onClose, _t13;
+    return _regenerator().w(function (_context18) {
+      while (1) switch (_context18.n) {
+        case 0:
+          _renderModal6 = renderModal(), onClose = _renderModal6.onClose;
+          _t13 = fireEvent;
+          _context18.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t13.click.call(_t13, _context18.v);
+          fireEvent.keyDown(document.activeElement, {
+            key: 'Escape'
+          });
+          expect(discardPrompt()).toBeInTheDocument();
+          expect(onClose).not.toHaveBeenCalled();
+        case 2:
+          return _context18.a(2);
+      }
+    }, _callee18);
+  })));
+  it('closes on Escape without confirming when nothing was reordered', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee19() {
+    var _renderModal7, onClose;
+    return _regenerator().w(function (_context19) {
+      while (1) switch (_context19.n) {
+        case 0:
+          _renderModal7 = renderModal(), onClose = _renderModal7.onClose;
+          _context19.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          fireEvent.keyDown(screen.getByRole('dialog'), {
+            key: 'Escape'
+          });
+          expect(onClose).toHaveBeenCalled();
+          expect(discardPrompt()).not.toBeInTheDocument();
+        case 2:
+          return _context19.a(2);
+      }
+    }, _callee19);
+  })));
+  it('asks before discarding when the header close button dismisses the modal', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee20() {
+    var _renderModal8, onClose, _t14;
+    return _regenerator().w(function (_context20) {
+      while (1) switch (_context20.n) {
+        case 0:
+          _renderModal8 = renderModal(), onClose = _renderModal8.onClose;
+          _t14 = fireEvent;
+          _context20.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t14.click.call(_t14, _context20.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Close'
+          }));
+          expect(discardPrompt()).toBeInTheDocument();
+          expect(onClose).not.toHaveBeenCalled();
+        case 2:
+          return _context20.a(2);
+      }
+    }, _callee20);
+  })));
+  it('closes when a press starts and ends on the overlay', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee21() {
+    var _renderModal9, onClose;
+    return _regenerator().w(function (_context21) {
+      while (1) switch (_context21.n) {
+        case 0:
+          _renderModal9 = renderModal(), onClose = _renderModal9.onClose;
+          _context21.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          press(overlay(), overlay());
+          expect(onClose).toHaveBeenCalled();
+        case 2:
+          return _context21.a(2);
+      }
+    }, _callee21);
+  })));
+  it('asks before discarding when an overlay press dismisses a reordered list', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee22() {
+    var _renderModal0, onClose, _t15;
+    return _regenerator().w(function (_context22) {
+      while (1) switch (_context22.n) {
+        case 0:
+          _renderModal0 = renderModal(), onClose = _renderModal0.onClose;
+          _t15 = fireEvent;
+          _context22.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t15.click.call(_t15, _context22.v);
+          press(overlay(), overlay());
+          expect(discardPrompt()).toBeInTheDocument();
+          expect(onClose).not.toHaveBeenCalled();
+        case 2:
+          return _context22.a(2);
+      }
+    }, _callee22);
+  })));
+  it('ignores a press that starts on a row and ends on the overlay', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee23() {
+    var _renderModal1, onClose;
+    return _regenerator().w(function (_context23) {
+      while (1) switch (_context23.n) {
+        case 0:
+          _renderModal1 = renderModal(), onClose = _renderModal1.onClose;
+          _context23.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          press(document.querySelector('.newspack-reorder-modal__item'), overlay());
+          expect(onClose).not.toHaveBeenCalled();
+          expect(discardPrompt()).not.toBeInTheDocument();
+        case 2:
+          return _context23.a(2);
+      }
+    }, _callee23);
+  })));
+  it('ignores a secondary-button press on the overlay', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee24() {
+    var _renderModal10, onClose;
+    return _regenerator().w(function (_context24) {
+      while (1) switch (_context24.n) {
+        case 0:
+          _renderModal10 = renderModal(), onClose = _renderModal10.onClose;
+          _context24.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          press(overlay(), overlay(), 2);
+          expect(onClose).not.toHaveBeenCalled();
+        case 2:
+          return _context24.a(2);
+      }
+    }, _callee24);
+  })));
+
+  // `ConfirmDialog` announces `contentLabel` as the dialog's name and hides its
+  // header, so repeating it in the body would have it read out twice.
+  it('states the consequence in the discard prompt rather than repeating its name', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee25() {
+    var _t16;
+    return _regenerator().w(function (_context25) {
+      while (1) switch (_context25.n) {
+        case 0:
+          renderModal();
+          _t16 = fireEvent;
+          _context25.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t16.click.call(_t16, _context25.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Cancel'
+          }));
+          expect(discardPrompt()).toHaveTextContent('The order you set will be lost.');
+          expect(discardPrompt()).not.toHaveTextContent('Discard the new order?');
+        case 2:
+          return _context25.a(2);
+      }
+    }, _callee25);
+  })));
+  it('keeps the reordered list when the discard is dismissed', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee26() {
+    var _renderModal11, onSave, onClose, _t17;
+    return _regenerator().w(function (_context26) {
+      while (1) switch (_context26.n) {
+        case 0:
+          _renderModal11 = renderModal(), onSave = _renderModal11.onSave, onClose = _renderModal11.onClose;
+          _t17 = fireEvent;
+          _context26.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          _t17.click.call(_t17, _context26.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Cancel'
+          }));
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Keep editing'
+          }));
+          expect(discardPrompt()).not.toBeInTheDocument();
+          expect(titles()).toEqual(['Alpha', 'Gamma', 'Beta']);
+          expect(onClose).not.toHaveBeenCalled();
+          expect(onSave).not.toHaveBeenCalled();
+        case 2:
+          return _context26.a(2);
+      }
+    }, _callee26);
+  })));
+  it('exposes the rows as a list', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee27() {
+    return _regenerator().w(function (_context27) {
+      while (1) switch (_context27.n) {
+        case 0:
+          renderModal();
+          _context27.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          expect(screen.getByRole('list')).toBeInTheDocument();
+          expect(screen.getAllByRole('listitem')).toHaveLength(3);
+        case 2:
+          return _context27.a(2);
+      }
+    }, _callee27);
+  })));
+  it('carries the full title on a row whose text is clipped', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee28() {
+    return _regenerator().w(function (_context28) {
+      while (1) switch (_context28.n) {
+        case 0:
+          renderModal();
+          _context28.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          expect(document.querySelector('.newspack-reorder-modal__title')).toHaveAttribute('title', 'Alpha');
+        case 2:
+          return _context28.a(2);
+      }
+    }, _callee28);
+  })));
+});
+
+// jsdom ships no `DataTransfer`, so the drag payload is stubbed.
+var dataTransfer = function dataTransfer() {
+  return {
+    data: {},
+    dropEffect: 'none',
+    effectAllowed: 'none',
+    setData: function setData(type, value) {
+      this.data[type] = value;
+    },
+    getData: function getData(type) {
+      return this.data[type];
+    }
+  };
+};
+var rows = function rows() {
+  return Array.from(document.querySelectorAll('.newspack-reorder-modal__item'));
+};
+describe('ReorderModal toggles and badges', function () {
+  it('has no toggles unless enabled IDs are given', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee29() {
+    return _regenerator().w(function (_context29) {
+      while (1) switch (_context29.n) {
+        case 0:
+          renderModal();
+          _context29.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+        case 2:
+          return _context29.a(2);
+      }
+    }, _callee29);
+  })));
+  it('saves the order and the enabled IDs in that order', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee30() {
+    var _renderModal12, onSave, _t18;
+    return _regenerator().w(function (_context30) {
+      while (1) switch (_context30.n) {
+        case 0:
+          _renderModal12 = renderModal({
+            enabledIds: [11, 33]
+          }), onSave = _renderModal12.onSave;
+          _t18 = fireEvent;
+          _context30.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Beta'
+          });
+        case 1:
+          _t18.click.call(_t18, _context30.v);
+          fireEvent.click(screen.getByRole('checkbox', {
+            name: 'Alpha'
+          }));
+          fireEvent.click(screen.getByLabelText('Move Up: Gamma'));
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Save'
+          }));
+          expect(onSave).toHaveBeenCalledWith([11, 33, 22], [33, 22]);
+        case 2:
+          return _context30.a(2);
+      }
+    }, _callee30);
+  })));
+  it('treats a toggle change as unsaved', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee31() {
+    var _t19;
+    return _regenerator().w(function (_context31) {
+      while (1) switch (_context31.n) {
+        case 0:
+          renderModal({
+            enabledIds: [11]
+          });
+          _t19 = fireEvent;
+          _context31.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Beta'
+          });
+        case 1:
+          _t19.click.call(_t19, _context31.v);
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).not.toHaveAttribute('aria-disabled');
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Cancel'
+          }));
+          expect(screen.getByRole('dialog', {
+            name: 'Discard the changes?'
+          })).toBeInTheDocument();
+        case 2:
+          return _context31.a(2);
+      }
+    }, _callee31);
+  })));
+  it('disables saving again when a toggle is set back', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee32() {
+    var toggle;
+    return _regenerator().w(function (_context32) {
+      while (1) switch (_context32.n) {
+        case 0:
+          renderModal({
+            enabledIds: [11]
+          });
+          _context32.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Beta'
+          });
+        case 1:
+          toggle = _context32.v;
+          fireEvent.click(toggle);
+          fireEvent.click(toggle);
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).toHaveAttribute('aria-disabled', 'true');
+        case 2:
+          return _context32.a(2);
+      }
+    }, _callee32);
+  })));
+  var withBadge = function withBadge() {
+    return Promise.resolve([ITEMS[0], _objectSpread(_objectSpread({}, ITEMS[1]), {}, {
+      badge: {
+        label: 'Premium',
+        tooltip: 'Gated by Members'
+      }
+    }), ITEMS[2]]);
+  };
+  it('shows the badge an item carries', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee33() {
+    var badges;
+    return _regenerator().w(function (_context33) {
+      while (1) switch (_context33.n) {
+        case 0:
+          renderModal({
+            fetchItems: withBadge
+          });
+          _context33.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          badges = document.querySelectorAll('.newspack-reorder-modal__badge');
+          expect(badges).toHaveLength(1);
+          expect(badges[0].closest('[data-item-id]')).toHaveAttribute('data-item-id', '22');
+        case 2:
+          return _context33.a(2);
+      }
+    }, _callee33);
+  })));
+  it('describes the toggle with the badge and its tooltip', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee34() {
+    var _t20;
+    return _regenerator().w(function (_context34) {
+      while (1) switch (_context34.n) {
+        case 0:
+          renderModal({
+            fetchItems: withBadge,
+            enabledIds: [11]
+          });
+          _t20 = expect;
+          _context34.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Beta'
+          });
+        case 1:
+          _t20(_context34.v).toHaveAccessibleDescription('Premium: Gated by Members');
+          expect(screen.getByRole('checkbox', {
+            name: 'Alpha'
+          })).not.toHaveAttribute('aria-describedby');
+        case 2:
+          return _context34.a(2);
+      }
+    }, _callee34);
+  })));
+  it('describes the dialog with the description', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee35() {
+    return _regenerator().w(function (_context35) {
+      while (1) switch (_context35.n) {
+        case 0:
+          renderModal({
+            description: 'Turn on the items to include.'
+          });
+          _context35.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          expect(screen.getByRole('dialog', {
+            name: 'Reorder Content'
+          })).toHaveAccessibleDescription('Turn on the items to include.');
+        case 2:
+          return _context35.a(2);
+      }
+    }, _callee35);
+  })));
+  it('holds Save while every toggle is off', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee36() {
+    var _t21;
+    return _regenerator().w(function (_context36) {
+      while (1) switch (_context36.n) {
+        case 0:
+          renderModal({
+            enabledIds: [11]
+          });
+          _t21 = fireEvent;
+          _context36.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Alpha'
+          });
+        case 1:
+          _t21.click.call(_t21, _context36.v);
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).toHaveAttribute('aria-disabled', 'true');
+          expect(screen.getByRole('button', {
+            name: 'Save'
+          })).toHaveAccessibleDescription('Turn on at least one item to save.');
+        case 2:
+          return _context36.a(2);
+      }
+    }, _callee36);
+  })));
+  it('keeps enabled IDs that have no row', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee37() {
+    var _renderModal13, onSave, _t22;
+    return _regenerator().w(function (_context37) {
+      while (1) switch (_context37.n) {
+        case 0:
+          _renderModal13 = renderModal({
+            enabledIds: [99, 11]
+          }), onSave = _renderModal13.onSave;
+          _t22 = fireEvent;
+          _context37.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Alpha'
+          });
+        case 1:
+          _t22.click.call(_t22, _context37.v);
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Save'
+          }));
+          expect(onSave).toHaveBeenCalledWith([11, 22, 33], [99]);
+        case 2:
+          return _context37.a(2);
+      }
+    }, _callee37);
+  })));
+  it('does not start a drag that began on a toggle', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee38() {
+    var toggle, dt;
+    return _regenerator().w(function (_context38) {
+      while (1) switch (_context38.n) {
+        case 0:
+          renderModal({
+            enabledIds: [11]
+          });
+          _context38.n = 1;
+          return screen.findByRole('checkbox', {
+            name: 'Gamma'
+          });
+        case 1:
+          toggle = _context38.v;
+          fireEvent(toggle, new MouseEvent('pointerdown', {
+            bubbles: true
+          }));
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[2], {
+            dataTransfer: dt
+          });
+          expect(dt.getData('text/plain')).toBeUndefined();
+        case 2:
+          return _context38.a(2);
+      }
+    }, _callee38);
+  })));
+});
+describe('ReorderModal drag and drop', function () {
+  it('reorders as a row is dragged over another', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee39() {
+    var dt;
+    return _regenerator().w(function (_context39) {
+      while (1) switch (_context39.n) {
+        case 0:
+          renderModal();
+          _context39.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[2], {
+            dataTransfer: dt
+          });
+          expect(dt.getData('text/plain')).toBe('33');
+          fireEvent.dragOver(rows()[0], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Gamma', 'Alpha', 'Beta']);
+        case 2:
+          return _context39.a(2);
+      }
+    }, _callee39);
+  })));
+  it('keeps the new order when the drag is dropped', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee40() {
+    var dt;
+    return _regenerator().w(function (_context40) {
+      while (1) switch (_context40.n) {
+        case 0:
+          renderModal();
+          _context40.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[2], {
+            dataTransfer: dt
+          });
+          fireEvent.dragOver(rows()[0], {
+            dataTransfer: dt
+          });
+          dt.dropEffect = 'move';
+          fireEvent.dragEnd(rows()[0], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Gamma', 'Alpha', 'Beta']);
+        case 2:
+          return _context40.a(2);
+      }
+    }, _callee40);
+  })));
+  it('puts the order back when the drag is cancelled', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee41() {
+    var dt;
+    return _regenerator().w(function (_context41) {
+      while (1) switch (_context41.n) {
+        case 0:
+          renderModal();
+          _context41.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[2], {
+            dataTransfer: dt
+          });
+          fireEvent.dragOver(rows()[0], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Gamma', 'Alpha', 'Beta']);
+          dt.dropEffect = 'none';
+          fireEvent.dragEnd(rows()[0], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        case 2:
+          return _context41.a(2);
+      }
+    }, _callee41);
+  })));
+  it('reorders as a row is dragged down past the rows below it', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee42() {
+    var dt;
+    return _regenerator().w(function (_context42) {
+      while (1) switch (_context42.n) {
+        case 0:
+          renderModal();
+          _context42.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[0], {
+            dataTransfer: dt
+          });
+          fireEvent.dragOver(rows()[1], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Beta', 'Alpha', 'Gamma']);
+
+          // The dragged row now sits under the cursor, so the next `dragover` reaches
+          // it rather than the row it swapped with: it has to leave the order alone.
+          fireEvent.dragOver(rows()[1], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Beta', 'Alpha', 'Gamma']);
+          fireEvent.dragOver(rows()[2], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Beta', 'Gamma', 'Alpha']);
+        case 2:
+          return _context42.a(2);
+      }
+    }, _callee42);
+  })));
+
+  // `dragstart` fires at the draggable row even when the gesture began on a
+  // chevron inside it, so the guard keys off where the pointer went down.
+  it('does not start a drag that began on a chevron', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee43() {
+    var chevron, dt;
+    return _regenerator().w(function (_context43) {
+      while (1) switch (_context43.n) {
+        case 0:
+          renderModal();
+          _context43.n = 1;
+          return screen.findByLabelText('Move Up: Gamma');
+        case 1:
+          chevron = _context43.v;
+          fireEvent(chevron, new MouseEvent('pointerdown', {
+            bubbles: true
+          }));
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[2], {
+            dataTransfer: dt
+          });
+          expect(dt.getData('text/plain')).toBeUndefined();
+          fireEvent.dragOver(rows()[0], {
+            dataTransfer: dt
+          });
+          expect(titles()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        case 2:
+          return _context43.a(2);
+      }
+    }, _callee43);
+  })));
+  it('starts a drag that began on the row itself', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee44() {
+    var dt;
+    return _regenerator().w(function (_context44) {
+      while (1) switch (_context44.n) {
+        case 0:
+          renderModal();
+          _context44.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          fireEvent(rows()[2], new MouseEvent('pointerdown', {
+            bubbles: true
+          }));
+          dt = dataTransfer();
+          fireEvent.dragStart(rows()[2], {
+            dataTransfer: dt
+          });
+          expect(dt.getData('text/plain')).toBe('33');
+        case 2:
+          return _context44.a(2);
+      }
+    }, _callee44);
+  })));
+
+  // Rows are the only drop targets, so the dialog has to accept the drop as well:
+  // otherwise the gaps between rows, and the frame's own padding, read as a
+  // cancelled drag and undo the reorder.
+  it.each([['frame', '.components-modal__frame'], ['body', '.newspack-reorder-modal__body']])('accepts a drop released on the %s', /*#__PURE__*/function () {
+    var _ref45 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee45(_name, selector) {
+      var target, over, drop;
+      return _regenerator().w(function (_context45) {
+        while (1) switch (_context45.n) {
+          case 0:
+            renderModal();
+            _context45.n = 1;
+            return screen.findByText('Alpha');
+          case 1:
+            target = document.querySelector(selector);
+            over = createEvent.dragOver(target, {
+              dataTransfer: dataTransfer()
+            });
+            fireEvent(target, over);
+            expect(over.defaultPrevented).toBe(true);
+            drop = createEvent.drop(target, {
+              dataTransfer: dataTransfer()
+            });
+            fireEvent(target, drop);
+            expect(drop.defaultPrevented).toBe(true);
+          case 2:
+            return _context45.a(2);
+        }
+      }, _callee45);
+    }));
+    return function (_x, _x2) {
+      return _ref45.apply(this, arguments);
+    };
+  }());
+  it('leaves a drop released on the overlay cancelling the drag', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee46() {
+    var over;
+    return _regenerator().w(function (_context46) {
+      while (1) switch (_context46.n) {
+        case 0:
+          renderModal();
+          _context46.n = 1;
+          return screen.findByText('Alpha');
+        case 1:
+          over = createEvent.dragOver(overlay(), {
+            dataTransfer: dataTransfer()
+          });
+          fireEvent(overlay(), over);
+          expect(over.defaultPrevented).toBe(false);
+        case 2:
+          return _context46.a(2);
+      }
+    }, _callee46);
+  })));
+});
+describe('ReorderModal when the titles cannot be loaded', function () {
+  var errorSpy;
+  beforeEach(function () {
+    errorSpy = jest.spyOn(console, 'error').mockImplementation(function () {});
+  });
+  afterEach(function () {
+    errorSpy.mockRestore();
+  });
+  it('says so instead of offering rows nobody can tell apart', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee47() {
+    var _renderModal14, onClose, _t23;
+    return _regenerator().w(function (_context47) {
+      while (1) switch (_context47.n) {
+        case 0:
+          _renderModal14 = renderModal({
+            fetchItems: function fetchItems() {
+              return Promise.reject(new Error('unreachable'));
+            }
+          }), onClose = _renderModal14.onClose; // The same wording also lands in the live region core announces it through.
+          _t23 = expect;
+          _context47.n = 1;
+          return screen.findByText('The content could not be loaded, so the order cannot be saved.', {
+            selector: '.components-notice__content'
+          });
+        case 1:
+          _t23(_context47.v).toBeInTheDocument();
+          expect(titles()).toEqual([]);
+          expect(screen.queryByRole('list')).not.toBeInTheDocument();
+          expect(screen.queryByRole('button', {
+            name: 'Save'
+          })).not.toBeInTheDocument();
+          fireEvent.click(screen.getByRole('button', {
+            name: 'Cancel'
+          }));
+          expect(onClose).toHaveBeenCalled();
+        case 2:
+          return _context47.a(2);
+      }
+    }, _callee47);
+  })));
+});
+describe('findOverlay', function () {
+  var markup = function markup(html) {
+    var root = document.createElement('div');
+    root.innerHTML = html;
+    return root;
+  };
+  it('takes the node itself when it is the overlay', function () {
+    var overlayNode = markup('<div class="components-modal__screen-overlay"></div>').firstChild;
+    expect(findOverlay(overlayNode)).toBe(overlayNode);
+  });
+  it('finds the overlay from a node inside it', function () {
+    var root = markup('<div class="components-modal__screen-overlay"><div class="components-modal__frame"></div></div>');
+    expect(findOverlay(root.querySelector('.components-modal__frame'))).toBe(root.firstChild);
+  });
+  it('finds the overlay from a node wrapping it', function () {
+    var root = markup('<div class="components-modal__screen-overlay"></div>');
+    expect(findOverlay(root)).toBe(root.firstChild);
+  });
+  it('reports nothing rather than guessing', function () {
+    expect(findOverlay(null)).toBe(null);
+  });
+});