From 6d407e2b74aec692a1b1d12b5477ac34d4eee4cb Mon Sep 17 00:00:00 2001 From: sinejespersen Date: Tue, 9 Sep 2025 14:32:28 +0200 Subject: [PATCH] 5317: add contacts test --- assets/template/fixtures/slide-fixtures.js | 81 ++++++---- .../tests/template/template-contacts.spec.js | 147 +++++++++++++++++- 2 files changed, 199 insertions(+), 29 deletions(-) diff --git a/assets/template/fixtures/slide-fixtures.js b/assets/template/fixtures/slide-fixtures.js index 8a5b5e7e..f885fafa 100644 --- a/assets/template/fixtures/slide-fixtures.js +++ b/assets/template/fixtures/slide-fixtures.js @@ -664,7 +664,7 @@ const slideFixtures = [ }, }, { - id: "contacts-0", + id: "contacts-underlined", templateData: { id: "01FPZ19YEHX7MQ5Q6ZS0WK0VEA", }, @@ -677,12 +677,12 @@ const slideFixtures = [ }, "/v1/media/00000000000000000000000002": { assets: { - uri: "/fixtures/template/images/author.jpg", + uri: "/fixtures/template/images/logo.png", }, }, "/v1/media/00000000000000000000000003": { assets: { - uri: "/fixtures/template/images/author.jpg", + uri: "/fixtures/template/images/mountain1.jpeg", }, }, }, @@ -691,51 +691,80 @@ const slideFixtures = [ duration: 5000, contacts: [ { - title: "Pedel", - name: "John Michael Dorian", - phone: "12341234", - email: "mail@mail.dk", + title: "Chief of Medicine", + name: "Bob Kelso", + phone: "55510001", + email: "kelso@@hospital.com", id: "uniqueContact1", image: ["/v1/media/00000000000000000000000001"], }, { - title: "Forstander", - name: "Janitor", - image: ["/v1/media/00000000000000000000000002"], - phone: "12341234", - email: "mail@mail.dk", + title: "Custodial Engineer", + name: "The Janitor", + phone: "55510002", + email: "janitor@@hospital.com", id: "uniqueContact2", + image: ["/v1/media/00000000000000000000000002"], }, { - title: "Lady", - name: "Dr. Cox", - phone: "12341234", - image: ["/v1/media/00000000000000000000000003"], - email: "mail@mail.dk", + title: "Resident Doctor", + name: "Elliot Reid", + phone: "55510003", + email: "ereid@@hospital.com", id: "uniqueContact3", + image: ["/v1/media/00000000000000000000000003"], }, { - name: "Dr. Cox", - phone: "12341234", - email: "mail@mail.dk", + name: "Christopher Turk", + phone: "55510004", + email: "turk@hospital.com", id: "uniqueContact4", }, { - name: "Dr. Cox", - phone: "12341234", - email: "mail@mail.dk", + name: "Carla Espinosa", + phone: "55510005", + email: "carla@hospital.com", id: "uniqueContact5", }, { - name: "Dr. Cox", - phone: "12341234", - email: "mail@mail.dk", + name: "Ted Buckland", + phone: "55510006", + email: "ted@@hospital.com", id: "uniqueContact6", }, ], separator: true, }, }, + { + id: "contacts-not-underlined", + templateData: { + id: "01FPZ19YEHX7MQ5Q6ZS0WK0VEA", + }, + themeFile: null, + mediaData: { + "/v1/media/00000000000000000000000001": { + assets: { + uri: "/fixtures/template/images/author.jpg", + }, + }, + "/v1/media/00000000000000000000000002": { + assets: { + uri: "/fixtures/template/images/author.jpg", + }, + }, + "/v1/media/00000000000000000000000003": { + assets: { + uri: "/fixtures/template/images/author.jpg", + }, + }, + }, + content: { + mediaContain: false, + duration: 5000, + separator: false, + }, + }, { id: "iframe-0", templateData: { diff --git a/assets/tests/template/template-contacts.spec.js b/assets/tests/template/template-contacts.spec.js index 82d18f99..669c3962 100644 --- a/assets/tests/template/template-contacts.spec.js +++ b/assets/tests/template/template-contacts.spec.js @@ -1,7 +1,148 @@ import { test, expect } from "@playwright/test"; -test("Contacts 0", async ({ page }) => { - await page.goto("/template/contacts-0"); +test("contacts-not-underlined - ui test", async ({ page }) => { + await page.goto("/template/contacts-not-underlined"); - // TODO + const header = page.locator("h1"); + await expect(header).toHaveText("Kontakter"); + + const separator = page.locator(".separator"); + await expect(separator).not.toBeVisible(); +}); + +test.describe("contacts-underlined - ui test", async () => { + test.beforeEach(async ({ page }) => { + await page.goto("/template/contacts-underlined"); + }); + + test("Should display separator", async ({ page }) => { + const separator = page.locator(".separator"); + await expect(separator).toBeVisible(); + }); + + test("Should display the correct header", async ({ page }) => { + const header = await page.locator("header h1"); + await expect(header).toHaveText(/Kontakter/); + }); + + test("Should render exactly 6 contacts", async ({ page }) => { + const contacts = await page.locator(".contact"); + await expect(contacts).toHaveCount(6); + }); + + test("Should render the first contact with correct name and title", async ({ + page, + }) => { + const firstContact = page.locator(".contact").nth(0); + await expect(firstContact.locator(".contact-text div").nth(0)).toHaveText( + "Chief of Medicine", + ); + await expect(firstContact.locator(".contact-text div").nth(1)).toHaveText( + "Bob Kelso", + ); + await expect(firstContact.locator(".contact-text div").nth(2)).toHaveText( + "kelso@@hospital.com", + ); + await expect(firstContact.locator(".contact-text div").nth(3)).toHaveText( + "55510001", + ); + await expect(firstContact.locator(".contact-image")).toHaveCSS( + "background-image", + new RegExp("/fixtures/template/images/author.jpg"), + ); + }); + + test("Should render the second contact with correct name and title", async ({ + page, + }) => { + const secondContact = page.locator(".contact").nth(1); + await expect(secondContact.locator(".contact-text div").nth(0)).toHaveText( + "Custodial Engineer", + ); + await expect(secondContact.locator(".contact-text div").nth(1)).toHaveText( + "The Janitor", + ); + await expect(secondContact.locator(".contact-text div").nth(2)).toHaveText( + "janitor@@hospital.com", + ); + await expect(secondContact.locator(".contact-text div").nth(3)).toHaveText( + "55510002", + ); + await expect(secondContact.locator(".contact-image")).toHaveCSS( + "background-image", + new RegExp("/fixtures/template/images/logo.png"), + ); + }); + + test("Should render the third contact with correct name and title", async ({ + page, + }) => { + const thirdContact = page.locator(".contact").nth(2); + await expect(thirdContact.locator(".contact-text div").nth(0)).toHaveText( + "Resident Doctor", + ); + await expect(thirdContact.locator(".contact-text div").nth(1)).toHaveText( + "Elliot Reid", + ); + await expect(thirdContact.locator(".contact-text div").nth(2)).toHaveText( + "ereid@@hospital.com", + ); + await expect(thirdContact.locator(".contact-text div").nth(3)).toHaveText( + "55510003", + ); + await expect(thirdContact.locator(".contact-image")).toHaveCSS( + "background-image", + new RegExp("/fixtures/template/images/mountain1.jpeg"), + ); + }); + + test("Should render the fourth contact with correct name and title", async ({ + page, + }) => { + const fourthContact = page.locator(".contact").nth(3); + await expect(fourthContact.locator(".contact-text div").nth(0)).toHaveText( + "", + ); + await expect(fourthContact.locator(".contact-text div").nth(1)).toHaveText( + "Christopher Turk", + ); + await expect(fourthContact.locator(".contact-text div").nth(2)).toHaveText( + "turk@hospital.com", + ); + await expect(fourthContact.locator(".contact-text div").nth(3)).toHaveText( + "55510004", + ); + await expect(fourthContact.locator(".contact-image")).toHaveCSS( + "background-image", + "none", + ); + }); + + test("Should render image as background image for first three contacts", async ({ + page, + }) => { + for (let i = 0; i < 3; i++) { + const imageDiv = page + .locator(".contact") + .nth(i) + .locator(".contact-image"); + const bgImage = await imageDiv.evaluate( + (el) => getComputedStyle(el).backgroundImage, + ); + expect(bgImage).toContain("/fixtures/template/images/"); + } + }); + + test("Should set media-contain class", async ({ page }) => { + expect(page.locator(".media-contain")).toHaveCount(3); + }); + + test("Should render last 3 contacts with SVG instead of background image", async ({ + page, + }) => { + for (let i = 3; i < 6; i++) { + const svg = page.locator(".contact").nth(i).locator("svg"); + await expect(svg).toBeVisible(); + } + }); });