@akinon/projectzero 2.0.43-rc.0 → 2.0.44

package/app-template/src/views/checkout/__tests__/part-style-reachability.test.ts

@@ -0,0 +1,121 @@
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Part styling only works by INHERITANCE, and inheritance loses to any
+ * declaration on the element itself.
+ *
+ * A checkout part rule lands on the element the part is stamped on:
+ *
+ *   [data-block-id="…"] [data-part="payment-option"] { color: #fff !important }
+ *
+ * If the text inside that element sits in a child that declares its own
+ * `text-…` colour, size or weight, the inherited value never reaches it —
+ * `!important` does not help, because the child is not competing for the same
+ * declaration, it simply has one of its own. Every typography control the
+ * panel offers for that part is then a silent no-op: the designer sets Text
+ * Color to white, nothing moves, and there is no error to explain it.
+ *
+ * That is exactly how a starter template painted a near-black selected
+ * payment card behind a near-black method name (contrast ≈ 1:1), and how
+ * "Font Weight" on the grand total row did nothing.
+ *
+ * The rule this file locks: on these elements the typography lives on the
+ * STAMPED element, and a child either carries none of its own or is a part in
+ * its own right. Where two children genuinely differ (a totals row's label and
+ * its amount), each gets its own part instead of the row pretending to control
+ * both.
+ */
+
+const checkoutDir = path.resolve(__dirname, '..');
+
+const read = (relative: string): string =>
+  fs.readFileSync(path.join(checkoutDir, relative), 'utf8');
+
+/** Utilities that would out-declare an inherited part rule. */
+const TYPOGRAPHY_UTILITY =
+  /\btext-(?:xs|sm|base|lg|xl|\d?xl|black-\d+|gray-\d+|primary-\d+|secondary)\b|\bfont-(?:light|normal|medium|semibold|bold)\b/;
+
+describe('one-page payment cards keep their typography on the stamped button', () => {
+  const source = read('variants/one-page/payment-options-grid.tsx');
+
+  it('declares the text styles on the button that carries the part', () => {
+    const button = source.slice(
+      source.indexOf('<button'),
+      source.indexOf('<Icon')
+    );
+
+    expect(button).toContain("partAttrs('payment-option'");
+    expect(button).toMatch(/text-sm font-medium leading-tight/);
+    expect(button).toMatch(/text-black-800/);
+    expect(button).toMatch(/text-gray-700/);
+  });
+
+  it('leaves the method name span with layout classes only', () => {
+    expect(source).toContain('<span className="flex-1">{option.name}</span>');
+  });
+
+  it('never re-colours the icon with fill utilities', () => {
+    // `Icon` renders an icon FONT, so `fill-*` coloured nothing at all; the
+    // glyph follows `color`, which now comes from the button.
+    expect(source).not.toMatch(/\bfill-(?:black|gray)-\d+\b/);
+  });
+});
+
+describe('multi-step payment options keep their typography on the stamped element', () => {
+  const source = read('steps/payment/payment-option-buttons.tsx');
+
+  it('puts the mobile row styles on the label that carries the part', () => {
+    const label = source.slice(
+      source.indexOf('<label'),
+      source.indexOf('</label>')
+    );
+
+    expect(label).toContain("partAttrs('payment-option'");
+    expect(label).toMatch(/text-primary-800 font-light text-lg/);
+  });
+
+  it('leaves the method name span with layout classes only', () => {
+    expect(source).toContain('<span className="flex">{option.name}</span>');
+  });
+});
+
+describe('summary rows expose their label and amount as parts', () => {
+  it.each([
+    ['variants/one-page/one-page-summary.tsx'],
+    ['summary.tsx']
+  ])('%s stamps both cells of every totals row and the grand total', file => {
+    const source = read(file);
+
+    for (const part of [
+      'summary-row-label',
+      'summary-row-value',
+      'summary-total-label',
+      'summary-total-value'
+    ]) {
+      expect(source).toContain(`partAttrs('${part}')`);
+    }
+  });
+
+  it('gives the one-page grand total row a baseline its label can inherit', () => {
+    const source = read('variants/one-page/one-page-summary.tsx');
+    const total = source.slice(
+      source.indexOf("partAttrs('summary-total')") - 400,
+      source.indexOf("partAttrs('summary-total-value')")
+    );
+
+    // The row owns the label's treatment; the label span declares nothing.
+    expect(total).toMatch(/text-sm font-medium uppercase/);
+    expect(total).toContain(
+      "<span {...partAttrs('summary-total-label')}>"
+    );
+  });
+
+  it('keeps a stamped cell free to declare its own look', () => {
+    // The amount is allowed to differ — it answers to summary-*-value.
+    const source = read('variants/one-page/one-page-summary.tsx');
+
+    expect(source).toMatch(TYPOGRAPHY_UTILITY);
+    expect(source).toContain("partAttrs('summary-total-value')");
+  });
+});

package/app-template/src/views/checkout/step-button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { Icon } from '@theme/components';
 import clsx from 'clsx';
 import { CheckoutStep } from '@akinon/next/types';
@@ -40,6 +41,7 @@ export const CheckoutStepButton = ({
         { 'mr-6': completed }
       )}
       onClick={handleClick}
+      {...partAttrs('step', { selected, completed, disabled })}
     >
       <span
         className={clsx(
@@ -50,10 +52,18 @@ export const CheckoutStepButton = ({
           { 'text-black': selected }
         )}
       >
-        <span className="order-1 flex-1 md:mr-1 md:order-none md:flex-none">
+        <span
+          className="order-1 flex-1 md:mr-1 md:order-none md:flex-none"
+          {...partAttrs('step-number', { selected, completed })}
+        >
           {number} {number && `.`}
         </span>
-        <span className="order-3 uppercase md:order-none">{label}</span>
+        <span
+          className="order-3 uppercase md:order-none"
+          {...partAttrs('step-label', { selected, completed })}
+        >
+          {label}
+        </span>
         <Icon
           name="check"
           size={12}
@@ -62,6 +72,7 @@ export const CheckoutStepButton = ({
             { 'opacity-0 scale-x-0': !completed },
             { 'opacity-100 scale-x-100': completed }
           )}
+          {...partAttrs('step-icon')}
         />
       </span>
     </button>

package/app-template/src/views/checkout/step-list.tsx

@@ -1,4 +1,5 @@
 import { useAppSelector } from '@akinon/next/redux/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { RootState } from '@theme/redux/store';
 import { Icon } from '@theme/components';
 import { CheckoutStepButton } from './step-button';
@@ -19,7 +20,10 @@ export const CheckoutStepList = () => {
   );
 
   return (
-    <div className="w-full flex items-center justify-center py-5 md:pl-1 md:justify-start md:py-8 lg:py-11">
+    <div
+      className="w-full flex items-center justify-center py-5 md:pl-1 md:justify-start md:py-8 lg:py-11"
+      {...partAttrs('steps')}
+    >
       <CheckoutStepButton
         number="1"
         label={t('checkout.step.shipping')}

package/app-template/src/views/checkout/steps/payment/agreements.tsx

@@ -1,6 +1,7 @@
 import useContract from '../../../../hooks/use-contract';
 import { Controller } from 'react-hook-form';
 import { Checkbox } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { useLocalization } from '@akinon/next/hooks';
 import { Trans } from '@akinon/next/components/trans';
 
@@ -22,7 +23,14 @@ const CheckoutAgreements = ({ control, fieldId, error }) => {
         control={control}
         defaultValue={false}
         render={({ field }) => (
-          <Checkbox {...field} error={error} data-testid="checkout-agreement">
+          // The stamp addresses the agreement ROW (Checkbox routes it to its
+          // label wrapper): LOOK only — the consent itself is untouchable.
+          <Checkbox
+            {...field}
+            error={error}
+            data-testid="checkout-agreement"
+            {...partAttrs('agreement')}
+          >
             <Trans
               i18nKey="checkout.agreement.content"
               components={{

package/app-template/src/views/checkout/steps/payment/index.tsx

@@ -1,6 +1,7 @@
 import SelectedPaymentOptionView from '@akinon/next/components/selected-payment-option-view';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { CheckoutPaymentOption } from '@akinon/next/types';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import clsx from 'clsx';
 import { RootState } from '@theme/redux/store';
 import PaymentOptionButtons from './payment-option-buttons';
@@ -17,11 +18,18 @@ const PaymentStep = () => {
       className={clsx('flex flex-wrap w-full', {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
+      {...partAttrs('section')}
     >
-      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto">
+      <div
+        className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto"
+        {...partAttrs('payment-options')}
+      >
         <PaymentOptionButtons />
       </div>
-      <div className="w-full border border-solid border-gray-400 bg-white">
+      <div
+        className="w-full border border-solid border-gray-400 bg-white"
+        {...partAttrs('payment-panel')}
+      >
         <SelectedPaymentOptionView />
       </div>
     </div>

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -18,6 +18,7 @@ import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
 import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { PaymentOption } from '@akinon/next/types';
 
 const creditCardFormSchema = (
@@ -409,6 +410,7 @@ const CheckoutCreditCard = () => {
               type="submit"
               disabled={isButtonDisabled}
               data-testid="checkout-credit-card-place-order"
+              {...partAttrs('place-order-button')}
             >
               <span>{t('checkout.payment.credit_card.form.button')}</span>
               <Icon

package/app-template/src/views/checkout/steps/payment/options/funds-transfer.tsx

@@ -8,6 +8,7 @@ import {
   useSetFundsTransferOptionMutation
 } from '@akinon/next/data/client/checkout';
 import { Button, Icon, Price, Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import * as yup from 'yup';
 import CheckoutAgreements from '../agreements';
 import PaymentHeader from '../payment-header';
@@ -176,6 +177,7 @@ const CheckoutFundsTransfer = () => {
             type="submit"
             disabled={isButtonDisabled}
             data-testid="checkout-bank-account-place-order"
+            {...partAttrs('place-order-button')}
           >
             <span> {t('checkout.payment.fund_transfer.button')}</span>
             <Icon

package/app-template/src/views/checkout/steps/payment/payment-header.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 
 export type PaymentHeaderProps = {
   title: string;
@@ -7,7 +8,10 @@ export type PaymentHeaderProps = {
 const PaymentHeader = ({ title }: PaymentHeaderProps) => {
   return (
     <div className="flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15">
-      <span className="text-black-800 text-lg font-medium sm:text-2xl">
+      <span
+        className="text-black-800 text-lg font-medium sm:text-2xl"
+        {...partAttrs('section-title')}
+      >
         {title}
       </span>
     </div>

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -4,6 +4,7 @@ import { RootState } from '@theme/redux/store';
 import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutPaymentOption } from '@akinon/next/types';
 import { Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
 import { useMemo } from 'react';
 
@@ -42,10 +43,20 @@ const PaymentOptionButtons = () => {
     <>
       <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
         {displayedPaymentOptions.map((option) => (
+          // The mobile radio row's typography sits on the <label> — the
+          // element the payment-option part is stamped on — so an inherited
+          // part rule actually reaches the method name. Declared on the inner
+          // span (as it was) every typography control in the panel was dead
+          // here while working on the desktop tab below, which made a
+          // template's white-on-dark selected state readable on desktop and
+          // black-on-black on every phone.
           <label
             key={`payment-option-${option.pk}`}
-            className="border px-4 py-3 mt-3 flex h-12"
+            className="border px-4 py-3 mt-3 flex h-12 text-primary-800 font-light text-lg"
             onClick={scrollToTop}
+            {...partAttrs('payment-option', {
+              selected: preOrder?.payment_option?.pk === option.pk
+            })}
           >
             <Radio
               type="radio"
@@ -55,9 +66,7 @@ const PaymentOptionButtons = () => {
               onChange={() => onClickHandler(option)}
               className="mr-2 mt-1"
             />
-            <span className="flex text-primary-800 font-light text-lg">
-              {option.name}
-            </span>
+            <span className="flex">{option.name}</span>
           </label>
         ))}
       </div>
@@ -77,6 +86,9 @@ const PaymentOptionButtons = () => {
               }
             )}
             data-testid={`checkout-payment-tab-${option.pk}`}
+            {...partAttrs('payment-option', {
+              selected: preOrder?.payment_option?.pk === option.pk
+            })}
           >
             {option.name}
           </button>

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -5,6 +5,7 @@ import { RootState } from '@theme/redux/store';
 import { useSetAddressesMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutAddressType } from '@akinon/next/types';
 import { Checkbox, Icon, Modal } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import AddressBox from './address-box';
 import { useAddAddressMutation } from '@akinon/next/data/client/address';
 import { AddressForm } from '@theme/views/account/address-form';
@@ -102,7 +103,7 @@ const Addresses = () => {
         .map((addressType) => (
           <div key={addressType.label}>
             <div className="flex items-center justify-between border-b border-gray-400 px-8 py-4">
-              <h2 className="text-2xl">
+              <h2 className="text-2xl" {...partAttrs('section-title')}>
                 {addressType.text} {t('checkout.address.address')}
               </h2>
 

package/app-template/src/views/checkout/steps/shipping/index.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { useAppSelector } from '@akinon/next/redux/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { RootState } from '@theme/redux/store';
 import Addresses from './addresses';
 import ShippingOptions from './shipping-options';
@@ -17,6 +18,7 @@ const ShippingStep = () => {
           'pointer-events-none opacity-30': isShippingStepBusy
         }
       )}
+      {...partAttrs('section')}
     >
       <Addresses />
       <ShippingOptions />

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -11,6 +11,7 @@ import {
   useSetDataSourceShippingOptionsMutation
 } from '@akinon/next/data/client/checkout';
 import { Price, Button, Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
 
@@ -267,6 +268,7 @@ const ShippingOptions: React.FC = () => {
             disabled={!steps.shipping.completed}
             onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
             data-testid="checkout-shipping-save"
+            {...partAttrs('continue-button')}
           >
             {t('checkout.address.shipping.button')}
           </Button>

package/app-template/src/views/checkout/summary.tsx

@@ -2,6 +2,7 @@ import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { RootState } from '@theme/redux/store';
 import { Price, Link } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
@@ -40,9 +41,18 @@ export const Summary = () => {
         }}
       />
       <StoreCredits />
-      <div className="flex flex-col w-full border border-solid border-gray-400">
-        <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
-          <span className="text-black-800 text-xl font-light sm:text-2xl">
+      <div
+        className="flex flex-col w-full border border-solid border-gray-400"
+        {...partAttrs('summary')}
+      >
+        <div
+          className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15"
+          {...partAttrs('summary-header')}
+        >
+          <span
+            className="text-black-800 text-xl font-light sm:text-2xl"
+            {...partAttrs('summary-title')}
+          >
             {t('checkout.summary.title')}
           </span>
           <span className="text-gray-950 text-xs">
@@ -55,6 +65,7 @@ export const Summary = () => {
             <div
               key={`summary-basketitem-${index}`}
               className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
+              {...partAttrs('summary-item')}
             >
               <Link
                 href={'#'}
@@ -104,42 +115,68 @@ export const Summary = () => {
           ))}
         </div>
         <div className="pt-3">
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>
+          <div
+            className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+            {...partAttrs('summary-row')}
+          >
+            <span {...partAttrs('summary-row-label')}>
               {t('checkout.summary.subtotal')} (
               {preOrder.basket.basketitem_set.length}{' '}
               {t('checkout.summary.items')})
             </span>
-            <span>
+            <span {...partAttrs('summary-row-value')}>
               <Price value={preOrder?.basket?.total_amount} />
             </span>
           </div>
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>{t('checkout.summary.shipping')}</span>
-            <span>
+          <div
+            className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+            {...partAttrs('summary-row')}
+          >
+            <span {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.shipping')}
+            </span>
+            <span {...partAttrs('summary-row-value')}>
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
           {parseFloat(preOrder?.loyalty_money) > 0 && (
-            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-              <span>{t('checkout.summary.loyalty_money_total')}</span>
-              <span>
+            <div
+              className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+              {...partAttrs('summary-row')}
+            >
+              <span {...partAttrs('summary-row-label')}>
+                {t('checkout.summary.loyalty_money_total')}
+              </span>
+              <span {...partAttrs('summary-row-value')}>
                 <Price value={preOrder?.loyalty_money} />
               </span>
             </div>
           )}
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>{t('checkout.summary.discounts_total')}</span>
-            <span>
+          <div
+            className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+            {...partAttrs('summary-row')}
+          >
+            <span {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.discounts_total')}
+            </span>
+            <span {...partAttrs('summary-row-value')}>
               <Price
                 value={preOrder?.basket?.total_discount_amount}
                 useNegative
               />
             </span>
           </div>
-          <div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
-            <span className="font-light">{t('checkout.summary.total')}</span>
-            <span className="min-w-max pl-4">
+          <div
+            className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3"
+            {...partAttrs('summary-total')}
+          >
+            <span className="font-light" {...partAttrs('summary-total-label')}>
+              {t('checkout.summary.total')}
+            </span>
+            <span
+              className="min-w-max pl-4"
+              {...partAttrs('summary-total-value')}
+            >
               <Price value={preOrder?.unpaid_amount} />
             </span>
           </div>
@@ -154,6 +191,7 @@ export const Summary = () => {
             <div
               className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
               onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
+              {...partAttrs('summary-edit')}
             >
               {t('checkout.summary.change')}
             </div>

package/app-template/src/views/checkout/variants/__tests__/registry.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { getCheckoutVariant, isKnownVariant } from '../registry';
+
+jest.mock('../multi-step', () => ({
+  __esModule: true,
+  default: () => <div data-testid="variant-multi-step" />
+}));
+
+jest.mock('../one-page', () => ({
+  __esModule: true,
+  default: () => <div data-testid="variant-one-page" />
+}));
+
+jest.mock('../basket-and-checkout', () => ({
+  __esModule: true,
+  default: () => <div data-testid="variant-basket-and-checkout" />
+}));
+
+/**
+ * The variant registry is the last hop before the checkout flow renders, and
+ * the value it receives is untrusted: it comes from settings.js, from the
+ * backend theme-settings widget, or (now) from a composition. A lookup that
+ * accepts inherited Object members would answer "known" for 'constructor' and
+ * then hand `dynamic()` something that is not a loader — the flow would never
+ * render and ordering would be impossible (I2). Every corpus entry must still
+ * end at a real variant component.
+ */
+const UNTRUSTED_CORPUS: unknown[] = [
+  'toString',
+  'constructor',
+  'valueOf',
+  'hasOwnProperty',
+  '__proto__',
+  '',
+  undefined,
+  42,
+  'multi-step',
+  'one-page'
+];
+
+describe('isKnownVariant', () => {
+  it('accepts only own keys of the loader map', () => {
+    expect(isKnownVariant('multi-step')).toBe(true);
+    expect(isKnownVariant('one-page')).toBe(true);
+    expect(isKnownVariant('accordion')).toBe(true);
+    expect(isKnownVariant('basket-and-checkout')).toBe(true);
+  });
+
+  it.each(
+    UNTRUSTED_CORPUS.filter(
+      (value) => value !== 'multi-step' && value !== 'one-page'
+    )
+  )('rejects %p', (value) => {
+    expect(isKnownVariant(value)).toBe(false);
+  });
+});
+
+describe('getCheckoutVariant', () => {
+  it.each(UNTRUSTED_CORPUS)('renders a real variant for %p', async (value) => {
+    const Variant = getCheckoutVariant(value as never);
+
+    render(<Variant />);
+
+    const expected =
+      value === 'one-page' ? 'variant-one-page' : 'variant-multi-step';
+
+    expect(await screen.findByTestId(expected)).toBeInTheDocument();
+  });
+
+  it('maps every known variant id to its component', async () => {
+    const Accordion = getCheckoutVariant('accordion');
+    render(<Accordion />);
+    // 'accordion' is an alias of the one-page layout.
+    expect(await screen.findByTestId('variant-one-page')).toBeInTheDocument();
+
+    const Unified = getCheckoutVariant('basket-and-checkout');
+    render(<Unified />);
+    expect(
+      await screen.findByTestId('variant-basket-and-checkout')
+    ).toBeInTheDocument();
+  });
+});