fix(catalyst): Fix WishlistDetails page from exceeding complexity limit, fix e2e tests

[jordanarldt]

What/Why?

Fix the account/wishlist/[id] pages from exceeding the GraphQL complexity limit. There was a PR authored previously that added additional data to the ProductCardFragment which ended up breaking the Wishlist Details page.

Testing

Manual testing, automated e2e tests

All e2e tests for wishlists pass:

Migration

Step 1: Update wishlist GraphQL fragments

In core/components/wishlist/fragment.ts, replace the WishlistItemProductFragment to use explicit fields instead of ProductCardFragment:

export const WishlistItemProductFragment = graphql(
  `
    fragment WishlistItemProductFragment on Product {
      entityId
      name
      defaultImage {
        altText
        url: urlTemplate(lossy: true)
      }
      path
      brand {
        name
        path
      }
      reviewSummary {
        numberOfReviews
        averageRating
      }
      sku
      showCartAction
      inventory {
        isInStock
      }
      availabilityV2 {
        status
      }
      ...PricingFragment
    }
  `,
  [PricingFragment],
);

Remove ProductCardFragment from all fragment dependencies in the same file.

Step 2: Update product card transformer

In core/data-transformers/product-card-transformer.ts:

1. Import the WishlistItemProductFragment:

   import { WishlistItemProductFragment } from '~/components/wishlist/fragment';

2. Update the singleProductCardTransformer function signature to accept both fragment types:

   product: ResultOf<typeof ProductCardFragment | typeof WishlistItemProductFragment>

3. Add a conditional check for the inventoryMessage field:

   inventoryMessage:
     'variants' in product
       ? getInventoryMessage(product, outOfStockMessage, showBackorderMessage)
       : undefined,

4. Update the productCardTransformer function signature similarly:

   products: Array<ResultOf<typeof ProductCardFragment | typeof WishlistItemProductFragment>>

Step 3: Fix wishlist e2e tests

In core/tests/ui/e2e/account/wishlists.spec.ts, update label selectors to use { exact: true } for specificity:

Update all locators for the wishlist name input selectors:

- page.getByLabel(t('Form.nameLabel'))
+ page.getByLabel(t('Form.nameLabel'), { exact: true })

Step 4: Fix mobile wishlist e2e tests

In core/tests/ui/e2e/account/wishlists.mobile.spec.ts, update translation calls to use namespace prefixes:

1. Update the translation initialization:

- const t = await getTranslations('Account.Wishlist');
+ const t = await getTranslations();

2. Update all translation keys to include the namespace:

- await locator.getByRole('button', { name: t('actionsTitle') }).click();
- await page.getByRole('menuitem', { name: t('share') }).click();
+ await locator.getByRole('button', { name: t('Wishlist.actionsTitle') }).click();
+ await page.getByRole('menuitem', { name: t('Wishlist.share') }).click();

- await expect(page.getByText(t('shareSuccess'))).toBeVisible();
+ await expect(page.getByText(t('Wishlist.shareSuccess'))).toBeVisible();

[changeset-bot]

🦋 Changeset detected

Latest commit: 85fd334

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@bigcommerce/catalyst-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
catalyst	Ready	Preview, Comment	Jan 12, 2026 11:02pm