admin felület különválasztva
This commit is contained in:
Roo
217
frontend_app/tests/e2e/landing-neo-glassmorphism.spec.ts
Normal file
217
frontend_app/tests/e2e/landing-neo-glassmorphism.spec.ts
Normal file
@@ -0,0 +1,217 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('Neo-Glassmorphism Landing Page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Navigate to the landing page
|
||||
await page.goto('/')
|
||||
})
|
||||
|
||||
test('should display sticky header with logo and button', async ({ page }) => {
|
||||
// Check sticky header exists
|
||||
const header = page.locator('header')
|
||||
await expect(header).toBeVisible()
|
||||
|
||||
// Verify logo SVG icons are present
|
||||
const compassIcon = header.locator('svg').first()
|
||||
await expect(compassIcon).toBeVisible()
|
||||
|
||||
// Verify "Garázs Nyitása" button
|
||||
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
||||
await expect(openGarageBtn).toBeVisible()
|
||||
|
||||
// Take screenshot of header
|
||||
await header.screenshot({ path: 'test-results/screenshots/header-sticky.png' })
|
||||
})
|
||||
|
||||
test('should display three asymmetric floating cards', async ({ page }) => {
|
||||
// Wait for page to fully load
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// Card 1: HUD Costs (should contain "HUD Költségek" and "25.000 Ft")
|
||||
const hudCard = page.locator('text=HUD Költségek').locator('..')
|
||||
await expect(hudCard).toBeVisible()
|
||||
await expect(page.locator('text=25.000 Ft')).toBeVisible()
|
||||
|
||||
// Card 2: Flotta Radar (should contain "Flotta Radar" and vehicle counts)
|
||||
const fleetCard = page.locator('text=Flotta Radar').locator('..')
|
||||
await expect(fleetCard).toBeVisible()
|
||||
await expect(page.locator('text=Aktív')).toBeVisible()
|
||||
|
||||
// Card 3: Gamification (should contain "Gamifikáció" and "3450")
|
||||
const gamificationCard = page.locator('text=Gamifikáció').locator('..')
|
||||
await expect(gamificationCard).toBeVisible()
|
||||
await expect(page.locator('text=3450')).toBeVisible()
|
||||
await expect(page.locator('text=Usta Szerelő')).toBeVisible()
|
||||
|
||||
// Take full page screenshot showing all cards
|
||||
await page.screenshot({
|
||||
path: 'test-results/screenshots/landing-floating-cards.png',
|
||||
fullPage: true
|
||||
})
|
||||
})
|
||||
|
||||
test('should display hero content with gradient background', async ({ page }) => {
|
||||
// Check main heading
|
||||
const heading = page.locator('h1')
|
||||
await expect(heading).toContainText('Digitális Flotta')
|
||||
await expect(heading).toContainText('Menedzsment')
|
||||
|
||||
// Check subheading
|
||||
await expect(page.locator('text=Valós idejű költségkövetés')).toBeVisible()
|
||||
|
||||
// Check CTA button
|
||||
const ctaButton = page.getByRole('button', { name: /Kezdjük el/i })
|
||||
await expect(ctaButton).toBeVisible()
|
||||
|
||||
// Verify gradient background is applied (check computed styles)
|
||||
const mainContainer = page.locator('div').first()
|
||||
const bgColor = await mainContainer.evaluate((el) =>
|
||||
window.getComputedStyle(el).backgroundImage
|
||||
)
|
||||
expect(bgColor).toContain('gradient')
|
||||
})
|
||||
|
||||
test('should open login modal when clicking "Garázs Nyitása"', async ({ page }) => {
|
||||
// Modal should not be visible initially
|
||||
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
||||
await expect(modal).not.toBeVisible()
|
||||
|
||||
// Click "Garázs Nyitása" button
|
||||
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
||||
await openGarageBtn.click()
|
||||
|
||||
// Wait for modal to appear
|
||||
await expect(modal).toBeVisible()
|
||||
|
||||
// Verify modal content
|
||||
await expect(page.locator('text=Lépj be a garázsodba')).toBeVisible()
|
||||
await expect(page.getByLabel(/Email cím/i)).toBeVisible()
|
||||
await expect(page.getByLabel(/Jelszó/i)).toBeVisible()
|
||||
|
||||
// Take screenshot of open modal
|
||||
await page.screenshot({
|
||||
path: 'test-results/screenshots/login-modal-open.png',
|
||||
fullPage: false
|
||||
})
|
||||
})
|
||||
|
||||
test('should close modal when clicking backdrop', async ({ page }) => {
|
||||
// Open modal
|
||||
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
||||
await openGarageBtn.click()
|
||||
|
||||
// Wait for modal
|
||||
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
||||
await expect(modal).toBeVisible()
|
||||
|
||||
// Click backdrop (outside modal)
|
||||
const backdrop = page.locator('.fixed.inset-0').first()
|
||||
await backdrop.click({ position: { x: 10, y: 10 } })
|
||||
|
||||
// Modal should close
|
||||
await expect(modal).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('should close modal when clicking X button', async ({ page }) => {
|
||||
// Open modal
|
||||
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
||||
await openGarageBtn.click()
|
||||
|
||||
// Wait for modal
|
||||
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
||||
await expect(modal).toBeVisible()
|
||||
|
||||
// Click close button (X icon)
|
||||
const closeBtn = page.locator('button').filter({ has: page.locator('svg line[x1="18"]') }).first()
|
||||
await closeBtn.click()
|
||||
|
||||
// Modal should close
|
||||
await expect(modal).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('should open modal when clicking hero CTA button', async ({ page }) => {
|
||||
// Click "Kezdjük el" button
|
||||
const ctaButton = page.getByRole('button', { name: /Kezdjük el/i })
|
||||
await ctaButton.click()
|
||||
|
||||
// Modal should open
|
||||
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
||||
await expect(modal).toBeVisible()
|
||||
})
|
||||
|
||||
test('should have proper glassmorphism effects on cards', async ({ page }) => {
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// Check HUD card has backdrop-blur
|
||||
const hudCard = page.locator('text=HUD Költségek').locator('..')
|
||||
const backdropFilter = await hudCard.evaluate((el) =>
|
||||
window.getComputedStyle(el).backdropFilter || window.getComputedStyle(el).webkitBackdropFilter
|
||||
)
|
||||
expect(backdropFilter).toContain('blur')
|
||||
|
||||
// Check card has border with turquoise color
|
||||
const borderColor = await hudCard.evaluate((el) =>
|
||||
window.getComputedStyle(el).borderColor
|
||||
)
|
||||
// Border should exist (not 'none')
|
||||
expect(borderColor).not.toBe('none')
|
||||
})
|
||||
|
||||
test('should display CSS progress ring in gamification card', async ({ page }) => {
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// Find the SVG circle elements in the progress ring
|
||||
const progressRing = page.locator('svg circle[stroke="#65A5A0"]')
|
||||
await expect(progressRing).toBeVisible()
|
||||
|
||||
// Verify trophy icons are present
|
||||
const trophies = page.locator('svg').filter({ hasText: '' }).locator('path[d*="M6 9H4.5"]')
|
||||
const trophyCount = await trophies.count()
|
||||
expect(trophyCount).toBeGreaterThanOrEqual(3)
|
||||
})
|
||||
|
||||
test('should have responsive layout on mobile', async ({ page }) => {
|
||||
// Set mobile viewport
|
||||
await page.setViewportSize({ width: 375, height: 667 })
|
||||
|
||||
// Check header is still visible
|
||||
const header = page.locator('header')
|
||||
await expect(header).toBeVisible()
|
||||
|
||||
// Check cards are still visible (may stack differently)
|
||||
await expect(page.locator('text=HUD Költségek')).toBeVisible()
|
||||
await expect(page.locator('text=Flotta Radar')).toBeVisible()
|
||||
await expect(page.locator('text=Gamifikáció')).toBeVisible()
|
||||
|
||||
// Take mobile screenshot
|
||||
await page.screenshot({
|
||||
path: 'test-results/screenshots/landing-mobile.png',
|
||||
fullPage: true
|
||||
})
|
||||
})
|
||||
|
||||
test('visual regression: full landing page', async ({ page }) => {
|
||||
await page.waitForLoadState('networkidle')
|
||||
|
||||
// Take full page screenshot for visual comparison
|
||||
await page.screenshot({
|
||||
path: 'test-results/screenshots/landing-full-page.png',
|
||||
fullPage: true
|
||||
})
|
||||
})
|
||||
|
||||
test('visual regression: modal state', async ({ page }) => {
|
||||
// Open modal
|
||||
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
||||
await openGarageBtn.click()
|
||||
|
||||
// Wait for animation
|
||||
await page.waitForTimeout(500)
|
||||
|
||||
// Take screenshot
|
||||
await page.screenshot({
|
||||
path: 'test-results/screenshots/modal-full-state.png',
|
||||
fullPage: false
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user