From 6c06742112fa70bffc97f229f9102c2c1725634e Mon Sep 17 00:00:00 2001 From: sinejespersen Date: Fri, 12 Sep 2025 10:30:25 +0200 Subject: [PATCH] 5317: add template poster tests --- assets/template/fixtures/slide-fixtures.js | 73 ++++- assets/tests/template/template-poster.spec.js | 301 +++++++++++++++++- 2 files changed, 359 insertions(+), 15 deletions(-) diff --git a/assets/template/fixtures/slide-fixtures.js b/assets/template/fixtures/slide-fixtures.js index c72c0e98..5411fb9a 100644 --- a/assets/template/fixtures/slide-fixtures.js +++ b/assets/template/fixtures/slide-fixtures.js @@ -1185,7 +1185,7 @@ const slideFixtures = [ overrideSubTitle: null, overrideTicketPrice: null, overrideReadMoreUrl: null, - readMoreText: "Læs mere her: www.example.com", + readMoreText: null, hideTime: false, }, }, @@ -1221,6 +1221,68 @@ const slideFixtures = [ mediaContain: true, }, }, + { + id: "poster-0-single-override", + templateData: { + id: "01FWJZQ25A1868V63CWYYHQFKQ", + }, + themeFile: null, + mediaData: { + "/v1/media/00000000000000000000000001": { + assets: { + uri: "/fixtures/template/images/mountain1.jpeg", + }, + }, + }, + theme: { + logo: { + assets: { + uri: "/fixtures/template/images/mountain1.jpeg", + }, + }, + }, + feed: { + configuration: { + overrideTitle: "Override title", + overrideSubTitle: "Override subtitle", + overrideTicketPrice: "Override ticket price", + overrideReadMoreUrl: "https://example.com/", + readMoreText: "Læs mere her: www.example.com", + hideTime: true, + }, + }, + feedData: [ + { + ticketPurchaseUrl: "www.example.dk", + excerpt: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....", + name: "Lorem ipsum", + url: "www.example.dk", + image: "/fixtures/template/images/mountain1.jpeg", + startDate: "2021-06-21T14:00:00+00:00", + endDate: "2021-06-21T15:00:00+00:00", + ticketPriceRange: "75-150 kr.", + eventStatusText: null, + place: { + name: "Lorem ipsum, Aarhus C", + streetAddress: "Vej 2", + addressLocality: "Aarhus", + postalCode: "8000", + image: null, + telephone: null, + }, + }, + ], + content: { + // "single" or "subscription" + feedType: "single", + eventId: "", + occurrenceId: "", + entryDuration: 10, + showLogo: true, + mediaContain: true, + }, + }, { id: "poster-1-subscription", templateData: { @@ -1260,14 +1322,13 @@ const slideFixtures = [ }, { ticketPurchaseUrl: "www.example2.dk", - excerpt: - "Ipsum lorem dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....", + excerpt: "Ipsum lorem dolor...", name: "Ipsum lorem", - url: "www.example.dk", + url: "www.example2.dk", image: "/fixtures/template/images/mountain2.jpeg", startDate: "2021-06-21T14:00:00+00:00", endDate: "2021-06-21T15:00:00+00:00", - ticketPriceRange: "75-150 kr.", + ticketPriceRange: "En milliard kroner.", eventStatusText: null, place: { name: "Lorem ipsum, Aarhus C", @@ -1284,7 +1345,7 @@ const slideFixtures = [ feedType: "subscription", eventId: "", occurrenceId: "", - entryDuration: 10, + duration: 2000, }, }, { diff --git a/assets/tests/template/template-poster.spec.js b/assets/tests/template/template-poster.spec.js index 635b82e8..ae2ea3fe 100644 --- a/assets/tests/template/template-poster.spec.js +++ b/assets/tests/template/template-poster.spec.js @@ -1,19 +1,302 @@ import { test, expect } from "@playwright/test"; -test("Poster 0", async ({ page }) => { - await page.goto("/template/poster-0-single"); +test.describe("poster-0-single-override: ui tests", () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/poster-0-single-override"); + }); - // TODO + test("Should render poster with logo", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + await expect(poster).toBeVisible(); + + const imageArea = poster.locator(".image-area.media-contain"); + await expect(imageArea).toHaveCSS( + "background-image", + new RegExp("/fixtures/template/images/mountain1.jpeg"), + ); + }); + + test("Should render poster with title (overridden)", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".header-area h1")).toHaveText( + "Override title", + ); + }); + + test("Should render poster with sub-title (overridden)", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".header-area .lead")).toHaveText( + "Override subtitle", + ); + }); + + test("Should render feed data", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .place")).toHaveText( + "Lorem ipsum, Aarhus C", + ); + }); + + test("Should render overridden ticket price", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .ticket")).toHaveText( + "Override ticket price", + ); + }); + + test("Should render overridden read more text", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .moreinfo")).toHaveText( + "Læs mere her: www.example.com", + ); + }); + + test("Should render overridden read more url", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .look-like-link")).toHaveText( + "https://example.com/", + ); + }); + + test("Should not render date", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".date")).toHaveCount(0); + }); + + test("Should render logo", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + const logoImage = poster.locator(".logo-area img"); + await expect(logoImage).toHaveAttribute( + "src", + "/fixtures/template/images/mountain1.jpeg", + ); + }); }); -test("Poster 1", async ({ page }) => { - await page.goto("/template/poster-1-subscription"); +test.describe("poster-0-single: ui tests", () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/poster-0-single"); + }); + + test("Should render poster with logo", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + await expect(poster).toBeVisible(); + + const imageArea = poster.locator(".image-area.media-contain"); + await expect(imageArea).toHaveCSS( + "background-image", + new RegExp("/fixtures/template/images/mountain1.jpeg"), + ); + }); + + test("Should render poster with title", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".header-area h1")).toHaveText("Lorem ipsum"); + }); + + test("Should render poster with sub-title", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".header-area .lead")).toHaveText( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....", + ); + }); + + test("Should render feed data", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .place")).toHaveText( + "Lorem ipsum, Aarhus C", + ); + }); + + test("Should render ticket price", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .ticket")).toHaveText("75-150 kr."); + }); + + test("Should render read more text", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .moreinfo")).not.toBeVisible(); + }); + + test("Should render read more url", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".info-area .look-like-link")).toHaveText( + "www.example.dk", + ); + }); + + test("Should render date", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); + + await expect(poster.locator(".date")).toHaveCount(2); + }); + + test("Should render logo", async ({ page }) => { + const poster = page.locator(".template-poster.with-logo"); - // TODO + const logoImage = poster.locator(".logo-area img"); + await expect(logoImage).toHaveAttribute( + "src", + "/fixtures/template/images/mountain1.jpeg", + ); + }); }); -test("Poster 2", async ({ page }) => { - await page.goto("/template/poster-2-single-no-feed"); +test.describe("poster-1-subscription: ui tests", () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/poster-1-subscription"); + }); + + test("Should render poster without logo", async ({ page }) => { + const poster = page.locator(".template-poster"); + await expect(poster).toBeVisible(); + }); + + test("Should render poster with title", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".header-area h1")).toHaveText("Lorem ipsum"); + }); + + test("Should render poster with sub-title", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".header-area .lead")).toHaveText( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....", + ); + }); + + test("Should render feed data", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .place")).toHaveText( + "Lorem ipsum, Aarhus C", + ); + }); + + test("Should render ticket price", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .ticket")).toHaveText("75-150 kr."); + }); + + test("Should render read more text", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .moreinfo")).toHaveText( + "Læs mere her: www.example.com", + ); + }); + + test("Should render read more url", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .look-like-link")).toHaveText( + "www.example.dk", + ); + }); + + test("Should render date", async ({ page }) => { + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".date")).toHaveCount(2); + }); + + test("Should not render logo", async ({ page }) => { + const poster = page.locator(".template-poster"); + + const logoImage = poster.locator(".logo-area img"); + await expect(logoImage).toHaveCount(0); + }); + + test("Should render poster without logo (after 2100 ms)", async ({ + page, + }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + await expect(poster).toBeVisible(); + }); + + test("Should render poster with title (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".header-area h1")).toHaveText("Ipsum lorem"); + }); + + test("Should render poster with sub-title (after 2100 ms)", async ({ + page, + }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".header-area .lead")).toHaveText( + "Ipsum lorem dolor...", + ); + }); + + test("Should render feed data (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .place")).toHaveText( + "Lorem ipsum, Aarhus C", + ); + }); + + test("Should render ticket price (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .ticket")).toHaveText( + "En milliard kroner.", + ); + }); + + test("Should render read more text (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .moreinfo")).toHaveText( + "Læs mere her: www.example.com", + ); + }); + + test("Should render read more url (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".info-area .look-like-link")).toHaveText( + "www.example2.dk", + ); + }); + + test("Should render date (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); + + await expect(poster.locator(".date")).toHaveCount(2); + }); + + test("Should not render logo (after 2100 ms)", async ({ page }) => { + await page.waitForTimeout(2100); + const poster = page.locator(".template-poster"); - // TODO + const logoImage = poster.locator(".logo-area img"); + await expect(logoImage).toHaveCount(0); + }); });