From 0d1de1820a0782f567e31bfccad6f712e50e1cb8 Mon Sep 17 00:00:00 2001 From: sinejespersen Date: Thu, 11 Sep 2025 13:11:03 +0200 Subject: [PATCH] 5317: image/text template tests --- assets/template/fixtures/slide-fixtures.js | 57 +++++- .../template/template-image-text.spec.js | 167 ++++++++++++------ 2 files changed, 170 insertions(+), 54 deletions(-) diff --git a/assets/template/fixtures/slide-fixtures.js b/assets/template/fixtures/slide-fixtures.js index f885fafa..1117c14b 100644 --- a/assets/template/fixtures/slide-fixtures.js +++ b/assets/template/fixtures/slide-fixtures.js @@ -794,16 +794,44 @@ const slideFixtures = [ title: "Overskriften er her", text: "Dette er brødtekst lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", image: ["/v1/media/00000000000000000000000001"], - boxAlign: "top", + boxAlign: "left", boxMargin: false, shadow: true, - separator: false, - halfSize: false, + separator: true, + halfSize: true, reversed: false, mediaContain: true, fontSize: "font-size-xl", }, }, + { + id: "image-text-1", + templateData: { + id: "01FP2SNGFN0BZQH03KCBXHKYHG", + }, + themeFile: null, + mediaData: { + "/v1/media/00000000000000000000000001": { + assets: { + uri: "/fixtures/template/images/mountain1.jpeg", + }, + }, + }, + content: { + duration: 5000, + title: "Overskriften er her", + text: "Dette er brødtekst lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + image: ["/v1/media/00000000000000000000000001"], + boxAlign: "top", + boxMargin: true, + shadow: true, + separator: false, + halfSize: false, + reversed: false, + mediaContain: false, + fontSize: "font-size-sm", + }, + }, { id: "image-text-1-multiple-images", templateData: { @@ -842,7 +870,7 @@ const slideFixtures = [ separator: true, halfSize: true, mediaContain: true, - reversed: false, + reversed: true, fontSize: "font-size-m", disableImageFade: false, }, @@ -912,6 +940,27 @@ const slideFixtures = [ fontSize: "font-size-lg", }, }, + { + id: "image-text-reversed", + templateData: { + id: "01FP2SNGFN0BZQH03KCBXHKYHG", + }, + themeFile: "/fixtures/example.css", + content: { + duration: 5000, + title: "Overskriften er her", + text: "Dette er brødtekst lorem ipsum dolor sit amet....", + image: [], + boxAlign: "top", + boxMargin: false, + shadow: true, + separator: true, + halfSize: true, + reversed: true, + mediaContain: true, + fontSize: "font-size-xl", + }, + }, { id: "image-text-4-test-theme", templateData: { diff --git a/assets/tests/template/template-image-text.spec.js b/assets/tests/template/template-image-text.spec.js index 35482e33..88441815 100644 --- a/assets/tests/template/template-image-text.spec.js +++ b/assets/tests/template/template-image-text.spec.js @@ -1,59 +1,126 @@ import { test, expect } from "@playwright/test"; -test("Image Text 0", async ({ page }) => { - await page.goto("/template/image-text-0"); - - await expect(page.getByText("Overskriften er her")).toBeVisible(); - await expect(page.locator(".box")).toBeVisible(); - await expect(page.locator(".background-image")).toBeVisible(); - await expect(page.locator(".background-image")).toHaveCSS( - "background-image", - new RegExp("fixtures/template/images/mountain1.jpeg"), - ); +test.describe("image-text-0: ui tests", async () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/image-text-0"); + }); + + test("Should have correct background image and media-contain", async ({ + page, + }) => { + await expect(page.getByText("Overskriften er her")).toBeVisible(); + await expect(page.locator(".box")).toBeVisible(); + await expect(page.locator(".background-image")).toBeVisible(); + await expect(page.locator(".background-image")).toHaveCSS( + "background-image", + new RegExp("fixtures/template/images/mountain1.jpeg"), + ); + await expect(page.locator(".background-image")).toHaveCSS( + "background-size", + "contain", + ); + }); + + test("Should have animated-header set", async ({ page }) => { + await expect(page.locator(".animated-header")).toBeVisible(); + }); + + test("Should have half-size set", async ({ page }) => { + await expect(page.locator(".half-size")).toBeVisible(); + }); + + test("Should not have box-margin set", async ({ page }) => { + await expect(page.locator(".box-margin")).not.toBeVisible(); + }); + + test("Should have font size set", async ({ page }) => { + await expect(page.locator(".font-size-xl")).toBeVisible(); + }); + + test("Should have column set", async ({ page }) => { + await expect(page.locator(".column")).toBeVisible(); + }); }); -test("Image Text 1", async ({ page }) => { - await page.goto("template/image-text-1-multiple-images"); - - await expect(page.getByText("Slide 14")).toBeVisible(); - await expect(page.locator(".background-image")).toBeVisible(); - await expect(page.locator(".background-image")).toHaveCSS( - "background-image", - new RegExp("fixtures/template/images/mountain1.jpeg"), - ); - await page.waitForTimeout(7500); - await expect(page.locator(".background-image")).toHaveCSS( - "background-image", - new RegExp("fixtures/template/images/mountain2.jpeg"), - ); +test.describe("image-text-1", async () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/image-text-1"); + }); + + test("Should not have column set", async ({ page }) => { + await expect(page.locator(".column")).not.toBeVisible(); + }); + + test("Should have box-margin set", async ({ page }) => { + await expect(page.locator(".box-margin")).toBeVisible(); + }); + + test("Should have shadow set", async ({ page }) => { + await expect(page.locator(".shadow")).toBeVisible(); + }); + + test("Should have font size set", async ({ page }) => { + await expect(page.locator(".font-size-sm")).toBeVisible(); + }); + + test("Should not have media-contain", async ({ page }) => { + await expect(page.locator(".background-image")).toHaveCSS( + "background-size", + "cover", + ); + }); }); -test("Image Text 2", async ({ page }) => { - await page.goto("template/image-text-2-logo"); - - await expect(page.getByText("Slide 1")).toBeVisible(); - await expect( - page.locator(".logo.logo-margin.logo-size-m.logo-position-bottom-right"), - ).toBeVisible(); - await expect(page.locator(".logo")).toHaveAttribute( - "src", - new RegExp("fixtures/template/images/mountain1.jpeg"), - ); +test.describe("image-text-reversed", async () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/image-text-reversed"); + }); + + test("Should have reversed set", async ({ page }) => { + await expect(page.locator(".reversed")).toBeVisible(); + }); + + test("Should not have animated-header set", async ({ page }) => { + await expect(page.locator(".animated-header")).not.toBeVisible(); + }); + + test("Should not have half-size set", async ({ page }) => { + await expect(page.locator(".half-size")).not.toBeVisible(); + }); + + test("Should have box-margin set (due to being reversed)", async ({ + page, + }) => { + await expect(page.locator(".box-margin")).toBeVisible(); + }); }); -test("Image Text 3", async ({ page }) => { - await page.goto("template/image-text-3-font-sizes"); - - await expect(page.getByText("Slide 123121")).toBeVisible(); - await expect(page.getByText("Fisk")).toBeVisible(); - await expect(page.getByText("Hest")).toBeVisible(); - await expect(page.getByText("Ræv")).toBeVisible(); - await expect( - page.getByText( - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", - ), - ).toBeVisible(); - await expect(page.locator(".text h1")).toBeVisible(); - await expect(page.locator(".text h2")).toBeVisible(); - await expect(page.locator(".text h3")).toBeVisible(); +test.describe("image-text-1-multiple-images", async () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/image-text-1-multiple-images"); + }); + + test("Should flip through multiple images", async ({ page }) => { + const slideChangeInterval = 6000; + const imagePaths = [ + "/fixtures/template/images/mountain1.jpeg", + "/fixtures/template/images/mountain2.jpeg", + "/fixtures/template/images/mountain3.jpeg", + ]; + + const getBackground = () => page.locator(".background-image"); + + for (const expectedImage of imagePaths) { + const activeBackground = await getBackground(); + + await expect(activeBackground).toHaveCSS( + "background-image", + new RegExp(expectedImage), + ); + + if (expectedImage !== imagePaths[imagePaths.length - 1]) { + await page.waitForTimeout(slideChangeInterval); + } + } + }); });