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

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

const toHtml = (SearchBar as any).toHtml;

describe('SearchBar.toHtml decorative icons (F2.5)', () => {
  test('the input-adjacent search icon is aria-hidden', () => {
    const { html } = toHtml({}, '');
    const icons = html.match(/<i class="fa fa-search"[^>]*>/g) || [];
    expect(icons.length).toBeGreaterThan(0);
    icons.forEach((tag: string) => expect(tag).toContain('aria-hidden="true"'));
  });
});

describe('SearchBar.toHtml XSS hardening (placeholder/buttonText/showButton)', () => {
  test('a placeholder value with an attribute-breakout string cannot escape placeholder=""', () => {
    const malicious = 'Search..." onmouseover="alert(1)';
    const { html } = toHtml({ placeholder: malicious }, '');
    expect(html).not.toMatch(/"\s+onmouseover="/);
  });

  test('a buttonText value with a script tag is escaped as text content, not raw HTML', () => {
    const malicious = '<script>alert(1)</script>';
    const { html } = toHtml({ buttonText: malicious, showButton: true }, '');
    expect(html).not.toContain('<script>alert(1)</script>');
  });

  test('a non-boolean showButton (string "false") still yields fixed, safe border-radius values', () => {
    const { html } = toHtml({ showButton: 'false' as any }, '');
    expect(html).toMatch(/border-radius:(8px 0 0 8px|8px)/);
  });
});