Tests of hook

CHANGELOG.md

@@ -22,7 +22,7 @@ All notable changes to this project will be documented in this file.
 - Aligned with v. 2.5.2.
 - Removed themes.
 - Added command to migrate config.json files.
-- Fix data fetching bug
+- Fix data fetching bug + tests
 - Refactored screen layout commands.
 
 ### NB! Prior to 3.x the project was split into separate repositories

assets/admin/components/slide/slide-form.jsx

@@ -298,7 +298,7 @@ function SlideForm({
                 </ContentBody>
               </>
             )}
-            <ContentBody>
+            <ContentBody id="add-slide-to-playlist-section">
               <h2 className="h4">{t("add-slide-to-playlists")}</h2>
               <SelectPlaylistsTable
                 helpText={t("add-playlists-help-text")}

assets/admin/components/util/content-body/content-body.jsx

@@ -5,7 +5,7 @@
  * @param {boolean} props.highlightSection Highlight this section.
  * @returns {object} The Content header.
  */
-function ContentBody({ children, id = "", highlightSection = false }) {
+function ContentBody({ id = "", highlightSection = false, children }) {
   const classes = `shadow-sm p-3 mb-3 bg-body rounded ${
     highlightSection ? "border border-warning" : ""
   }`;

assets/tests/admin/admin-fetch-data-hook.spec.js

@@ -0,0 +1,103 @@
+import { test, expect } from "@playwright/test";
+import {
+  fulfillDataRoute,
+  fulfillEmptyRoutes,
+  beforeEachTest,
+  loginTest,
+} from "./test-helper.js";
+import {
+  imageTextTemplate,
+  onlyImageTextListJson,
+  slidesJson1,
+  slideJson,
+  slidesPlaylist,
+} from "./data-fixtures.js";
+
+test.describe("Test of admin fetch data hook", () => {
+  test.beforeEach(async ({ page }) => {
+    await beforeEachTest(page);
+  });
+
+  test.beforeEach(async ({ page }) => {
+    page.setViewportSize({ width: 600, height: 2600 });
+    await fulfillDataRoute(
+      page,
+      "**/templates?itemsPerPage*",
+      onlyImageTextListJson,
+    );
+
+    await page.route(
+      "**/templates/000YR9PMQC0GMC1TP90V9N07WX",
+      async (route) => {
+        await route.fulfill(imageTextTemplate);
+      },
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/01FGC8EXSE1KCC1PTR0NHB0H3R",
+      imageTextTemplate,
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/002BAP34VD1EHG0E4J0D2Y00JW",
+      imageTextTemplate,
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/017BG9P0E0103F0TFS17FM016M",
+      imageTextTemplate,
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/016MHSNKCH1PQW1VY615JC19Y3",
+      imageTextTemplate,
+    );
+    await fulfillDataRoute(
+      page,
+      "**/templates/000BGWFMBS15N807E60HP91JCX",
+      imageTextTemplate,
+    );
+
+    await loginTest(page, slidesJson1);
+
+    await fulfillDataRoute(
+      page,
+      "**/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+      imageTextTemplate,
+    );
+
+    await fulfillDataRoute(
+      page,
+      "**/v2/slides/00015Y0ZVC18N407JD07SM0YCF",
+      slideJson,
+    );
+
+    await fulfillEmptyRoutes(page, ["**/playlists*", "**/themes*"]);
+    await fulfillDataRoute(
+      page,
+      "**/slides/00015Y0ZVC18N407JD07SM0YCF/playlists?*",
+      slidesPlaylist,
+    );
+
+    await Promise.all([
+      page.waitForURL("**/slide/edit/*"),
+      await page.locator("#edit_button").first().click({ force: true }),
+    ]);
+
+    const title = page.getByText("Rediger slide:");
+    await title.waitFor();
+
+    await expect(title).toBeVisible();
+  });
+
+  test("Test of admin fetch data hook", async ({ page }) => {
+    const title = page.locator("#add-slide-to-playlist-section tr");
+    // The max items per page is 30: https://github.com/os2display/display-api-service/blob/develop/config/packages/api_platform.yaml#L11
+    // And the header is also a <tr
+    await expect(title).toHaveCount(32);
+  });
+});

assets/tests/admin/data-fixtures.js

@@ -410,6 +410,80 @@ const clientConfigJson = {
   logging: false,
 };
 
+const members = [];
+Array.from(Array(31).keys()).forEach((i) => {
+  members.push({
+    "@id": "/v2/playlist-slides/01JX8KAN3R1D201EJC06AF099N",
+    "@type": "PlaylistSlide",
+    slide: {
+      "@id": "/v2/slides/00015Y0ZVC18N407JD07SM0YCF",
+      "@type": "Slide",
+    },
+    playlist: {
+      "@id": "/v2/playlists/01JQHJV7101JG70V6G0E9313PV",
+      "@type": "Playlist",
+      title: "1",
+      description:
+        "Similique voluptas aut temporibus soluta et cupiditate dolore. Ut ut totam fuga. Ullam quis ut nulla et totam neque quia.",
+      schedules: [],
+      slides: "/v2/playlists/01JQHJV7101JG70V6G0E9313PV/slides",
+      campaignScreens: [],
+      campaignScreenGroups: [],
+      tenants: [
+        {
+          "@type": "Tenant",
+          "@id": "/v2/tenants/01JDHRTN7R0JWK1KYN12WC16QX",
+        },
+      ],
+      isCampaign: false,
+      published: {
+        from: "2024-09-27T13:08:20.000Z",
+        to: "2025-05-26T09:48:41.000Z",
+      },
+      relationsChecksum: {
+        slides: "a392e0ee600c545e5604713161f14bac7460471f",
+      },
+    },
+    weight: { i },
+  });
+});
+
+const slidesPlaylist = {
+  "@context": "/contexts/PlaylistSlide",
+  "@id": "/v2/slides/01JVA5509R1V8S16PR15BB1Q4D/playlists",
+  "hydra:totalItems": 31,
+  "hydra:member": members,
+};
+
+const slideJson = {
+  "@context": "/contexts/Slide",
+  "@id": "/v2/slides/00015Y0ZVC18N407JD07SM0YCF",
+  "@type": "Slide",
+  title: "",
+  description: "",
+  templateInfo: {
+    "@id": "/v2/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+    options: [],
+  },
+  onPlaylists: [],
+  published: {
+    from: "2025-09-18T09:30:00.000Z",
+    to: null,
+  },
+  media: [],
+  content: {
+    title: "Title",
+  },
+  modifiedBy: "admin@example.com",
+  createdBy: "admin@example.com",
+  id: "01K5E2JGX3G60S73YRGR26W81J",
+  created: "2025-09-18T11:30:32.000Z",
+  modified: "2025-09-18T11:33:13.000Z",
+  relationsChecksum: {
+    templateInfo: "b2341f464f952dcd78c26990075ab5090af1286c",
+  },
+};
+
 const slidesJson1 = {
   "@id": "/v2/slides",
   "hydra:member": [
@@ -986,6 +1060,25 @@ const screensListJson = {
   ],
 };
 
+const onlyImageTextListJson = {
+  "@context": "/contexts/Template",
+  "@id": "/v2/templates",
+  "@type": "hydra:Collection",
+  "hydra:totalItems": 1,
+  "hydra:member": [
+    {
+      "@id": "/v2/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
+      "@type": "Template",
+      title: "Billede og tekst",
+      modifiedBy: "",
+      createdBy: "",
+      id: "01FP2SNGFN0BZQH03KCBXHKYHG",
+      created: "2024-08-03T09:38:27.000Z",
+      modified: "2025-02-01T06:08:28.000Z",
+    },
+  ],
+};
+
 const templatesListJson = {
   "@id": "/v2/templates",
   "hydra:member": [
@@ -1076,6 +1169,15 @@ const templatesListJson = {
   "hydra:totalItems": 12,
 };
 
+const imageTextTemplate = {
+  title: "Billede og tekst",
+  modifiedBy: "",
+  createdBy: "",
+  id: "01FP2SNGFN0BZQH03KCBXHKYHG",
+  created: "2024-08-04T06:32:42.000Z",
+  modified: "2025-02-02T03:02:43.000Z",
+};
+
 const slidesListJson = {
   "@id": "/v2/slides",
   "hydra:member": [
@@ -1089,7 +1191,7 @@ const slidesListJson = {
       modifiedBy: "",
       createdBy: "",
       templateInfo: {
-        "@id": "/v2/templates/00MWCNKC4P0X5C0AT70E741E2V",
+        "@id": "/v2/templates/01FP2SNGFN0BZQH03KCBXHKYHG",
         options: [],
       },
       theme: "",
@@ -1645,4 +1747,8 @@ export {
   slidesListJson,
   themesJson,
   themesSingleJson,
+  onlyImageTextListJson,
+  slideJson,
+  imageTextTemplate,
+  slidesPlaylist,
 };

assets/tests/admin/test-helper.js

@@ -33,15 +33,15 @@ const fulfillDataRoute = async (page, routePattern, data, status) => {
   });
 };
 
-const loginTest = async (page) => {
+const loginTest = async (page, slides = null) => {
   await page.goto("/admin/slides/list");
 
   await page.route("**/token", async (route) => {
     await route.fulfill({ json: tokenAdminJson });
   });
 
   await page.route("**/slides*", async (route) => {
-    await route.fulfill({ json: emptyJson });
+    await route.fulfill({ json: slides ?? emptyJson });
   });
 
   await expect(page).toHaveTitle(/OS2Display Admin/);