newspack-components 4.7.0 → 4.8.0-alpha.1

package/dist/cjs/stat-card/index.test.js

@@ -0,0 +1,938 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@testing-library/react");
+var _element = require("@wordpress/element");
+var _ = _interopRequireWildcard(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, 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) { (0, _defineProperty2["default"])(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
+ */ /**
+ * WordPress dependencies
+ */ /**
+ * Internal dependencies
+ */
+var renderOrphan = function renderOrphan(node) {
+  var consoleError = jest.spyOn(console, 'error').mockImplementation(function () {});
+  try {
+    expect(function () {
+      return (0, _react.render)(node);
+    }).toThrow('StatCard subcomponents must be rendered inside StatCard.Root.');
+  } finally {
+    consoleError.mockRestore();
+  }
+};
+describe('StatCard.Root', function () {
+  // The hero scale is a container query against this class, so losing it
+  // silently resizes the figure.
+  it('carries the class the container query is scoped to', function () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render.container;
+    expect(container.querySelector('.newspack-stat-card')).toBeInTheDocument();
+    expect(container.querySelector('.newspack-stat-card__content')).toBeInTheDocument();
+  });
+
+  // The footer only pins to the bottom while the content region is a column.
+  it('lays the content region out as a column', function () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render2.container;
+    expect(container.querySelector('.newspack-stat-card__content')).toHaveStyle({
+      flexDirection: 'column'
+    });
+  });
+  it('merges className onto the card', function () {
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        className: "consumer-tile",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render3.container;
+    expect(container.querySelector('.newspack-stat-card')).toHaveClass('consumer-tile');
+  });
+  it('renders its children', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "body"
+      })
+    }));
+    expect(_react.screen.getByText('body')).toBeInTheDocument();
+  });
+
+  // A wrapper in another repo needs the node to anchor a popover or measure the tile.
+  it('forwards a ref and passes other props to the card', function () {
+    var ref = {
+      current: null
+    };
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        ref: ref,
+        id: "tile-1",
+        "data-testid": "tile",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "body"
+        })
+      })),
+      container = _render4.container;
+    var card = container.querySelector('.newspack-stat-card');
+    expect(ref.current).toBe(card);
+    expect(card).toHaveAttribute('id', 'tile-1');
+    expect(card).toHaveAttribute('data-testid', 'tile');
+  });
+});
+describe('StatCard.Label', function () {
+  it('renders an h3 by default', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+        children: "Subscribers reached"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 3,
+      name: 'Subscribers reached'
+    })).toBeInTheDocument();
+  });
+  it('follows the level set on Root', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      heading: 4,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+        children: "Subscribers reached"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 4,
+      name: 'Subscribers reached'
+    })).toBeInTheDocument();
+  });
+  it('lets its own heading override Root', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      heading: 4,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+        heading: 2,
+        children: "Subscribers reached"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 2,
+      name: 'Subscribers reached'
+    })).toBeInTheDocument();
+  });
+  it('falls back to h3 for a level outside 2-6', function () {
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+        heading: 7,
+        children: "Subscribers reached"
+      })
+    }));
+    expect(_react.screen.getByRole('heading', {
+      level: 3,
+      name: 'Subscribers reached'
+    })).toBeInTheDocument();
+    expect(consoleWarn).toHaveBeenCalled();
+    consoleWarn.mockRestore();
+  });
+
+  // Inside the heading, the control's text would join its accessible name.
+  it('renders the suffix beside the heading rather than inside it', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+        suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          children: "About this metric"
+        }),
+        children: "Subscribers reached"
+      })
+    }));
+    var heading = _react.screen.getByRole('heading', {
+      level: 3,
+      name: 'Subscribers reached'
+    });
+    expect(heading).not.toContainElement(_react.screen.getByRole('button', {
+      name: 'About this metric'
+    }));
+  });
+  it('merges className onto the row, not the heading', function () {
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+          className: "consumer-label",
+          children: "Subscribers reached"
+        })
+      })),
+      container = _render5.container;
+    expect(container.querySelector('.newspack-stat-card__label')).toHaveClass('consumer-label');
+    expect(_react.screen.getByRole('heading', {
+      level: 3
+    })).not.toHaveClass('consumer-label');
+  });
+  it('throws outside Root', function () {
+    renderOrphan(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+      children: "Orphan"
+    }));
+  });
+});
+describe('StatCard.Body', function () {
+  it('renders its children', function () {
+    var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Body, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "body"
+          })
+        })
+      })),
+      container = _render6.container;
+    expect(container.querySelector('.newspack-stat-card__body')).toBeInTheDocument();
+    expect(_react.screen.getByText('body')).toBeInTheDocument();
+  });
+  it('merges className onto the body', function () {
+    var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Body, {
+          className: "consumer-body",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            children: "body"
+          })
+        })
+      })),
+      container = _render7.container;
+    expect(container.querySelector('.newspack-stat-card__body')).toHaveClass('consumer-body');
+  });
+  it('throws outside Root', function () {
+    renderOrphan(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Body, {
+      children: "Orphan"
+    }));
+  });
+});
+describe('StatCard.Value', function () {
+  it('renders a formatted value as-is, with nothing spoken over it', function () {
+    var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284"
+        })
+      })),
+      container = _render8.container;
+    expect(_react.screen.getByText('1,284')).toBeInTheDocument();
+    expect(container.querySelector('[data-visually-hidden]')).not.toBeInTheDocument();
+    expect(container.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
+  });
+  it('merges className onto the value', function () {
+    var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284",
+          className: "consumer-value"
+        })
+      })),
+      container = _render9.container;
+    expect(container.querySelector('.newspack-stat-card__value')).toHaveClass('consumer-value');
+  });
+
+  // The glyph exists to tell a missing figure from a zero, so a zero has to survive it.
+  it('renders a zero as the figure it is', function () {
+    var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: 0
+        })
+      })),
+      container = _render0.container;
+    expect(_react.screen.getByText('0')).toBeInTheDocument();
+    expect(_react.screen.queryByText(_.STAT_CARD_NULL_GLYPH)).not.toBeInTheDocument();
+    expect(container.querySelector('[data-visually-hidden]')).not.toBeInTheDocument();
+  });
+  it('renders the null glyph with an accessible name for a null value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null
+      })
+    }));
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+
+  // `value={ data?.count }` before the data arrives must not read as a zero.
+  it('treats undefined as no figure', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: undefined
+      })
+    }));
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+
+  // A field that reports "no data" as an empty string would otherwise leave a blank hero.
+  it('treats an empty value as no figure', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: ""
+      })
+    }));
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+
+  // A no-data sentinel padded by the field it came from is still no data.
+  it('treats a whitespace-only value as no figure', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: "   "
+      })
+    }));
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+  it('does not expose the glyph as an image', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null
+      })
+    }));
+    expect(_react.screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+  it('speaks valueLabel instead of the visible value', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: "$1.2M",
+        valueLabel: "1.2 million dollars"
+      })
+    }));
+    expect(_react.screen.getByText('$1.2M')).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('1.2 million dollars')).toHaveAttribute('data-visually-hidden');
+  });
+  it('lets valueLabel replace the default name of the null glyph', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null,
+        valueLabel: "No conversions in this timeframe"
+      })
+    }));
+    expect(_react.screen.getByText('No conversions in this timeframe')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Not applicable')).not.toBeInTheDocument();
+  });
+
+  // A label mapped from an empty field must not leave the glyph unnamed.
+  it('falls back to the default name when valueLabel is empty', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null,
+        valueLabel: ""
+      })
+    }));
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+
+  // Whitespace is truthy, so an unguarded label would hide the figure and name it nothing.
+  it('falls back to the default name when valueLabel is only whitespace', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null,
+        valueLabel: "   "
+      })
+    }));
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+  it('drops the hero scale for a text variant', function () {
+    var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "0 of 17",
+          variant: "text"
+        })
+      })),
+      container = _render1.container;
+    expect(container.querySelector('.newspack-stat-card__value')).toHaveClass('newspack-stat-card__value--text');
+  });
+  it('keeps the null treatment in the text variant', function () {
+    var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: null,
+          variant: "text"
+        })
+      })),
+      container = _render10.container;
+    expect(container.querySelector('.newspack-stat-card__value')).toHaveClass('newspack-stat-card__value--text');
+    expect(_react.screen.getByText(_.STAT_CARD_NULL_GLYPH)).toHaveAttribute('aria-hidden', 'true');
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+  });
+  it('warns on an unknown variant and keeps the hero scale', function () {
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var _render11 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284",
+          variant: "headline"
+        })
+      })),
+      container = _render11.container;
+    expect(container.querySelector('.newspack-stat-card__value')).not.toHaveClass('newspack-stat-card__value--text');
+    expect(consoleWarn).toHaveBeenCalled();
+    consoleWarn.mockRestore();
+  });
+  it('keeps the hero scale by default', function () {
+    var _render12 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284"
+        })
+      })),
+      container = _render12.container;
+    expect(container.querySelector('.newspack-stat-card__value')).not.toHaveClass('newspack-stat-card__value--text');
+  });
+  it('throws outside Root', function () {
+    renderOrphan(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+      value: "1,284"
+    }));
+  });
+});
+describe('StatCard.Delta', function () {
+  it('renders the change with the arrow named in text', function () {
+    var _render13 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "up",
+          children: "2%"
+        })
+      })),
+      container = _render13.container;
+    expect(container.querySelector('[aria-hidden="true"]')).toHaveTextContent('↑');
+    expect(_react.screen.getByText('Up')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.getByText('2%')).toBeInTheDocument();
+  });
+
+  // Hiding the span forms a box that speech linearises; braille and raw text get no such boundary.
+  it('separates the spoken direction from the change in the raw text', function () {
+    var _render14 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "up",
+          children: "2%"
+        })
+      })),
+      container = _render14.container;
+    expect(container.querySelector('[data-visually-hidden]').textContent).toBe('Up ');
+    expect(container.querySelector('.newspack-stat-card__delta').textContent).toBe('↑Up 2%');
+  });
+  it('points the arrow down without changing the colour', function () {
+    var _render15 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "down",
+          children: "2%"
+        })
+      })),
+      container = _render15.container;
+    expect(container.querySelector('[aria-hidden="true"]')).toHaveTextContent('↓');
+    expect(_react.screen.getByText('Down')).toHaveAttribute('data-visually-hidden');
+    var delta = container.querySelector('.newspack-stat-card__delta');
+    expect(delta).not.toHaveClass('newspack-stat-card__delta--negative');
+    expect(delta).not.toHaveClass('newspack-stat-card__delta--positive');
+  });
+
+  // A rise is not always good news, so the caller sets the tone separately.
+  it('takes its tone from the caller, not from the direction', function () {
+    var _render16 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "up",
+          tone: "negative",
+          children: "2%"
+        })
+      })),
+      container = _render16.container;
+    expect(container.querySelector('.newspack-stat-card__delta')).toHaveClass('newspack-stat-card__delta--negative');
+  });
+
+  // Three sources compose here: the base class, the tone modifier and the consumer's.
+  it('merges className onto the delta alongside the tone', function () {
+    var _render17 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "down",
+          tone: "negative",
+          className: "custom-delta",
+          children: "2%"
+        })
+      })),
+      container = _render17.container;
+    var delta = container.querySelector('.newspack-stat-card__delta');
+    expect(delta).toHaveClass('newspack-stat-card__delta--negative');
+    expect(delta).toHaveClass('custom-delta');
+  });
+  it('lets directionLabel replace the spoken direction', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        directionLabel: "Increased by",
+        children: "2%"
+      })
+    }));
+    expect(_react.screen.getByText('Increased by')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Up')).not.toBeInTheDocument();
+  });
+
+  // No arrow and the word "Down" would be worse than saying nothing at all.
+  it('leaves an unrecognised direction unspoken', function () {
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var _render18 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "sideways",
+          children: "2%"
+        })
+      })),
+      container = _render18.container;
+    expect(container.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
+    expect(container.querySelector('[data-visually-hidden]')).not.toBeInTheDocument();
+    expect(_react.screen.getByText('2%')).toBeInTheDocument();
+    expect(consoleWarn).toHaveBeenCalled();
+    consoleWarn.mockRestore();
+  });
+
+  // A label mapped from an empty field must not leave the arrow unnamed.
+  // The caller chose the words, so a missing arrow must not silence them.
+  it('speaks a directionLabel where there is no arrow to name', function () {
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var _render19 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "sideways",
+          directionLabel: "Increased by",
+          children: "2%"
+        })
+      })),
+      container = _render19.container;
+    expect(container.querySelector('[aria-hidden="true"]')).not.toBeInTheDocument();
+    expect(_react.screen.getByText('Increased by')).toHaveAttribute('data-visually-hidden');
+    consoleWarn.mockRestore();
+  });
+  it('falls back to the spoken direction when directionLabel is empty', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        directionLabel: "",
+        children: "2%"
+      })
+    }));
+    expect(_react.screen.getByText('Up')).toHaveAttribute('data-visually-hidden');
+  });
+  it('falls back to the spoken direction when directionLabel is only whitespace', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        directionLabel: "   ",
+        children: "2%"
+      })
+    }));
+    expect(_react.screen.getByText('Up')).toHaveAttribute('data-visually-hidden');
+  });
+
+  // Word order and valence both live in the caller's sentence, not in DOM order.
+  it('lets label name the whole delta and hides what it restates', function () {
+    var _render20 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "up",
+          tone: "negative",
+          label: "2% more refunds than last month",
+          children: "2%"
+        })
+      })),
+      container = _render20.container;
+    expect(container.querySelector('[aria-hidden="true"]')).toHaveTextContent('↑2%');
+    expect(_react.screen.getByText('2% more refunds than last month')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Up')).not.toBeInTheDocument();
+  });
+
+  // The whole-delta sentence outranks the one-word swap, which only prose said until now.
+  it('lets label win over directionLabel', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        label: "2% more refunds than last month",
+        directionLabel: "Increased by",
+        children: "2%"
+      })
+    }));
+    expect(_react.screen.getByText('2% more refunds than last month')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Increased by')).not.toBeInTheDocument();
+    expect(_react.screen.queryByText('Up')).not.toBeInTheDocument();
+  });
+
+  // Falling back past a blank label should land on the caller's word, not the built-in one.
+  it('falls back from a blank label to directionLabel rather than the default', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        label: "   ",
+        directionLabel: "Increased by",
+        children: "2%"
+      })
+    }));
+    expect(_react.screen.getByText('Increased by')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Up')).not.toBeInTheDocument();
+  });
+
+  // A blank sentence would hide the arrow and the change behind nothing at all.
+  it('keeps the arrow and the change when label is only whitespace', function () {
+    var _render21 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+          direction: "up",
+          label: "   ",
+          children: "2%"
+        })
+      })),
+      container = _render21.container;
+    expect(container.querySelector('[aria-hidden="true"]')).toHaveTextContent('↑');
+    expect(_react.screen.getByText('Up')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.getByText('2%')).toBeInTheDocument();
+  });
+  it('sits in a row beside the figure when passed as a Value suffix', function () {
+    var _render22 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284",
+          suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+            direction: "up",
+            tone: "positive",
+            children: "2%"
+          })
+        })
+      })),
+      container = _render22.container;
+    var figure = container.querySelector('.newspack-stat-card__figure');
+    expect(figure).toHaveStyle({
+      flexDirection: 'row'
+    });
+    expect(figure.querySelector('.newspack-stat-card__value')).toBeInTheDocument();
+    expect(figure.querySelector('.newspack-stat-card__delta')).toBeInTheDocument();
+  });
+  it('adds no row when the value has no suffix', function () {
+    var _render23 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284"
+        })
+      })),
+      container = _render23.container;
+    expect(container.querySelector('.newspack-stat-card__figure')).not.toBeInTheDocument();
+  });
+  it('throws outside Root', function () {
+    renderOrphan(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+      direction: "up",
+      children: "2%"
+    }));
+  });
+});
+describe('StatCard.Secondary', function () {
+  it('renders its children', function () {
+    var _render24 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Secondary, {
+          children: "Up from 1,190 last month"
+        })
+      })),
+      container = _render24.container;
+    expect(container.querySelector('.newspack-stat-card__secondary')).toBeInTheDocument();
+    expect(_react.screen.getByText('Up from 1,190 last month')).toBeInTheDocument();
+  });
+  it('merges className onto the line', function () {
+    var _render25 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Secondary, {
+          className: "consumer-secondary",
+          children: "Up from 1,190 last month"
+        })
+      })),
+      container = _render25.container;
+    expect(container.querySelector('.newspack-stat-card__secondary')).toHaveClass('consumer-secondary');
+  });
+  it('throws outside Root', function () {
+    renderOrphan(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Secondary, {
+      children: "Orphan"
+    }));
+  });
+});
+describe('StatCard.Footer', function () {
+  it('wraps a bare description in the description styling', function () {
+    var _render26 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          children: "Readers who received at least one campaign."
+        })
+      })),
+      container = _render26.container;
+    var description = container.querySelector('.newspack-stat-card__description');
+    expect(description.tagName).toBe('P');
+    expect(description).toHaveTextContent('Readers who received at least one campaign.');
+  });
+  it('merges className onto the footer', function () {
+    var _render27 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          className: "consumer-footer",
+          children: "Readers who received at least one campaign."
+        })
+      })),
+      container = _render27.container;
+    expect(container.querySelector('.newspack-stat-card__footer')).toHaveClass('consumer-footer');
+  });
+
+  // An interpolated sentence arrives as several children and has to stay one sentence.
+  it('keeps a run of text children in one paragraph', function () {
+    var count = 12;
+    var _render28 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Footer, {
+          children: ["Applies to ", count, " products."]
+        })
+      })),
+      container = _render28.container;
+    var descriptions = container.querySelectorAll('.newspack-stat-card__description');
+    expect(descriptions).toHaveLength(1);
+    expect(descriptions[0]).toHaveTextContent('Applies to 12 products.');
+  });
+  it('passes elements through untouched', function () {
+    var _render29 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            children: "See the products"
+          })
+        })
+      })),
+      container = _render29.container;
+    expect(container.querySelector('.newspack-stat-card__description')).not.toBeInTheDocument();
+    expect(_react.screen.getByRole('button', {
+      name: 'See the products'
+    })).toBeInTheDocument();
+  });
+  it('wraps only the text when an action sits beside it', function () {
+    var _render30 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Footer, {
+          children: ['Products this rule applies to.', /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            children: "See the products"
+          })]
+        })
+      })),
+      container = _render30.container;
+    expect(container.querySelectorAll('.newspack-stat-card__description')).toHaveLength(1);
+    expect(_react.screen.getByText('Products this rule applies to.')).toHaveClass('newspack-stat-card__description');
+    expect(_react.screen.getByRole('button', {
+      name: 'See the products'
+    })).toBeInTheDocument();
+  });
+
+  // An empty or whitespace-only child would otherwise leave a stray paragraph.
+  it('renders nothing for an empty description', function () {
+    var _render31 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          children: ''
+        })
+      })),
+      container = _render31.container;
+    expect(container.querySelector('.newspack-stat-card__description')).not.toBeInTheDocument();
+  });
+  it('renders nothing for a whitespace-only description', function () {
+    var _render32 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          children: '   '
+        })
+      })),
+      container = _render32.container;
+    expect(container.querySelector('.newspack-stat-card__description')).not.toBeInTheDocument();
+  });
+
+  // `createInterpolateElement` returns a Fragment, which has to stay part of the run.
+  it('keeps an interpolated sentence in the description styling', function () {
+    var _render33 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          children: (0, _element.createInterpolateElement)('Applies to <b>12</b> products.', {
+            b: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {})
+          })
+        })
+      })),
+      container = _render33.container;
+    var descriptions = container.querySelectorAll('.newspack-stat-card__description');
+    expect(descriptions).toHaveLength(1);
+    expect(descriptions[0]).toHaveTextContent('Applies to 12 products.');
+    expect(descriptions[0].querySelector('strong')).toBeInTheDocument();
+  });
+
+  // The documented escape hatch: inline markup would otherwise split into a block per child.
+  it('passes a self-wrapped description through as one paragraph', function () {
+    var _render34 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            className: "newspack-stat-card__description",
+            children: ["Applies to ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: "12"
+            }), " products."]
+          })
+        })
+      })),
+      container = _render34.container;
+    var descriptions = container.querySelectorAll('.newspack-stat-card__description');
+    expect(descriptions).toHaveLength(1);
+    expect(descriptions[0]).toHaveTextContent('Applies to 12 products.');
+  });
+  it('throws outside Root', function () {
+    renderOrphan(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, {
+      children: "Orphan"
+    }));
+  });
+});
+describe('StatCard leaf slots', function () {
+  var leaves = [['Label', function (props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, _objectSpread(_objectSpread({}, props), {}, {
+      children: "Reach"
+    }));
+  }, '.newspack-stat-card__label'], ['Body', function (props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Body, _objectSpread({}, props));
+  }, '.newspack-stat-card__body'], ['Value', function (props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, _objectSpread({
+      value: "1,284"
+    }, props));
+  }, '.newspack-stat-card__value'], ['Delta', function (props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, _objectSpread(_objectSpread({
+      direction: "up"
+    }, props), {}, {
+      children: "2%"
+    }));
+  }, '.newspack-stat-card__delta'], ['Secondary', function (props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Secondary, _objectSpread({}, props));
+  }, '.newspack-stat-card__secondary'], ['Footer', function (props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Footer, _objectSpread(_objectSpread({}, props), {}, {
+      children: "Note"
+    }));
+  }, '.newspack-stat-card__footer']];
+
+  // Insights hangs a full amount off an abbreviated figure, which has nowhere
+  // else to go without adding an element the body layout would have to carry.
+  it.each(leaves)('%s forwards a ref and passes other props through', function (name, renderLeaf, selector) {
+    var ref = {
+      current: null
+    };
+    var _render35 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: renderLeaf({
+          ref: ref,
+          title: 'hint',
+          'data-testid': 'leaf'
+        })
+      })),
+      container = _render35.container;
+    var element = container.querySelector(selector);
+    expect(ref.current).toBe(element);
+    expect(element).toHaveAttribute('title', 'hint');
+    expect(element).toHaveAttribute('data-testid', 'leaf');
+  });
+
+  // The figure is what a wrapper needs to reach, not the row it may share.
+  it('puts a Value ref on the figure rather than the row it shares with a suffix', function () {
+    var ref = {
+      current: null
+    };
+    var _render36 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          ref: ref,
+          value: "1,284",
+          suffix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+            direction: "up",
+            children: "2%"
+          })
+        })
+      })),
+      container = _render36.container;
+    expect(ref.current).toBe(container.querySelector('.newspack-stat-card__value'));
+  });
+});
+describe('StatCard outside Root', function () {
+  // Nothing above these cards catches an error, so a mistake in a branch only
+  // some sites reach must not blank the whole screen.
+  it('falls back to the default context in production rather than throwing', function () {
+    var consoleWarn = jest.spyOn(console, 'warn').mockImplementation(function () {});
+    var previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+    try {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Label, {
+          children: "Reach"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+          value: "1,284"
+        })]
+      }));
+      expect(_react.screen.getByRole('heading', {
+        level: 3
+      })).toHaveTextContent('Reach');
+      expect(_react.screen.getByText('1,284')).toBeInTheDocument();
+      expect(consoleWarn).toHaveBeenCalledWith('StatCard subcomponents must be rendered inside StatCard.Root.');
+    } finally {
+      process.env.NODE_ENV = previous;
+      consoleWarn.mockRestore();
+    }
+  });
+});
+describe('StatCard spoken labels', function () {
+  // A bundle registered against another text domain never loads this package's strings.
+  it('lets Root replace the name of the null glyph', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Root, {
+      labels: {
+        notApplicable: 'Sans objet'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null
+      })
+    }));
+    expect(_react.screen.getByText('Sans objet')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Not applicable')).not.toBeInTheDocument();
+  });
+  it('lets Root replace the spoken directions', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Root, {
+      labels: {
+        up: 'En hausse',
+        down: 'En baisse'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        children: "2%"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "down",
+        children: "4%"
+      })]
+    }));
+    expect(_react.screen.getByText('En hausse')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.getByText('En baisse')).toHaveAttribute('data-visually-hidden');
+  });
+
+  // The per-instance props were always the override, and stay it.
+  it('lets valueLabel and directionLabel win over Root labels', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Root, {
+      labels: {
+        notApplicable: 'Sans objet',
+        up: 'En hausse'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null,
+        valueLabel: "Pas encore mesur\xE9"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        directionLabel: "Progression de",
+        children: "2%"
+      })]
+    }));
+    expect(_react.screen.getByText('Pas encore mesuré')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.getByText('Progression de')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.queryByText('Sans objet')).not.toBeInTheDocument();
+    expect(_react.screen.queryByText('En hausse')).not.toBeInTheDocument();
+  });
+
+  // A translation that came back empty must not leave the glyph or the arrow unnamed.
+  it('falls back to the built-in default for a blank Root label', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"].Root, {
+      labels: {
+        notApplicable: '   ',
+        up: ''
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Value, {
+        value: null
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].Delta, {
+        direction: "up",
+        children: "2%"
+      })]
+    }));
+    expect(_react.screen.getByText('Not applicable')).toHaveAttribute('data-visually-hidden');
+    expect(_react.screen.getByText('Up')).toHaveAttribute('data-visually-hidden');
+  });
+});