srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/01.atoms/text-blocks/hero-text/playwright/hero-text.playwright.ts

@@ -0,0 +1,110 @@
+import { test, expect, type Page, type Locator } from "@playwright/test";
+
+// --- Config ---
+const STORYBOOK_URL = "http://127.0.0.1:6006";
+const STORY_BASE = "atoms-text-blocks-herotext";
+const HEADING_TIMEOUT = 20_000;
+
+// --- Types ---
+type Args = Record<string, string>;
+
+// --- Constants ---
+const TAGS = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;
+const AXES = ["horizontal", "vertical"] as const;
+const FONT_SIZES = ["display", "title", "heading", "subheading", "label"] as const;
+
+// --- Helpers ---
+const getStoryUrl = (args: Args = {}): string => {
+  const url = `${STORYBOOK_URL}/?path=/story/${STORY_BASE}--default`;
+  const argsParam = Object.entries(args)
+    .map(([k, v]) => `${k}:${v}`)
+    .join(";");
+  return argsParam ? `${url}&args=${argsParam}` : url;
+};
+
+const getHeading = async (page: Page, args: Args = {}): Promise<Locator> => {
+  await page.goto(getStoryUrl(args), { waitUntil: "load" });
+
+  const frame = page.frameLocator("#storybook-preview-iframe");
+  await frame.locator("#storybook-root > *").waitFor({ state: "visible", timeout: HEADING_TIMEOUT });
+
+  const heading = frame.locator(".hero-text");
+  await heading.waitFor({ state: "visible", timeout: HEADING_TIMEOUT });
+  return heading;
+};
+
+// -------------------------
+// Baseline snapshot (default args)
+// -------------------------
+test.describe("HeroText — baseline", () => {
+  test("default matches snapshot", async ({ page }) => {
+    const heading = await getHeading(page);
+    await expect(heading).toHaveScreenshot("default.png");
+  });
+});
+
+// -------------------------
+// Tag variants (hold axis and fontSize at default)
+// -------------------------
+test.describe("HeroText — tag variants", () => {
+  for (const tag of TAGS) {
+    test(`tag-${tag}`, async ({ page }) => {
+      const heading = await getHeading(page, { tag });
+      await expect(heading).toHaveScreenshot(`tag-${tag}.png`);
+    });
+  }
+});
+
+// -------------------------
+// Axis variants (hold tag and fontSize at default)
+// -------------------------
+test.describe("HeroText — axis variants", () => {
+  for (const axis of AXES) {
+    test(`axis-${axis}`, async ({ page }) => {
+      const heading = await getHeading(page, { axis });
+      await expect(heading).toHaveScreenshot(`axis-${axis}.png`);
+    });
+  }
+});
+
+// -------------------------
+// fontSize variants (hold tag and axis at default)
+// -------------------------
+test.describe("HeroText — fontSize variants", () => {
+  for (const fontSize of FONT_SIZES) {
+    test(`fontSize-${fontSize}`, async ({ page }) => {
+      const heading = await getHeading(page, { fontSize });
+      await expect(heading).toHaveScreenshot(`fontSize-${fontSize}.png`);
+    });
+  }
+});
+
+// -------------------------
+// Axis + fontSize cross variants (tag held at default)
+// These interact visually — vertical axis changes layout weight of sized text
+// -------------------------
+test.describe("HeroText — axis × fontSize variants", () => {
+  for (const axis of AXES) {
+    for (const fontSize of FONT_SIZES) {
+      test(`axis-${axis}_fontSize-${fontSize}`, async ({ page }) => {
+        const heading = await getHeading(page, { axis, fontSize });
+        await expect(heading).toHaveScreenshot(`axis-${axis}_fontSize-${fontSize}.png`);
+      });
+    }
+  }
+});
+
+// -------------------------
+// Icon variants
+// -------------------------
+test.describe("HeroText — icon variants", () => {
+  test("with icon", async ({ page }) => {
+    const heading = await getHeading(page, { icon: "lucide:sparkles" });
+    await expect(heading).toHaveScreenshot("icon-with.png");
+  });
+
+  test("without icon", async ({ page }) => {
+    const heading = await getHeading(page, { icon: "!undefined" });
+    await expect(heading).toHaveScreenshot("icon-without.png");
+  });
+});

package/app/components/01.atoms/text-blocks/hero-text/stories/HeroText.stories.ts

@@ -0,0 +1,70 @@
+import HeroText from "../HeroText.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof HeroText> = {
+  title: "Atoms/Text Blocks/HeroText",
+  component: HeroText,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      description: "HTML tag for the element",
+      defaultValue: "h1",
+    },
+    axis: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      description: "Layout axis",
+      defaultValue: "horizontal",
+    },
+    fontSize: {
+      control: { type: "select" },
+      options: ["display", "title", "heading", "subheading", "label"],
+      description: "Semantic font size",
+      defaultValue: "title",
+    },
+    textContent: {
+      control: "object",
+      description: "Array of text segments with styleClass",
+      defaultValue: [
+        { text: "Designing", styleClass: "normal" },
+        { text: "Artistry", styleClass: "accent" },
+        { text: "at Home", styleClass: "normal" },
+      ],
+    },
+    icon: {
+      control: { type: "select" },
+      options: [undefined, "lucide:sparkles"],
+      description: "Icon name",
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional classes",
+      defaultValue: [],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeroText>;
+export const Default: Story = {
+  args: {
+    tag: "h1",
+    axis: "horizontal",
+    fontSize: "title",
+    textContent: [
+      { text: "Designing", styleClass: "normal" },
+      { text: "Artistry", styleClass: "accent" },
+      { text: "at Home", styleClass: "normal" },
+    ],
+    icon: "lucide:sparkles",
+    styleClassPassthrough: [],
+  },
+  render: (args) => ({
+    components: { HeroText },
+    setup() {
+      return { args };
+    },
+    template: `<HeroText v-bind="args" />`,
+  }),
+};

package/app/components/01.atoms/text-blocks/hero-text/tests/HeroText.spec.ts

@@ -0,0 +1,148 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import HeroText from "../HeroText.vue";
+
+describe("HeroText", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h1",
+        axis: "horizontal",
+        fontSize: "title",
+        textContent: [
+          { text: "Designing", styleClass: "normal" },
+          { text: "Artistry", styleClass: "accent" },
+          { text: "at Home", styleClass: "normal" },
+        ],
+        styleClassPassthrough: [],
+      },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h2",
+        axis: "vertical",
+        fontSize: "display",
+        textContent: [
+          { text: "Hello", styleClass: "normal" },
+          { text: "World", styleClass: "accent" },
+        ],
+        styleClassPassthrough: ["custom-class"],
+      },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("applies axis and fontSize classes", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h3",
+        axis: "vertical",
+        fontSize: "heading",
+        textContent: [{ text: "A", styleClass: "normal" }],
+        styleClassPassthrough: [],
+      },
+    });
+    const el = wrapper.find(".hero-text");
+    expect(el.classes()).toContain("axis-vertical");
+    expect(el.classes()).toContain("heading");
+  });
+
+  it("renders all textContent items as spans", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h4",
+        textContent: [
+          { text: "One", styleClass: "normal" },
+          { text: "Two", styleClass: "accent" },
+          { text: "Three", styleClass: "normal" },
+        ],
+      },
+    });
+    const spans = wrapper.findAll("span");
+    expect(spans.length).toBe(3);
+    expect(spans[0]?.text()).toBe("One");
+    expect(spans[1]?.text()).toBe("Two");
+    expect(spans[2]?.text()).toBe("Three");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h5",
+        textContent: [{ text: "Styled", styleClass: "accent" }],
+        styleClassPassthrough: ["extra-class", "another-class"],
+      },
+    });
+    const el = wrapper.find(".hero-text");
+    expect(el.classes()).toContain("extra-class");
+    expect(el.classes()).toContain("another-class");
+  });
+
+  // -------------------------
+  // normalisedContent
+  // -------------------------
+  it("trims leading and trailing whitespace from text segments", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h1",
+        textContent: [{ text: "  Hello  ", styleClass: "normal" }],
+      },
+    });
+    expect(wrapper.find("span").element.textContent).toBe("Hello");
+  });
+
+  it("adds a trailing space to all segments except the last", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h1",
+        textContent: [
+          { text: "One", styleClass: "normal" },
+          { text: "Two", styleClass: "normal" },
+          { text: "Three", styleClass: "normal" },
+        ],
+      },
+    });
+    const spans = wrapper.findAll("span");
+    expect(spans[0]!.element.textContent).toBe("One ");
+    expect(spans[1]!.element.textContent).toBe("Two ");
+    expect(spans[2]!.element.textContent).toBe("Three");
+  });
+
+  it("does not add a trailing space when there is only one segment", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h1",
+        textContent: [{ text: "Solo", styleClass: "normal" }],
+      },
+    });
+    expect(wrapper.find("span").element.textContent).toBe("Solo");
+  });
+
+  // -------------------------
+  // Icon
+  // -------------------------
+  it("renders an icon when the icon prop is provided", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h1",
+        textContent: [{ text: "Hello", styleClass: "normal" }],
+        icon: "lucide:sparkles",
+      },
+    });
+    expect(wrapper.find(".hero-text__icon").exists()).toBe(true);
+  });
+
+  it("does not render an icon when the icon prop is omitted", async () => {
+    const wrapper = await mountSuspended(HeroText, {
+      props: {
+        tag: "h1",
+        textContent: [{ text: "Hello", styleClass: "normal" }],
+      },
+    });
+    expect(wrapper.find(".hero-text__icon").exists()).toBe(false);
+  });
+});

package/app/components/01.atoms/text-blocks/hero-text/tests/__snapshots__/HeroText.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeroText > renders correct HTML structure 1`] = `
+"<h2 class="hero-text custom-class display axis-vertical">
+  <!--v-if--><span class="text-block-0 normal">Hello </span><span class="text-block-1 accent">World</span>
+</h2>"
+`;