site-builder/craft/src/components/basic/Menu.toHtml.test.ts

import { describe, test, expect } from 'vitest';
import { Menu } from './Menu';

const toHtml = (Menu as any).toHtml;

describe('Menu.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
  test('same node id -> identical output across calls (deterministic)', () => {
    const { html: html1 } = toHtml({}, '', 'node-menu1');
    const { html: html2 } = toHtml({}, '', 'node-menu1');
    expect(html1).toBe(html2);
  });

  test('different node ids -> different, non-colliding scope classes (identical default links, no collision)', () => {
    const { html: html1 } = toHtml({}, '', 'node-menu1');
    const { html: html2 } = toHtml({}, '', 'node-menu2');
    const cls1 = html1.match(/\.([a-z0-9_]+-link):hover/)![1];
    const cls2 = html2.match(/\.([a-z0-9_]+-link):hover/)![1];
    expect(cls1).not.toBe(cls2);
  });

  test('the anchor class= and the <style> hover rule use the SAME scope', () => {
    const { html } = toHtml({}, '', 'node-menu1');
    const hoverCls = html.match(/\.([a-z0-9_]+-link):hover/)![1];
    expect(html).toContain(`class="${hoverCls}"`);
  });

  test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
    const { html: html1 } = toHtml({}, '');
    const { html: html2 } = toHtml({}, '');
    expect(html1).toBe(html2);
  });
});

describe('Menu.toHtml download attribute (F3: link-to-file toggle)', () => {
  test('a link with download:true emits the download attribute', () => {
    const { html } = toHtml({ links: [{ text: 'Brochure', href: '/brochure.pdf', download: true }] }, '', 'node-dl1');
    expect(html).toMatch(/<a href="\/brochure\.pdf"[^>]* download[^>]*>Brochure<\/a>/);
  });

  test('a link without download does not emit the attribute', () => {
    const { html } = toHtml({ links: [{ text: 'Home', href: '/' }] }, '', 'node-dl2');
    expect(html).not.toContain(' download');
  });
});

describe('Menu (F4: box-model + animation + visibility props on craft.props)', () => {
  test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
    const craftProps = (Menu as any).craft.props;
    expect(craftProps).toHaveProperty('animation', 'none');
    expect(craftProps).toHaveProperty('animationDelay', '0');
    expect(craftProps).toHaveProperty('hideOnDesktop', false);
    expect(craftProps).toHaveProperty('hideOnTablet', false);
    expect(craftProps).toHaveProperty('hideOnMobile', false);
  });
});

describe('Menu.toHtml XSS hardening (linkHoverColor into <style>)', () => {
  test('a linkHoverColor value containing </style><script> is neutralized', () => {
    const malicious = '#fff}</style><script>alert(1)</script><style>{';
    const { html } = toHtml({ linkHoverColor: malicious }, '', 'node-xss');
    expect(html).not.toContain('</style><script');
    expect(html).not.toContain('<script>alert(1)</script>');
  });

  test('a normal linkHoverColor still renders in the hover rule', () => {
    const { html } = toHtml({ linkHoverColor: '#ff0000' }, '', 'node-normal');
    expect(html).toMatch(/:hover\s*\{\s*color:\s*#ff0000/);
  });
});