@eox/pages-theme-eox 0.11.4 → 1.0.0

package/src/components/CookieBanner.cy.js

@@ -0,0 +1,49 @@
+import CookieBanner from "./CookieBanner.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+import * as helpers from "../../cypress/support/mocks/helpers";
+
+describe("<CookieBanner />", () => {
+  beforeEach(() => {
+    // Spy on helper functions to verify interactions
+    // Requires mock that delegates to window.__helpersMock
+    cy.spy(window.__helpersMock, "acceptCookies").as("acceptCookies");
+    cy.spy(window.__helpersMock, "declineCookies").as("declineCookies");
+  });
+
+  it("renders with privacy link", () => {
+    const policyLink = "/privacy-policy";
+    __setMockData({
+      theme: {
+        theme: {
+          brandConfig: {
+            legal: {
+              privacyPolicy: policyLink,
+            },
+          },
+        },
+      },
+    });
+
+    cy.mount(CookieBanner);
+
+    cy.contains("We use optional cookies").should("be.visible");
+    cy.contains("a", "privacy policy").should("have.attr", "href", policyLink);
+    cy.contains("a", "manage cookies").should(
+      "have.attr",
+      "href",
+      "/cookie-settings",
+    );
+  });
+
+  it("accepts cookies on click", () => {
+    cy.mount(CookieBanner);
+    cy.contains("button", "Accept all").click();
+    cy.get("@acceptCookies").should("have.been.called");
+  });
+
+  it("declines cookies on click", () => {
+    cy.mount(CookieBanner);
+    cy.contains("button", "Reject all").click();
+    cy.get("@declineCookies").should("have.been.called");
+  });
+});

package/src/components/CookieSettings.cy.js

@@ -0,0 +1,73 @@
+import CookieSettings from "./CookieSettings.vue";
+import {
+  __setMockData,
+  __setRouteMock,
+} from "../../cypress/support/mocks/vitepress";
+import * as helpers from "../../cypress/support/mocks/helpers";
+
+describe("<CookieSettings />", () => {
+  beforeEach(() => {
+    // Reset mocks
+    cy.spy(window.__helpersMock, "enableTracking").as("enableTracking");
+    cy.spy(window.__helpersMock, "showBanner").as("showBanner");
+
+    // Mock global _paq if strictly necessary, but helpers are mocked so logic inside component that calls _paq directly needs attention.
+    // The component calls _paq directly in the watcher.
+    // We can mock window._paq
+    cy.window().then((win) => {
+      win._paq = [];
+      cy.spy(win._paq, "push").as("paqPush");
+    });
+
+    __setMockData({
+      theme: {
+        theme: {
+          brandConfig: {
+            legal: {
+              privacyPolicy: "/privacy",
+            },
+          },
+        },
+      },
+    });
+
+    // Mock route data structure expected by component
+    __setRouteMock({
+      data: { title: "" },
+      onBeforeRouteChange: () => {},
+    });
+  });
+
+  it("renders cookie categories", () => {
+    cy.mount(CookieSettings);
+
+    cy.contains("Cookie Settings").should("be.visible");
+    cy.contains("h6", "Essential").should("be.visible");
+    cy.contains("h6", "Analytics").should("be.visible");
+  });
+
+  it("renders privacy policy link", () => {
+    cy.mount(CookieSettings);
+    cy.contains("a", "Privacy Policy").should("have.attr", "href", "/privacy");
+  });
+
+  it("toggles analytics cookies", () => {
+    cy.mount(CookieSettings);
+
+    // Analytics checkbox should be unchecked by default (if no cookie present)
+    cy.get('#Analytics input[type="checkbox"]').should("not.be.checked");
+
+    // Check it
+    cy.get('#Analytics input[type="checkbox"]').check({ force: true }); // force because of custom styling potentially hiding input
+
+    // verify _paq interaction
+    cy.get("@paqPush").should("have.been.calledWith", ["forgetUserOptOut"]);
+    cy.get("@enableTracking").should("have.been.calledWith", true); // second arg router is object
+  });
+
+  it("disables essential cookies checkbox", () => {
+    cy.mount(CookieSettings);
+    cy.get('#Essential input[type="checkbox"]').should("be.checked");
+    cy.get('#Essential input[type="checkbox"]').should("be.disabled");
+  });
+});

package/src/components/DataTable.cy.js

@@ -0,0 +1,58 @@
+import DataTable from "./DataTable.vue";
+
+describe("<DataTable />", () => {
+  const headers = ["Name", "Description"];
+  const data = [
+    {
+      summary: { Name: "Item 1", Description: "Desc 1" },
+      content: "Detailed content for Item 1",
+    },
+    {
+      summary: { Name: "Item 2", Description: "Desc 2" },
+      content: "Detailed content for Item 2",
+    },
+  ];
+
+  it("renders headers correctly", () => {
+    cy.mount(DataTable, {
+      props: { headers, data },
+    });
+    headers.forEach((h) => cy.contains("th", h).should("be.visible"));
+  });
+
+  it("renders summary data in rows", () => {
+    cy.mount(DataTable, {
+      props: { headers, data },
+    });
+    cy.contains("Item 1").should("be.visible");
+    cy.contains("Desc 1").should("be.visible");
+    cy.contains("Item 2").should("be.visible");
+  });
+
+  it("expands row to show detail content on click", () => {
+    cy.mount(DataTable, {
+      props: { headers, data },
+    });
+
+    // Content should not be visible initially
+    cy.contains("Detailed content for Item 1").should("not.exist");
+
+    // Click the first row (the summary part)
+    cy.contains("Item 1").parents("tr").click();
+
+    // Content should now be visible
+    cy.contains("Detailed content for Item 1").should("be.visible");
+  });
+
+  it("collapses row on second click", () => {
+    cy.mount(DataTable, {
+      props: { headers, data },
+    });
+
+    cy.contains("Item 1").parents("tr").click();
+    cy.contains("Detailed content for Item 1").should("be.visible");
+
+    cy.contains("Item 1").parents("tr").click();
+    cy.contains("Detailed content for Item 1").should("not.exist");
+  });
+});

package/src/components/FeatureCard.cy.js

@@ -0,0 +1,83 @@
+import FeatureCard from "./FeatureCard.vue";
+
+describe("<FeatureCard />", () => {
+  it("renders title and content using props", () => {
+    const title = "Test Feature";
+    const content = "This is a test feature content.";
+
+    cy.mount(FeatureCard, {
+      props: {
+        title,
+        content,
+      },
+    });
+
+    cy.get("h5").should("contain", title);
+    // When using content prop without slots, it renders a div with v-html
+    cy.contains(content).should("exist");
+  });
+
+  it("renders content in a paragraph when using slots", () => {
+    const title = "Slot Feature";
+    const slotContent = "This is content from a slot.";
+
+    cy.mount(FeatureCard, {
+      props: {
+        title,
+      },
+      slots: {
+        default: slotContent,
+      },
+    });
+
+    cy.get("h5").should("contain", title);
+    // When using slots, it renders a p tag
+    cy.get("p").should("contain", slotContent);
+  });
+
+  it("renders link when provided", () => {
+    const link = {
+      text: "Learn More",
+      href: "https://example.com",
+      target: "_blank",
+    };
+
+    cy.mount(FeatureCard, {
+      props: {
+        title: "With Link",
+        content: "Content",
+        link,
+      },
+    });
+
+    cy.get("a").should("have.attr", "href", "https://example.com");
+    cy.get("a").should("contain", "Learn More");
+    cy.get("a").should("have.attr", "target", "_blank");
+  });
+
+  it("renders icon from class string", () => {
+    cy.mount(FeatureCard, {
+      props: {
+        title: "With Icon",
+        content: "Content",
+        icon: "mdi-home",
+      },
+    });
+
+    cy.get("i.mdi.mdi-home").should("exist");
+  });
+
+  it("renders html icon", () => {
+    const iconHtml = '<svg><circle cx="50" cy="50" r="40" /></svg>';
+    cy.mount(FeatureCard, {
+      props: {
+        title: "With SVG Icon",
+        content: "Content",
+        icon: { html: iconHtml },
+      },
+    });
+
+    cy.get(".icon").should("exist");
+    cy.get(".icon").find("svg").should("exist");
+  });
+});

package/src/components/FeatureCard.vue

@@ -21,16 +21,23 @@ const iconStyle = {
 <template>
   <article class="vertical large-padding">
     <div>
-      <i v-if="typeof icon === 'string' && icon.startsWith('mdi-')" :class="`mdi ${icon}`"></i>
-      <div v-else-if="icon" :style="iconStyle" v-html="icon.html" class="icon"></div>
+      <i
+        v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
+        :class="`mdi ${icon}`"
+      ></i>
+      <div
+        v-else-if="icon"
+        :style="iconStyle"
+        v-html="icon.html"
+        class="icon"
+      ></div>
       <h5 class="small">{{ title }}</h5>
-      <p>
+      <p v-if="$slots.default">
         <slot>{{ content }}</slot>
       </p>
+      <div v-else v-html="content"></div>
     </div>
-    <nav
-      v-if="link"
-    >
+    <nav v-if="link">
       <a
         :href="link.href"
         :target="link.target ?? '_blank'"

package/src/components/FeatureSection.cy.js

@@ -0,0 +1,63 @@
+import FeatureSection from "./FeatureSection.vue";
+
+describe("<FeatureSection />", () => {
+  const defaultProps = {
+    title: "Feature Title",
+    tagline: "Feature Tagline",
+    icon: "mdi-star",
+  };
+
+  it("renders title, tagline and icon", () => {
+    cy.mount(FeatureSection, {
+      props: defaultProps,
+    });
+
+    cy.contains(defaultProps.title).should("exist");
+    cy.contains(defaultProps.tagline).should("exist");
+    cy.get(".mdi-star").should("exist");
+  });
+
+  it("renders slot content", () => {
+    cy.mount(FeatureSection, {
+      props: defaultProps,
+      slots: {
+        default: "This is the feature content",
+      },
+    });
+
+    cy.contains("This is the feature content").should("exist");
+  });
+
+  it("renders buttons when links are provided", () => {
+    cy.mount(FeatureSection, {
+      props: {
+        ...defaultProps,
+        primaryLink: "/primary",
+        primaryButton: "Primary Btn",
+        secondaryLink: "/secondary",
+        secondaryButton: "Secondary Btn",
+        altLink: "/alt",
+        altButton: "Alt Btn",
+      },
+    });
+
+    cy.contains("a", "Primary Btn").should("have.attr", "href", "/primary");
+    cy.contains("a", "Secondary Btn").should("have.attr", "href", "/secondary");
+    cy.contains("a", "Alt Btn").should("have.attr", "href", "/alt");
+  });
+
+  it("applies styling classes based on props", () => {
+    cy.mount(FeatureSection, {
+      props: {
+        ...defaultProps,
+        landing: true,
+        dark: true,
+        reverse: true,
+      },
+    });
+
+    cy.get(".feature-section").should("have.class", "landing");
+    cy.get(".feature-section").should("have.class", "dark");
+    cy.get(".feature-section").should("have.class", "reverse");
+  });
+});

package/src/components/FeaturesGallery.cy.js

@@ -0,0 +1,45 @@
+import FeaturesGallery from "./FeaturesGallery.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<FeaturesGallery />", () => {
+  const cards = [
+    { id: 1, title: "Card 1", content: "Content 1", icon: "mdi-home" },
+    { id: 2, title: "Card 2", content: "Content 2" },
+  ];
+
+  beforeEach(() => {
+    __setMockData({});
+  });
+
+  it("renders section title", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        sectionTitle: "My Gallery",
+        cards,
+      },
+    });
+
+    cy.contains("h5", "My Gallery").should("be.visible");
+  });
+
+  it("renders feature cards", () => {
+    cy.mount(FeaturesGallery, {
+      props: { cards },
+    });
+
+    cy.contains("Card 1").should("exist");
+    cy.contains("Content 1").should("exist");
+    cy.contains("Card 2").should("exist");
+  });
+
+  it("applies background classes", () => {
+    cy.mount(FeaturesGallery, {
+      props: {
+        cards,
+        background: "custom-bg-class",
+      },
+    });
+
+    cy.get("section").should("have.class", "custom-bg-class");
+  });
+});

package/src/components/FeaturesGallery.vue

@@ -69,7 +69,10 @@ const featuresExcerpts =
           );
         })
         .filter((f) => f);
-const siteTitle = sectionTitle !== false ? (sectionTitle || `More ${site.value.title} features:`) : false;
+const siteTitle =
+  sectionTitle !== false
+    ? sectionTitle || `More ${site.value.title} features:`
+    : false;
 </script>
 
 <template>
@@ -126,11 +129,11 @@ section {
 .link-card {
   display: block;
   text-decoration: none;
-  border: .0625rem solid transparent;
+  border: 0.0625rem solid transparent;
 }
 .link-card:hover article {
   box-shadow: none;
-  border: .0625rem solid var(--outline-variant);
+  border: 0.0625rem solid var(--outline-variant);
 }
 
 .card-wrapper {

package/src/components/Footer.cy.js

@@ -0,0 +1,52 @@
+import Footer from "./Footer.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<Footer />", () => {
+  beforeEach(() => {
+    __setMockData({
+      site: { title: "EOX Site" },
+      theme: {
+        logo: { light: "/logo.png" },
+        nav: [
+          { text: "Link 1", link: "/link1" },
+          { text: "Contact", link: "/contact" },
+        ],
+        footer: {
+          copyright: "© 2026 EOX",
+        },
+        theme: {
+          brandConfig: {
+            legal: {
+              about: "/about",
+              termsAndConditions: "/terms",
+              privacyPolicy: "/privacy",
+            },
+          },
+        },
+      },
+    });
+  });
+
+  it("renders logo and copyright", () => {
+    cy.mount(Footer);
+
+    cy.get("img.logo").should("have.attr", "src", "/logo.png");
+    cy.contains("© 2026 EOX").should("exist");
+  });
+
+  it("renders contact button", () => {
+    cy.mount(Footer);
+    cy.contains("a", "Contact").should("have.attr", "href", "/contact");
+  });
+
+  it("renders legal links", () => {
+    cy.mount(Footer);
+    cy.contains("a", "About").should("have.attr", "href", "/about");
+    cy.contains("a", "Terms & Conditions").should(
+      "have.attr",
+      "href",
+      "/terms",
+    );
+    cy.contains("a", "Privacy").should("have.attr", "href", "/privacy");
+  });
+});

package/src/components/Footer.vue

@@ -11,12 +11,16 @@
           />
           <div class="small-space"></div>
           <a
-            v-if="theme.nav.find((i) => i.link.includes('contact'))"
-            :href="theme.nav.find((i) => i.link.includes('contact')).link"
+            v-if="theme.nav.find((i) => i.link && i.link.includes('contact'))"
+            :href="
+              theme.nav.find((i) => i.link && i.link.includes('contact')).link
+            "
             class="button small border no-margin"
             style="color: var(--on-surface)"
             @click="trackEvent(['CTA', 'Click', 'Footer', action.text])"
-            >{{ theme.nav.find((i) => i.link.includes("contact")).text }}</a
+            >{{
+              theme.nav.find((i) => i.link && i.link.includes("contact")).text
+            }}</a
           >
           <p v-html="theme.footer.copyright"></p>
           <p class="middle-align">
@@ -33,9 +37,12 @@
         </div>
         <div class="s12 l6">
           <div class="grid large-line">
-            <div class="s6">
+            <div
+              class="s6 l4"
+              v-if="theme.nav.filter((i) => !i.action && i.link).length"
+            >
               <p class="bold">About</p>
-              <p v-for="item in theme.nav.filter((i) => !i.action)">
+              <p v-for="item in theme.nav.filter((i) => !i.action && i.link)">
                 <a
                   :href="withBase(item.link)"
                   :target="item.target"
@@ -45,7 +52,19 @@
                 >
               </p>
             </div>
-            <div class="s6">
+            <div class="s6 l4" v-for="item in theme.nav.filter((i) => i.items)">
+              <p class="bold">{{ item.text }}</p>
+              <p v-for="subItem in getFlatList(item.items)">
+                <a
+                  :href="withBase(subItem.link)"
+                  :target="subItem.target"
+                  :rel="subItem.rel"
+                  class="link"
+                  >{{ subItem.text }}</a
+                >
+              </p>
+            </div>
+            <div class="s6 l4">
               <p class="bold">Legal</p>
               <p>
                 <a
@@ -94,7 +113,7 @@
 
 <script setup>
 import { useData, withBase } from "vitepress";
-import { trackEvent } from "../helpers";
+import { trackEvent, getFlatList } from "../helpers";
 const { site, theme } = useData();
 </script>
 

package/src/components/HeroSection.cy.js

@@ -0,0 +1,66 @@
+import HeroSection from "./HeroSection.vue";
+import { __setMockData } from "../../cypress/support/mocks/vitepress";
+
+describe("<HeroSection />", () => {
+  beforeEach(() => {
+    // Reset mock data before each test
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "Hero Text",
+          tagline: "Hero Tagline",
+          actions: [
+            { text: "Start", link: "/start", theme: "brand" },
+            { text: "More", link: "/more", theme: "secondary" },
+          ],
+          image: { src: "/image.png", alt: "Hero Image" },
+        },
+      },
+    });
+  });
+
+  it("renders correctly with default data", () => {
+    cy.mount(HeroSection);
+
+    cy.get("h1").should("contain", "Hero Text");
+    cy.get("p").should("contain", "Hero Tagline");
+
+    // Check actions
+    cy.contains("a", "Start").should("have.attr", "href", "/start");
+    cy.contains("a", "Start").should("have.class", "primary-text"); // brand theme
+
+    cy.contains("a", "More").should("have.attr", "href", "/more");
+    cy.contains("a", "More").should("have.class", "secondary"); // secondary theme
+
+    // Check image
+    cy.get("img.hero-image").should("have.attr", "src", "/image.png");
+  });
+
+  it("renders video when provided", () => {
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "Video Hero",
+          video: { src: "/video.mp4" },
+        },
+      },
+    });
+
+    cy.mount(HeroSection);
+    cy.get("video.hero-image").should("have.attr", "src", "/video.mp4");
+  });
+
+  it("renders background image", () => {
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "BG Hero",
+          background: { src: "/bg.jpg" },
+        },
+      },
+    });
+
+    cy.mount(HeroSection);
+    cy.get("img.background-image").should("have.attr", "src", "/bg.jpg");
+  });
+});

package/src/components/LogoSection.cy.js

@@ -0,0 +1,53 @@
+import LogoSection from "./LogoSection.vue";
+
+describe("<LogoSection />", () => {
+  const logos = [
+    { image: "/logo1.png", alt: "Logo 1", link: "https://example.com" },
+    { image: "/logo2.png", alt: "Logo 2" }, // No link
+  ];
+
+  it("renders list of logos", () => {
+    cy.mount(LogoSection, {
+      props: { logos },
+    });
+
+    cy.get(".logo-row").find("img").should("have.length", 2);
+    cy.get('img[alt="Logo 1"]').should("exist");
+    cy.get('img[alt="Logo 2"]').should("exist");
+  });
+
+  it("wraps logos with link when provided", () => {
+    cy.mount(LogoSection, {
+      props: { logos },
+    });
+
+    cy.get('a[href="https://example.com"]')
+      .find('img[alt="Logo 1"]')
+      .should("exist");
+  });
+
+  it("renders div instead of link when no link provided", () => {
+    cy.mount(LogoSection, {
+      props: { logos },
+    });
+
+    cy.get("div.logo").find('img[alt="Logo 2"]').should("exist");
+  });
+
+  it("sets css variables on mount", () => {
+    cy.mount(LogoSection, {
+      props: {
+        logos: [],
+        baseHeight: 5,
+        strength: 0.8,
+      },
+    });
+
+    cy.get(".logo-row")
+      .should("have.attr", "style")
+      .and("include", "--base-height: 5rem");
+    cy.get(".logo-row")
+      .should("have.attr", "style")
+      .and("include", "--strength: 0.8");
+  });
+});