test(cypress): add network failure regression tests and card fixtures

[akash-c-k]

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

Adds fully mocked network failure tests covering SDK error handling regressions from PRs #1375 (wrong complete value after failure), #1389 (SDK auth header truncation), and #1340 (missing confirm headers). Also adds stripeSpecialCards, givexGiftCardDetails, achBankTransferDetails, and pixTransferDetails fixtures to cards.ts for use by upcoming test PRs.

Key Changes
network-failure-e2e-test.cy.ts — 7 new tests covering SDK error handling across three describe blocks
cards.ts — 4 new fixture exports: stripeSpecialCards, givexGiftCardDetails, achBankTransferDetails, pixTransferDetails (used by PRs adding Klarna, ACH, PIX, and Gift Card tests)

Regressions Covered
PR #1375 — Wrong complete value triggered after payment failure; verified submit re-enables after 402/500 confirm response
PR #1389 — SDK authorization header truncation causing silent failures; verified api-key header is present and starts with pk_
PR #1340 — Incorrect headers on confirm call in V2; verified Content-Type: application/json and non-empty api-key

Test Scenarios
Payment Confirm API Errors

• Submit button re-enabled + no uncaught JS exceptions when confirm returns 500
• Submit button re-enabled after 402 card decline
• Declined card shows a visible declined message (live sandbox call)
• Submit button disabled during in-flight request (loading state)

Payment Methods API Errors

• Payment element renders (no blank page) when payment_methods returns 503
• Page not blank when payment_methods returns 500

Header Regression Tests

• payment_methods request includes well-formed api-key header (/^pk_/)
• Confirm call includes Content-Type: application/json and non-empty api-key

How did you test it?

All 7 tests run headlessly via cypress run --spec cypress/e2e/network-failure-e2e-test.cy.ts

Checklist

• I ran npm run re:build
• I reviewed submitted code
• I added unit tests for my changes where possible

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
cypress-tests/cypress/e2e/network-failure-e2e-test.cy.ts	0% smaller
cypress-tests/cypress/support/cards.ts	0% smaller

[aritro2002]

🔍 Code Review by opencode

Status: ✅ Approved

---

📋 Summary

Adds network failure regression tests and new payment method fixtures for Cypress E2E testing.

File	Changes
network-failure-e2e-test.cy.ts	7 new tests covering error handling
cards.ts	4 new fixture exports

---

✅ What's Excellent

Aspect	Status
Covers 3 regression scenarios (PR #1375, #1389, #1340)	✅
Tests both confirm and payment_methods failures	✅
Header validation tests for auth issues	✅
Submit button state verification	✅
No arbitrary waits in critical paths	✅
Good fixture reusability	✅
Build passes	✅
ESLint clean	✅

---

🔍 Test Coverage Analysis

Payment Confirm Errors (4 tests):

• ✓ 500 error handling
• ✓ 402 card decline
• ✓ Live sandbox decline message
• ✓ Loading state (button disabled during request)

Payment Methods Errors (2 tests):

• ✓ 503 service unavailable
• ✓ 500 internal error

Header Regressions (2 tests):

• ✓ PR fix: sdk authorization getting truncated #1389: api-key header format (/^pk_/)
• ✓ PR fix: correct headers for confirm call v2 #1340: Content-Type and api-key on confirm

---

💡 Minor Suggestions (Non-blocking)

1. Expiry Input Typing (Lines 69-72, 108-111, 156-159, 224-227)

// Current pattern (repeated 4x):
.type(card_exp_month);
.type(card_exp_year);

// Better:
.type(`${card_exp_month}${card_exp_year}`);

2. Consider extracting common setup:
The card input typing is duplicated across 4 tests. Could create a helper:

const fillCardDetails = (card) => {
  getIframeBody().find(`[data-testid=${testIds.cardNoInputTestId}]`).type(card.cardNo);
  getIframeBody().find(`[data-testid=${testIds.expiryInputTestId}]`).type(`${card.card_exp_month}${card.card_exp_year}`);
  getIframeBody().find(`[data-testid=${testIds.cardCVVInputTestId}]`).type(card.cvc);
};

---

🎯 Regression Coverage Verification

PR	Issue	Test
#1375	Submit not re-enabled after failure	Lines 40-75, 78-118
#1389	SDK auth header truncation	Lines 226-244
#1340	Missing confirm headers	Lines 247-277

All regressions are properly covered with specific assertions.

---

Verification

npm run re:build      # ✅ Passes
npm run test:hooks    # ✅ Passes

---

Next Steps

1. Address minor code duplication in follow-up if desired
2. Run full suite: cd cypress-tests && npx cypress run
3. Consider adding to CI pipeline

This PR is ready to merge - excellent test coverage for critical error handling paths.

---

Reviewed by opencode AI using hyperswitch-web skill guidelines