newspack-components 4.6.2-hotfix-wizard-stale-data-after-plugin-install.1 → 4.6.2

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## newspack-components [4.6.2-hotfix-wizard-stale-data-after-plugin-install.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.1...newspack-components@4.6.2-hotfix-wizard-stale-data-after-plugin-install.1) (2026-08-17)
+## newspack-components [4.6.2](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.1...newspack-components@4.6.2) (2026-08-17)
 
 
 ### Bug Fixes
 
-* **wizard:** refetch data after the installer adds required plugins ([fd41402](https://github.com/Automattic/newspack-workspace/commit/fd414025a01e45faef49636a61c0bef247d72b2d))
+* three WordPress 7.1 regressions in Newsletters ([#876](https://github.com/Automattic/newspack-workspace/issues/876)) ([#894](https://github.com/Automattic/newspack-workspace/issues/894)) ([3b6ac6c](https://github.com/Automattic/newspack-workspace/commit/3b6ac6cce050f2d70f73df1d98f175de1f19a759))
 
 ## newspack-components [4.6.1](https://github.com/Automattic/newspack-workspace/compare/newspack-components@4.6.0...newspack-components@4.6.1) (2026-08-17)
 

package/dist/cjs/grid/style.scss

@@ -83,11 +83,13 @@
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
 
-			> [start] {
+			> [start],
+			> [data-start] {
 				grid-column-start: 1;
 			}
 
-			> [end] {
+			> [end],
+			> [data-end] {
 				grid-column-end: -1;
 			}
 		}
@@ -108,11 +110,26 @@
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
 
-			> [start="2"] {
+			// Positioning is keyed off `data-` attributes because the emotion-styled
+			// components in newer `@wordpress/components` filter props through
+			// `@emotion/is-prop-valid` before they reach the DOM. Its allowlist
+			// carries `start` (a real attribute, on `<ol>`) but not `end`, so a
+			// `VStack` asking for `end` silently lost its `grid-column-end` and
+			// collapsed to one column (NEWS-2866). `data-` attributes are never
+			// filtered, so they hold whatever component renders them.
+			//
+			// This is a component-level filter, not a WordPress-wide one: a plain
+			// `<div start="2" end="4">` still emits both attributes. The bare
+			// selectors below are kept for those plain children — they do NOT
+			// rescue an emotion-styled consumer still passing `end`, which never
+			// reaches the DOM to be matched.
+			> [start="2"],
+			> [data-start="2"] {
 				grid-column-start: 2;
 			}
 
-			> [end="4"] {
+			> [end="4"],
+			> [data-end="4"] {
 				grid-column-end: 4;
 			}
 		}

package/dist/cjs/wizard/index.js

@@ -160,8 +160,6 @@ var Wizard = function Wizard(_ref2, ref) {
   var notices = (0, _data.useSelect)(function (select) {
     return select(_store.WIZARD_STORE_NAMESPACE).getNotices();
   });
-  var _useDispatch2 = (0, _data.useDispatch)(_store.WIZARD_STORE_NAMESPACE),
-    invalidateResolution = _useDispatch2.invalidateResolution;
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
@@ -190,30 +188,6 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
-
-  // The data fetch above runs once per mount, while the required plugins are
-  // still missing — endpoints that need them answer empty or error outright,
-  // and either way the resolver records that as the answer. So the installer
-  // has to trigger a refetch, or the section mounts against it and renders
-  // nothing until the user saves. Requirements already met on mount are left
-  // alone: that fetch saw the real site, and refetching would cost every such
-  // wizard a second request on every load.
-  var requirementsWereUnmet = (0, _element.useRef)(false);
-  var onPluginStatus = function onPluginStatus(_ref3) {
-    var complete = _ref3.complete;
-    // Leave the installer first: whatever happens to the refetch, the user
-    // should not be stranded on a required-plugins screen for a plugin they
-    // just installed.
-    setPluginRequirementsSatisfied(complete);
-    if (!complete) {
-      requirementsWereUnmet.current = true;
-    } else if (requirementsWereUnmet.current) {
-      requirementsWereUnmet.current = false;
-      if (apiSlug && isInitialFetchTriggered) {
-        invalidateResolution('getWizardAPIData', [apiSlug]);
-      }
-    }
-  };
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? (0, _i18n.__)('Required plugins', 'newspack-plugin') : (0, _i18n.__)('Required plugin', 'newspack-plugin');
     displayedSections = [{
@@ -221,7 +195,10 @@ var Wizard = function Wizard(_ref2, ref) {
       render: function render() {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: onPluginStatus
+          onStatus: function onStatus(_ref3) {
+            var complete = _ref3.complete;
+            return setPluginRequirementsSatisfied(complete);
+          }
         });
       }
     }];

package/dist/esm/grid/style.scss

@@ -83,11 +83,13 @@
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
 
-			> [start] {
+			> [start],
+			> [data-start] {
 				grid-column-start: 1;
 			}
 
-			> [end] {
+			> [end],
+			> [data-end] {
 				grid-column-end: -1;
 			}
 		}
@@ -108,11 +110,26 @@
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
 
-			> [start="2"] {
+			// Positioning is keyed off `data-` attributes because the emotion-styled
+			// components in newer `@wordpress/components` filter props through
+			// `@emotion/is-prop-valid` before they reach the DOM. Its allowlist
+			// carries `start` (a real attribute, on `<ol>`) but not `end`, so a
+			// `VStack` asking for `end` silently lost its `grid-column-end` and
+			// collapsed to one column (NEWS-2866). `data-` attributes are never
+			// filtered, so they hold whatever component renders them.
+			//
+			// This is a component-level filter, not a WordPress-wide one: a plain
+			// `<div start="2" end="4">` still emits both attributes. The bare
+			// selectors below are kept for those plain children — they do NOT
+			// rescue an emotion-styled consumer still passing `end`, which never
+			// reaches the DOM to be matched.
+			> [start="2"],
+			> [data-start="2"] {
 				grid-column-start: 2;
 			}
 
-			> [end="4"] {
+			> [end="4"],
+			> [data-end="4"] {
 				grid-column-end: 4;
 			}
 		}

package/dist/esm/wizard/index.js

@@ -12,7 +12,7 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -157,8 +157,6 @@ var Wizard = function Wizard(_ref2, ref) {
   var notices = useSelect(function (select) {
     return select(WIZARD_STORE_NAMESPACE).getNotices();
   });
-  var _useDispatch2 = useDispatch(WIZARD_STORE_NAMESPACE),
-    invalidateResolution = _useDispatch2.invalidateResolution;
   var actions = headerData.actions,
     backNav = headerData.backNav,
     badges = headerData.badges,
@@ -187,30 +185,6 @@ var Wizard = function Wizard(_ref2, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pluginRequirementsSatisfied = _useState2[0],
     setPluginRequirementsSatisfied = _useState2[1];
-
-  // The data fetch above runs once per mount, while the required plugins are
-  // still missing — endpoints that need them answer empty or error outright,
-  // and either way the resolver records that as the answer. So the installer
-  // has to trigger a refetch, or the section mounts against it and renders
-  // nothing until the user saves. Requirements already met on mount are left
-  // alone: that fetch saw the real site, and refetching would cost every such
-  // wizard a second request on every load.
-  var requirementsWereUnmet = useRef(false);
-  var onPluginStatus = function onPluginStatus(_ref3) {
-    var complete = _ref3.complete;
-    // Leave the installer first: whatever happens to the refetch, the user
-    // should not be stranded on a required-plugins screen for a plugin they
-    // just installed.
-    setPluginRequirementsSatisfied(complete);
-    if (!complete) {
-      requirementsWereUnmet.current = true;
-    } else if (requirementsWereUnmet.current) {
-      requirementsWereUnmet.current = false;
-      if (apiSlug && isInitialFetchTriggered) {
-        invalidateResolution('getWizardAPIData', [apiSlug]);
-      }
-    }
-  };
   if (!pluginRequirementsSatisfied) {
     headerText = requiredPlugins.length > 1 ? __('Required plugins', 'newspack-plugin') : __('Required plugin', 'newspack-plugin');
     displayedSections = [{
@@ -218,7 +192,10 @@ var Wizard = function Wizard(_ref2, ref) {
       render: function render() {
         return /*#__PURE__*/_jsx(PluginInstaller, {
           plugins: requiredPlugins,
-          onStatus: onPluginStatus
+          onStatus: function onStatus(_ref3) {
+            var complete = _ref3.complete;
+            return setPluginRequirementsSatisfied(complete);
+          }
         });
       }
     }];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "newspack-components",
-	"version": "4.6.2-hotfix-wizard-stale-data-after-plugin-install.1",
+	"version": "4.6.2",
 	"description": "Newspack design system components",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

package/src/grid/style.scss

@@ -83,11 +83,13 @@
 		&__columns-4 {
 			grid-template-columns: repeat(2, 1fr);
 
-			> [start] {
+			> [start],
+			> [data-start] {
 				grid-column-start: 1;
 			}
 
-			> [end] {
+			> [end],
+			> [data-end] {
 				grid-column-end: -1;
 			}
 		}
@@ -108,11 +110,26 @@
 		&__columns-4 {
 			grid-template-columns: repeat(4, 1fr);
 
-			> [start="2"] {
+			// Positioning is keyed off `data-` attributes because the emotion-styled
+			// components in newer `@wordpress/components` filter props through
+			// `@emotion/is-prop-valid` before they reach the DOM. Its allowlist
+			// carries `start` (a real attribute, on `<ol>`) but not `end`, so a
+			// `VStack` asking for `end` silently lost its `grid-column-end` and
+			// collapsed to one column (NEWS-2866). `data-` attributes are never
+			// filtered, so they hold whatever component renders them.
+			//
+			// This is a component-level filter, not a WordPress-wide one: a plain
+			// `<div start="2" end="4">` still emits both attributes. The bare
+			// selectors below are kept for those plain children — they do NOT
+			// rescue an emotion-styled consumer still passing `end`, which never
+			// reaches the DOM to be matched.
+			> [start="2"],
+			> [data-start="2"] {
 				grid-column-start: 2;
 			}
 
-			> [end="4"] {
+			> [end="4"],
+			> [data-end="4"] {
 				grid-column-end: 4;
 			}
 		}

package/src/wizard/index.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { cloneElement, isValidElement, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
+import { cloneElement, isValidElement, useEffect, useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { category, chevronLeft, moreVertical } from '@wordpress/icons';
 
@@ -126,7 +126,6 @@ const Wizard = (
 	const isQuietLoading = useSelect( select => select( WIZARD_STORE_NAMESPACE ).isQuietLoading() );
 	const headerData = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getHeaderData() );
 	const notices = useSelect( select => select( WIZARD_STORE_NAMESPACE ).getNotices() );
-	const { invalidateResolution } = useDispatch( WIZARD_STORE_NAMESPACE );
 	const { actions, backNav, badges, sectionDescription, sectionMenu, sectionName, sectionTitle, sectionPrimaryAction, sectionSecondaryAction } =
 		headerData;
 
@@ -140,36 +139,14 @@ const Wizard = (
 	let displayedSections = sections.filter( section => ! section.isHidden );
 
 	const [ pluginRequirementsSatisfied, setPluginRequirementsSatisfied ] = useState( requiredPlugins.length === 0 );
-
-	// The data fetch above runs once per mount, while the required plugins are
-	// still missing — endpoints that need them answer empty or error outright,
-	// and either way the resolver records that as the answer. So the installer
-	// has to trigger a refetch, or the section mounts against it and renders
-	// nothing until the user saves. Requirements already met on mount are left
-	// alone: that fetch saw the real site, and refetching would cost every such
-	// wizard a second request on every load.
-	const requirementsWereUnmet = useRef( false );
-	const onPluginStatus = ( { complete } ) => {
-		// Leave the installer first: whatever happens to the refetch, the user
-		// should not be stranded on a required-plugins screen for a plugin they
-		// just installed.
-		setPluginRequirementsSatisfied( complete );
-		if ( ! complete ) {
-			requirementsWereUnmet.current = true;
-		} else if ( requirementsWereUnmet.current ) {
-			requirementsWereUnmet.current = false;
-			if ( apiSlug && isInitialFetchTriggered ) {
-				invalidateResolution( 'getWizardAPIData', [ apiSlug ] );
-			}
-		}
-	};
-
 	if ( ! pluginRequirementsSatisfied ) {
 		headerText = requiredPlugins.length > 1 ? __( 'Required plugins', 'newspack-plugin' ) : __( 'Required plugin', 'newspack-plugin' );
 		displayedSections = [
 			{
 				path: '/',
-				render: () => <PluginInstaller plugins={ requiredPlugins } onStatus={ onPluginStatus } />,
+				render: () => (
+					<PluginInstaller plugins={ requiredPlugins } onStatus={ ( { complete } ) => setPluginRequirementsSatisfied( complete ) } />
+				),
 			},
 		];
 	}

package/dist/cjs/wizard/index.test.js

@@ -1,252 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _react = require("@testing-library/react");
-var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
-var _ = _interopRequireDefault(require("./"));
-var _utils = require("./store/utils");
-var _jsxRuntime = require("react/jsx-runtime");
-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); } /**
- * External dependencies.
- */ /**
- * WordPress dependencies.
- */ /**
- * Internal dependencies.
- */
-jest.mock('@wordpress/api-fetch', function () {
-  return jest.fn();
-});
-
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = {
-  is_debug_mode: false
-};
-window.newspack_urls = {
-  support: 'https://help.newspack.com/'
-};
-var SETTINGS = {
-  minimumDonation: '5'
-};
-
-// Stands in for a wizard section that can only render once its API data has
-// arrived — the shape a wizard section has when the wizard owns an apiSlug.
-var Section = function Section(_ref) {
-  var slug = _ref.slug;
-  var wizardData = (0, _utils.useWizardData)(slug);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: wizardData.settings ? 'Settings form' : null
-  });
-};
-
-// The other shape: a section on a wizard with no apiSlug, which reads page-load
-// globals rather than wizard API data and so never touches the store.
-var StaticSection = function StaticSection() {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: "Static section"
-  });
-};
-
-// Mocks the endpoints a wizard hits, gated on whether the required plugin is
-// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
-// Audience_Donations::api_get_donation_settings() does without WooCommerce.
-// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
-// a wizard given no apiSlug fetches nothing at all.
-var mockEndpoints = function mockEndpoints(slug) {
-  var initialStatus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inactive';
-  var counts = {
-    wizard: 0
-  };
-  var pluginStatus = initialStatus;
-  var plugin = function plugin() {
-    return {
-      Name: 'WooCommerce',
-      Description: 'Store',
-      Status: pluginStatus,
-      Download: 'wporg'
-    };
-  };
-  _apiFetch["default"].mockImplementation(function (_ref2) {
-    var path = _ref2.path,
-      method = _ref2.method;
-    if (path.startsWith('/newspack/v1/wizard/') && 'POST' !== method) {
-      counts.wizard++;
-      return 'active' === pluginStatus ? Promise.resolve({
-        settings: SETTINGS
-      }) : Promise.reject({
-        code: 'newspack_missing_required_plugin',
-        message: 'The WooCommerce plugin is not installed and activated.'
-      });
-    }
-    if (path === '/newspack/v1/plugins/') {
-      return Promise.resolve({
-        woocommerce: plugin()
-      });
-    }
-    if (path === '/newspack/v1/plugins/woocommerce/configure/') {
-      pluginStatus = 'active';
-      return Promise.resolve(plugin());
-    }
-    return Promise.resolve({});
-  });
-  return counts;
-};
-var renderWizard = function renderWizard(slug) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$withApiSlug = _ref3.withApiSlug,
-    withApiSlug = _ref3$withApiSlug === void 0 ? true : _ref3$withApiSlug;
-  return (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"], {
-    headerText: "Test wizard",
-    apiSlug: withApiSlug ? slug : undefined,
-    requiredPlugins: ['woocommerce'],
-    sections: [{
-      label: 'Configuration',
-      path: '/configuration',
-      render: function render() {
-        return withApiSlug ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
-          slug: slug
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticSection, {});
-      }
-    }]
-  }));
-};
-
-// The plugin's own row button, not the footer's activate-all — both read
-// "Activate", and the row button comes first in the DOM.
-var clickActivate = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
-    var _yield$screen$findAll, _yield$screen$findAll2, activate;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          _context.n = 1;
-          return _react.screen.findAllByRole('button', {
-            name: 'Activate'
-          });
-        case 1:
-          _yield$screen$findAll = _context.v;
-          _yield$screen$findAll2 = (0, _slicedToArray2["default"])(_yield$screen$findAll, 1);
-          activate = _yield$screen$findAll2[0];
-          _react.fireEvent.click(activate);
-        case 2:
-          return _context.a(2);
-      }
-    }, _callee);
-  }));
-  return function clickActivate() {
-    return _ref4.apply(this, arguments);
-  };
-}();
-
-// Lets every already-queued promise settle, so an assertion that something did
-// NOT happen has actually given it the chance to.
-var flushPending = function flushPending() {
-  return (0, _react.act)(function () {
-    return new Promise(function (resolve) {
-      return setTimeout(resolve, 0);
-    });
-  });
-};
-describe('Wizard', function () {
-  beforeEach(function () {
-    _apiFetch["default"].mockReset();
-  });
-  it('refetches its API data after the installer satisfies the plugin requirements', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
-    var slug, counts, _t, _t2;
-    return _regenerator().w(function (_context2) {
-      while (1) switch (_context2.n) {
-        case 0:
-          // A distinct slug per test: the store's resolution cache lives in the
-          // module registry, so it is shared by every test in this file.
-          slug = 'test-wizard-refetch';
-          counts = mockEndpoints(slug);
-          renderWizard(slug);
-
-          // The first fetch runs before the plugin exists, so it fails. Until the
-          // installer is satisfied it owns the whole route, so the installer screen
-          // showing is what proves we are in the pre-activation state.
-          _context2.n = 1;
-          return (0, _react.waitFor)(function () {
-            return expect(counts.wizard).toBe(1);
-          });
-        case 1:
-          _t = expect;
-          _context2.n = 2;
-          return _react.screen.findByText('WooCommerce');
-        case 2:
-          _t(_context2.v).toBeInTheDocument();
-          _context2.n = 3;
-          return clickActivate();
-        case 3:
-          _t2 = expect;
-          _context2.n = 4;
-          return _react.screen.findByText('Settings form');
-        case 4:
-          _t2(_context2.v).toBeInTheDocument();
-          _context2.n = 5;
-          return flushPending();
-        case 5:
-          expect(counts.wizard).toBe(2);
-        case 6:
-          return _context2.a(2);
-      }
-    }, _callee2);
-  })));
-  it('does not refetch when the required plugins were already active', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3() {
-    var slug, counts, _t3;
-    return _regenerator().w(function (_context3) {
-      while (1) switch (_context3.n) {
-        case 0:
-          slug = 'test-wizard-no-refetch';
-          counts = mockEndpoints(slug, 'active');
-          renderWizard(slug);
-          _t3 = expect;
-          _context3.n = 1;
-          return _react.screen.findByText('Settings form');
-        case 1:
-          _t3(_context3.v).toBeInTheDocument();
-          _context3.n = 2;
-          return flushPending();
-        case 2:
-          expect(counts.wizard).toBe(1);
-        case 3:
-          return _context3.a(2);
-      }
-    }, _callee3);
-  })));
-  it('fetches nothing for a wizard that has required plugins but no API slug', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee4() {
-    var slug, counts, _t4;
-    return _regenerator().w(function (_context4) {
-      while (1) switch (_context4.n) {
-        case 0:
-          // The shape of every other Newspack wizard that gates on plugins: it
-          // reads page-load globals rather than wizard API data. This change has to
-          // stay inert for them. Note this pins the inertness, not the `apiSlug`
-          // guard itself — the resolver already no-ops on an undefined slug, so
-          // that guard is a second line of defence rather than the load-bearing one.
-          slug = 'test-wizard-no-api-slug';
-          counts = mockEndpoints(slug);
-          renderWizard(slug, {
-            withApiSlug: false
-          });
-          _context4.n = 1;
-          return clickActivate();
-        case 1:
-          _t4 = expect;
-          _context4.n = 2;
-          return _react.screen.findByText('Static section');
-        case 2:
-          _t4(_context4.v).toBeInTheDocument();
-          _context4.n = 3;
-          return flushPending();
-        case 3:
-          expect(counts.wizard).toBe(0);
-        case 4:
-          return _context4.a(2);
-      }
-    }, _callee4);
-  })));
-});

package/dist/esm/wizard/index.test.js

@@ -1,254 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-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); }
-/**
- * External dependencies.
- */
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies.
- */
-import Wizard from './';
-import { useWizardData } from './store/utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-jest.mock('@wordpress/api-fetch', function () {
-  return jest.fn();
-});
-
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = {
-  is_debug_mode: false
-};
-window.newspack_urls = {
-  support: 'https://help.newspack.com/'
-};
-var SETTINGS = {
-  minimumDonation: '5'
-};
-
-// Stands in for a wizard section that can only render once its API data has
-// arrived — the shape a wizard section has when the wizard owns an apiSlug.
-var Section = function Section(_ref) {
-  var slug = _ref.slug;
-  var wizardData = useWizardData(slug);
-  return /*#__PURE__*/_jsx("div", {
-    children: wizardData.settings ? 'Settings form' : null
-  });
-};
-
-// The other shape: a section on a wizard with no apiSlug, which reads page-load
-// globals rather than wizard API data and so never touches the store.
-var StaticSection = function StaticSection() {
-  return /*#__PURE__*/_jsx("div", {
-    children: "Static section"
-  });
-};
-
-// Mocks the endpoints a wizard hits, gated on whether the required plugin is
-// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
-// Audience_Donations::api_get_donation_settings() does without WooCommerce.
-// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
-// a wizard given no apiSlug fetches nothing at all.
-var mockEndpoints = function mockEndpoints(slug) {
-  var initialStatus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inactive';
-  var counts = {
-    wizard: 0
-  };
-  var pluginStatus = initialStatus;
-  var plugin = function plugin() {
-    return {
-      Name: 'WooCommerce',
-      Description: 'Store',
-      Status: pluginStatus,
-      Download: 'wporg'
-    };
-  };
-  apiFetch.mockImplementation(function (_ref2) {
-    var path = _ref2.path,
-      method = _ref2.method;
-    if (path.startsWith('/newspack/v1/wizard/') && 'POST' !== method) {
-      counts.wizard++;
-      return 'active' === pluginStatus ? Promise.resolve({
-        settings: SETTINGS
-      }) : Promise.reject({
-        code: 'newspack_missing_required_plugin',
-        message: 'The WooCommerce plugin is not installed and activated.'
-      });
-    }
-    if (path === '/newspack/v1/plugins/') {
-      return Promise.resolve({
-        woocommerce: plugin()
-      });
-    }
-    if (path === '/newspack/v1/plugins/woocommerce/configure/') {
-      pluginStatus = 'active';
-      return Promise.resolve(plugin());
-    }
-    return Promise.resolve({});
-  });
-  return counts;
-};
-var renderWizard = function renderWizard(slug) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$withApiSlug = _ref3.withApiSlug,
-    withApiSlug = _ref3$withApiSlug === void 0 ? true : _ref3$withApiSlug;
-  return render(/*#__PURE__*/_jsx(Wizard, {
-    headerText: "Test wizard",
-    apiSlug: withApiSlug ? slug : undefined,
-    requiredPlugins: ['woocommerce'],
-    sections: [{
-      label: 'Configuration',
-      path: '/configuration',
-      render: function render() {
-        return withApiSlug ? /*#__PURE__*/_jsx(Section, {
-          slug: slug
-        }) : /*#__PURE__*/_jsx(StaticSection, {});
-      }
-    }]
-  }));
-};
-
-// The plugin's own row button, not the footer's activate-all — both read
-// "Activate", and the row button comes first in the DOM.
-var clickActivate = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-    var _yield$screen$findAll, _yield$screen$findAll2, activate;
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          _context.n = 1;
-          return screen.findAllByRole('button', {
-            name: 'Activate'
-          });
-        case 1:
-          _yield$screen$findAll = _context.v;
-          _yield$screen$findAll2 = _slicedToArray(_yield$screen$findAll, 1);
-          activate = _yield$screen$findAll2[0];
-          fireEvent.click(activate);
-        case 2:
-          return _context.a(2);
-      }
-    }, _callee);
-  }));
-  return function clickActivate() {
-    return _ref4.apply(this, arguments);
-  };
-}();
-
-// Lets every already-queued promise settle, so an assertion that something did
-// NOT happen has actually given it the chance to.
-var flushPending = function flushPending() {
-  return act(function () {
-    return new Promise(function (resolve) {
-      return setTimeout(resolve, 0);
-    });
-  });
-};
-describe('Wizard', function () {
-  beforeEach(function () {
-    apiFetch.mockReset();
-  });
-  it('refetches its API data after the installer satisfies the plugin requirements', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-    var slug, counts, _t, _t2;
-    return _regenerator().w(function (_context2) {
-      while (1) switch (_context2.n) {
-        case 0:
-          // A distinct slug per test: the store's resolution cache lives in the
-          // module registry, so it is shared by every test in this file.
-          slug = 'test-wizard-refetch';
-          counts = mockEndpoints(slug);
-          renderWizard(slug);
-
-          // The first fetch runs before the plugin exists, so it fails. Until the
-          // installer is satisfied it owns the whole route, so the installer screen
-          // showing is what proves we are in the pre-activation state.
-          _context2.n = 1;
-          return waitFor(function () {
-            return expect(counts.wizard).toBe(1);
-          });
-        case 1:
-          _t = expect;
-          _context2.n = 2;
-          return screen.findByText('WooCommerce');
-        case 2:
-          _t(_context2.v).toBeInTheDocument();
-          _context2.n = 3;
-          return clickActivate();
-        case 3:
-          _t2 = expect;
-          _context2.n = 4;
-          return screen.findByText('Settings form');
-        case 4:
-          _t2(_context2.v).toBeInTheDocument();
-          _context2.n = 5;
-          return flushPending();
-        case 5:
-          expect(counts.wizard).toBe(2);
-        case 6:
-          return _context2.a(2);
-      }
-    }, _callee2);
-  })));
-  it('does not refetch when the required plugins were already active', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-    var slug, counts, _t3;
-    return _regenerator().w(function (_context3) {
-      while (1) switch (_context3.n) {
-        case 0:
-          slug = 'test-wizard-no-refetch';
-          counts = mockEndpoints(slug, 'active');
-          renderWizard(slug);
-          _t3 = expect;
-          _context3.n = 1;
-          return screen.findByText('Settings form');
-        case 1:
-          _t3(_context3.v).toBeInTheDocument();
-          _context3.n = 2;
-          return flushPending();
-        case 2:
-          expect(counts.wizard).toBe(1);
-        case 3:
-          return _context3.a(2);
-      }
-    }, _callee3);
-  })));
-  it('fetches nothing for a wizard that has required plugins but no API slug', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-    var slug, counts, _t4;
-    return _regenerator().w(function (_context4) {
-      while (1) switch (_context4.n) {
-        case 0:
-          // The shape of every other Newspack wizard that gates on plugins: it
-          // reads page-load globals rather than wizard API data. This change has to
-          // stay inert for them. Note this pins the inertness, not the `apiSlug`
-          // guard itself — the resolver already no-ops on an undefined slug, so
-          // that guard is a second line of defence rather than the load-bearing one.
-          slug = 'test-wizard-no-api-slug';
-          counts = mockEndpoints(slug);
-          renderWizard(slug, {
-            withApiSlug: false
-          });
-          _context4.n = 1;
-          return clickActivate();
-        case 1:
-          _t4 = expect;
-          _context4.n = 2;
-          return screen.findByText('Static section');
-        case 2:
-          _t4(_context4.v).toBeInTheDocument();
-          _context4.n = 3;
-          return flushPending();
-        case 3:
-          expect(counts.wizard).toBe(0);
-        case 4:
-          return _context4.a(2);
-      }
-    }, _callee4);
-  })));
-});

package/src/wizard/index.test.js

@@ -1,156 +0,0 @@
-/**
- * External dependencies.
- */
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-
-/**
- * WordPress dependencies.
- */
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies.
- */
-import Wizard from './';
-import { useWizardData } from './store/utils';
-
-jest.mock( '@wordpress/api-fetch', () => jest.fn() );
-
-// Both globals are localized onto every real wizard screen. The footer's
-// ExternalLink needs a string href, and the debug Notice reads aux data.
-window.newspack_aux_data = { is_debug_mode: false };
-window.newspack_urls = { support: 'https://help.newspack.com/' };
-
-const SETTINGS = { minimumDonation: '5' };
-
-// Stands in for a wizard section that can only render once its API data has
-// arrived — the shape a wizard section has when the wizard owns an apiSlug.
-const Section = ( { slug } ) => {
-	const wizardData = useWizardData( slug );
-	return <div>{ wizardData.settings ? 'Settings form' : null }</div>;
-};
-
-// The other shape: a section on a wizard with no apiSlug, which reads page-load
-// globals rather than wizard API data and so never touches the store.
-const StaticSection = () => <div>Static section</div>;
-
-// Mocks the endpoints a wizard hits, gated on whether the required plugin is
-// active: the wizard's own endpoint 400s while the plugin is missing, exactly as
-// Audience_Donations::api_get_donation_settings() does without WooCommerce.
-// Counts every wizard-endpoint GET, whatever the slug, so a test can assert that
-// a wizard given no apiSlug fetches nothing at all.
-const mockEndpoints = ( slug, initialStatus = 'inactive' ) => {
-	const counts = { wizard: 0 };
-	let pluginStatus = initialStatus;
-	const plugin = () => ( { Name: 'WooCommerce', Description: 'Store', Status: pluginStatus, Download: 'wporg' } );
-	apiFetch.mockImplementation( ( { path, method } ) => {
-		if ( path.startsWith( '/newspack/v1/wizard/' ) && 'POST' !== method ) {
-			counts.wizard++;
-			return 'active' === pluginStatus
-				? Promise.resolve( { settings: SETTINGS } )
-				: Promise.reject( {
-						code: 'newspack_missing_required_plugin',
-						message: 'The WooCommerce plugin is not installed and activated.',
-				  } );
-		}
-		if ( path === '/newspack/v1/plugins/' ) {
-			return Promise.resolve( { woocommerce: plugin() } );
-		}
-		if ( path === '/newspack/v1/plugins/woocommerce/configure/' ) {
-			pluginStatus = 'active';
-			return Promise.resolve( plugin() );
-		}
-		return Promise.resolve( {} );
-	} );
-	return counts;
-};
-
-const renderWizard = ( slug, { withApiSlug = true } = {} ) =>
-	render(
-		<Wizard
-			headerText="Test wizard"
-			apiSlug={ withApiSlug ? slug : undefined }
-			requiredPlugins={ [ 'woocommerce' ] }
-			sections={ [
-				{
-					label: 'Configuration',
-					path: '/configuration',
-					render: () => ( withApiSlug ? <Section slug={ slug } /> : <StaticSection /> ),
-				},
-			] }
-		/>
-	);
-
-// The plugin's own row button, not the footer's activate-all — both read
-// "Activate", and the row button comes first in the DOM.
-const clickActivate = async () => {
-	const [ activate ] = await screen.findAllByRole( 'button', { name: 'Activate' } );
-	fireEvent.click( activate );
-};
-
-// Lets every already-queued promise settle, so an assertion that something did
-// NOT happen has actually given it the chance to.
-const flushPending = () => act( () => new Promise( resolve => setTimeout( resolve, 0 ) ) );
-
-describe( 'Wizard', () => {
-	beforeEach( () => {
-		apiFetch.mockReset();
-	} );
-
-	it( 'refetches its API data after the installer satisfies the plugin requirements', async () => {
-		// A distinct slug per test: the store's resolution cache lives in the
-		// module registry, so it is shared by every test in this file.
-		const slug = 'test-wizard-refetch';
-		const counts = mockEndpoints( slug );
-
-		renderWizard( slug );
-
-		// The first fetch runs before the plugin exists, so it fails. Until the
-		// installer is satisfied it owns the whole route, so the installer screen
-		// showing is what proves we are in the pre-activation state.
-		await waitFor( () => expect( counts.wizard ).toBe( 1 ) );
-		expect( await screen.findByText( 'WooCommerce' ) ).toBeInTheDocument();
-
-		await clickActivate();
-
-		// Activation makes the endpoint answerable, so the section must render
-		// against fresh data rather than the empty pre-activation response.
-		expect( await screen.findByText( 'Settings form' ) ).toBeInTheDocument();
-
-		// Exactly one refetch. The installer re-reports its status on every
-		// re-render while it is mounted, so this is the assertion that would
-		// catch a latch that re-fired.
-		await flushPending();
-		expect( counts.wizard ).toBe( 2 );
-	} );
-
-	it( 'does not refetch when the required plugins were already active', async () => {
-		const slug = 'test-wizard-no-refetch';
-		const counts = mockEndpoints( slug, 'active' );
-
-		renderWizard( slug );
-
-		expect( await screen.findByText( 'Settings form' ) ).toBeInTheDocument();
-		await flushPending();
-		expect( counts.wizard ).toBe( 1 );
-	} );
-
-	it( 'fetches nothing for a wizard that has required plugins but no API slug', async () => {
-		// The shape of every other Newspack wizard that gates on plugins: it
-		// reads page-load globals rather than wizard API data. This change has to
-		// stay inert for them. Note this pins the inertness, not the `apiSlug`
-		// guard itself — the resolver already no-ops on an undefined slug, so
-		// that guard is a second line of defence rather than the load-bearing one.
-		const slug = 'test-wizard-no-api-slug';
-		const counts = mockEndpoints( slug );
-
-		renderWizard( slug, { withApiSlug: false } );
-
-		await clickActivate();
-
-		// The installer still completes and hands the route back to the section.
-		expect( await screen.findByText( 'Static section' ) ).toBeInTheDocument();
-		await flushPending();
-		expect( counts.wizard ).toBe( 0 );
-	} );
-} );