Table tests added, fixtures added, classes added to template

assets/shared/templates/table.jsx

@@ -102,7 +102,7 @@ function Table({ slide, content, run, slideDone, executionId }) {
         </Header>
         <ContentWrapper>
           {fontPlacement === "top" && (
-            <Description className="text">{text}</Description>
+            <Description className="top-text">{text}</Description>
           )}
           {header && (
             <GridTable style={gridStyle}>
@@ -129,7 +129,7 @@ function Table({ slide, content, run, slideDone, executionId }) {
             </GridTable>
           )}
           {fontPlacement === "bottom" && (
-            <Description classes="text">{text}</Description>
+            <Description className="bottom-text">{text}</Description>
           )}
         </ContentWrapper>
       </Wrapper>

assets/template/fixtures/slide-fixtures.js

@@ -1525,21 +1525,21 @@ const slideFixtures = [
       duration: 5000,
       image: ["/v1/media/00000000000000000000000001"],
       title: "Overskrift",
-      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",
+      text: "Bread text",
       fontPlacement: "bottom",
-      fontSize: "font-size-s",
-      mediaContain: true,
+      fontSize: "font-size-lg",
+      mediaContain: false,
       table: [
         {
           type: "header",
           columns: [
             {
-              Header: "Column 1",
+              Header: "Kolonne 1",
               key: "1",
               accessor: "accessor-01FQBY38QR2C6YJWESZ288PC5F",
             },
             {
-              Header: "Column 2",
+              Header: "Kolonne 2",
               key: "2",
               accessor: "accessor-01FQBY39P5Q458SWS2V1SYBVNQ",
             },
@@ -1558,6 +1558,62 @@ const slideFixtures = [
       ],
     },
   },
+  {
+    id: "table-1",
+    templateData: {
+      id: "01FQBJFKM0YFX1VW5K94VBSNCP",
+    },
+    themeFile: "/themes/aarhus.css",
+    content: {
+      duration: 5000,
+      title: "Overskrift2",
+      text: "Bread text",
+      fontPlacement: "top",
+      fontSize: "font-size-s",
+      mediaContain: true,
+      separator: false,
+      table: [
+        {
+          type: "header",
+          columns: [
+            {
+              Header: "Kolonne 1",
+              key: "1",
+              accessor: "accessor-01FQBY38QR2C6YJWESZ288PC5F",
+            },
+            {
+              Header: "Kolonne 2",
+              key: "2",
+              accessor: "accessor-01FQBY39P5Q458SWS2V1SYBVNQ",
+            },
+            {
+              Header: "Kolonne 3",
+              key: "3",
+              accessor: "accessor-01FQBY39P5Q458SWS3V1SYBVNQ",
+            },
+          ],
+        },
+        {
+          "accessor-01FQBY38QR2C6YJWESZ288PC5F": "Række 1, kolonne 1",
+          key: "key-01FQBY3APH6SPBKVHTRXVRS9VJ",
+          "accessor-01FQBY39P5Q458SWS2V1SYBVNQ": "Række 1, kolonne 2",
+          "accessor-01FQBY39P5Q458SWS3V1SYBVNQ": "Række 1, kolonne 3",
+        },
+        {
+          "accessor-01FQBY38QR2C6YJWESZ288PC5F": "Række 2, kolonne 1",
+          key: "key-01FQBY3BCWREFQBEVQQF2KH08S",
+          "accessor-01FQBY39P5Q458SWS2V1SYBVNQ": "Række 2, kolonne 2",
+          "accessor-01FQBY39P5Q458SWS3V1SYBVNQ": "Række 2, kolonne 3",
+        },
+        {
+          "accessor-01FQBY38QR2C6YJWESZ288PC5F": "Række 3, kolonne 1",
+          key: "key-01FQBY3BCWREFQBEVQQF2KH08S",
+          "accessor-01FQBY39P5Q458SWS2V1SYBVNQ": "Række 3, kolonne 2",
+          "accessor-01FQBY39P5Q458SWS3V1SYBVNQ": "Række 3, kolonne 3",
+        },
+      ],
+    },
+  },
   {
     id: "travel-multiple-stations",
     templateData: {

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

@@ -1,7 +1,153 @@
 import { test, expect } from "@playwright/test";
 
-test("Table 0", async ({ page }) => {
-  await page.goto("/template/table-0");
+test.describe("table-0: ui tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/template/table-0");
+  });
 
-  // TODO
+  test("Component should be visible", async ({ page }) => {
+    const templateTable = page.locator(".template-table");
+    await expect(templateTable).toBeVisible();
+  });
+
+  test("Should have correct background image", async ({ page }) => {
+    const backgroundImage = page.locator(".template-table");
+    await expect(backgroundImage).toHaveCSS(
+      "background-image",
+      new RegExp("/fixtures/template/images/mountain1.jpeg"),
+    );
+  });
+
+  test("Should contain header with title", async ({ page }) => {
+    const title = page.locator(".template-table-header .title");
+    await expect(title).toHaveText("Overskrift");
+  });
+
+  test("Should have correct font size", async ({ page }) => {
+    const fontSize = page.locator(".font-size-lg");
+    await expect(fontSize).toBeVisible();
+    const fontSizeS = page.locator(".font-size-s");
+    await expect(fontSizeS).toHaveCount(0);
+  });
+
+  test("Should set media contain", async ({ page }) => {
+    const mediaContain = page.locator(".media-contain");
+    await expect(mediaContain).toHaveCount(0);
+  });
+
+  test("Should have two column headers", async ({ page }) => {
+    const columnHeaders = page.locator(".column-header");
+    await expect(columnHeaders).toHaveCount(2);
+    await expect(columnHeaders.nth(0)).toHaveText("Kolonne 1");
+    await expect(columnHeaders.nth(1)).toHaveText("Kolonne 2");
+  });
+
+  test("Separator exists (default is true)", async ({ page }) => {
+    const separator = page.locator(".separator");
+    await expect(separator).toBeVisible();
+  });
+
+  test("Should render table cell content correctly", async ({ page }) => {
+    const columns = page.locator(".column");
+    await expect(columns).toHaveCount(4);
+
+    const columnTexts = [
+      "Række 1",
+      "Række 1, celle 2",
+      "Række 2",
+      "Række 2, celle 2",
+    ];
+
+    for (let i = 0; i < columnTexts.length; i++) {
+      await expect(columns.nth(i)).toHaveText(columnTexts[i]);
+    }
+  });
+
+  test("Should contain description text in main in the bottom", async ({
+    page,
+  }) => {
+    const bottomText = page.locator(".bottom-text");
+    await expect(bottomText).toContainText("Bread text");
+    const topText = page.locator(".top-text");
+    await expect(topText).toHaveCount(0);
+  });
+});
+
+test.describe("table-1: ui tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/template/table-1");
+  });
+
+  test("Component should be visible", async ({ page }) => {
+    const templateTable = page.locator(".template-table");
+    await expect(templateTable).toBeVisible();
+  });
+
+  test("Should have correct background image", async ({ page }) => {
+    const backgroundImage = page.locator(".template-table");
+    await expect(backgroundImage).not.toHaveCSS(
+      "background-image",
+      new RegExp("/fixtures/template/images/mountain1.jpeg"),
+    );
+  });
+
+  test("Should have correct font size", async ({ page }) => {
+    const fontSize = page.locator(".font-size-s");
+    await expect(fontSize).toBeVisible();
+    const fontSizeLG = page.locator(".font-size-lg");
+    await expect(fontSizeLG).toHaveCount(0);
+  });
+
+  test("Should set media contain", async ({ page }) => {
+    const mediaContain = page.locator(".media-contain");
+    await expect(mediaContain).toBeVisible();
+  });
+
+  test("Should contain header with title", async ({ page }) => {
+    const title = page.locator(".template-table-header .title");
+    await expect(title).toHaveText("Overskrift2");
+  });
+
+  test("Should have three column headers", async ({ page }) => {
+    const columnHeaders = page.locator(".column-header");
+    await expect(columnHeaders).toHaveCount(3);
+    await expect(columnHeaders.nth(0)).toHaveText("Kolonne 1");
+    await expect(columnHeaders.nth(1)).toHaveText("Kolonne 2");
+    await expect(columnHeaders.nth(2)).toHaveText("Kolonne 3");
+  });
+
+  test("Separator does not exist", async ({ page }) => {
+    const separator = page.locator(".separator");
+    await expect(separator).toHaveCount(0);
+  });
+
+  test("Should render table cell content correctly", async ({ page }) => {
+    const columns = page.locator(".column");
+    await expect(columns).toHaveCount(9);
+
+    const columnTexts = [
+      "Række 1, kolonne 1",
+      "Række 1, kolonne 2",
+      "Række 1, kolonne 3",
+      "Række 2, kolonne 1",
+      "Række 2, kolonne 2",
+      "Række 2, kolonne 3",
+      "Række 3, kolonne 1",
+      "Række 3, kolonne 2",
+      "Række 3, kolonne 3",
+    ];
+
+    for (let i = 0; i < columnTexts.length; i++) {
+      await expect(columns.nth(i)).toHaveText(columnTexts[i]);
+    }
+  });
+
+  test("Should contain description text in main in the top", async ({
+    page,
+  }) => {
+    const topText = page.locator(".top-text");
+    await expect(topText).toContainText("Bread text");
+    const bottomText = page.locator(".bottom-text");
+    await expect(bottomText).toHaveCount(0);
+  });
 });