@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/metadata-builder/sanitizers/__tests__/section-args-validator.test.ts

@@ -0,0 +1,659 @@
+import { describe, expect, it } from 'vitest';
+import type { TiptapDocument } from '../../parsers/section-tool-arguments';
+import { validateBannerSection } from '../../builders/section-rules/banner-section.rules';
+import { validateImagesSection } from '../../builders/section-rules/images-section.rules';
+import { validateTestimonialSection } from '../../builders/section-rules/testimonial-section.rules';
+import { validateSocialLinks } from '../../builders/section-rules/social-links.rules';
+import { validateTextSection } from '../../builders/section-rules/text-section.rules';
+import { validateMailingList } from '../../builders/section-rules/mailing-list.rules';
+
+// ─── helpers ─────────────────────────────────────────────────────────────────
+
+const str = (len: number) => 'a'.repeat(len);
+
+const tiptap = (text: string): TiptapDocument => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [{ type: 'text', text }],
+    },
+  ],
+});
+
+// ─── text field limits ────────────────────────────────────────────────────────
+
+describe('text field limits', () => {
+  it('passes when field is exactly at the limit', () => {
+    const errors = validateBannerSection({ title: str(200) } as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('errors when field exceeds the limit', () => {
+    const errors = validateBannerSection({ title: str(201) } as any, {});
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"title"/);
+    expect(errors[0]).toMatch(/200/);
+    expect(errors[0]).toMatch(/201/);
+  });
+
+  it('skips fields that are null or undefined', () => {
+    const errors = validateBannerSection(
+      { title: null, description: undefined } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('checks multiple fields and reports all violations', () => {
+    const errors = validateBannerSection(
+      { title: str(201), description: str(1001) } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(2);
+  });
+});
+
+// ─── tiptap document text extraction ─────────────────────────────────────────
+
+describe('TiptapDocument text extraction', () => {
+  it('extracts plain text and checks against the limit', () => {
+    const errors = validateBannerSection(
+      { title: tiptap(str(201)) } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"title"/);
+  });
+
+  it('passes when tiptap text is within limit', () => {
+    const errors = validateBannerSection(
+      { title: tiptap(str(200)) } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('measures text content — not the JSON serialisation size', () => {
+    // The tiptap JSON wrapper is much larger than the text payload.
+    // Validation must count only the extracted text characters.
+    const shortText = 'hello';
+    const errors = validateBannerSection(
+      { title: tiptap(shortText) } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+});
+
+// ─── item array text field limits ────────────────────────────────────────────
+
+describe('item array text field limits', () => {
+  it('errors when an item field exceeds the limit and includes the index', () => {
+    const errors = validateImagesSection(
+      { items: [{ heading: str(200) }, { heading: str(201) }] } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/items\[1\]\.heading/);
+  });
+
+  it('passes when all item fields are within limits', () => {
+    const errors = validateTestimonialSection(
+      {
+        items: [{ testimonial: str(1000), name: str(200), position: str(200) }],
+      } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('skips the item array check when the field is absent', () => {
+    const errors = validateImagesSection({} as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+});
+
+// ─── field enum validation ────────────────────────────────────────────────────
+
+describe('field enum validation', () => {
+  it('errors on an invalid display_style', () => {
+    const errors = validateBannerSection(
+      { display_style: 'invalid-style' } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"display_style"/);
+    expect(errors[0]).toMatch(/invalid-style/);
+    expect(errors[0]).toMatch(/Valid values:/);
+  });
+
+  it('passes on a valid display_style', () => {
+    const errors = validateBannerSection(
+      { display_style: 'centered' } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('validates icon_style for social-links', () => {
+    const errors = validateSocialLinks(
+      { icon_style: 'not-a-real-style' } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"icon_style"/);
+  });
+
+  it('validates column_style for text sections', () => {
+    const errors = validateTextSection({ column_style: '5' } as any, {});
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"column_style"/);
+    expect(errors[0]).toMatch(/Valid values: 1, 2, 3, 4/);
+  });
+
+  it('validates aspect_ratio for images-section', () => {
+    const errors = validateImagesSection(
+      { aspect_ratio: 'fake-ratio' } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"aspect_ratio"/);
+  });
+
+  it('validates accepted_fields for mailing-list', () => {
+    const errors = validateMailingList(
+      { accepted_fields: 'phoneAndEmail' } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"accepted_fields"/);
+    expect(errors[0]).toMatch(/emailOnly, nameAndEmail/);
+  });
+
+  it('skips enum check when field is null', () => {
+    const errors = validateBannerSection({ display_style: null } as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+});
+
+// ─── empty args ───────────────────────────────────────────────────────────────
+
+describe('empty args', () => {
+  it('returns no errors when no args are provided', () => {
+    const errors = validateBannerSection({}, {});
+
+    expect(errors).toHaveLength(0);
+  });
+});
+
+// ─── style field validation ───────────────────────────────────────────────────
+
+describe('style field validation', () => {
+  describe('fontSize unit enforcement', () => {
+    it('errors when fontSize uses px units', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontSize: '16px' } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/"title_style\.fontSize"/);
+      expect(errors[0]).toMatch(/em/);
+    });
+
+    it('errors when fontSize uses rem units', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontSize: '1rem' } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/"title_style\.fontSize"/);
+    });
+
+    it('passes when fontSize uses em units within bounds', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontSize: '1em' } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+
+    it('errors when fontSize em value is below the minimum', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontSize: '0.1em' } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('errors when fontSize em value exceeds the maximum', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontSize: '100em' } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('skips fontSize validation when value is null', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontSize: null } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  describe('lineHeight bounds', () => {
+    it('errors when lineHeight is below minimum', () => {
+      const errors = validateBannerSection(
+        { title_style: { lineHeight: 0.5 } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/"title_style\.lineHeight"/);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('errors when lineHeight exceeds maximum', () => {
+      const errors = validateBannerSection(
+        { title_style: { lineHeight: 3 } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('passes for a valid lineHeight', () => {
+      const errors = validateBannerSection(
+        { title_style: { lineHeight: 1.5 } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  describe('letterSpacing bounds', () => {
+    it('errors when letterSpacing is below minimum', () => {
+      const errors = validateBannerSection(
+        { title_style: { letterSpacing: -1 } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/"title_style\.letterSpacing"/);
+    });
+
+    it('errors when letterSpacing exceeds maximum', () => {
+      const errors = validateBannerSection(
+        { title_style: { letterSpacing: 101 } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+    });
+
+    it('passes for a valid letterSpacing', () => {
+      const errors = validateBannerSection(
+        { title_style: { letterSpacing: 50 } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  describe('fontFamily validity', () => {
+    it('errors when fontFamily is not a recognized name', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontFamily: 'Comic Sans' } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/"title_style\.fontFamily"/);
+      expect(errors[0]).toMatch(/not a recognized font family/);
+    });
+
+    it('skips fontFamily validation when value is null', () => {
+      const errors = validateBannerSection(
+        { title_style: { fontFamily: null } } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  it('skips style validation when the style field is not an object', () => {
+    const errors = validateBannerSection({ title_style: null } as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+});
+
+// ─── item cap rules ───────────────────────────────────────────────────────────
+
+describe('item cap rules', () => {
+  const makeItems = (count: number) =>
+    Array.from({ length: count }, (_, i) => ({
+      image_url: `https://example.com/${i}.jpg`,
+    }));
+
+  describe('create mode', () => {
+    it('errors when items exceed the brandSite cap', () => {
+      const errors = validateImagesSection({ items: makeItems(6) } as any, {
+        brandPageType: 'brandSite',
+        mode: 'create',
+      });
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/"items"/);
+      expect(errors[0]).toMatch(/6 items/);
+      expect(errors[0]).toMatch(/maximum of 5/);
+    });
+
+    it('passes when items are exactly at the cap', () => {
+      const errors = validateImagesSection({ items: makeItems(5) } as any, {
+        brandPageType: 'brandSite',
+        mode: 'create',
+      });
+
+      expect(errors).toHaveLength(0);
+    });
+
+    it('errors when items exceed the brandPage cap (lower than brandSite)', () => {
+      const errors = validateImagesSection({ items: makeItems(3) } as any, {
+        brandPageType: 'default',
+        mode: 'create',
+      });
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/maximum of 2/);
+    });
+  });
+
+  describe('update + _replace_items', () => {
+    it('errors when replacement items exceed the cap', () => {
+      const errors = validateTestimonialSection(
+        { items: makeItems(4), _replace_items: true } as any,
+        { brandPageType: 'brandSite', mode: 'update' },
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/maximum of 3/);
+    });
+
+    it('skips cap check on update without _replace_items', () => {
+      const errors = validateTestimonialSection(
+        { items: makeItems(10) } as any,
+        { brandPageType: 'brandSite', mode: 'update' },
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  it('checks the correct array field (links for social-links)', () => {
+    const errors = validateSocialLinks({ links: makeItems(5) } as any, {
+      brandPageType: 'brandSite',
+      mode: 'create',
+    });
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/"links"/);
+    expect(errors[0]).toMatch(/maximum of 4/);
+  });
+
+  it('skips cap check when brandPageType is not provided', () => {
+    const errors = validateImagesSection({ items: makeItems(99) } as any, {
+      mode: 'create',
+    });
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('skips cap check for sections with no cap rule', () => {
+    const errors = validateBannerSection({ items: makeItems(99) } as any, {
+      brandPageType: 'brandSite',
+      mode: 'create',
+    });
+
+    expect(errors).toHaveLength(0);
+  });
+});
+
+// ─── RTE inline mark style validation ────────────────────────────────────────
+
+const rteDoc = (
+  marks: { type: string; attrs?: Record<string, unknown> }[],
+): TiptapDocument => ({
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [{ type: 'text', text: 'hello', marks } as any],
+    },
+  ],
+});
+
+const textStyleMark = (attrs: Record<string, unknown>) => ({
+  type: 'textStyle',
+  attrs,
+});
+
+describe('RTE inline mark style validation', () => {
+  it('passes when the field is a plain string (not a TiptapDocument)', () => {
+    const errors = validateBannerSection({ title: 'plain string' } as any, {});
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('passes when TiptapDocument has no textStyle marks', () => {
+    const errors = validateBannerSection(
+      { title: rteDoc([{ type: 'bold' }]) } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('passes when all textStyle mark attrs are valid', () => {
+    const errors = validateBannerSection(
+      {
+        title: rteDoc([
+          textStyleMark({
+            fontSize: '1em',
+            fontFamily: 'Playfair Display',
+            lineHeight: '1.5',
+            letterSpacing: '0.05em',
+          }),
+        ]),
+      } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  it('passes when textStyle mark has no attrs', () => {
+    const errors = validateBannerSection(
+      { title: rteDoc([{ type: 'textStyle' }]) } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(0);
+  });
+
+  describe('fontSize in textStyle mark', () => {
+    it('errors when fontSize uses px units', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ fontSize: '16px' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/fontSize/);
+      expect(errors[0]).toMatch(/em/);
+    });
+
+    it('errors when fontSize is out of bounds', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ fontSize: '100em' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('passes when fontSize is valid em within bounds', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ fontSize: '1.5em' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  describe('fontFamily in textStyle mark', () => {
+    it('errors when fontFamily is not in the library', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([textStyleMark({ fontFamily: 'Comic Sans MS' })]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/fontFamily/);
+      expect(errors[0]).toMatch(/not a recognized font family/);
+    });
+
+    it('passes when fontFamily is a valid library font', () => {
+      const errors = validateBannerSection(
+        {
+          title: rteDoc([textStyleMark({ fontFamily: 'Playfair Display' })]),
+        } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  describe('lineHeight in textStyle mark', () => {
+    it('errors when lineHeight has units (e.g. "1.5em")', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ lineHeight: '1.5em' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/lineHeight/);
+      expect(errors[0]).toMatch(/unitless/);
+    });
+
+    it('errors when lineHeight is out of bounds', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ lineHeight: '3' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('passes when lineHeight is a valid unitless number', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ lineHeight: '1.5' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  describe('letterSpacing in textStyle mark', () => {
+    it('errors when letterSpacing uses % units instead of em', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ letterSpacing: '5%' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/letterSpacing/);
+      expect(errors[0]).toMatch(/em/);
+    });
+
+    it('errors when letterSpacing is out of bounds', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ letterSpacing: '2em' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(1);
+      expect(errors[0]).toMatch(/out of bounds/);
+    });
+
+    it('passes when letterSpacing is valid em within bounds', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ letterSpacing: '0.05em' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+
+    it('passes when letterSpacing is "0" (unitless zero is valid CSS)', () => {
+      const errors = validateBannerSection(
+        { title: rteDoc([textStyleMark({ letterSpacing: '0' })]) } as any,
+        {},
+      );
+
+      expect(errors).toHaveLength(0);
+    });
+  });
+
+  it('errors when an item array text field contains an invalid textStyle mark', () => {
+    const errors = validateImagesSection(
+      {
+        items: [{ heading: rteDoc([textStyleMark({ fontSize: '99em' })]) }],
+      } as any,
+      {},
+    );
+
+    expect(errors).toHaveLength(1);
+    expect(errors[0]).toMatch(/items\[0\]\.heading/);
+    expect(errors[0]).toMatch(/fontSize/);
+    expect(errors[0]).toMatch(/out of bounds/);
+  });
+});