import { expect, test } from '@playwright/test'

test('navigates to and lists containers', async ({ page }) => {
  await page.route('**/api/v1/engines/1/containers', route => route.fulfill({
    contentType: 'application/json',
    body: JSON.stringify({
      containers: [
        { id: 'abc123', names: ['/web'], image: 'nginx:latest', state: 'running', status: 'Up 2 minutes' },
      ],
    }),
  }))

  await page.goto('/')
  await page.getByRole('link', { name: 'Containers' }).click()

  await expect(page).toHaveURL(/\/containers$/)
  await expect(page.getByRole('heading', { name: 'Containers' })).toBeVisible()
  await expect(page.getByRole('cell', { name: 'web' })).toBeVisible()
  await expect(page.getByRole('cell', { name: 'nginx:latest' })).toBeVisible()
})

test('shows an actionable API error', async ({ page }) => {
  await page.route('**/api/v1/engines/1/containers', route => route.fulfill({ status: 502 }))

  await page.goto('/containers')

  await expect(page.getByRole('alert')).toContainText('Containers could not be loaded')
  await expect(page.getByRole('button', { name: 'Try again' })).toBeVisible()
})