300 lines
10 KiB
JavaScript
300 lines
10 KiB
JavaScript
import { expect, test } from "@playwright/test";
|
|
import AxeBuilder from "@axe-core/playwright";
|
|
|
|
const homepage = "http://community-works-collaborative.test/";
|
|
|
|
const getBox = async (locator) => {
|
|
const box = await locator.boundingBox();
|
|
expect(box).not.toBeNull();
|
|
return box;
|
|
};
|
|
|
|
const expectNear = (actual, expected, tolerance = 3) => {
|
|
expect(Math.abs(actual - expected)).toBeLessThanOrEqual(tolerance);
|
|
};
|
|
|
|
test.use({ viewport: { width: 402, height: 874 } });
|
|
|
|
test("mobile header preserves its layout and uses the designed hamburger", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
const header = await getBox(page.locator(".site-header"));
|
|
const logo = await getBox(page.locator(".site-header__logo"));
|
|
const toggle = page.locator(".nav-main__toggle").first();
|
|
const toggleBox = await getBox(toggle);
|
|
const hamburgerIcon = toggle.locator(".nav-toggle-hamburger svg");
|
|
const closeIcon = toggle.locator(".nav-toggle-x svg");
|
|
|
|
expectNear(header.height, 70, 2);
|
|
expectNear(logo.x, 16, 2);
|
|
expectNear(logo.width, 116, 2);
|
|
expectNear(logo.height, 36, 2);
|
|
expectNear(toggleBox.width, 72, 2);
|
|
expectNear(toggleBox.height, 45, 2);
|
|
await expect(toggle).toHaveCSS(
|
|
"background-color",
|
|
"oklch(0.6353 0.1751 29.61)",
|
|
);
|
|
await expect(toggle).toHaveCSS("border-radius", "22.4px 5.6px");
|
|
await expect(hamburgerIcon).toHaveCSS("fill", "oklch(1 0 0)");
|
|
await expect(closeIcon).toHaveCSS("stroke", "oklch(1 0 0)");
|
|
});
|
|
|
|
test("mobile hero matches the 402px reference composition", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
const hero = await getBox(page.locator(".homepage-hero"));
|
|
const heading = await getBox(page.locator(".homepage-hero .intro h1"));
|
|
const vector = await getBox(
|
|
page.locator(".homepage-hero .heroVector .vector"),
|
|
);
|
|
const buttons = page.locator(".homepage-hero .reset .button");
|
|
const firstButton = await getBox(buttons.nth(0));
|
|
const secondButton = await getBox(buttons.nth(1));
|
|
|
|
expectNear(hero.height, 752, 8);
|
|
expectNear(heading.x, 32, 3);
|
|
expect(heading.width).toBeGreaterThanOrEqual(330);
|
|
expectNear(vector.x, -414, 8);
|
|
expectNear(firstButton.y, secondButton.y, 2);
|
|
expectNear(firstButton.width, 148, 4);
|
|
expectNear(secondButton.width, 156, 4);
|
|
|
|
await expect(page.locator(".homepage-hero__location")).toBeVisible();
|
|
});
|
|
|
|
test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
|
|
await page.setViewportSize({ width: 320, height: 800 });
|
|
await page.goto(homepage);
|
|
|
|
const vector = await getBox(
|
|
page.locator(".homepage-hero .heroVector .vector"),
|
|
);
|
|
const buttons = page.locator(".homepage-hero .reset .button");
|
|
const firstButton = await getBox(buttons.nth(0));
|
|
const secondButton = await getBox(buttons.nth(1));
|
|
|
|
expectNear(firstButton.y, secondButton.y, 2);
|
|
expect(secondButton.x + secondButton.width).toBeLessThanOrEqual(320);
|
|
expect(vector.x + vector.width).toBeGreaterThanOrEqual(316);
|
|
});
|
|
|
|
test("mobile hero vector covers the 767px composition", async ({ page }) => {
|
|
await page.setViewportSize({ width: 767, height: 900 });
|
|
await page.goto(homepage);
|
|
|
|
const vector = await getBox(
|
|
page.locator(".homepage-hero .heroVector .vector"),
|
|
);
|
|
|
|
expect(vector.x).toBeLessThan(0);
|
|
expect(vector.x + vector.width).toBeGreaterThanOrEqual(760);
|
|
});
|
|
|
|
test("mobile pull quote matches the reference scale", async ({ page }) => {
|
|
await page.goto(homepage);
|
|
|
|
const quote = await getBox(page.locator(".pull-quote"));
|
|
const text = await getBox(page.locator(".pull-quote__text"));
|
|
const desktopVector = page.locator(".pull-quote__vector--bg");
|
|
const mobileVector = page.locator(".pull-quote__vector--mobile");
|
|
const vector = await getBox(mobileVector);
|
|
const bandHeight = await page
|
|
.locator(".pull-quote")
|
|
.evaluate((element) =>
|
|
Number.parseFloat(getComputedStyle(element, "::after").height),
|
|
);
|
|
|
|
expectNear(quote.height, 361, 6);
|
|
expectNear(bandHeight, 16, 1);
|
|
expectNear(text.x - quote.x, 32, 3);
|
|
expect(text.width).toBeGreaterThanOrEqual(330);
|
|
expectNear(text.height, 216, 6);
|
|
expectNear(
|
|
text.y + text.height / 2,
|
|
quote.y + (quote.height - bandHeight) / 2,
|
|
8,
|
|
);
|
|
expectNear(vector.x, quote.x, 3);
|
|
expectNear(vector.width, quote.width, 3);
|
|
expectNear(vector.height, quote.height - bandHeight, 3);
|
|
await expect(mobileVector).toBeVisible();
|
|
await expect(desktopVector).toBeHidden();
|
|
await expect(mobileVector).toHaveCSS("object-fit", "cover");
|
|
});
|
|
|
|
test("mobile pull quote scales proportionally through 767px", async ({
|
|
page,
|
|
}) => {
|
|
await page.setViewportSize({ width: 767, height: 900 });
|
|
await page.goto(homepage);
|
|
|
|
const quote = await getBox(page.locator(".pull-quote"));
|
|
const text = await getBox(page.locator(".pull-quote__text"));
|
|
|
|
expectNear(quote.height, 767 * 0.898, 6);
|
|
expect(text.y).toBeGreaterThanOrEqual(quote.y);
|
|
expect(text.y + text.height).toBeLessThanOrEqual(quote.y + quote.height);
|
|
expectNear(text.y + text.height / 2, quote.y + (quote.height - 16) / 2, 8);
|
|
});
|
|
|
|
test("mobile pull quote keeps text above the band at 320px", async ({
|
|
page,
|
|
}) => {
|
|
await page.setViewportSize({ width: 320, height: 800 });
|
|
await page.goto(homepage);
|
|
|
|
const quote = await getBox(page.locator(".pull-quote"));
|
|
const content = await getBox(page.locator(".pull-quote__content"));
|
|
const text = await getBox(page.locator(".pull-quote__text"));
|
|
|
|
expectNear(quote.height, 320 * 0.898, 6);
|
|
expectNear(content.height, quote.height - 16, 3);
|
|
expect(text.y - content.y).toBeGreaterThanOrEqual(12);
|
|
expect(
|
|
content.y + content.height - (text.y + text.height),
|
|
).toBeGreaterThanOrEqual(12);
|
|
});
|
|
|
|
test("mobile pull quote grows when its text needs more room", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
const quoteLocator = page.locator(".pull-quote");
|
|
const initialQuote = await getBox(quoteLocator);
|
|
await page.locator(".pull-quote__text p").evaluate((paragraph) => {
|
|
paragraph.textContent = `${paragraph.textContent} ${paragraph.textContent} ${paragraph.textContent}`;
|
|
});
|
|
|
|
const quote = await getBox(quoteLocator);
|
|
const content = await getBox(page.locator(".pull-quote__content"));
|
|
const text = await getBox(page.locator(".pull-quote__text"));
|
|
const vector = await getBox(page.locator(".pull-quote__vector--mobile"));
|
|
|
|
expect(quote.height).toBeGreaterThan(initialQuote.height);
|
|
expectNear(content.height, quote.height - 16, 3);
|
|
expectNear(vector.height, quote.height - 16, 3);
|
|
expect(text.y).toBeGreaterThanOrEqual(content.y);
|
|
expect(text.y + text.height).toBeLessThanOrEqual(
|
|
content.y + content.height,
|
|
);
|
|
});
|
|
|
|
test("pull quote restores the configured artwork at 768px", async ({
|
|
page,
|
|
}) => {
|
|
await page.setViewportSize({ width: 768, height: 900 });
|
|
await page.goto(homepage);
|
|
|
|
const desktopVector = page.locator(".pull-quote__vector--bg");
|
|
const mobileVector = page.locator(".pull-quote__vector--mobile");
|
|
const quote = await getBox(page.locator(".pull-quote"));
|
|
const vector = await getBox(desktopVector);
|
|
const borderWidth = await page
|
|
.locator(".pull-quote")
|
|
.evaluate((element) =>
|
|
Number.parseFloat(getComputedStyle(element).borderBottomWidth),
|
|
);
|
|
|
|
await expect(desktopVector).toBeVisible();
|
|
await expect(mobileVector).toBeHidden();
|
|
expectNear(vector.x, quote.x, 3);
|
|
expectNear(vector.width, quote.width, 3);
|
|
expectNear(vector.height, quote.height - borderWidth, 3);
|
|
await expect(desktopVector).toHaveCSS("object-fit", "cover");
|
|
});
|
|
|
|
test("mobile pull quote matches the supplied visual reference", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
await expect(page.locator(".pull-quote")).toHaveScreenshot(
|
|
"pullquote-reference.png",
|
|
{
|
|
animations: "disabled",
|
|
maxDiffPixelRatio: 0.071,
|
|
threshold: 0.05,
|
|
},
|
|
);
|
|
});
|
|
|
|
test("mobile pull quote linework render remains stable", async ({ page }) => {
|
|
await page.goto(homepage);
|
|
await page.locator(".pull-quote__content").evaluate((content) => {
|
|
content.style.visibility = "hidden";
|
|
});
|
|
|
|
await expect(page.locator(".pull-quote__vector--mobile")).toHaveScreenshot(
|
|
"pullquote-linework-render.png",
|
|
{
|
|
animations: "disabled",
|
|
maxDiffPixelRatio: 0.001,
|
|
threshold: 0.02,
|
|
},
|
|
);
|
|
});
|
|
|
|
test("mobile recent posts exposes previous and next controls", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
await expect(
|
|
page.getByRole("button", { name: "Previous article" }),
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByRole("button", { name: "Next article" }),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test("mobile recent posts advances to the next article", async ({ page }) => {
|
|
await page.goto(homepage);
|
|
|
|
const cards = page.locator(".recent-posts__card");
|
|
await expect(cards.nth(0)).toBeVisible();
|
|
await expect(cards.nth(1)).toBeHidden();
|
|
|
|
await page.getByRole("button", { name: "Next article" }).click();
|
|
|
|
await expect(cards.nth(0)).toBeHidden();
|
|
await expect(cards.nth(1)).toBeVisible();
|
|
});
|
|
|
|
test("configured footer channels use the prepared SVG icons", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
await expect(
|
|
page.locator('.social-links img[src*="social-facebook.svg"]'),
|
|
).toBeVisible();
|
|
await expect(
|
|
page.locator('.social-links img[src*="social-linkedin.svg"]'),
|
|
).toBeVisible();
|
|
});
|
|
|
|
test("mobile homepage has no automated accessibility violations", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(homepage);
|
|
|
|
const results = await new AxeBuilder({ page })
|
|
.withTags([
|
|
"wcag2a",
|
|
"wcag2aa",
|
|
"wcag21a",
|
|
"wcag21aa",
|
|
"wcag22a",
|
|
"wcag22aa",
|
|
])
|
|
.analyze();
|
|
|
|
expect(results.violations).toEqual([]);
|
|
});
|