Add no-intro and no-asset fallback tests for inner page layout
This commit is contained in:
@@ -1,9 +1,20 @@
|
|||||||
import { expect, test } from "@playwright/test";
|
import { expect, test } from "@playwright/test";
|
||||||
|
|
||||||
|
// Default rich fixture: all fields populated (hero_image, hero_vector, intro).
|
||||||
const pageUrl =
|
const pageUrl =
|
||||||
process.env.TEST_PAGE_URL ||
|
process.env.TEST_PAGE_URL ||
|
||||||
"http://community-works-collaborative.test/sample-page/";
|
"http://community-works-collaborative.test/sample-page/";
|
||||||
|
|
||||||
|
// No-intro fixture: `intro` ACF field intentionally empty.
|
||||||
|
const noIntroUrl =
|
||||||
|
process.env.TEST_PAGE_URL_NO_INTRO ||
|
||||||
|
"http://community-works-collaborative.test/inner-page-no-intro/";
|
||||||
|
|
||||||
|
// No-asset fixture: `hero_image` and `hero_vector` ACF fields intentionally empty.
|
||||||
|
const noAssetUrl =
|
||||||
|
process.env.TEST_PAGE_URL_NO_ASSET ||
|
||||||
|
"http://community-works-collaborative.test/inner-page-no-asset/";
|
||||||
|
|
||||||
const getBox = async (locator) => {
|
const getBox = async (locator) => {
|
||||||
const box = await locator.boundingBox();
|
const box = await locator.boundingBox();
|
||||||
expect(box).not.toBeNull();
|
expect(box).not.toBeNull();
|
||||||
@@ -122,4 +133,51 @@ test.describe("inner page layout", () => {
|
|||||||
expect(heroBox.x + heroBox.width).toBeLessThanOrEqual(767 + 3);
|
expect(heroBox.x + heroBox.width).toBeLessThanOrEqual(767 + 3);
|
||||||
expect(introBox.x + introBox.width).toBeLessThanOrEqual(767 + 3);
|
expect(introBox.x + introBox.width).toBeLessThanOrEqual(767 + 3);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Spec line 113: "A page with no `intro` field renders hero + body with no empty intro wrapper."
|
||||||
|
test("no-intro: hero and body render with no .page-intro wrapper", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.setViewportSize({ width: 1280, height: 900 });
|
||||||
|
await page.goto(noIntroUrl);
|
||||||
|
|
||||||
|
const hero = page.locator(".page-hero").first();
|
||||||
|
const content = page.locator(".entry-content").first();
|
||||||
|
|
||||||
|
await expect(hero).toBeVisible();
|
||||||
|
await expect(content).toBeVisible();
|
||||||
|
|
||||||
|
// No empty intro wrapper rendered when the intro field is empty.
|
||||||
|
expect(await page.locator(".page-intro").count()).toBe(0);
|
||||||
|
|
||||||
|
// Hero and body still render in the expected order.
|
||||||
|
const heroBox = await getBox(hero);
|
||||||
|
const contentBox = await getBox(content);
|
||||||
|
expect(heroBox.y).toBeLessThan(contentBox.y);
|
||||||
|
|
||||||
|
// Heading is still inside the hero.
|
||||||
|
await expect(hero.locator("h1").first()).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Spec line 114: "A page with no `hero_image` and no `hero_vector` renders the existing dark text-only hero unchanged."
|
||||||
|
test("no-asset: dark text-only hero renders without image or vector", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.setViewportSize({ width: 1280, height: 900 });
|
||||||
|
await page.goto(noAssetUrl);
|
||||||
|
|
||||||
|
const hero = page.locator(".page-hero").first();
|
||||||
|
|
||||||
|
await expect(hero).toBeVisible();
|
||||||
|
|
||||||
|
// No media layers when both assets are empty.
|
||||||
|
expect(await page.locator(".page-hero__media").count()).toBe(0);
|
||||||
|
expect(await page.locator(".page-hero__vector").count()).toBe(0);
|
||||||
|
|
||||||
|
// Heading still renders inside the hero.
|
||||||
|
await expect(hero.locator("h1").first()).toBeVisible();
|
||||||
|
|
||||||
|
// Hero still exposes the dark text-only class hook.
|
||||||
|
await expect(hero).toHaveClass(/page-hero/);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user