Skip to content

test(recipes): add e2e tests for infinite-scroll recipe#3557

Open
itsjustriley wants to merge 4 commits intorecipe-test-setup-cleanfrom
recipe-test-infinite-scroll-clean
Open

test(recipes): add e2e tests for infinite-scroll recipe#3557
itsjustriley wants to merge 4 commits intorecipe-test-setup-cleanfrom
recipe-test-infinite-scroll-clean

Conversation

@itsjustriley
Copy link
Contributor

@itsjustriley itsjustriley commented Mar 10, 2026

WHY are these changes introduced?

Adds e2e tests for the infinite-scroll recipe, building on the recipe testing infrastructure from #3492.

WHAT is this pull request doing?

  • Add InfiniteScrollUtil fixture for infinite scroll interactions
  • Create 7 passing tests covering infinite scroll functionality
  • Fix infinite-scroll recipe package.json patch (catalog: format)
  • Extend recipe fixture to support mockShop as storeKey option
  • Use expect.poll() on product counts instead of networkidle/timeouts

Tests cover:

  • Initial product loading and load more button visibility
  • Manual loading (clicking button)
  • Automatic loading via Intersection Observer (core feature)
  • URL parameter updates and history management (replace mode)
  • Scroll position preservation

Note on PreviousLink: The recipe includes a PreviousLink component, but it's not tested because infinite scroll accumulates products forward (1-8, then 1-16, then 1-24...). There's no "previous page" in typical infinite scroll UX - users scroll up to see earlier products. The PreviousLink would only appear when manually navigating to cursor-based URLs.

HOW to test your changes?

```bash
pnpm run build
npx playwright test e2e/specs/recipes/infinite-scroll.spec.ts --project=recipes --workers=1
```

All 7 tests should pass.

Checklist

  • I've read the Contributing Guidelines
  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've added tests to cover my changes

@shopify
Copy link
Contributor

shopify bot commented Mar 10, 2026 •
edited
Loading

Oxygen deployed a preview of your recipe-test-infinite-scroll-clean branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment March 19, 202611:34 AM

Learn more about Hydrogen's GitHub integration.

@itsjustriley itsjustriley mentioned this pull request Mar 10, 2026
Closed
5 tasks
@itsjustriley itsjustriley marked this pull request as ready for review March 11, 2026 13:28
@itsjustriley itsjustriley requested a review from a team as a code owner March 11, 2026 13:28
@binks-code-reviewer
Copy link

binks-code-reviewer bot commented Mar 11, 2026

🤖 Code Review · #projects-dev-ai for questions
React with 👍/👎 or reply — all feedback helps improve the agent.

✅ Complete - No issues

📋 History

✅ No issues

@itsjustriley itsjustriley force-pushed the recipe-test-infinite-scroll-clean branch from 33d0b4f to 2819265 Compare March 11, 2026 16:33
@itsjustriley itsjustriley force-pushed the recipe-test-infinite-scroll-clean branch from a71e9b1 to 068eb22 Compare March 11, 2026 19:46
kdaviduik
kdaviduik previously requested changes Mar 16, 2026
View reviewed changes
@itsjustriley itsjustriley force-pushed the recipe-test-setup-clean branch 2 times, most recently from 2e61d13 to c93cac7 Compare March 17, 2026 11:28
@itsjustriley itsjustriley marked this pull request as draft March 17, 2026 12:25
@itsjustriley itsjustriley force-pushed the recipe-test-infinite-scroll-clean branch 2 times, most recently from 1cb21e1 to 02d05a3 Compare March 17, 2026 12:59
@itsjustriley itsjustriley marked this pull request as ready for review March 17, 2026 15:43
@itsjustriley itsjustriley force-pushed the recipe-test-setup-clean branch from c93cac7 to ea7680a Compare March 18, 2026 13:09
@itsjustriley
fix(e2e): use atomic rename to prevent parallel workers from reading …
5df1e07 
…incomplete fixtures

Recipe fixture generation now builds into a staging directory (.tmp suffix)
and atomically renames to the final path only after install completes.

Without this, parallel Playwright workers could see pathExists() === true
on a fixture directory that was still mid-install, then launch a dev server
against an incomplete node_modules tree.
@itsjustriley
fix(a11y): add aria-hidden to decorative arrows in PaginatedResourceS…
387d2e0 
…ection

Screen readers were announcing the "↑" and "↓" arrow characters in the
"Load previous" / "Load more" links as "up-pointing arrow" / "down-pointing
arrow", adding noise to the navigation experience.

Wraps each arrow in <span aria-hidden="true"> so they remain visible
but are excluded from the accessible name. Also fixes JSDoc grammar
("encapsulate" → "encapsulates").
@itsjustriley
test(recipes): add infinite-scroll recipe e2e tests
a6440e0 
Adds 8 Playwright tests validating the infinite-scroll recipe's collection
page behavior against the preview storefront fixture store.

Coverage:
- Initial product loading and "Load more" button visibility
- Manual load-more interaction (product count increase + URL param update)
- Direct URL navigation — simulates a shared link to "page 2" and verifies
  the "Load previous" link appears (no accumulated location.state)
- Automatic loading via Intersection Observer when scrolling load-more into view
- History replace mode (no history length growth after scroll-triggered load)
- Scroll position preservation across pagination loads

Key design decisions:
- Viewport constrained to 400px height (SCROLL_TEST_VIEWPORT) for scroll tests
  so the load-more button reliably starts below the fold on any CI runner
- InfiniteScrollUtil fixture hides URL polling, locator details, and param
  knowledge behind named methods (waitForUrlToContainPaginationParam, etc.)
- Custom poll error messages for CI debuggability
- Shared-link test captures a real paginated URL via load-more cycle rather
  than hardcoding a cursor value
@itsjustriley itsjustriley force-pushed the recipe-test-infinite-scroll-clean branch from 02d05a3 to a6440e0 Compare March 18, 2026 13:10
@itsjustriley itsjustriley requested a review from kdaviduik March 18, 2026 14:52
kdaviduik
kdaviduik reviewed Mar 19, 2026
View reviewed changes
@kdaviduik kdaviduik dismissed their stale review March 19, 2026 04:02

so that if this gets an approval from Freddie tomorrow before I start work you'll be able to merge this (remaining blockers are trivial)

@itsjustriley
fix(e2e): address PR #3557 review feedback
a4aec0a 
Why: PR review identified four issues — a missing changeset package,
an orphaned patch file, a vacuously-passing scroll assertion, and
a grammatically broken JSDoc comment.

How:
- Add missing @shopify/create-hydrogen to changeset (required by
  skeleton bundling chain rules)
- Delete orphaned package.json.f30b0a.patch (recipe.yaml references
  acbf33, not f30b0a)
- Add expect(initialScrollY).toBeGreaterThan(0) precondition to
  the scroll-preservation test so it fails loudly if
  scrollIntoViewIfNeeded() silently no-ops
- Rewrite changeset description to accurately reflect the
  aria-hidden change (not the landmark addition)
- Fix JSDoc grammar: "encapsulates how the previous and next
  behaviors" → "encapsulates the previous and next pagination
  behaviors"
@itsjustriley itsjustriley marked this pull request as draft March 19, 2026 11:32
@itsjustriley itsjustriley marked this pull request as ready for review March 19, 2026 12:02
@itsjustriley itsjustriley requested a review from kdaviduik March 19, 2026 12:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andguy95 andguy95 andguy95 approved these changes

@kdaviduik kdaviduik Awaiting requested review from kdaviduik

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@itsjustriley @kdaviduik @andguy95