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

const toHtml = (BackgroundSection as any).toHtml;

describe('BackgroundSection.toHtml anchorId', () => {
  test('escapes a malicious anchorId (attribute breakout attempt)', () => {
    const { html } = toHtml({ anchorId: 'x" onmouseover="alert(1)' }, 'child');
    expect(html).not.toContain('onmouseover="alert(1)"');
  });

  test('a normal anchorId still renders correctly', () => {
    const { html } = toHtml({ anchorId: 'my-bg-section' }, 'child');
    expect(html).toContain('id="my-bg-section"');
  });
});

describe('BackgroundSection.toHtml style-value XSS hardening', () => {
  test('a malicious bgImage cannot break out of the outer style attribute via url(...)', () => {
    const malicious = 'javascript:alert(1)) foo{background:red}</style><script>alert(1)</script';
    const { html } = toHtml({ bgImage: malicious }, 'child');
    expect(html).not.toContain('<script>alert(1)</script>');
    expect(html).not.toContain('javascript:alert(1)');
  });

  test('a malicious bgColor cannot break out of the outer style attribute', () => {
    const malicious = 'red" onmouseover="alert(1)';
    const { html } = toHtml({ bgColor: malicious }, 'child');
    expect(html).not.toContain('onmouseover="alert(1)"');
  });

  test('a malicious overlayColor cannot break out of the overlay style attribute', () => {
    const malicious = 'red" onmouseover="alert(1)';
    const { html } = toHtml({ overlayColor: malicious }, 'child');
    expect(html).not.toContain('onmouseover="alert(1)"');
  });

  test('a wrong-typed overlayOpacity (string, not number) cannot break out of the overlay style attribute', () => {
    const malicious = '0.4" onmouseover="alert(1)' as any;
    const { html } = toHtml({ overlayOpacity: malicious }, 'child');
    expect(html).not.toContain('onmouseover="alert(1)"');
  });

  test('a malicious innerMaxWidth cannot break out of the inner style attribute', () => {
    const malicious = '1200px" onmouseover="alert(1)';
    const { html } = toHtml({ innerMaxWidth: malicious }, 'child');
    expect(html).not.toContain('onmouseover="alert(1)"');
  });

  test('normal props still render correctly', () => {
    const { html } = toHtml({ bgImage: 'https://example.com/bg.jpg', bgColor: '#1e293b', overlayColor: '#000000', overlayOpacity: 0.4, innerMaxWidth: '1200px' }, 'child');
    expect(html).toContain("url('https://example.com/bg.jpg')");
    expect(html).toContain('background-color:#1e293b');
    expect(html).toContain('opacity:0.4');
    expect(html).toContain('max-width:1200px');
    expect(html).toContain('child');
  });
});
