feat: explore tab, React Query data layer, programs, sync, analytics, testing infrastructure
- Replace browse tab with Supabase-connected explore tab with filters - Add React Query for data fetching with loading states - Add 3 structured programs with weekly progression - Add Supabase anonymous auth sync service - Add PostHog analytics with screen tracking and events - Add comprehensive test strategy (Vitest + Maestro E2E) - Add RevenueCat subscription system with DEV simulation - Add i18n translations for new screens (EN/FR/DE/ES) - Add data deletion modal, sync consent modal - Add assessment screen and program routes - Add GitHub Actions CI workflow - Update activity store with sync integration
This commit is contained in:
Millian Lamiaux
160
admin-web/e2e/trainers.spec.ts
Normal file
160
admin-web/e2e/trainers.spec.ts
Normal file
@@ -0,0 +1,160 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('Trainers List Page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/trainers')
|
||||
})
|
||||
|
||||
test('should display trainers page header', async ({ page }) => {
|
||||
const heading = page.getByRole('heading', { name: /trainers|tabatafit admin/i })
|
||||
await expect(heading).toBeVisible()
|
||||
})
|
||||
|
||||
test('should have Add Trainer button', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
const addButton = page.getByRole('link', { name: /add trainer/i }).or(
|
||||
page.getByRole('button', { name: /add trainer/i })
|
||||
)
|
||||
await expect(addButton).toBeVisible()
|
||||
})
|
||||
|
||||
test('should display trainer cards or empty state', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
// Wait for loading to finish
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
// Should show either trainer cards or empty state
|
||||
const hasTrainerCards = await page.locator('[class*="grid"]').locator('[class*="bg-neutral-900"]').count() > 0
|
||||
const hasEmptyState = await page.getByText(/no trainers yet/i).isVisible().catch(() => false)
|
||||
const hasError = await page.getByText(/failed to load/i).isVisible().catch(() => false)
|
||||
|
||||
expect(hasTrainerCards || hasEmptyState || hasError).toBeTruthy()
|
||||
})
|
||||
|
||||
test('should display trainer name and specialty on cards', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
// Wait for loading to finish
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
// If there are trainer cards, check they have name and specialty
|
||||
const cards = page.locator('[class*="bg-neutral-900"]').filter({ has: page.locator('h3') })
|
||||
const count = await cards.count()
|
||||
|
||||
if (count > 0) {
|
||||
const firstCard = cards.first()
|
||||
// Card should have a name (h3 element)
|
||||
await expect(firstCard.locator('h3')).toBeVisible()
|
||||
// Card should have specialty text
|
||||
const specialtyText = firstCard.locator('p').first()
|
||||
await expect(specialtyText).toBeVisible()
|
||||
}
|
||||
})
|
||||
|
||||
test('should show workout count on trainer cards', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
// Check for "X workouts" text
|
||||
const workoutCountText = page.getByText(/\d+ workouts/i)
|
||||
const visible = await workoutCountText.first().isVisible().catch(() => false)
|
||||
|
||||
// Only assert if trainers exist
|
||||
if (visible) {
|
||||
await expect(workoutCountText.first()).toBeVisible()
|
||||
}
|
||||
})
|
||||
|
||||
test('should have edit and delete action buttons on cards', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
// Find edit and delete buttons (icon buttons with svg)
|
||||
const editButtons = page.locator('button').filter({ has: page.locator('svg.lucide-edit') })
|
||||
const deleteButtons = page.locator('button').filter({ has: page.locator('svg.lucide-trash-2') })
|
||||
|
||||
const editCount = await editButtons.count()
|
||||
const deleteCount = await deleteButtons.count()
|
||||
|
||||
// If trainers are displayed, they should have action buttons
|
||||
if (editCount > 0) {
|
||||
expect(editCount).toBeGreaterThan(0)
|
||||
expect(deleteCount).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Trainers Delete Dialog', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/trainers')
|
||||
})
|
||||
|
||||
test('should open delete confirmation dialog', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
const deleteButtons = page.locator('button').filter({ has: page.locator('svg.lucide-trash-2') })
|
||||
const count = await deleteButtons.count()
|
||||
|
||||
if (count > 0) {
|
||||
await deleteButtons.first().click()
|
||||
|
||||
// Dialog should appear
|
||||
await expect(page.getByRole('heading', { name: /delete trainer/i })).toBeVisible()
|
||||
await expect(page.getByText(/are you sure/i)).toBeVisible()
|
||||
await expect(page.getByRole('button', { name: /cancel/i })).toBeVisible()
|
||||
await expect(page.getByRole('button', { name: /^delete$/i })).toBeVisible()
|
||||
}
|
||||
})
|
||||
|
||||
test('should close delete dialog on Cancel', async ({ page }) => {
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
const deleteButtons = page.locator('button').filter({ has: page.locator('svg.lucide-trash-2') })
|
||||
const count = await deleteButtons.count()
|
||||
|
||||
if (count > 0) {
|
||||
await deleteButtons.first().click()
|
||||
await expect(page.getByRole('heading', { name: /delete trainer/i })).toBeVisible()
|
||||
|
||||
// Click cancel
|
||||
await page.getByRole('button', { name: /cancel/i }).click()
|
||||
|
||||
// Dialog should close
|
||||
await expect(page.getByRole('heading', { name: /delete trainer/i })).not.toBeVisible()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Trainers Error State', () => {
|
||||
test('should show error state with retry button on failure', async ({ page }) => {
|
||||
// This test verifies the error UI exists in the component
|
||||
// In actual failure scenarios, it would show the error state
|
||||
await page.goto('/trainers')
|
||||
|
||||
const url = page.url()
|
||||
if (!url.includes('/trainers')) return
|
||||
|
||||
await page.waitForSelector('[class*="animate-spin"]', { state: 'detached', timeout: 10000 }).catch(() => {})
|
||||
|
||||
// Check if error state is shown (only if Supabase is unreachable)
|
||||
const hasError = await page.getByText(/failed to load trainers/i).isVisible().catch(() => false)
|
||||
if (hasError) {
|
||||
await expect(page.getByRole('button', { name: /try again/i })).toBeVisible()
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user