// checkout/src/components/CartSummary.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { CartSummary } from './CartSummary'

// All dependencies are local to the checkout remote or mocked
const mockItems = [
  { id: '1', name: 'Laptop', price: 999, quantity: 1 },
  { id: '2', name: 'Mouse',  price: 49,  quantity: 2 },
]

describe('CartSummary', () => {
  it('calculates total correctly with quantity multipliers', () => {
    render(<CartSummary items={mockItems} onCheckout={vi.fn()} />)
    // 999*1 + 49*2 = 1097
    expect(screen.getByTestId('cart-total')).toHaveTextContent('$1,097.00')
  })

  it('calls onCheckout with current items on button click', async () => {
    const onCheckout = vi.fn()
    render(<CartSummary items={mockItems} onCheckout={onCheckout} />)
    await userEvent.click(screen.getByRole('button', { name: /proceed to checkout/i }))
    expect(onCheckout).toHaveBeenCalledWith(mockItems)
  })
})

// checkout/src/tests/checkout-integration.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import { server } from '../mocks/server'  // MSW server
import { http, HttpResponse } from 'msw'
import CheckoutApp from '../App'

// Minimal host shell for testing — no federation runtime required
function TestShell({ children }: { children: React.ReactNode }) {
  return (
    <MemoryRouter initialEntries={['/checkout/cart']}>
      <AuthContext.Provider value={{ user: mockUser, isAuthenticated: true }}>
        {children}
      </AuthContext.Provider>
    </MemoryRouter>
  )
}

describe('Checkout Remote — Integration', () => {
  it('renders cart items from the cart API', async () => {
    server.use(
      http.get('/api/checkout/cart', () =>
        HttpResponse.json({ items: mockItems, total: 1097 })
      )
    )

    render(<TestShell><CheckoutApp /></TestShell>)

    await waitFor(() => {
      expect(screen.getByText('Laptop')).toBeInTheDocument()
      expect(screen.getByText('$1,097.00')).toBeInTheDocument()
    })
  })

  it('dispatches cart:updated event on checkout completion', async () => {
    const eventSpy = vi.fn()
    window.addEventListener('cart:updated', eventSpy)

    render(<TestShell><CheckoutApp /></TestShell>)

    // ... complete checkout flow ...

    await waitFor(() => {
      expect(eventSpy).toHaveBeenCalledWith(
        expect.objectContaining({ detail: { itemCount: 0 } })
      )
    })

    window.removeEventListener('cart:updated', eventSpy)
  })
})

// shell/src/contracts/checkout-cart.pact.ts
import { pactWith } from 'jest-pact'
import { like, string, integer } from '@pact-foundation/pact/src/dsl/matchers'

// Tested with @pact-foundation/pact v12.x
pactWith(
  { consumer: 'shell', provider: 'checkout', logLevel: 'warn' },
  (provider) => {
    describe('Cart component contract', () => {
      beforeEach(() =>
        provider.addInteraction({
          state: 'a cart with 2 items exists',
          uponReceiving: 'a request to render Cart with valid props',
          withRequest: {
            // The consumer's expectation of what props Cart accepts
            component: 'Cart',
            props: {
              onCheckout: like(Function),
            },
          },
          willRespondWith: {
            // The provider must expose a Cart component with these characteristics
            renders: true,
            emits: [
              {
                event: 'cart:updated',
                detail: { itemCount: integer() },
              },
            ],
          },
        })
      )

      it('Shell can render Checkout/Cart and receive cart:updated events', async () => {
        // Consumer test: shell mounts Cart and verifies the interface
        const { Cart } = await import('checkout/Cart')
        const onCheckout = vi.fn()
        render(<Cart onCheckout={onCheckout} />)

        // Verify the consumer's expectations are met
        expect(screen.getByTestId('cart-container')).toBeInTheDocument()
      })
    })
  }
)

// checkout/src/contracts/cart.provider.test.ts
import { Verifier } from '@pact-foundation/pact'

// Tested with @pact-foundation/pact v12.x
describe('Checkout remote — contract verification', () => {
  it('satisfies all consumer contracts from Pact Broker', async () => {
    const verifier = new Verifier({
      provider: 'checkout',
      // Pact Broker URL — where consumer contracts are published
      pactBrokerUrl: process.env.PACT_BROKER_URL,
      pactBrokerToken: process.env.PACT_BROKER_TOKEN,
      // Provider verification: does our Cart satisfy the shell's expectations?
      providerBaseUrl: 'http://localhost:3001',  // checkout dev server
      publishVerificationResult: true,
      providerVersion: process.env.GIT_SHA,
    })

    await verifier.verifyProvider()
  })
})

# Add to checkout CI pipeline — can-i-deploy check before any deployment
npx pact-broker can-i-deploy \
  --pacticipant checkout \
  --version $GIT_SHA \
  --to-environment production \
  --broker-base-url $PACT_BROKER_URL

# Exits non-zero if any consumer's contract is not satisfied
# This prevents the checkout remote from deploying a breaking change

// checkout/src/components/Cart.tsx — provider changes a prop name
interface CartProps {
  // ❌ Renamed: itemCount → cartCount (breaking change)
  cartCount: number      // was: itemCount
  onCheckout: () => void
}
export function Cart({ cartCount, onCheckout }: CartProps) { /* ... */ }

# shell CI: dts-plugin downloads new checkout type bundle
# TypeScript compilation catches the breaking change immediately

npx tsc --noEmit
# error TS2322: Type '{ itemCount: number; onCheckout: () => void; }' is not
#              assignable to type 'CartProps'.
#   Object literal may only specify known properties, and 'itemCount' does not
#   exist in type 'CartProps'. Did you mean to write 'cartCount'?

// tests/e2e/critical-journeys.spec.ts — Playwright
// These are the ONLY journeys that justify E2E scope

test.describe('Critical User Journeys', () => {
  test('complete purchase — guest checkout to order confirmation', async ({ page }) => {
    // Tests: shell routing → catalog remote loads → checkout remote loads →
    //        auth event propagation → order confirmation renders
    await page.goto('/catalog')
    await page.click('[data-testid="product-laptop"]')
    await page.click('[data-testid="add-to-cart"]')
    await page.click('[data-testid="checkout-button"]')
    // ... complete checkout ...
    await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible()
  })

  test('shell loads all three remotes without errors', async ({ page }) => {
    // Tests: no remote crashes, no Error Boundary fallbacks rendered
    await page.goto('/')
    await expect(page.locator('[data-testid="remote-error-boundary"]')).not.toBeVisible()
  })

  test('auth signout propagates to all mounted remotes', async ({ page }) => {
    await loginUser(page)
    await page.goto('/checkout/cart')
    await page.click('[data-testid="signout-button"]')
    // All remotes should reflect signed-out state
    await expect(page.locator('[data-testid="cart-user-name"]')).not.toBeVisible()
    await expect(page.locator('[data-testid="catalog-user-icon"]')).not.toBeVisible()
  })
})

// catalog/src/tests/visual/ProductCard.test.ts — Playwright component test
import { test, expect } from '@playwright/experimental-ct-react'
import { ProductCard } from '../components/ProductCard'

test('ProductCard renders correctly without shell styles loaded', async ({ mount }) => {
  const component = await mount(
    <ProductCard
      name="Laptop Pro 15"
      price={1299}
      rating={4.5}
      imageUrl="/test-assets/laptop.jpg"
    />
  )
  // Snapshot test — any style bleed from shell or other remotes causes diff
  await expect(component).toHaveScreenshot('product-card-isolated.png')
})