Skip to content

Commit 2a2753e

Browse files
tujtuj
authored
Merge pull request #302 from os2display/feature/5317-image-text-tests
Image text template tests
2 parents e0d8711 + 0d1de18 commit 2a2753e

File tree

2 files changed

+170
-54
lines changed

2 files changed

+170
-54
lines changed

‎assets/template/fixtures/slide-fixtures.js‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -794,16 +794,44 @@ const slideFixtures = [
794794
title: "Overskriften er her",
795795
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.",
796796
image: ["/v1/media/00000000000000000000000001"],
797-
boxAlign: "top",
797+
boxAlign: "left",
798798
boxMargin: false,
799799
shadow: true,
800-
separator: false,
801-
halfSize: false,
800+
separator: true,
801+
halfSize: true,
802802
reversed: false,
803803
mediaContain: true,
804804
fontSize: "font-size-xl",
805805
},
806806
},
807+
{
808+
id: "image-text-1",
809+
templateData: {
810+
id: "01FP2SNGFN0BZQH03KCBXHKYHG",
811+
},
812+
themeFile: null,
813+
mediaData: {
814+
"/v1/media/00000000000000000000000001": {
815+
assets: {
816+
uri: "/fixtures/template/images/mountain1.jpeg",
817+
},
818+
},
819+
},
820+
content: {
821+
duration: 5000,
822+
title: "Overskriften er her",
823+
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.",
824+
image: ["/v1/media/00000000000000000000000001"],
825+
boxAlign: "top",
826+
boxMargin: true,
827+
shadow: true,
828+
separator: false,
829+
halfSize: false,
830+
reversed: false,
831+
mediaContain: false,
832+
fontSize: "font-size-sm",
833+
},
834+
},
807835
{
808836
id: "image-text-1-multiple-images",
809837
templateData: {
@@ -842,7 +870,7 @@ const slideFixtures = [
842870
separator: true,
843871
halfSize: true,
844872
mediaContain: true,
845-
reversed: false,
873+
reversed: true,
846874
fontSize: "font-size-m",
847875
disableImageFade: false,
848876
},
@@ -912,6 +940,27 @@ const slideFixtures = [
912940
fontSize: "font-size-lg",
913941
},
914942
},
943+
{
944+
id: "image-text-reversed",
945+
templateData: {
946+
id: "01FP2SNGFN0BZQH03KCBXHKYHG",
947+
},
948+
themeFile: "/fixtures/example.css",
949+
content: {
950+
duration: 5000,
951+
title: "Overskriften er her",
952+
text: "Dette er brødtekst lorem ipsum dolor sit amet....",
953+
image: [],
954+
boxAlign: "top",
955+
boxMargin: false,
956+
shadow: true,
957+
separator: true,
958+
halfSize: true,
959+
reversed: true,
960+
mediaContain: true,
961+
fontSize: "font-size-xl",
962+
},
963+
},
915964
{
916965
id: "image-text-4-test-theme",
917966
templateData: {

‎assets/tests/template/template-image-text.spec.js‎

Lines changed: 117 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,126 @@
11
import { test, expect } from "@playwright/test";
22

3-
test("Image Text 0", async ({ page }) => {
4-
await page.goto("/template/image-text-0");
5-
6-
await expect(page.getByText("Overskriften er her")).toBeVisible();
7-
await expect(page.locator(".box")).toBeVisible();
8-
await expect(page.locator(".background-image")).toBeVisible();
9-
await expect(page.locator(".background-image")).toHaveCSS(
10-
"background-image",
11-
new RegExp("fixtures/template/images/mountain1.jpeg"),
12-
);
3+
test.describe("image-text-0: ui tests", async () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto("/template/image-text-0");
6+
});
7+
8+
test("Should have correct background image and media-contain", async ({
9+
page,
10+
}) => {
11+
await expect(page.getByText("Overskriften er her")).toBeVisible();
12+
await expect(page.locator(".box")).toBeVisible();
13+
await expect(page.locator(".background-image")).toBeVisible();
14+
await expect(page.locator(".background-image")).toHaveCSS(
15+
"background-image",
16+
new RegExp("fixtures/template/images/mountain1.jpeg"),
17+
);
18+
await expect(page.locator(".background-image")).toHaveCSS(
19+
"background-size",
20+
"contain",
21+
);
22+
});
23+
24+
test("Should have animated-header set", async ({ page }) => {
25+
await expect(page.locator(".animated-header")).toBeVisible();
26+
});
27+
28+
test("Should have half-size set", async ({ page }) => {
29+
await expect(page.locator(".half-size")).toBeVisible();
30+
});
31+
32+
test("Should not have box-margin set", async ({ page }) => {
33+
await expect(page.locator(".box-margin")).not.toBeVisible();
34+
});
35+
36+
test("Should have font size set", async ({ page }) => {
37+
await expect(page.locator(".font-size-xl")).toBeVisible();
38+
});
39+
40+
test("Should have column set", async ({ page }) => {
41+
await expect(page.locator(".column")).toBeVisible();
42+
});
1343
});
1444

15-
test("Image Text 1", async ({ page }) => {
16-
await page.goto("template/image-text-1-multiple-images");
17-
18-
await expect(page.getByText("Slide 14")).toBeVisible();
19-
await expect(page.locator(".background-image")).toBeVisible();
20-
await expect(page.locator(".background-image")).toHaveCSS(
21-
"background-image",
22-
new RegExp("fixtures/template/images/mountain1.jpeg"),
23-
);
24-
await page.waitForTimeout(7500);
25-
await expect(page.locator(".background-image")).toHaveCSS(
26-
"background-image",
27-
new RegExp("fixtures/template/images/mountain2.jpeg"),
28-
);
45+
test.describe("image-text-1", async () => {
46+
test.beforeEach(async ({ page }) => {
47+
await page.goto("/template/image-text-1");
48+
});
49+
50+
test("Should not have column set", async ({ page }) => {
51+
await expect(page.locator(".column")).not.toBeVisible();
52+
});
53+
54+
test("Should have box-margin set", async ({ page }) => {
55+
await expect(page.locator(".box-margin")).toBeVisible();
56+
});
57+
58+
test("Should have shadow set", async ({ page }) => {
59+
await expect(page.locator(".shadow")).toBeVisible();
60+
});
61+
62+
test("Should have font size set", async ({ page }) => {
63+
await expect(page.locator(".font-size-sm")).toBeVisible();
64+
});
65+
66+
test("Should not have media-contain", async ({ page }) => {
67+
await expect(page.locator(".background-image")).toHaveCSS(
68+
"background-size",
69+
"cover",
70+
);
71+
});
2972
});
3073

31-
test("Image Text 2", async ({ page }) => {
32-
await page.goto("template/image-text-2-logo");
33-
34-
await expect(page.getByText("Slide 1")).toBeVisible();
35-
await expect(
36-
page.locator(".logo.logo-margin.logo-size-m.logo-position-bottom-right"),
37-
).toBeVisible();
38-
await expect(page.locator(".logo")).toHaveAttribute(
39-
"src",
40-
new RegExp("fixtures/template/images/mountain1.jpeg"),
41-
);
74+
test.describe("image-text-reversed", async () => {
75+
test.beforeEach(async ({ page }) => {
76+
await page.goto("/template/image-text-reversed");
77+
});
78+
79+
test("Should have reversed set", async ({ page }) => {
80+
await expect(page.locator(".reversed")).toBeVisible();
81+
});
82+
83+
test("Should not have animated-header set", async ({ page }) => {
84+
await expect(page.locator(".animated-header")).not.toBeVisible();
85+
});
86+
87+
test("Should not have half-size set", async ({ page }) => {
88+
await expect(page.locator(".half-size")).not.toBeVisible();
89+
});
90+
91+
test("Should have box-margin set (due to being reversed)", async ({
92+
page,
93+
}) => {
94+
await expect(page.locator(".box-margin")).toBeVisible();
95+
});
4296
});
4397

44-
test("Image Text 3", async ({ page }) => {
45-
await page.goto("template/image-text-3-font-sizes");
46-
47-
await expect(page.getByText("Slide 123121")).toBeVisible();
48-
await expect(page.getByText("Fisk")).toBeVisible();
49-
await expect(page.getByText("Hest")).toBeVisible();
50-
await expect(page.getByText("Ræv")).toBeVisible();
51-
await expect(
52-
page.getByText(
53-
"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.",
54-
),
55-
).toBeVisible();
56-
await expect(page.locator(".text h1")).toBeVisible();
57-
await expect(page.locator(".text h2")).toBeVisible();
58-
await expect(page.locator(".text h3")).toBeVisible();
98+
test.describe("image-text-1-multiple-images", async () => {
99+
test.beforeEach(async ({ page }) => {
100+
await page.goto("/template/image-text-1-multiple-images");
101+
});
102+
103+
test("Should flip through multiple images", async ({ page }) => {
104+
const slideChangeInterval = 6000;
105+
const imagePaths = [
106+
"/fixtures/template/images/mountain1.jpeg",
107+
"/fixtures/template/images/mountain2.jpeg",
108+
"/fixtures/template/images/mountain3.jpeg",
109+
];
110+
111+
const getBackground = () => page.locator(".background-image");
112+
113+
for (const expectedImage of imagePaths) {
114+
const activeBackground = await getBackground();
115+
116+
await expect(activeBackground).toHaveCSS(
117+
"background-image",
118+
new RegExp(expectedImage),
119+
);
120+
121+
if (expectedImage !== imagePaths[imagePaths.length - 1]) {
122+
await page.waitForTimeout(slideChangeInterval);
123+
}
124+
}
125+
});
59126
});

0 commit comments

Comments
 (0)