Skip to content

test(e2e): add third-party-api recipe e2e tests#3549

Open
itsjustriley wants to merge 4 commits intorecipe-test-metaobjectsfrom
recipe-test-third-party-api
Open

test(e2e): add third-party-api recipe e2e tests#3549
itsjustriley wants to merge 4 commits intorecipe-test-metaobjectsfrom
recipe-test-third-party-api

Conversation

@itsjustriley
Copy link
Contributor

@itsjustriley itsjustriley commented Mar 6, 2026

WHY are these changes introduced?

Adds e2e test coverage for the third-party-api recipe, which demonstrates integrating external GraphQL APIs (Rick & Morty API) with Oxygen's caching system. This continues the systematic testing of recipes to ensure user-facing recipe behavior is validated.

This PR is stacked on #3548 (metaobjects tests).

WHAT is this pull request doing?

Adds e2e/specs/recipes/third-party-api.spec.ts with 3 tests covering:

  • Rick & Morty characters section heading and description visibility
  • Character list rendering from the third-party API with non-empty item content
  • Existing homepage sections still rendering alongside third-party recipe content

Tests verify that the recipe successfully:

  • Adds a new section to the homepage with the expected heading text
  • Displays character data from rickandmortyapi.com in a structured list
  • Preserves existing homepage UX (for example, Recommended Products)
  • Uses resilient, user-facing assertions and semantic locator patterns

HOW to test your changes?

# Run third-party-api recipe tests only
npx playwright test --project=recipes third-party-api

# Run all recipe tests
npx playwright test --project=recipes

Checklist

  • I've read the Contributing Guidelines
  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've added a changeset if this PR contains user-facing or noteworthy changes
  • I've added tests to cover my changes
  • I've added or updated the documentation

@shopify
Copy link
Contributor

shopify bot commented Mar 6, 2026

Oxygen deployed a preview of your recipe-test-third-party-api branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment March 6, 2026 9:44 PM

Learn more about Hydrogen's GitHub integration.

Add tests verifying Rick and Morty character data from external GraphQL API displays on homepage, demonstrating cached third-party API integration.
Refactored tests to be more specific and follow best practices:

WHY:
- Initial implementation had weak assertions and duplicate setup
- Tests should verify specific user-facing elements, not just string presence
- Following Playwright best practices for test organization

WHAT CHANGED:
- Added beforeEach hook to eliminate duplicate setup
- Removed redundant second test that checked generic content length
- Added specific assertion for heading with exact text match
- Verified character list structure and count (20 characters)
- Tests now validate the specific section the recipe adds

HOW:
- Use role-based selectors for heading and list items
- Use class selector for the specific third-party-api-example section
- Assert on the exact heading text the recipe introduces
- Verify API returns 20 characters as expected
Replace brittle class and fixed-count assertions with resilient, user-facing checks scoped to the recipe section. Add a regression check that existing homepage content still renders alongside third-party API content to better reflect real UX impact.
Harden the recipe coverage so it asserts meaningful user-visible outcomes without relying on broad page-level assumptions.

Scope list checks to the recipe section anchored by its heading, require multiple visible character items with non-empty text, and verify Recommended Products renders as a visible landmark with links.
@itsjustriley itsjustriley force-pushed the recipe-test-third-party-api branch from 2556403 to d2dbaaa Compare March 6, 2026 21:42
@itsjustriley itsjustriley marked this pull request as ready for review March 6, 2026 21:51
@itsjustriley itsjustriley requested a review from a team as a code owner March 6, 2026 21:51
@binks-code-reviewer
Copy link

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

Complete - No issues

📋 History

✅ No issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant