122 lines
4.5 KiB
TypeScript
122 lines
4.5 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Rewards Pages Verification', () => {
|
|
test('Home page loads without getting stuck', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/')
|
|
|
|
// Wait for page to load - should not be stuck on spinner
|
|
await expect(page.locator('h1:has-text("H2H")')).toBeVisible({ timeout: 10000 })
|
|
|
|
// The page should show content, not just a spinner
|
|
// Look for navigation links which indicate the page loaded
|
|
await expect(page.locator('text=Sports').first()).toBeVisible()
|
|
await expect(page.locator('text=Live').first()).toBeVisible()
|
|
})
|
|
|
|
test('Header Rewards dropdown works', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/')
|
|
|
|
// Find and click the Rewards dropdown
|
|
const rewardsButton = page.locator('button:has-text("Rewards")')
|
|
await expect(rewardsButton).toBeVisible()
|
|
await rewardsButton.click()
|
|
|
|
// Verify dropdown menu appears with all options
|
|
await expect(page.locator('a[href="/rewards"]:has-text("Overview")')).toBeVisible()
|
|
await expect(page.locator('a[href="/rewards/leaderboard"]')).toBeVisible()
|
|
await expect(page.locator('a[href="/rewards/achievements"]')).toBeVisible()
|
|
await expect(page.locator('a[href="/rewards/loot-boxes"]')).toBeVisible()
|
|
await expect(page.locator('a[href="/rewards/activity"]')).toBeVisible()
|
|
})
|
|
|
|
test('Rewards Overview page loads with Header', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/rewards')
|
|
|
|
// Check Header is present
|
|
await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()
|
|
|
|
// Check page title
|
|
await expect(page.locator('h1:has-text("Rewards")')).toBeVisible()
|
|
|
|
// Check page has light theme (white/light backgrounds)
|
|
const mainContent = page.locator('.bg-white').first()
|
|
await expect(mainContent).toBeVisible()
|
|
})
|
|
|
|
test('Leaderboard page loads', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/rewards/leaderboard')
|
|
|
|
// Check Header is present
|
|
await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()
|
|
|
|
// Check page content
|
|
await expect(page.locator('h1:has-text("Leaderboard")')).toBeVisible()
|
|
})
|
|
|
|
test('Achievements page shows login prompt when not authenticated', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/rewards/achievements')
|
|
|
|
// Check Header is present
|
|
await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()
|
|
|
|
// Should show sign in required message
|
|
await expect(page.locator('text=Sign In Required')).toBeVisible()
|
|
// Use more specific selector for the sign in link in the content area
|
|
await expect(page.locator('.bg-white a[href="/login"]:has-text("Sign In")')).toBeVisible()
|
|
})
|
|
|
|
test('Loot Boxes page shows login prompt when not authenticated', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/rewards/loot-boxes')
|
|
|
|
// Check Header is present
|
|
await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()
|
|
|
|
// Should show sign in required message
|
|
await expect(page.locator('text=Sign In Required')).toBeVisible()
|
|
})
|
|
|
|
test('Activity page loads', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/rewards/activity')
|
|
|
|
// Check Header is present
|
|
await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()
|
|
|
|
// Check page title
|
|
await expect(page.locator('h1:has-text("Activity")')).toBeVisible()
|
|
})
|
|
|
|
test('Navigate between rewards pages via sub-nav', async ({ page }) => {
|
|
await page.goto('http://localhost:5173/rewards')
|
|
|
|
// Click on Leaderboard in sub-nav
|
|
await page.locator('nav a[href="/rewards/leaderboard"]').click()
|
|
await expect(page).toHaveURL(/\/rewards\/leaderboard/)
|
|
|
|
// Click on Activity in sub-nav
|
|
await page.locator('nav a[href="/rewards/activity"]').click()
|
|
await expect(page).toHaveURL(/\/rewards\/activity/)
|
|
})
|
|
|
|
test('All rewards pages have consistent light theme', async ({ page }) => {
|
|
const pages = [
|
|
'/rewards',
|
|
'/rewards/leaderboard',
|
|
'/rewards/achievements',
|
|
'/rewards/loot-boxes',
|
|
'/rewards/activity'
|
|
]
|
|
|
|
for (const pagePath of pages) {
|
|
await page.goto(`http://localhost:5173${pagePath}`)
|
|
|
|
// Verify light gray background (bg-gray-50)
|
|
const body = page.locator('.min-h-screen.bg-gray-50')
|
|
await expect(body).toBeVisible()
|
|
|
|
// Verify white content boxes exist
|
|
const whiteBox = page.locator('.bg-white').first()
|
|
await expect(whiteBox).toBeVisible()
|
|
}
|
|
})
|
|
})
|