diff --git a/tests/inner-page.spec.js b/tests/inner-page.spec.js index 1b68273..9bb3f88 100644 --- a/tests/inner-page.spec.js +++ b/tests/inner-page.spec.js @@ -1,9 +1,20 @@ import { expect, test } from "@playwright/test"; +// Default rich fixture: all fields populated (hero_image, hero_vector, intro). const pageUrl = process.env.TEST_PAGE_URL || "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 box = await locator.boundingBox(); expect(box).not.toBeNull(); @@ -122,4 +133,51 @@ test.describe("inner page layout", () => { expect(heroBox.x + heroBox.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/); + }); });