Merge pull request #279 from os2display/feature/5317-slideshow-template-test

Add fixture data and test of slideshow

Author: tuj

assets/template/fixtures/slide-fixtures.js

@@ -1399,9 +1399,10 @@ const slideFixtures = [
       showLogo: true,
       logoSize: "l",
       mediaContain: true,
-      logoPosition: "bottom right",
+      logoPosition: "logo-position-bottom-right",
       transition: "fade",
-      animation: "random",
+      logoMargin: true,
+      animation: "zoom-out-middle",
     },
   },
   {
@@ -1449,8 +1450,7 @@ const slideFixtures = [
       ],
       transition: null,
       animation: null,
-      showLogo: true,
-      logoMargin: true,
+      showLogo: false,
       logoSize: "logo-size-l",
       logoPosition: "logo-position-bottom-left",
     },
@@ -1500,10 +1500,10 @@ const slideFixtures = [
         "/v1/media/00000000000000000000000003",
         "/v1/media/00000000000000000000000004",
       ],
-      showLogo: false,
+      showLogo: true,
       logoSize: "l",
       mediaContain: true,
-      logoPosition: "bottom right",
+      logoPosition: "logo-position-top-right",
       transition: "fade",
       animation: "none",
     },

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

@@ -1,19 +1,82 @@
 import { test, expect } from "@playwright/test";
 
-test("Slideshow 0", async ({ page }) => {
-  await page.goto("/template/slideshow-0");
+test.describe("slideshow-0: UI tests", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/template/slideshow-0");
+  });
 
-  // TODO
+  test("Slides/image change every 5 seconds", async ({ page }) => {
+    const slideChangeInterval = 6000;
+    const imagePaths = [
+      "/fixtures/template/images/mountain1.jpeg",
+      "/fixtures/template/images/mountain2.jpeg",
+      "/fixtures/template/images/mountain3.jpeg",
+      "/fixtures/template/images/mountain4.jpeg",
+    ];
+
+    const getActiveSlide = () =>
+      page.locator('.fade-container[data-active="true"]');
+    const getInactiveSlides = () =>
+      page.locator('.fade-container[data-active="false"]');
+
+    let previousIndex = null;
+
+    for (const expectedImage of imagePaths) {
+      const activeSlide = await getActiveSlide();
+      const activeIndex = await activeSlide.getAttribute("data-index");
+
+      if (previousIndex !== null) {
+        expect(activeIndex).not.toBe(previousIndex);
+      }
+      previousIndex = activeIndex;
+
+      await expect(activeSlide).toHaveCSS("opacity", "1");
+
+      const image = activeSlide.locator(".image");
+      await expect(image).toHaveCSS(
+        "background-image",
+        new RegExp(expectedImage),
+      );
+
+      const inactiveSlides = getInactiveSlides();
+      const count = await inactiveSlides.count();
+      for (let i = 0; i < count; i++) {
+        await expect(inactiveSlides.nth(i)).toHaveCSS("opacity", "0");
+      }
+
+      if (expectedImage !== imagePaths[imagePaths.length - 1]) {
+        await page.waitForTimeout(slideChangeInterval);
+      }
+    }
+  });
+
+  test("Should apply logo classes", async ({ page }) => {
+    const img = page.locator("img");
+    expect(img).toHaveAttribute(
+      "class",
+      "logo logo-margin l logo-position-bottom-right",
+    );
+  });
 });
 
-test("Slideshow 1", async ({ page }) => {
-  await page.goto("/template/slideshow-1-no-stuff");
+test.describe("slideshow-1-no-stuff: UI Tests", async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/template/slideshow-1-no-stuff");
+  });
 
-  // TODO
+  test("Should not show logo", async ({ page }) => {
+    const img = page.locator("img");
+    expect(img).toHaveCount(0);
+  });
 });
 
-test("Slideshow 2", async ({ page }) => {
-  await page.goto("/template/slideshow-2");
+test.describe("slideshow-2: UI Tests", async () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/template/slideshow-2");
+  });
 
-  // TODO
+  test("Should apply logo classes", async ({ page }) => {
+    const img = page.locator("img");
+    expect(img).toHaveAttribute("class", "logo l logo-position-top-right");
+  });
 });