@specverse/engines 4.1.28 → 4.2.0

package/libs/instance-factories/applications/templates/react-starter/__tests__/detail-body-composer.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest';
+import * as ts from 'typescript';
+import { composeDetailBody } from '../detail-body-composer.js';
+import { emitView, type EmitContext, type ModelSpec } from '../view-emitter.js';
+
+function makeContext(overrides: Partial<EmitContext> = {}): EmitContext {
+  const post: ModelSpec = {
+    name: 'Post',
+    attributes: {
+      id: { type: 'UUID', required: true },
+      title: { type: 'String', required: true },
+      body: { type: 'Text', required: false },
+      authorId: { type: 'UUID', required: true },
+      createdAt: { type: 'DateTime', required: false },
+      publishedAt: { type: 'DateTime', required: false },
+    },
+    relationships: {
+      author: { type: 'belongsTo', targetModel: 'Author' },
+    },
+  };
+
+  return {
+    view: { type: 'detail', model: 'Post' },
+    viewName: 'PostDetailView',
+    model: post,
+    modelSchemas: { Post: post },
+    renderBody: composeDetailBody,
+    ...overrides,
+  };
+}
+
+function assertValidTsx(source: string, label: string): void {
+  const result = ts.transpileModule(source, {
+    compilerOptions: {
+      jsx: ts.JsxEmit.Preserve,
+      target: ts.ScriptTarget.ES2022,
+      module: ts.ModuleKind.ESNext,
+      moduleResolution: ts.ModuleResolutionKind.Bundler,
+      strict: false,
+    },
+    reportDiagnostics: true,
+  });
+  const errors = result.diagnostics?.filter(d => d.category === ts.DiagnosticCategory.Error) ?? [];
+  if (errors.length > 0) {
+    const message = errors
+      .map(d => ts.flattenDiagnosticMessageText(d.messageText, '\n'))
+      .join('\n');
+    throw new Error(`${label} failed to parse as TSX:\n${message}\n\n--- source ---\n${source}`);
+  }
+}
+
+describe('composeDetailBody — direct output', () => {
+  it('groups fields into business / belongsTo / metadata sections', () => {
+    const body = composeDetailBody(makeContext());
+
+    // Business fields (first <dl>)
+    expect(body).toContain('>Title<');
+    expect(body).toContain('>Body<');
+
+    // belongsTo section — surfaces authorId and notes the FK→name gap
+    expect(body).toContain('>Author<');
+    expect(body).toContain('.authorId ??');
+    expect(body).toContain('TODO: resolve FK ids');
+
+    // Metadata section (id / createdAt / publishedAt) — muted styling
+    expect(body).toContain('>Id<');
+    expect(body).toContain('>Created At<');
+    expect(body).toContain('>Published At<');
+    expect(body).toContain('text-xs text-gray-500');
+
+    // Business section is separate from metadata (no mixing)
+    const businessIdx = body.indexOf('>Title<');
+    const metadataIdx = body.indexOf('>Id<');
+    expect(businessIdx).toBeLessThan(metadataIdx);
+  });
+
+  it('emits one <dt>/<dd> per field with (item as any).FIELD access', () => {
+    const body = composeDetailBody(makeContext());
+    expect(body).toContain('(item as any).title ??');
+    expect(body).toContain('(item as any).body ??');
+    expect(body).toContain('(item as any).id ??');
+    expect(body).toContain('(item as any).createdAt ??');
+  });
+
+  it('falls back to a "no business fields" message when all attrs are metadata', () => {
+    const mostlyMetadata: ModelSpec = {
+      name: 'Stub',
+      attributes: {
+        id: { type: 'UUID' },
+        createdAt: { type: 'DateTime' },
+      },
+    };
+    const body = composeDetailBody(makeContext({
+      model: mostlyMetadata,
+      view: { type: 'detail', model: 'Stub' },
+      viewName: 'StubDetailView',
+      modelSchemas: { Stub: mostlyMetadata },
+    }));
+    expect(body).toContain('No business fields defined');
+  });
+
+  it('skips the belongsTo section when no belongsTo relationships exist', () => {
+    const solo: ModelSpec = {
+      name: 'Solo',
+      attributes: { id: {}, name: {} },
+      relationships: {
+        tags: { type: 'hasMany', targetModel: 'Tag' },  // hasMany, not belongsTo
+      },
+    };
+    const body = composeDetailBody(makeContext({
+      model: solo,
+      view: { type: 'detail', model: 'Solo' },
+      viewName: 'SoloDetailView',
+      modelSchemas: { Solo: solo },
+    }));
+    expect(body).not.toContain('TODO: resolve FK');
+    expect(body).toContain('>Name<');
+  });
+});
+
+describe('emitView wired to composeDetailBody — end-to-end', () => {
+  it('produces a complete PostDetailView.tsx that parses', () => {
+    const source = emitView(makeContext());
+    assertValidTsx(source, 'PostDetailView');
+  });
+
+  it('wires the skeleton: component, hooks, actions, body', () => {
+    const source = emitView(makeContext());
+    expect(source).toContain('export function PostDetailView');
+    expect(source).toContain('usePostsQuery');
+    expect(source).toContain('useDeletePostMutation');
+    expect(source).toContain('Post detail');
+    expect(source).toContain('onEdit(item)');
+    expect(source).toContain("confirm('Delete this post?')");
+    expect(source).toContain('(item as any).title ??');
+    expect(source).not.toMatch(/\{\{[A-Z_]+\}\}/);
+  });
+
+  it('handles plural singular correctly for the loading / not-found copy', () => {
+    const source = emitView(makeContext());
+    expect(source).toContain('Loading…');
+    // SINGULAR_LOWER substitution: "No post matching id ..."
+    expect(source).toContain('No post matching id');
+  });
+});

package/libs/instance-factories/applications/templates/react-starter/__tests__/form-body-composer.test.ts

@@ -0,0 +1,175 @@
+import { describe, it, expect } from 'vitest';
+import * as ts from 'typescript';
+import { composeFormBody } from '../form-body-composer.js';
+import { emitView, type EmitContext, type ModelSpec } from '../view-emitter.js';
+
+function makeContext(overrides: Partial<EmitContext> = {}): EmitContext {
+  const post: ModelSpec = {
+    name: 'Post',
+    attributes: {
+      id: { type: 'UUID', required: true, auto: 'uuid4' },
+      title: { type: 'String', required: true },
+      body: { type: 'Text', required: false },
+      published: { type: 'Boolean', required: false },
+      score: { type: 'Integer', required: false },
+      email: { type: 'Email', required: false },
+      status: { type: 'String', required: false, values: ['draft', 'live', 'archived'] },
+      authorId: { type: 'UUID', required: true },   // belongsTo FK
+      createdAt: { type: 'DateTime', required: false },   // metadata
+    },
+    relationships: {
+      author: { type: 'belongsTo', targetModel: 'Author' },
+    },
+  };
+
+  return {
+    view: { type: 'form', model: 'Post' },
+    viewName: 'PostFormView',
+    model: post,
+    modelSchemas: { Post: post },
+    renderBody: composeFormBody,
+    ...overrides,
+  };
+}
+
+function assertValidTsx(source: string, label: string): void {
+  const result = ts.transpileModule(source, {
+    compilerOptions: {
+      jsx: ts.JsxEmit.Preserve,
+      target: ts.ScriptTarget.ES2022,
+      module: ts.ModuleKind.ESNext,
+      moduleResolution: ts.ModuleResolutionKind.Bundler,
+      strict: false,
+    },
+    reportDiagnostics: true,
+  });
+  const errors = result.diagnostics?.filter(d => d.category === ts.DiagnosticCategory.Error) ?? [];
+  if (errors.length > 0) {
+    const message = errors
+      .map(d => ts.flattenDiagnosticMessageText(d.messageText, '\n'))
+      .join('\n');
+    throw new Error(`${label} failed to parse as TSX:\n${message}\n\n--- source ---\n${source}`);
+  }
+}
+
+describe('composeFormBody — field selection', () => {
+  it('omits auto-generated fields (id, createdAt) and attrs with auto markers', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).not.toMatch(/htmlFor="id"/);
+    expect(body).not.toMatch(/htmlFor="createdAt"/);
+  });
+
+  it('includes business fields in order', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toContain('htmlFor="title"');
+    expect(body).toContain('htmlFor="body"');
+    expect(body).toContain('htmlFor="score"');
+  });
+
+  it('renders a message when there are no editable fields', () => {
+    const emptyish: ModelSpec = {
+      name: 'Bare',
+      attributes: {
+        id: { type: 'UUID', auto: 'uuid4' },
+        createdAt: { type: 'DateTime' },
+      },
+    };
+    const body = composeFormBody(makeContext({
+      model: emptyish,
+      view: { type: 'form', model: 'Bare' },
+      viewName: 'BareFormView',
+      modelSchemas: { Bare: emptyish },
+    }));
+    expect(body).toContain('No editable fields for this model.');
+  });
+});
+
+describe('composeFormBody — input type per attribute', () => {
+  it('String with values=[...] → select', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toMatch(/<select\s[^>]*id="status"/);
+    expect(body).toContain('<option value="draft">draft</option>');
+    expect(body).toContain('<option value="live">live</option>');
+  });
+
+  it('Text → textarea', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toMatch(/<textarea\s[^>]*id="body"/);
+  });
+
+  it('Boolean → checkbox', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toContain('type="checkbox"');
+    expect(body).toContain('id="published"');
+    expect(body).toContain("checked={Boolean((formData as any).published)}");
+  });
+
+  it('Integer → number input with Number() coercion', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toMatch(/id="score"[\s\S]*type="number"/);
+    expect(body).toContain("Number(e.target.value)");
+  });
+
+  it('Email → email input', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toMatch(/id="email"[\s\S]*type="email"/);
+  });
+
+  it('String default → text input', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toMatch(/id="title"[\s\S]*type="text"/);
+  });
+
+  it('UUID → text input (treated like string)', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toMatch(/id="authorId"[\s\S]*type="text"/);
+  });
+});
+
+describe('composeFormBody — required markers', () => {
+  it('adds required HTML attribute to required inputs; omits it on optional ones', () => {
+    const body = composeFormBody(makeContext());
+    // The bareword ` required` attribute, emitted at end of an onChange
+    // line. Required fields in the fixture: title, authorId (belongsTo FK
+    // emitted as required). Optional: body, published, score, email, status.
+    const occurrences = (body.match(/ required$/gm) ?? []).length;
+    expect(occurrences).toBe(2);
+  });
+
+  it("appends ' *' to the label of required fields", () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toContain('Title *');
+    // body is not required
+    expect(body).not.toContain('Body *');
+  });
+});
+
+describe('composeFormBody — belongsTo section', () => {
+  it('surfaces belongsTo FK inputs with a TODO comment', () => {
+    const body = composeFormBody(makeContext());
+    expect(body).toContain('TODO: swap these text inputs for <select>s');
+    // authorId is emitted as a text input
+    expect(body).toMatch(/id="authorId"[\s\S]*?type="text"/);
+  });
+});
+
+describe('emitView wired to composeFormBody — end-to-end', () => {
+  it('produces a complete PostFormView.tsx that parses', () => {
+    const source = emitView(makeContext());
+    assertValidTsx(source, 'PostFormView');
+  });
+
+  it('wires the skeleton: component, hooks, modes, body', () => {
+    const source = emitView(makeContext());
+    expect(source).toContain('export function PostFormView');
+    expect(source).toContain('useCreatePostMutation');
+    expect(source).toContain('useUpdatePostMutation');
+    expect(source).toContain('mode === \'create\'');
+    expect(source).toContain('Create Post');
+    expect(source).toContain('Update Post');
+    // Body injected
+    expect(source).toContain('htmlFor="title"');
+    expect(source).toContain('<textarea');
+    expect(source).not.toMatch(/\{\{[A-Z_]+\}\}/);
+  });
+});

package/libs/instance-factories/applications/templates/react-starter/__tests__/helpers-emitter.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import * as ts from 'typescript';
+import { emitEntityDisplay } from '../helpers-emitter.js';
+
+function assertValidTsx(source: string, label: string): void {
+  const result = ts.transpileModule(source, {
+    compilerOptions: {
+      jsx: ts.JsxEmit.Preserve,
+      target: ts.ScriptTarget.ES2022,
+      module: ts.ModuleKind.ESNext,
+      moduleResolution: ts.ModuleResolutionKind.Bundler,
+      strict: true,
+    },
+    reportDiagnostics: true,
+  });
+  const errors = result.diagnostics?.filter(d => d.category === ts.DiagnosticCategory.Error) ?? [];
+  if (errors.length > 0) {
+    const message = errors
+      .map(d => ts.flattenDiagnosticMessageText(d.messageText, '\n'))
+      .join('\n');
+    throw new Error(`${label} failed to parse as TypeScript:\n${message}`);
+  }
+}
+
+describe('emitEntityDisplay', () => {
+  it('produces a module that parses under strict TypeScript', () => {
+    assertValidTsx(emitEntityDisplay(), 'entity-display.ts');
+  });
+
+  it('exports both getEntityDisplayName and resolveEntityDisplayName', () => {
+    const src = emitEntityDisplay();
+    expect(src).toMatch(/export function getEntityDisplayName/);
+    expect(src).toMatch(/export function resolveEntityDisplayName/);
+  });
+
+  it('uses the canonical candidate list in documented order', () => {
+    const src = emitEntityDisplay();
+    // Order matters: name → title → displayName → label → username → email.
+    // The order mirrors @specverse/runtime/views/core/entity-display.
+    const candidatesLine = src.match(/const candidates = \[([^\]]+)\]/)?.[1];
+    expect(candidatesLine).toBeDefined();
+    expect(candidatesLine).toContain("'name'");
+    expect(candidatesLine).toContain("'title'");
+    expect(candidatesLine).toContain("'displayName'");
+    expect(candidatesLine).toContain("'email'");
+    // Check relative order
+    const order = ['name', 'title', 'displayName', 'label', 'username', 'email'];
+    let lastIdx = -1;
+    for (const n of order) {
+      const idx = candidatesLine!.indexOf(`'${n}'`);
+      expect(idx).toBeGreaterThan(lastIdx);
+      lastIdx = idx;
+    }
+  });
+});

package/libs/instance-factories/applications/templates/react-starter/__tests__/html-to-jsx.test.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect } from 'vitest';
+import { htmlToJsx } from '../html-to-jsx.js';
+
+describe('htmlToJsx — attribute renames', () => {
+  it('renames class → className', () => {
+    expect(htmlToJsx('<div class="foo">x</div>')).toBe('<div className="foo">x</div>');
+  });
+
+  it('renames class inside nested elements', () => {
+    const input = '<div class="a"><span class="b">hi</span></div>';
+    const expected = '<div className="a"><span className="b">hi</span></div>';
+    expect(htmlToJsx(input)).toBe(expected);
+  });
+
+  it('renames for → htmlFor on labels', () => {
+    expect(htmlToJsx('<label for="id">X</label>')).toBe('<label htmlFor="id">X</label>');
+  });
+
+  it('renames tabindex → tabIndex', () => {
+    expect(htmlToJsx('<div tabindex="0">x</div>')).toBe('<div tabIndex="0">x</div>');
+  });
+
+  it('renames multiple attributes in a single tag', () => {
+    const input = '<input class="c" readonly maxlength="10" />';
+    const out = htmlToJsx(input);
+    expect(out).toContain('className="c"');
+    expect(out).toContain('readOnly');
+    expect(out).toContain('maxLength="10"');
+  });
+
+  it('does not rewrite attribute values that contain "class"', () => {
+    // The substring "class" in an attribute value should not be renamed.
+    const input = '<div class="has class word" data-x="my class name">y</div>';
+    const out = htmlToJsx(input);
+    // Expected: only the class ATTRIBUTE is renamed; values unchanged.
+    expect(out).toBe('<div className="has class word" data-x="my class name">y</div>');
+  });
+});
+
+describe('htmlToJsx — void elements', () => {
+  it('self-closes img', () => {
+    expect(htmlToJsx('<img src="a.png" alt="A">')).toBe('<img src="a.png" alt="A" />');
+  });
+
+  it('self-closes br', () => {
+    expect(htmlToJsx('line<br>break')).toBe('line<br />break');
+  });
+
+  it('self-closes input', () => {
+    expect(htmlToJsx('<input type="text" class="f">')).toBe('<input type="text" className="f" />');
+  });
+
+  it('self-closes hr', () => {
+    expect(htmlToJsx('<hr>')).toBe('<hr />');
+  });
+
+  it('leaves already-self-closed void elements alone', () => {
+    expect(htmlToJsx('<br />')).toBe('<br />');
+    expect(htmlToJsx('<img src="a" />')).toBe('<img src="a" />');
+  });
+
+  it('handles void elements in the middle of content', () => {
+    const input = '<p>hello<br>world<br>!</p>';
+    expect(htmlToJsx(input)).toBe('<p>hello<br />world<br />!</p>');
+  });
+});
+
+describe('htmlToJsx — inline style conversion', () => {
+  it('converts a single-declaration style', () => {
+    const input = '<div style="color: red">x</div>';
+    const out = htmlToJsx(input);
+    expect(out).toBe("<div style={{ color: 'red' }}>x</div>");
+  });
+
+  it('converts multiple declarations and camelCases property names', () => {
+    const input = '<div style="color: red; font-size: 14px; background-color: blue">x</div>';
+    const out = htmlToJsx(input);
+    expect(out).toBe("<div style={{ color: 'red', fontSize: '14px', backgroundColor: 'blue' }}>x</div>");
+  });
+
+  it('handles empty style', () => {
+    expect(htmlToJsx('<div style="">x</div>')).toBe('<div style={{}}>x</div>');
+  });
+
+  it('escapes single quotes inside values', () => {
+    const input = `<div style="font-family: 'Helvetica Neue'">x</div>`;
+    const out = htmlToJsx(input);
+    expect(out).toBe("<div style={{ fontFamily: '\\'Helvetica Neue\\'' }}>x</div>");
+  });
+
+  it('strips trailing semicolons and extra spacing', () => {
+    const input = '<div style="color:red;  font-size: 14px ;">x</div>';
+    const out = htmlToJsx(input);
+    expect(out).toBe("<div style={{ color: 'red', fontSize: '14px' }}>x</div>");
+  });
+});
+
+describe('htmlToJsx — idempotence', () => {
+  it('is a no-op on already-transformed input', () => {
+    const jsxLike = '<div className="a"><input type="text" /><br /></div>';
+    expect(htmlToJsx(jsxLike)).toBe(jsxLike);
+  });
+});
+
+describe('htmlToJsx — empty / degenerate input', () => {
+  it('returns empty string for empty input', () => {
+    expect(htmlToJsx('')).toBe('');
+  });
+
+  it('returns text-only input unchanged', () => {
+    expect(htmlToJsx('Loading...')).toBe('Loading...');
+  });
+});
+
+describe('htmlToJsx — realistic Tailwind-adapter output', () => {
+  it('transforms a typical table produced by the adapter', () => {
+    const input =
+      '<table class="w-full text-left border-collapse">' +
+      '<thead><tr><th class="px-4 py-2 font-semibold">Title</th></tr></thead>' +
+      '<tbody><tr class="hover:bg-gray-50"><td class="px-4 py-2">Hello</td></tr></tbody>' +
+      '</table>';
+    const out = htmlToJsx(input);
+    expect(out).toContain('className="w-full text-left border-collapse"');
+    expect(out).toContain('className="px-4 py-2 font-semibold"');
+    expect(out).toContain('className="hover:bg-gray-50"');
+    expect(out).not.toContain('class=');
+  });
+
+  it('transforms a form-group with inputs', () => {
+    const input =
+      '<div class="space-y-4">' +
+      '<label for="title" class="text-sm">Title</label>' +
+      '<input type="text" class="border rounded px-2 py-1">' +
+      '</div>';
+    const out = htmlToJsx(input);
+    expect(out).toContain('htmlFor="title"');
+    expect(out).toContain('className="text-sm"');
+    expect(out).toContain('<input type="text" className="border rounded px-2 py-1" />');
+  });
+});

package/libs/instance-factories/applications/templates/react-starter/__tests__/list-body-composer.test.ts

@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest';
+import * as ts from 'typescript';
+import { composeListBody } from '../list-body-composer.js';
+import { emitView, type EmitContext, type ModelSpec } from '../view-emitter.js';
+
+/**
+ * End-to-end: the canonical Tailwind adapter renders the table shell,
+ * the composer injects a JSX row-map, the emitter substitutes into
+ * the skeleton. The full output must parse as valid TSX.
+ */
+
+function makeContext(overrides: Partial<EmitContext> = {}): EmitContext {
+  const post: ModelSpec = {
+    name: 'Post',
+    attributes: {
+      // `id` is excluded by runtime's inferFieldsFromSchema directly.
+      id: { type: 'UUID', required: true },
+      title: { type: 'String', required: true },
+      body: { type: 'Text', required: false },
+      // `auto=now` is what marks publishedAt as excluded from column
+      // inference — the canonical rule from runtime pattern-engine.
+      publishedAt: { type: 'DateTime', required: false, auto: 'now' },
+      authorId: { type: 'UUID', required: true },
+    },
+  };
+
+  return {
+    view: { type: 'list', model: 'Post' },
+    viewName: 'PostListView',
+    model: post,
+    modelSchemas: { Post: post },
+    renderBody: composeListBody,
+    ...overrides,
+  };
+}
+
+function assertValidTsx(source: string, label: string): void {
+  const result = ts.transpileModule(source, {
+    compilerOptions: {
+      jsx: ts.JsxEmit.Preserve,
+      target: ts.ScriptTarget.ES2022,
+      module: ts.ModuleKind.ESNext,
+      moduleResolution: ts.ModuleResolutionKind.Bundler,
+      strict: false,
+    },
+    reportDiagnostics: true,
+  });
+  const errors = result.diagnostics?.filter(d => d.category === ts.DiagnosticCategory.Error) ?? [];
+  if (errors.length > 0) {
+    const message = errors
+      .map(d => ts.flattenDiagnosticMessageText(d.messageText, '\n'))
+      .join('\n');
+    throw new Error(`${label} failed to parse as TSX:\n${message}\n\n--- source ---\n${source}`);
+  }
+}
+
+describe('composeListBody — direct output', () => {
+  it('produces JSX containing the canonical table shell', () => {
+    const body = composeListBody(makeContext());
+    // Comes from the Tailwind adapter's table template
+    expect(body).toContain('overflow-x-auto');
+    expect(body).toContain('min-w-full');
+    expect(body).toContain('<thead');
+    expect(body).toContain('<tbody');
+    // After html-to-jsx: class → className
+    expect(body).toContain('className=');
+    expect(body).not.toMatch(/\bclass=/);
+  });
+
+  it('renders one header cell per non-metadata attribute, humanized', () => {
+    const body = composeListBody(makeContext());
+    expect(body).toContain('>Title<');
+    expect(body).toContain('>Body<');
+    expect(body).toContain('>Author Id<');   // authorId humanized
+    expect(body).not.toContain('>Id<');       // id filtered as metadata
+    expect(body).not.toContain('>Published At<'); // publishedAt filtered as metadata
+  });
+
+  it('emits a filtered.map expression with one cell per column', () => {
+    const body = composeListBody(makeContext());
+    expect(body).toContain('filtered.map((item, idx) =>');
+    expect(body).toContain('onClick={() => onSelect?.(item)}');
+
+    // Count how many times each field name appears in cell-context (inside
+    // the `<td>...item.FIELD ??` substring). Metadata should appear 0 times;
+    // business fields exactly once each.
+    const cellsRegion = body.slice(body.indexOf('<tbody'));
+    const cellAppearances = (field: string) =>
+      (cellsRegion.match(new RegExp(`item as any\\)\\.${field} \\?\\?`, 'g')) ?? []).length;
+
+    expect(cellAppearances('title')).toBe(1);
+    expect(cellAppearances('body')).toBe(1);
+    expect(cellAppearances('authorId')).toBe(1);
+    expect(cellAppearances('id')).toBe(0);           // metadata
+    expect(cellAppearances('publishedAt')).toBe(0);  // metadata
+  });
+
+  it('handles a model with zero non-metadata attributes', () => {
+    const empty: ModelSpec = {
+      name: 'Pulse',
+      attributes: { id: { type: 'UUID', required: true } },
+    };
+    const body = composeListBody(makeContext({
+      model: empty,
+      view: { type: 'list', model: 'Pulse' },
+      viewName: 'PulseListView',
+      modelSchemas: { Pulse: empty },
+    }));
+    // Table renders with empty columns array (no <th> cells inside <tr>)
+    expect(body).toContain('<thead');
+    // Row map still present — but cells block empty
+    expect(body).toContain('filtered.map');
+  });
+});
+
+describe('emitView wired to composeListBody — end-to-end', () => {
+  it('produces a complete PostListView.tsx that parses', () => {
+    const source = emitView(makeContext());
+    assertValidTsx(source, 'PostListView');
+  });
+
+  it('integrates skeleton + composer correctly', () => {
+    const source = emitView(makeContext());
+    // From skeleton
+    expect(source).toContain('export function PostListView');
+    expect(source).toContain('usePostsQuery');
+    expect(source).toContain('useDeletePostMutation');
+    // From composer (canonical adapter shell + row map)
+    expect(source).toContain('filtered.map');
+    expect(source).toContain('onSelect?.(item)');
+    expect(source).toContain('>Title<');
+    // No stray sentinels or placeholders
+    expect(source).not.toContain('__SPECVERSE_TBODY_ROWS__');
+    expect(source).not.toMatch(/\{\{[A-Z_]+\}\}/);
+  });
+
+  it('produces readable, line-broken output (no wall of HTML)', () => {
+    const source = emitView(makeContext());
+    // Sanity: the emitted file should be multi-line idiomatic React,
+    // not one giant collapsed line.
+    const lines = source.split('\n');
+    expect(lines.length).toBeGreaterThan(30);
+    // And no obviously-HTML escape leakage
+    expect(source).not.toContain('dangerouslySetInnerHTML');
+  });
+});