Skip to content

Add contacts test #295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 9, 2025
Merged

Add contacts test #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 55 additions & 26 deletions assets/template/fixtures/slide-fixtures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -664,7 +664,7 @@ const slideFixtures = [
},
},
{
id: "contacts-0",
id: "contacts-underlined",
templateData: {
id: "01FPZ19YEHX7MQ5Q6ZS0WK0VEA",
},
Expand All @@ -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",
},
},
},
Expand All @@ -691,51 +691,80 @@ const slideFixtures = [
duration: 5000,
contacts: [
{
title: "Pedel",
name: "John Michael Dorian",
phone: "12341234",
email: "[email protected]",
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: "[email protected]",
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: "[email protected]",
title: "Resident Doctor",
name: "Elliot Reid",
phone: "55510003",
email: "ereid@@hospital.com",
id: "uniqueContact3",
image: ["/v1/media/00000000000000000000000003"],
},
{
name: "Dr. Cox",
phone: "12341234",
email: "[email protected]",
name: "Christopher Turk",
phone: "55510004",
email: "[email protected]",
id: "uniqueContact4",
},
{
name: "Dr. Cox",
phone: "12341234",
email: "[email protected]",
name: "Carla Espinosa",
phone: "55510005",
email: "[email protected]",
id: "uniqueContact5",
},
{
name: "Dr. Cox",
phone: "12341234",
email: "[email protected]",
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: {
Expand Down
147 changes: 144 additions & 3 deletions assets/tests/template/template-contacts.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(
"[email protected]",
);
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();
}
});
});
Loading