site-builder/craft/src/components/forms/TextareaField.toHtml.test.ts

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

const toHtml = (TextareaField as any).toHtml;

describe('TextareaField.toHtml accessibility (F2.1)', () => {
  test('label for= matches textarea id=', () => {
    const { html } = toHtml({ label: 'Message', name: 'message' }, '');
    const forMatch = html.match(/<label for="([^"]+)"/);
    const idMatch = html.match(/<textarea id="([^"]+)"/);
    expect(forMatch).toBeTruthy();
    expect(idMatch).toBeTruthy();
    expect(forMatch![1]).toBe(idMatch![1]);
  });

  test('no visible label: textarea gets aria-label from placeholder', () => {
    const { html } = toHtml({ label: '', name: 'notes', placeholder: 'Anything else?' }, '');
    expect(html).not.toContain('<label');
    expect(html).toContain('aria-label="Anything else?"');
  });
});

describe('TextareaField.toHtml deterministic + unique ids (thread node id, resolves id-collision finding)', () => {
  test('label for= still matches textarea id= after threading the node id', () => {
    const { html } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
    const forMatch = html.match(/<label for="([^"]+)"/);
    const idMatch = html.match(/<textarea id="([^"]+)"/);
    expect(forMatch![1]).toBe(idMatch![1]);
  });

  test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
    const { html: html1 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
    const { html: html2 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
    expect(html1).toBe(html2);
  });

  test('two instances with the SAME default name but different node ids do not collide', () => {
    const { html: html1 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta1');
    const { html: html2 } = toHtml({ label: 'Message', name: 'message' }, '', 'node-ta2');
    const id1 = html1.match(/<textarea id="([^"]+)"/)![1];
    const id2 = html2.match(/<textarea id="([^"]+)"/)![1];
    expect(id1).not.toBe(id2);
  });

  test('no nodeId (legacy 2-arg call): id derivation stays deterministic, not random', () => {
    const { html: html1 } = toHtml({ label: 'Message', name: 'message' }, '');
    const { html: html2 } = toHtml({ label: 'Message', name: 'message' }, '');
    const id1 = html1.match(/<textarea id="([^"]+)"/)![1];
    const id2 = html2.match(/<textarea id="([^"]+)"/)![1];
    expect(id1).toBe(id2);
  });
});