Booking calendar template

assets/template/fixtures/slide-fixtures.js

@@ -695,7 +695,7 @@ const slideFixtures = [
     },
   },
   {
-    id: "calendar-4-single-booking",
+    id: "calendar-0-single-booking",
     "@id": "/v1/slides/1",
     templateData: {
       id: "01FRJPF4XATRN8PBZ35XN84PS6",
@@ -761,6 +761,42 @@ const slideFixtures = [
       fontSize: "font-size-lg",
     },
   },
+  {
+    id: "calendar-1-single-booking",
+    "@id": "/v1/slides/1",
+    templateData: {
+      id: "01FRJPF4XATRN8PBZ35XN84PS6",
+    },
+    themeFile: null,
+    feed: {
+      resources: ["[email protected]"],
+    },
+    feedData: [
+      {
+        id: "uniqueEvent0",
+        title: "There will be cake",
+        startTime: dayjs().add(1, "seconds").unix(),
+        endTime: dayjs().add(1, "hour").unix(),
+        resourceTitle: "Det tomme rum",
+        resourceId: "M0",
+      },
+    ],
+    mediaData: {},
+    // Disable dark mode for slide.
+    darkModeEnabled: false,
+    content: {
+      duration: 11000,
+      instantBookingEnabled: true,
+      layout: "singleBooking",
+      title: "M2.3",
+      subTitle: "Mødelokale",
+      resourceAvailableText: "Lokalet er frit.",
+      displayHeaders: true,
+      resourceUnavailableText: "Det er optaget",
+      footerText: "Se mere på localhost/events",
+      fontSize: "font-size-lg",
+    },
+  },
   {
     id: "contacts-underlined",
     templateData: {

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

@@ -8,6 +8,11 @@ const fixTime = async (page) => {
   await page.clock.install({ time: newDate });
 };
 
+const fixTimeToNow = async (page) => {
+  const newDate = new Date();
+  await page.clock.install({ time: newDate });
+};
+
 test("calendar-0-multiple-days: ui tests", async ({ page }) => {
   await fixTime(page);
 
@@ -197,10 +202,45 @@ test("calendar-1-single: ui tests", async ({ page }) => {
   await expect(page.locator(".media-contain")).toHaveCount(0);
 });
 
-test("Calendar 4", async ({ page }) => {
+test("calendar-0-single-booking: ui tests", async ({ page }) => {
   await fixTime(page);
 
-  await page.goto("/template/calendar-4-single-booking");
+  await page.goto("/template/calendar-0-single-booking");
+  const title = page.locator(".room-info .title");
+  await expect(title).toHaveText("M2.3");
+  const status = page.locator(".status");
+  await expect(status).toHaveText("Ledigt");
+  expect(page.locator("h3")).toContainText("Kommende begivenheder");
+  const date = page.locator(".date-time > :nth-child(1)");
+  const time = page.locator(".date-time > :nth-child(2)");
+
+  await expect(date).toContainText("september");
+  await expect(time).not.toBeEmpty();
+  await expect(page.locator(".content-item p")).toHaveText(
+    "Straksbooking ikke tilgængeligt",
+  );
+  await expect(page.locator(".content-item div").first()).toHaveText(
+    "Mindre end et minut  til næste begivenhed",
+  );
+  await expect(page.locator(".content-item").nth(1)).toHaveCSS(
+    "border-left",
+    "2px solid rgb(0, 0, 0)",
+  );
+  const events = page.locator(".content .content-item");
+
+  await expect(events.nth(1)).toContainText("There will be cake");
+  await expect(events.nth(2)).toContainText("The cake is a lie");
+  await expect(events.nth(3)).toContainText("Det er optaget");
+});
+
+test("calendar-1-single-booking: ui tests", async ({ page }) => {
+  await fixTimeToNow(page);
+  await page.goto("/template/calendar-1-single-booking");
+  await expect(page.getByText("Ledigt")).toHaveCount(1);
+  await expect(page.getByText("Ledigt")).toBeVisible();
+
+  await page.waitForTimeout(5500);
 
-  // TODO
+  await expect(page.getByText("Optaget")).toHaveCount(1);
+  await expect(page.getByText("Optaget")).toBeVisible();
 });

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

@@ -23,7 +23,8 @@ test.describe("Template Links", () => {
       "calendar-0-single",
       "calendar-1-single",
       "calendar-3-multiple-days",
-      "calendar-4-single-booking",
+      "calendar-0-single-booking",
+      "calendar-1-single-booking",
       "contacts-underlined",
       "contacts-not-underlined",
       "iframe-0",