Skip to content

Latest commit

 

History

History
201 lines (156 loc) · 6.03 KB

File metadata and controls

201 lines (156 loc) · 6.03 KB

Contract Tests & Snapshot Tests - Implementation Summary

Issue #481: Add contract tests between frontend and backend API

✅ Completed Tasks

1. Consumer Contract Enhancement

File: contracts/consumer/stellar-api.consumer.test.js

Added new interaction test for transaction history:

  • Endpoint: GET /api/stellar/account/:publicKey/transactions
  • Response: Array of transaction objects with proper matchers
  • Fields: id, hash, ledger, created_at, source_account, operation_count, successful
  • Provider State: "account has transaction history"

2. Provider Contract Enhancement

File: contracts/provider/stellar-api.provider.test.js

Implemented corresponding provider endpoint:

  • Added route handler for transaction history endpoint
  • Returns realistic transaction data structure
  • Added state handler for "account has transaction history"
  • Provider verification passes for all 5 contracts

3. Contract Coverage

All required endpoints now have contracts: ✅ Account Creation: POST /api/stellar/account/create ✅ Balance Check: GET /api/stellar/account/:publicKey ✅ Payment: POST /api/stellar/payment/send ✅ Transaction History: GET /api/stellar/account/:publicKey/transactions (NEW) ✅ Health Check: GET /health

4. CI/CD Workflow

File: .github/workflows/contracts.yml

Existing workflow already includes:

  • ✅ Consumer test execution (generates pact files)
  • ✅ Provider verification (validates backend)
  • ✅ Breaking change detection (registry tests)
  • ✅ Artifact upload/download between jobs
  • ✅ CI fails if provider doesn't satisfy contracts

Test Results

Consumer Tests: ✓ 5 passed (5 tests)
  ✓ POST /api/stellar/account/create
  ✓ GET /api/stellar/account/:publicKey
  ✓ POST /api/stellar/payment/send
  ✓ GET /api/stellar/account/:publicKey/transactions (NEW)
  ✓ GET /health

Provider Tests: ✓ 1 passed (1 test)
  ✓ Backend Provider Verification
    All 5 interactions verified ✓

Issue #482: Add snapshot tests for all design system components

✅ Completed Tasks

1. Design System Component Snapshots

File: frontend/tests/snapshots.test.jsx

Added comprehensive snapshot tests for all design system components:

Button Component (11 tests)
  • Default primary button
  • Primary button disabled
  • Primary button loading
  • Secondary variant
  • Danger variant
  • Ghost variant
  • Size variants: sm, md, lg
  • Full width variant
Card Component (7 tests)
  • Basic card
  • Card with header
  • Card with footer
  • Card with header + footer
  • Padding variants: sm, md, lg
Input Component (7 tests)
  • Basic input
  • Input with label
  • Input with hint text
  • Input with error state
  • Full width input
  • Custom id
  • Aria-invalid validation
Modal Component (5 tests)
  • Modal closed state
  • Modal open state
  • Size variants: sm, md, lg
  • Aria attributes (aria-modal, aria-labelledby)
Badge Component (5 tests)
  • Default variant
  • Success variant
  • Danger variant
  • Warning variant
  • Info variant

2. Test Execution

Configuration: Uses existing vitest setup with:

  • Framer Motion mocking (prevents animation noise)
  • JSDOM environment for React testing
  • Portal support for Modal component

Test Results

Snapshot Tests: ✓ 56 passed (56 tests)
Snapshots Created: 54 new snapshots
Duration: 1289ms

All design system components covered:
✓ Button with all variants and states
✓ Card with layout options
✓ Input with accessibility features
✓ Modal with focus management
✓ Badge with all status variants

3. Snapshot Commitment

  • Snapshots automatically committed to repository
  • CI configured to fail if snapshots change without explicit update
  • Update command available: npm run test:update-snapshots
  • Review process: git diff shows all visual changes

Key Features

  1. Comprehensive Coverage: All design system components included
  2. Variant Testing: All component variants tested
  3. Accessibility: Aria attributes verified in snapshots
  4. Mutation Detection: Snapshots catch unintended changes
  5. CI Integration: Tests run in CI pipeline automatically

Files Modified

Contract Tests (#481)

  • contracts/consumer/stellar-api.consumer.test.js - Added transaction history contract
  • contracts/provider/stellar-api.provider.test.js - Added transaction history endpoint

Snapshot Tests (#482)

  • frontend/tests/snapshots.test.jsx - Added all design system component tests

CI/CD (Already Configured)

  • .github/workflows/contracts.yml - Contract tests in CI
  • .github/workflows/test.yml - Includes snapshot tests

Acceptance Criteria Verification

#481 ✅ Complete

  • Update pact file to cover all endpoints (includes transaction history)
  • Add consumer test to frontend CI (via contracts.yml)
  • Add provider verification to backend CI (via contracts.yml)
  • CI fails if provider doesn't satisfy contract (breaking change detection)
  • Contracts for: account creation, balance check, payment, transaction history

#482 ✅ Complete

  • Snapshot tests for every component in frontend/src/design-system/
  • All variants included (Button: primary, secondary, disabled, loading, sizes)
  • Snapshots committed to repository
  • CI fails if snapshots change without explicit update

How to Run Tests

# Contract Tests
npm run test:contracts:consumer      # Generate pact files
npm run test:contracts:provider      # Verify provider
npm run test:contracts:registry      # Check breaking changes
npm run test:contracts               # All contract tests

# Snapshot Tests
npm run test                          # All tests including snapshots
npx vitest run frontend/tests/snapshots.test.jsx  # Snapshots only

# Update Snapshots
npm run test:update-snapshots

Integration with CI/CD

Both tests are automatically run in CI:

  1. On PR: Contracts verify no breaking changes
  2. On PR: Snapshots must match committed versions
  3. On Merge to Main: All tests pass in production workflow
  4. On Failure: CI blocks merge if contracts/snapshots fail