81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
|
import { test, expect } from "@playwright/test";
|
||
|
|
|
||
|
|
test.describe("Referenzen Page", () => {
|
||
|
|
test.beforeEach(async ({ page }) => {
|
||
|
|
await page.goto("/referenzen");
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should display page heading", async ({ page }) => {
|
||
|
|
await expect(page).toHaveTitle(/Referenzen/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should show 9 gallery images in grid", async ({ page }) => {
|
||
|
|
const grid = page.locator('[data-testid="gallery-grid"]');
|
||
|
|
await expect(grid).toBeVisible();
|
||
|
|
const items = grid.locator('[data-testid^="gallery-item-"]');
|
||
|
|
await expect(items).toHaveCount(9);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should have 4 category filter chips", async ({ page }) => {
|
||
|
|
const chips = page.locator('[data-testid="filter-chips"]');
|
||
|
|
await expect(chips).toBeVisible();
|
||
|
|
await expect(chips).toContainText("Alle");
|
||
|
|
await expect(chips).toContainText("Open-Air");
|
||
|
|
await expect(chips).toContainText("Indoor");
|
||
|
|
await expect(chips).toContainText("Rigging");
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should filter images by category", async ({ page }) => {
|
||
|
|
// Click Open-Air filter
|
||
|
|
await page.locator('[data-testid="filter-open-air"]').click();
|
||
|
|
const grid = page.locator('[data-testid="gallery-grid"]');
|
||
|
|
const items = grid.locator('[data-testid^="gallery-item-"]');
|
||
|
|
const count = await items.count();
|
||
|
|
expect(count).toBeLessThan(9);
|
||
|
|
expect(count).toBeGreaterThan(0);
|
||
|
|
|
||
|
|
// Click Alle to reset
|
||
|
|
await page.locator('[data-testid="filter-alle"]').click();
|
||
|
|
await expect(items).toHaveCount(9);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should open lightbox on image click", async ({ page }) => {
|
||
|
|
const firstItem = page.locator('[data-testid="gallery-item-1"]');
|
||
|
|
await firstItem.click();
|
||
|
|
const lightbox = page.locator('[data-testid="lightbox"]');
|
||
|
|
await expect(lightbox).toBeVisible();
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should close lightbox with close button", async ({ page }) => {
|
||
|
|
await page.locator('[data-testid="gallery-item-1"]').click();
|
||
|
|
const lightbox = page.locator('[data-testid="lightbox"]');
|
||
|
|
await expect(lightbox).toBeVisible();
|
||
|
|
await page.locator('[data-testid="lightbox-close"]').click();
|
||
|
|
await expect(lightbox).not.toBeVisible();
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should navigate to next image in lightbox", async ({ page }) => {
|
||
|
|
await page.locator('[data-testid="gallery-item-1"]').click();
|
||
|
|
const lightbox = page.locator('[data-testid="lightbox"]');
|
||
|
|
await expect(lightbox).toBeVisible();
|
||
|
|
const firstCaption = await lightbox.locator("p").textContent();
|
||
|
|
await page.locator('[data-testid="lightbox-next"]').click();
|
||
|
|
const secondCaption = await lightbox.locator("p").textContent();
|
||
|
|
expect(firstCaption).not.toBe(secondCaption);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should navigate to prev image in lightbox", async ({ page }) => {
|
||
|
|
await page.locator('[data-testid="gallery-item-1"]').click();
|
||
|
|
const lightbox = page.locator('[data-testid="lightbox"]');
|
||
|
|
await expect(lightbox).toBeVisible();
|
||
|
|
await page.locator('[data-testid="lightbox-prev"]').click();
|
||
|
|
await expect(lightbox).toBeVisible();
|
||
|
|
});
|
||
|
|
|
||
|
|
test("should be mobile-responsive at 375px width", async ({ page }) => {
|
||
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
||
|
|
await expect(page.locator('[data-testid="gallery-grid"]')).toBeVisible();
|
||
|
|
await expect(page.locator('[data-testid="filter-chips"]')).toBeVisible();
|
||
|
|
});
|
||
|
|
});
|