srcdev-nuxt-components 9.1.21 → 9.1.23

package/app/components/03.organisms/services/services-section/tests/ServicesSection.spec.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServicesSection from "../ServicesSection.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockService: Service = {
+  slug: "test-service",
+  title: "Test Service",
+  subtitle: "A subtitle",
+  price: "£50",
+  duration: "60 mins",
+  image: "/images/test.jpg",
+  shortDescription: "Short description",
+  longDescription: "Long description text",
+  heroHeading: [{ text: "A great heading", styleClass: "normal" }],
+  whatIsIt: "What this service is",
+  process: ["Step one", "Step two"],
+  idealFor: ["Person A", "Person B"],
+  maintenance: "Maintenance advice",
+  faqs: [{ question: "FAQ question?", answer: "FAQ answer." }],
+  seoTitle: "SEO Title",
+  seoDescription: "SEO description",
+};
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServicesSection", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has services-section class on root", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.classes()).toContain("services-section");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  // ─── Icons ──────────────────────────────────────────────────────────────
+
+  it("renders the default duration icon name in the template", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.html()).toContain("mdi:clock-time-four-outline");
+  });
+
+  it("renders the default price icon name in the template", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.html()).toContain("mdi:currency-gbp");
+  });
+
+  it("overrides the duration icon via durationIcon prop", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, durationIcon: "mdi:timer-outline" },
+    });
+    expect(wrapper.html()).toContain("mdi:timer-outline");
+    expect(wrapper.html()).not.toContain("mdi:clock-time-four-outline");
+  });
+
+  it("overrides the price icon via priceIcon prop", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, priceIcon: "mdi:currency-usd" },
+    });
+    expect(wrapper.html()).toContain("mdi:currency-usd");
+    expect(wrapper.html()).not.toContain("mdi:currency-gbp");
+  });
+
+  it("both icons can be overridden together", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: {
+        serviceData: mockService,
+        durationIcon: "mdi:timer-outline",
+        priceIcon: "mdi:currency-eur",
+      },
+    });
+    expect(wrapper.html()).toContain("mdi:timer-outline");
+    expect(wrapper.html()).toContain("mdi:currency-eur");
+  });
+
+  // ─── Service data ───────────────────────────────────────────────────────
+
+  it("renders service duration text", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.duration);
+  });
+
+  it("renders service price text", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.price);
+  });
+
+  // ─── Summary mode ───────────────────────────────────────────────────────
+
+  it("renders summary-link slot in summary mode", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, isSummary: true },
+      slots: {
+        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
+      },
+    });
+    expect(wrapper.find(".test-link").exists()).toBe(true);
+  });
+
+  it("does not render summary-link slot in full mode", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, isSummary: false },
+      slots: {
+        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
+      },
+    });
+    expect(wrapper.find(".test-link").exists()).toBe(false);
+  });
+
+  it("renders cta slot in full mode", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, isSummary: false },
+      slots: {
+        cta: '<button class="test-cta">Book now</button>',
+      },
+    });
+    expect(wrapper.find(".test-cta").exists()).toBe(true);
+  });
+
+  it("does not render cta slot in summary mode", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, isSummary: true },
+      slots: {
+        cta: '<button class="test-cta">Book now</button>',
+      },
+    });
+    expect(wrapper.find(".test-cta").exists()).toBe(false);
+  });
+
+  // ─── Reverse ────────────────────────────────────────────────────────────
+
+  it("applies reverse class when reverse prop is true", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, reverse: true },
+    });
+    expect(wrapper.find(".services-section__grid").classes()).toContain("services-section__grid--reverse");
+  });
+
+  it("does not apply reverse class by default", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".services-section__grid").classes()).not.toContain("services-section__grid--reverse");
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/03.organisms/services/services-section/tests/__snapshots__/ServicesSection.spec.ts.snap

@@ -0,0 +1,84 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServicesSection > renders correct HTML structure 1`] = `
+"<div class="services-section">
+  <div class="services-section__grid">
+    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" class="image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="info-wrapper">
+      <div class="eyebrow-text large">A subtitle</div>
+      <h2 class="hero-text mb-20 title axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Test Service</span>
+      </h2>
+      <div class="price-duration">
+        <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
+        <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+      </div>
+      <p class="page-body-normal">Long description text</p>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">A great heading</span>
+      </h2>
+      <p class="page-body-normal">What this service is</p>
+      <!--v-if-->
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">The Process</span>
+      </h2>
+      <ol class="stepper-list has-connectors" show-connectors="true">
+        <li class="indicator-top indicator-circle" style="--_connector-top: 0px; --_connector-height: 0px;">
+          <div class="stepper-list__indicator-counter"></div>
+          <div>
+            <p class="page-body-normal">Step one</p>
+          </div>
+        </li>
+        <li class="indicator-top indicator-circle">
+          <div class="stepper-list__indicator-counter"></div>
+          <div>
+            <p class="page-body-normal">Step two</p>
+          </div>
+        </li>
+      </ol>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Ideal For</span>
+      </h2>
+      <ul class="stepper-list">
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"><span class="iconify i-mdi:checkbox-marked-circle-outline indicator-icon" aria-hidden="true"></span></div>
+          <div>
+            <p class="page-body-normal">Person A</p>
+          </div>
+        </li>
+        <li class="has-indicator indicator-top indicator-disc">
+          <div class="stepper-list__indicator-custom"><span class="iconify i-mdi:checkbox-marked-circle-outline indicator-icon" aria-hidden="true"></span></div>
+          <div>
+            <p class="page-body-normal">Person B</p>
+          </div>
+        </li>
+      </ul>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Aftercare &amp; Maintenance</span>
+      </h2>
+      <p class="page-body-normal">Maintenance advice</p>
+      <h2 class="hero-text mb-20 subheading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Frequently Asked Questions</span>
+      </h2>
+      <div class="display-accordian services-faq" id="faq">
+        <div class="expanding-panel accordian-item" icon-size="medium">
+          <details class="expanding-panel-details" name="faq-v-0-0-0">
+            <summary id="id-faq-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-faq-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper">FAQ question?</span><span class="icon-wrapper"><span class="iconify i-mdi:chevron-down" aria-hidden="true"></span></span></summary>
+          </details>
+          <div id="id-faq-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
+            <div class="inner">
+              <p>FAQ answer.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="glass-panel p-24">
+        <h2 class="hero-text mbs-0 mbe-20 subheading axis-horizontal">
+          <!--v-if--><span class="text-block-0 normal">Ready to book your highlights appointment?</span>
+        </h2>
+        <p class="page-body-normal">Mobile service across Bath — I come to you.</p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.21",
+  "version": "9.1.23",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",