114 lines
4.4 KiB
JavaScript
114 lines
4.4 KiB
JavaScript
import { test, expect } from "@playwright/test";
|
||
|
||
test.beforeEach(async ({ page }) => {
|
||
await page.goto("/berater.html");
|
||
});
|
||
|
||
test("Navigation öffnet die separate Beraterseite und Profile werden geladen", async ({
|
||
page,
|
||
}) => {
|
||
const profileLink = page.locator('.navbar__link[href="/berater.html"]');
|
||
if (!(await profileLink.isVisible())) {
|
||
await page.getByRole("button", { name: "Menü öffnen" }).click();
|
||
}
|
||
await expect(profileLink).toBeVisible();
|
||
await expect(
|
||
page.getByRole("heading", { name: /Ernährungsberater/ }),
|
||
).toBeVisible();
|
||
|
||
const cards = page.locator(".advisor-card");
|
||
await expect(cards).toHaveCount(2);
|
||
await expect(cards.nth(0)).toContainText("Relindis Agethen (Lilli)");
|
||
await expect(cards.nth(0)).toContainText("Kurzbiografie");
|
||
await expect(cards.nth(0)).toContainText("Qualifikationen");
|
||
await expect(cards.nth(0)).toContainText("Schwerpunkte");
|
||
const roleBackground = await cards
|
||
.nth(0)
|
||
.locator(".advisor-role")
|
||
.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||
const detailsBackground = await cards
|
||
.nth(0)
|
||
.locator(".package-details-box")
|
||
.evaluate((element) => getComputedStyle(element).backgroundColor);
|
||
expect(roleBackground).toBe("rgba(0, 0, 0, 0)");
|
||
expect(detailsBackground).not.toBe("rgba(0, 0, 0, 0)");
|
||
await expect(
|
||
cards.nth(0).getByRole("button", { name: "Lilli kontaktieren" }),
|
||
).toBeVisible();
|
||
await expect(
|
||
cards.nth(1).getByRole("button", { name: "Maren kontaktieren" }),
|
||
).toBeVisible();
|
||
|
||
await cards
|
||
.nth(0)
|
||
.getByRole("button", { name: "Lilli kontaktieren" })
|
||
.click();
|
||
const contactDialog = page.getByRole("dialog");
|
||
await expect(contactDialog).toBeVisible();
|
||
await expect(contactDialog).toContainText("Lilli");
|
||
});
|
||
|
||
test("Beraterbilder sind präsent und lassen sich mit Karussell-Pfeilen wechseln", async ({
|
||
page,
|
||
}) => {
|
||
const lilli = page
|
||
.locator(".advisor-card")
|
||
.filter({ hasText: "Relindis Agethen" });
|
||
const image = lilli.locator(
|
||
'.advisor-gallery__slide[aria-hidden="false"] .advisor-gallery__image',
|
||
);
|
||
const track = lilli.locator(".advisor-gallery__track");
|
||
const previous = lilli.getByRole("button", {
|
||
name: "Vorheriges Bild von Relindis Agethen (Lilli)",
|
||
});
|
||
const next = lilli.getByRole("button", {
|
||
name: "Nächstes Bild von Relindis Agethen (Lilli)",
|
||
});
|
||
const portraitDot = lilli.getByRole("button", { name: "Bild 1: Porträt" });
|
||
const actionDot = lilli.getByRole("button", {
|
||
name: "Bild 2: Aktionsbild",
|
||
});
|
||
|
||
await expect(image).toBeVisible();
|
||
await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
|
||
const bounds = await image.boundingBox();
|
||
expect(bounds.width).toBeGreaterThan(150);
|
||
expect(bounds.height).toBeGreaterThan(150);
|
||
await expect(portraitDot).toHaveAttribute("aria-current", "true");
|
||
await expect(actionDot).toHaveAttribute("aria-current", "false");
|
||
|
||
await next.click();
|
||
await expect(track).toHaveCSS("transform", /matrix\(1, 0, 0, 1, -/);
|
||
await expect(image).toHaveAttribute("src", "/images/Lilli2.jpeg");
|
||
await expect(image).toHaveAttribute(
|
||
"alt",
|
||
"Relindis Agethen (Lilli) – Aktionsbild",
|
||
);
|
||
await expect(actionDot).toHaveAttribute("aria-current", "true");
|
||
await expect(portraitDot).toHaveAttribute("aria-current", "false");
|
||
|
||
await previous.click();
|
||
await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
|
||
await expect(portraitDot).toHaveAttribute("aria-current", "true");
|
||
|
||
await portraitDot.click();
|
||
await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
|
||
});
|
||
|
||
test("Maren hat ebenfalls ein umschaltbares Porträt- und Aktionsbild", async ({
|
||
page,
|
||
}) => {
|
||
const maren = page
|
||
.locator(".advisor-card")
|
||
.filter({ hasText: "Maren Hoffmann" });
|
||
const image = maren.locator(
|
||
'.advisor-gallery__slide[aria-hidden="false"] .advisor-gallery__image',
|
||
);
|
||
|
||
await expect(image).toHaveAttribute("src", "/images/Maren1.jpeg");
|
||
await maren
|
||
.getByRole("button", { name: "Nächstes Bild von Maren Hoffmann" })
|
||
.click();
|
||
await expect(image).toHaveAttribute("src", "/images/Maren2.jpeg");
|
||
});
|