Skip to content

Commit 96e9f3d

Browse files
author
Sine Jespersen
committed
5317: table tests added, fixtures added, classes added to template
1 parent 7fdf818 commit 96e9f3d

File tree

3 files changed

+212
-10
lines changed

3 files changed

+212
-10
lines changed

‎assets/shared/templates/table.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ function Table({ slide, content, run, slideDone, executionId }) {
102102
</Header>
103103
<ContentWrapper>
104104
{fontPlacement === "top" && (
105-
<Description className="text">{text}</Description>
105+
<Description className="top-text">{text}</Description>
106106
)}
107107
{header && (
108108
<GridTable style={gridStyle}>
@@ -129,7 +129,7 @@ function Table({ slide, content, run, slideDone, executionId }) {
129129
</GridTable>
130130
)}
131131
{fontPlacement === "bottom" && (
132-
<Description classes="text">{text}</Description>
132+
<Description className="bottom-text">{text}</Description>
133133
)}
134134
</ContentWrapper>
135135
</Wrapper>

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

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1525,21 +1525,21 @@ const slideFixtures = [
15251525
duration: 5000,
15261526
image: ["/v1/media/00000000000000000000000001"],
15271527
title: "Overskrift",
1528-
text: "Da dadadad dad aa da dadadad dad aa da dadadad dad aa da dadadad dad aa da dadadad dad aa da dadadad dad aadadadad dad aa da dadadad dad aa da dadadad dad aa da dadadad dad aa da dadadad dad aa da dadadad dad aa",
1528+
text: "Bread text",
15291529
fontPlacement: "bottom",
1530-
fontSize: "font-size-s",
1531-
mediaContain: true,
1530+
fontSize: "font-size-lg",
1531+
mediaContain: false,
15321532
table: [
15331533
{
15341534
type: "header",
15351535
columns: [
15361536
{
1537-
Header: "Column 1",
1537+
Header: "Kolonne 1",
15381538
key: "1",
15391539
accessor: "accessor-01FQBY38QR2C6YJWESZ288PC5F",
15401540
},
15411541
{
1542-
Header: "Column 2",
1542+
Header: "Kolonne 2",
15431543
key: "2",
15441544
accessor: "accessor-01FQBY39P5Q458SWS2V1SYBVNQ",
15451545
},
@@ -1558,6 +1558,62 @@ const slideFixtures = [
15581558
],
15591559
},
15601560
},
1561+
{
1562+
id: "table-1",
1563+
templateData: {
1564+
id: "01FQBJFKM0YFX1VW5K94VBSNCP",
1565+
},
1566+
themeFile: "/themes/aarhus.css",
1567+
content: {
1568+
duration: 5000,
1569+
title: "Overskrift2",
1570+
text: "Bread text",
1571+
fontPlacement: "top",
1572+
fontSize: "font-size-s",
1573+
mediaContain: true,
1574+
separator: false,
1575+
table: [
1576+
{
1577+
type: "header",
1578+
columns: [
1579+
{
1580+
Header: "Kolonne 1",
1581+
key: "1",
1582+
accessor: "accessor-01FQBY38QR2C6YJWESZ288PC5F",
1583+
},
1584+
{
1585+
Header: "Kolonne 2",
1586+
key: "2",
1587+
accessor: "accessor-01FQBY39P5Q458SWS2V1SYBVNQ",
1588+
},
1589+
{
1590+
Header: "Kolonne 3",
1591+
key: "3",
1592+
accessor: "accessor-01FQBY39P5Q458SWS3V1SYBVNQ",
1593+
},
1594+
],
1595+
},
1596+
{
1597+
"accessor-01FQBY38QR2C6YJWESZ288PC5F": "Række 1, kolonne 1",
1598+
key: "key-01FQBY3APH6SPBKVHTRXVRS9VJ",
1599+
"accessor-01FQBY39P5Q458SWS2V1SYBVNQ": "Række 1, kolonne 2",
1600+
"accessor-01FQBY39P5Q458SWS3V1SYBVNQ": "Række 1, kolonne 3",
1601+
},
1602+
{
1603+
"accessor-01FQBY38QR2C6YJWESZ288PC5F": "Række 2, kolonne 1",
1604+
key: "key-01FQBY3BCWREFQBEVQQF2KH08S",
1605+
"accessor-01FQBY39P5Q458SWS2V1SYBVNQ": "Række 2, kolonne 2",
1606+
"accessor-01FQBY39P5Q458SWS3V1SYBVNQ": "Række 2, kolonne 3",
1607+
},
1608+
{
1609+
"accessor-01FQBY38QR2C6YJWESZ288PC5F": "Række 3, kolonne 1",
1610+
key: "key-01FQBY3BCWREFQBEVQQF2KH08S",
1611+
"accessor-01FQBY39P5Q458SWS2V1SYBVNQ": "Række 3, kolonne 2",
1612+
"accessor-01FQBY39P5Q458SWS3V1SYBVNQ": "Række 3, kolonne 3",
1613+
},
1614+
],
1615+
},
1616+
},
15611617
{
15621618
id: "travel-multiple-stations",
15631619
templateData: {

‎assets/tests/template/template-table.spec.js‎

Lines changed: 149 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,153 @@
11
import { test, expect } from "@playwright/test";
22

3-
test("Table 0", async ({ page }) => {
4-
await page.goto("/template/table-0");
3+
test.describe("table-0: ui tests", () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto("/template/table-0");
6+
});
57

6-
// TODO
8+
test("Component should be visible", async ({ page }) => {
9+
const templateTable = page.locator(".template-table");
10+
await expect(templateTable).toBeVisible();
11+
});
12+
13+
test("Should have correct background image", async ({ page }) => {
14+
const backgroundImage = page.locator(".template-table");
15+
await expect(backgroundImage).toHaveCSS(
16+
"background-image",
17+
new RegExp("/fixtures/template/images/mountain1.jpeg"),
18+
);
19+
});
20+
21+
test("Should contain header with title", async ({ page }) => {
22+
const title = page.locator(".template-table-header .title");
23+
await expect(title).toHaveText("Overskrift");
24+
});
25+
26+
test("Should have correct font size", async ({ page }) => {
27+
const fontSize = page.locator(".font-size-lg");
28+
await expect(fontSize).toBeVisible();
29+
const fontSizeS = page.locator(".font-size-s");
30+
await expect(fontSizeS).toHaveCount(0);
31+
});
32+
33+
test("Should set media contain", async ({ page }) => {
34+
const mediaContain = page.locator(".media-contain");
35+
await expect(mediaContain).toHaveCount(0);
36+
});
37+
38+
test("Should have two column headers", async ({ page }) => {
39+
const columnHeaders = page.locator(".column-header");
40+
await expect(columnHeaders).toHaveCount(2);
41+
await expect(columnHeaders.nth(0)).toHaveText("Kolonne 1");
42+
await expect(columnHeaders.nth(1)).toHaveText("Kolonne 2");
43+
});
44+
45+
test("Separator exists (default is true)", async ({ page }) => {
46+
const separator = page.locator(".separator");
47+
await expect(separator).toBeVisible();
48+
});
49+
50+
test("Should render table cell content correctly", async ({ page }) => {
51+
const columns = page.locator(".column");
52+
await expect(columns).toHaveCount(4);
53+
54+
const columnTexts = [
55+
"Række 1",
56+
"Række 1, celle 2",
57+
"Række 2",
58+
"Række 2, celle 2",
59+
];
60+
61+
for (let i = 0; i < columnTexts.length; i++) {
62+
await expect(columns.nth(i)).toHaveText(columnTexts[i]);
63+
}
64+
});
65+
66+
test("Should contain description text in main in the bottom", async ({
67+
page,
68+
}) => {
69+
const bottomText = page.locator(".bottom-text");
70+
await expect(bottomText).toContainText("Bread text");
71+
const topText = page.locator(".top-text");
72+
await expect(topText).toHaveCount(0);
73+
});
74+
});
75+
76+
test.describe("table-1: ui tests", () => {
77+
test.beforeEach(async ({ page }) => {
78+
await page.goto("/template/table-1");
79+
});
80+
81+
test("Component should be visible", async ({ page }) => {
82+
const templateTable = page.locator(".template-table");
83+
await expect(templateTable).toBeVisible();
84+
});
85+
86+
test("Should have correct background image", async ({ page }) => {
87+
const backgroundImage = page.locator(".template-table");
88+
await expect(backgroundImage).not.toHaveCSS(
89+
"background-image",
90+
new RegExp("/fixtures/template/images/mountain1.jpeg"),
91+
);
92+
});
93+
94+
test("Should have correct font size", async ({ page }) => {
95+
const fontSize = page.locator(".font-size-s");
96+
await expect(fontSize).toBeVisible();
97+
const fontSizeLG = page.locator(".font-size-lg");
98+
await expect(fontSizeLG).toHaveCount(0);
99+
});
100+
101+
test("Should set media contain", async ({ page }) => {
102+
const mediaContain = page.locator(".media-contain");
103+
await expect(mediaContain).toBeVisible();
104+
});
105+
106+
test("Should contain header with title", async ({ page }) => {
107+
const title = page.locator(".template-table-header .title");
108+
await expect(title).toHaveText("Overskrift2");
109+
});
110+
111+
test("Should have three column headers", async ({ page }) => {
112+
const columnHeaders = page.locator(".column-header");
113+
await expect(columnHeaders).toHaveCount(3);
114+
await expect(columnHeaders.nth(0)).toHaveText("Kolonne 1");
115+
await expect(columnHeaders.nth(1)).toHaveText("Kolonne 2");
116+
await expect(columnHeaders.nth(2)).toHaveText("Kolonne 3");
117+
});
118+
119+
test("Separator does not exist", async ({ page }) => {
120+
const separator = page.locator(".separator");
121+
await expect(separator).toHaveCount(0);
122+
});
123+
124+
test("Should render table cell content correctly", async ({ page }) => {
125+
const columns = page.locator(".column");
126+
await expect(columns).toHaveCount(9);
127+
128+
const columnTexts = [
129+
"Række 1, kolonne 1",
130+
"Række 1, kolonne 2",
131+
"Række 1, kolonne 3",
132+
"Række 2, kolonne 1",
133+
"Række 2, kolonne 2",
134+
"Række 2, kolonne 3",
135+
"Række 3, kolonne 1",
136+
"Række 3, kolonne 2",
137+
"Række 3, kolonne 3",
138+
];
139+
140+
for (let i = 0; i < columnTexts.length; i++) {
141+
await expect(columns.nth(i)).toHaveText(columnTexts[i]);
142+
}
143+
});
144+
145+
test("Should contain description text in main in the top", async ({
146+
page,
147+
}) => {
148+
const topText = page.locator(".top-text");
149+
await expect(topText).toContainText("Bread text");
150+
const bottomText = page.locator(".bottom-text");
151+
await expect(bottomText).toHaveCount(0);
152+
});
7153
});

0 commit comments

Comments
 (0)