111 lines
4.2 KiB
JavaScript
111 lines
4.2 KiB
JavaScript
import { test, expect } from "@playwright/test";
|
|
|
|
const privacyUrl = "https://www.tri-hub.de/datenschutz";
|
|
|
|
async function expectConsent(form) {
|
|
const checkbox = form.locator('[name="consent"]');
|
|
await expect(checkbox).not.toBeChecked();
|
|
await expect(checkbox).toHaveAttribute("required", "");
|
|
const link = form.getByRole("link", {
|
|
name: "Datenschutzbestimmungen",
|
|
exact: true,
|
|
});
|
|
await expect(link).toHaveAttribute("href", privacyUrl);
|
|
await expect(link).toHaveCSS("font-weight", "700");
|
|
await expect(link).toHaveCSS("text-decoration-line", "underline");
|
|
return checkbox;
|
|
}
|
|
|
|
test("Landingpage: beide Formulare benötigen Datenschutz; Kontakt speichert Zustimmung", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto("/index.html");
|
|
await expectConsent(page.locator("#reviewForm"));
|
|
const form = page.locator("#contactForm");
|
|
const consent = await expectConsent(form);
|
|
await form.locator('[name="name"]').fill("Datenschutz Test");
|
|
await form.locator('[name="email"]').fill("privacy@example.test");
|
|
await form.locator('[name="subject"]').fill("Eine Testanfrage");
|
|
await form
|
|
.locator('[name="message"]')
|
|
.fill("Eine ausreichend lange Testnachricht.");
|
|
await form.locator('[type="submit"]').click();
|
|
expect(
|
|
await consent.evaluate((element) => element.validity.valueMissing),
|
|
).toBe(true);
|
|
await consent.check();
|
|
const response = page.waitForResponse((response) =>
|
|
response.url().endsWith("/api/nutrition-contact"),
|
|
);
|
|
await form.locator('[type="submit"]').click();
|
|
const saved = await response;
|
|
expect(saved.status()).toBe(201);
|
|
expect(saved.request().postDataJSON().consent).toBe(true);
|
|
await expect(consent).not.toBeChecked();
|
|
});
|
|
|
|
test("Buchungsdialog verlangt Datenschutz und übermittelt Zustimmung", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto("/booking.html?id=ernaehrung-starter");
|
|
await page
|
|
.getByRole("button", { name: "Jetzt buchen", exact: true })
|
|
.click();
|
|
const form = page.locator("dialog form");
|
|
const consent = await expectConsent(form);
|
|
await form.locator('[name="name"]').fill("Datenschutz Test");
|
|
await form.locator('[name="email"]').fill("privacy@example.test");
|
|
await form.locator('[type="submit"]').click();
|
|
await expect(page.locator('[id$="booking-consent-error"]')).toContainText(
|
|
"Datenschutzbestimmungen akzeptieren",
|
|
);
|
|
await consent.check();
|
|
const response = page.waitForResponse((response) =>
|
|
response.url().endsWith("/api/bookings"),
|
|
);
|
|
await form.locator('[type="submit"]').click();
|
|
const saved = await response;
|
|
expect(saved.status()).toBe(201);
|
|
expect(saved.request().postDataJSON().consent).toBe(true);
|
|
});
|
|
|
|
test("Beraterkontakt hat eine separate verpflichtende Datenschutz-Zustimmung", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto("/contact-test.html?berater-id=maren-hoffmann");
|
|
await page
|
|
.getByRole("button", { name: "Berater kontaktieren", exact: true })
|
|
.click();
|
|
await expectConsent(page.locator("dialog form"));
|
|
});
|
|
|
|
for (const width of [375, 1280]) {
|
|
test(`Buchungsfenster: Checkbox und erste Textzeile auf gleicher Höhe (${width}px)`, async ({
|
|
page,
|
|
}) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.goto("/booking.html?id=ernaehrung-starter");
|
|
await page
|
|
.getByRole("button", { name: "Jetzt buchen", exact: true })
|
|
.click();
|
|
const label = page.locator(".booking__consent");
|
|
const difference = await label.evaluate((element) => {
|
|
const checkbox = element
|
|
.querySelector("input")
|
|
.getBoundingClientRect();
|
|
const text = element.querySelector("span");
|
|
const firstLineCenter =
|
|
text.getBoundingClientRect().top +
|
|
parseFloat(getComputedStyle(text).lineHeight) / 2;
|
|
return Math.abs(
|
|
checkbox.top + checkbox.height / 2 - firstLineCenter,
|
|
);
|
|
});
|
|
expect(difference).toBeLessThanOrEqual(1);
|
|
await expect(label.locator("a")).toHaveCSS(
|
|
"color",
|
|
"rgb(255, 255, 255)",
|
|
);
|
|
});
|
|
}
|