@setzkasten-cms/astro-admin 0.6.0

package/src/init/__tests__/page-list-coverage.test.ts

@@ -0,0 +1,474 @@
+/**
+ * Tests: hardcoded <li> items in docs pages.
+ *
+ * Bug: When a docs page has <ul>/<li> elements with hardcoded text,
+ * those items are invisible to the CMS editor after adoption — the analyzer
+ * detected headings and paragraphs but missed static list item content.
+ *
+ * Covers:
+ *   1. Analyzer: detects <li> text content as array fields
+ *   2. Analyzer: total field count includes list items
+ *   3. Patcher:  after patching, no <li> contains hardcoded text (only CMS bindings)
+ *   4. Patcher:  list items are driven by .map() over CMS array
+ *   5. Regression: PageWithListItemsAdopted is already clean (all CMS-bound)
+ *   6. Regression: real docs pages have no hardcoded <li> text after fix
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { join, resolve } from 'node:path'
+import { analyzeAstroSection } from '../astro-section-analyzer-v2'
+import { patchTemplateForFields } from '../template-patcher-v2'
+
+const SECTIONS_DIR = resolve(import.meta.dirname!, '..', '..', '..', '..', '..', 'test-sections')
+
+// ---------------------------------------------------------------------------
+// Helper: find hardcoded <li> text — a <span> inside <li> with literal text,
+// no set:html attribute, and not inside a {(...).map(...)} expression.
+// After a correct adoption, this should return 0 matches.
+// ---------------------------------------------------------------------------
+function findHardcodedListItems(source: string): RegExpMatchArray[] {
+  // Match <span> that has direct text (no set:html, no {expr}), inside a <li>
+  // We look for: <span> followed by a letter (not { or <), then text, then </span>
+  const pattern = /<li[\s\S]{0,300}?<span(?![^>]*set:html)(?![^>]*data-sk-field)[^>]*>([A-Za-zÄÖÜäöüß][^<{]*)<\/span>/g
+  return [...source.matchAll(pattern)]
+}
+
+// ---------------------------------------------------------------------------
+// 1. Fixture: PageWithHardcodedList (the bug scenario)
+//    The analyzer SHOULD find the list item texts as array fields.
+// ---------------------------------------------------------------------------
+describe('PageWithHardcodedList — analyzer detects list items', () => {
+  let source: string
+  let section: Awaited<ReturnType<typeof analyzeAstroSection>>
+
+  beforeAll(async () => {
+    source = readFileSync(join(SECTIONS_DIR, 'PageWithHardcodedList.astro'), 'utf-8')
+    section = await analyzeAstroSection(
+      source,
+      '_page_docs_admin',
+      'adminPage',
+      'src/pages/docs/admin.astro',
+      { mode: 'page' },
+    )
+  })
+
+  it('should detect fields (page has visible content)', () => {
+    expect(section.fields.length).toBeGreaterThan(0)
+  })
+
+  it('should detect the h2 headings as text fields', () => {
+    const keys = section.fields.map(f => f.key)
+    // The page has "Page Builder", "Section-Editor", "Collections" as <h2>
+    const hasHeadings = keys.some(k => k.includes('heading') || k.includes('pageBuild') || k.includes('section'))
+    expect(hasHeadings, 'Should detect h2 headings').toBe(true)
+  })
+
+  it('should detect list item content as array fields', () => {
+    // List items should appear either as array fields or individual text fields
+    const arrayFields = section.fields.filter(f => f.type === 'array')
+    const allFields = section.fields
+
+    // Either the list items are grouped as arrays, or they appear as individual text fields
+    // In both cases, the TOTAL field count must be higher than just headings+descriptions
+    // (3 headings + 3 descriptions = 6; with list items: should be > 6)
+    expect(allFields.length).toBeGreaterThan(6)
+  })
+
+  it('should find list item default values', () => {
+    const allDefaultValues = section.fields
+      .flatMap(f => {
+        if (f.type === 'array' && Array.isArray(f.defaultValue)) return f.defaultValue as string[]
+        return typeof f.defaultValue === 'string' ? [f.defaultValue] : []
+      })
+
+    const hasListContent = allDefaultValues.some(v =>
+      typeof v === 'string' && (
+        v.includes('adoptieren') ||
+        v.includes('Textfelder') ||
+        v.includes('Eintraege')
+      ),
+    )
+    expect(hasListContent, 'List item text should appear in detected field default values').toBe(true)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 2. Patcher: after patching PageWithHardcodedList, no hardcoded <li> text remains
+// ---------------------------------------------------------------------------
+describe('PageWithHardcodedList — patcher eliminates hardcoded list items', () => {
+  let patched: string
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithHardcodedList.astro'), 'utf-8')
+    const section = await analyzeAstroSection(
+      source,
+      '_page_docs_admin',
+      'adminPage',
+      'src/pages/docs/admin.astro',
+      { mode: 'page' },
+    )
+    const groups = (section as any)._analyzerResult?.repeatedGroups ?? []
+    patched = await patchTemplateForFields(
+      source,
+      '_page_docs_admin',
+      section.fields,
+      groups,
+      { mode: 'page' },
+    )
+  })
+
+  it('should not contain hardcoded <li> text after patching', () => {
+    const hardcoded = findHardcodedListItems(patched)
+    expect(
+      hardcoded,
+      `Hardcoded list items found after patching:\n${hardcoded.map(m => `  "${m[1]}"`).join('\n')}`,
+    ).toHaveLength(0)
+  })
+
+  it('should contain data-sk-field on list items', () => {
+    expect(patched).toContain('data-sk-field')
+    // List items should be driven by .map() with indexed data-sk-field (template literal form)
+    expect(patched).toMatch(/data-sk-field=\{`[^`]*\.\$\{_i\}`\}|data-sk-field="[^"]*\.\d+"/)
+  })
+
+  it('should use skData array for list items', () => {
+    // Expect something like: (skData?.items ?? [...]).map(
+    expect(patched).toMatch(/skData\?\.items.*map|\.map.*skData\?\./)
+  })
+
+  it('should inject getSection in page mode', () => {
+    expect(patched).toContain("import { getSection } from 'setzkasten:content'")
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 3b. Partially adopted page with static list: patcher fixes the remaining items
+//     This covers the real-world case of admin.astro / license.astro after a
+//     first adoption pass that bound headings+descriptions but missed <ul>/<li>.
+// ---------------------------------------------------------------------------
+describe('PagePartiallyAdoptedWithList — patcher fixes remaining static list', () => {
+  let patched: string
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PagePartiallyAdoptedWithList.astro'), 'utf-8')
+    const section = await analyzeAstroSection(
+      source,
+      '_page_docs_partial',
+      'partialPage',
+      'src/pages/docs/partial.astro',
+      { mode: 'page' },
+    )
+    const groups = (section as any)._analyzerResult?.repeatedGroups ?? []
+    patched = await patchTemplateForFields(
+      source,
+      '_page_docs_partial',
+      section.fields,
+      groups,
+      { mode: 'page' },
+    )
+  })
+
+  it('should detect the static list as an array field', async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PagePartiallyAdoptedWithList.astro'), 'utf-8')
+    const section = await analyzeAstroSection(
+      source, '_page_docs_partial', 'partialPage', 'src/pages/docs/partial.astro', { mode: 'page' },
+    )
+    const arrayFields = section.fields.filter(f => f.type === 'array')
+    expect(arrayFields.length, 'Should detect at least one array field').toBeGreaterThanOrEqual(1)
+  })
+
+  it('should have no hardcoded <li> text after patching', () => {
+    const hardcoded = findHardcodedListItems(patched)
+    expect(
+      hardcoded,
+      `Hardcoded list items remain after patching partially-adopted page:\n${hardcoded.map(m => `  "${m[1]}"`).join('\n')}`,
+    ).toHaveLength(0)
+  })
+
+  it('should use .map() for the list after patching', () => {
+    expect(patched).toMatch(/\.map\(\s*\(item/)
+  })
+
+  it('should keep existing data-sk-field bindings intact', () => {
+    // Existing CMS bindings (headings, descriptions) must not be broken
+    expect(patched).toContain('data-sk-field="_page_docs_partial.heading"')
+    expect(patched).toContain('data-sk-field="_page_docs_partial.description"')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 3. Regression: PageWithListItemsAdopted is already clean
+//    The "good" fixture should have zero hardcoded <li> items.
+// ---------------------------------------------------------------------------
+describe('PageWithListItemsAdopted — already clean (regression baseline)', () => {
+  it('should have no hardcoded <li> text', () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithListItemsAdopted.astro'), 'utf-8')
+    const hardcoded = findHardcodedListItems(source)
+    expect(
+      hardcoded,
+      `Adopted fixture should have no hardcoded list items, found:\n${hardcoded.map(m => `  "${m[1]}"`).join('\n')}`,
+    ).toHaveLength(0)
+  })
+
+  it('should have .map() driven lists', () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithListItemsAdopted.astro'), 'utf-8')
+    // Each <ul> should be driven by a .map() over a CMS array
+    const mapCount = (source.match(/\.map\(\s*\(item/g) ?? []).length
+    expect(mapCount).toBeGreaterThanOrEqual(3) // three lists
+  })
+
+  it('should have data-sk-field on every list item', () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithListItemsAdopted.astro'), 'utf-8')
+    expect(source).toMatch(/data-sk-field=\{`_page_docs_admin\.items/)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 4. PageWithFormattedList — <li> items with <strong> inside spans
+//    The analyzer must detect formatting, store innerHTML as default values,
+//    and set formatting: true on the array item type.
+//    The patcher must replace the content span with set:html={item}.
+// ---------------------------------------------------------------------------
+describe('PageWithFormattedList — analyzer detects formatting in list items', () => {
+  let source: string
+  let section: Awaited<ReturnType<typeof analyzeAstroSection>>
+
+  beforeAll(async () => {
+    source = readFileSync(join(SECTIONS_DIR, 'PageWithFormattedList.astro'), 'utf-8')
+    section = await analyzeAstroSection(
+      source,
+      '_page_formatted',
+      'formattedPage',
+      'src/pages/formatted.astro',
+      { mode: 'page' },
+    )
+  })
+
+  it('should detect the list as an array field', () => {
+    const arrayFields = section.fields.filter(f => f.type === 'array')
+    expect(arrayFields.length).toBeGreaterThanOrEqual(1)
+  })
+
+  it('should set formatting: true on the array item type', () => {
+    const arrayField = section.fields.find(f => f.type === 'array')
+    expect(arrayField).toBeDefined()
+    expect((arrayField?.options as any)?.arrayItem?.formatting).toBe(true)
+  })
+
+  it('should store innerHTML (with <strong>) as default values', () => {
+    const arrayField = section.fields.find(f => f.type === 'array')
+    const items = arrayField?.defaultValue as string[] | undefined
+    expect(Array.isArray(items)).toBe(true)
+    const hasStrong = (items ?? []).some(v => typeof v === 'string' && v.includes('<strong'))
+    expect(hasStrong, 'Default values should contain <strong> HTML').toBe(true)
+  })
+})
+
+describe('PageWithFormattedList — patcher replaces content span with set:html', () => {
+  let patched: string
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithFormattedList.astro'), 'utf-8')
+    const section = await analyzeAstroSection(
+      source,
+      '_page_formatted',
+      'formattedPage',
+      'src/pages/formatted.astro',
+      { mode: 'page' },
+    )
+    const groups = (section as any)._analyzerResult?.repeatedGroups ?? []
+    patched = await patchTemplateForFields(
+      source,
+      '_page_formatted',
+      section.fields,
+      groups,
+      { mode: 'page' },
+    )
+  })
+
+  it('should inject set:html={item} on the content span', () => {
+    expect(patched).toContain('set:html={item}')
+  })
+
+  it('should not contain hardcoded <strong> text in the .map() template', () => {
+    // After patching, the <li> template inside .map() must not have hardcoded <strong>.
+    // The fallback array (between ?? [...]) may contain HTML — that's fine (it's data).
+    // Strip JS template literals and {expressions} before checking.
+    const withoutTemplateLiterals = patched.replace(/`[^`]*`/g, '""')
+    const withoutExpressions = withoutTemplateLiterals.replace(/\{[^}]*\}/g, '{}')
+    const strongInMarkup = withoutExpressions.match(/<strong[^>]*>[^<{]+<\/strong>/g) ?? []
+    expect(strongInMarkup, `Hardcoded <strong> in template: ${strongInMarkup.join(', ')}`).toHaveLength(0)
+  })
+
+  it('should add data-sk-field to list items', () => {
+    expect(patched).toMatch(/data-sk-field=\{`_page_formatted\.\w+\.\$\{_i\}`\}/)
+  })
+
+  it('should use .map() for the list', () => {
+    expect(patched).toMatch(/\.map\(\s*\(item/)
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 6. PageWithCalloutDiv — <div> with mixed content (text + inline <a>)
+//    The analyzer must NOT skip the callout div just because it contains <a>.
+//    Mixed-text divs (direct text nodes + inline links) must be detected.
+// ---------------------------------------------------------------------------
+describe('PageWithCalloutDiv — callout div with inline link detected as description field', () => {
+  let section: Awaited<ReturnType<typeof analyzeAstroSection>>
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithCalloutDiv.astro'), 'utf-8')
+    section = await analyzeAstroSection(
+      source,
+      '_page_callout_div',
+      'calloutDivPage',
+      'src/pages/callout-div.astro',
+      { mode: 'page' },
+    )
+  })
+
+  it('detects the callout div as a description field (not silently dropped)', () => {
+    // The fixture has 3 already-bound description fields (description, description2, description3).
+    // The callout div must get the next available key: description4.
+    // Bug: descCount started at 0, so key was 'description' → collision → skipped.
+    // Fix: descCount is initialized from the count of already-used description* keys.
+    const calloutField = section.fields.find(f => f.key === 'description4')
+    expect(calloutField, 'description4 field must be detected from callout div (not dropped due to key collision)').toBeDefined()
+  })
+
+  it('sets formatting: true on the callout field (contains inline <a>)', () => {
+    const calloutField = section.fields.find(f => f.key === 'description4')
+    expect((calloutField?.options as any)?.formatting).toBe(true)
+  })
+
+  it('extracts the text content as defaultValue', () => {
+    const calloutField = section.fields.find(f => f.key === 'description4')
+    expect(typeof calloutField?.defaultValue).toBe('string')
+    expect((calloutField?.defaultValue as string)).toMatch(/kommerzielle Lizenzen/)
+  })
+
+  it('still detects heading from data-sk-field (Section 0)', () => {
+    const headingField = section.fields.find(f => f.key === 'heading')
+    expect(headingField, 'heading must be detected via Section 0').toBeDefined()
+    expect(headingField?.defaultValue).toBe('Lizenz')
+  })
+})
+
+// Note: regression coverage for real docs pages is intentionally omitted here.
+// Real website pages can be in various adoption states (pre/post-adoption) and
+// should not be coupled to unit tests. The PageWithListItemsAdopted fixture
+// above serves as the stable regression baseline for the patcher pipeline.
+
+// ---------------------------------------------------------------------------
+// 5. PageWithAdoptedArrays — already-adopted page with ?? [...] fallback arrays
+//    The analyzer must detect array fields (not text) from .map() expressions
+//    that carry ?? ['item1', 'item2'] fallbacks (script-patched pages).
+// ---------------------------------------------------------------------------
+describe('PageWithAdoptedArrays — analyzer detects arrays from ?? [...] fallbacks', () => {
+  let section: Awaited<ReturnType<typeof analyzeAstroSection>>
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithAdoptedArrays.astro'), 'utf-8')
+    section = await analyzeAstroSection(
+      source,
+      '_page_adopted_arrays',
+      'adoptedArraysPage',
+      'src/pages/adopted-arrays.astro',
+      { mode: 'page' },
+    )
+  })
+
+  it('detects items as type array (not text)', () => {
+    const itemsField = section.fields.find(f => f.key === 'items')
+    expect(itemsField, 'items field must exist').toBeDefined()
+    expect(itemsField?.type).toBe('array')
+  })
+
+  it('extracts fallback items as defaultValue', () => {
+    const itemsField = section.fields.find(f => f.key === 'items')
+    expect(Array.isArray(itemsField?.defaultValue)).toBe(true)
+    expect(itemsField?.defaultValue).toEqual(['Eintrag A', 'Eintrag B', 'Eintrag C'])
+  })
+
+  it('sets no formatting on plain-text array items', () => {
+    const itemsField = section.fields.find(f => f.key === 'items')
+    expect((itemsField?.options as any)?.arrayItem?.formatting).toBeFalsy()
+  })
+
+  it('detects items2 as type array', () => {
+    const items2Field = section.fields.find(f => f.key === 'items2')
+    expect(items2Field?.type).toBe('array')
+  })
+
+  it('sets formatting: true on items2 because items contain HTML', () => {
+    const items2Field = section.fields.find(f => f.key === 'items2')
+    expect((items2Field?.options as any)?.arrayItem?.formatting).toBe(true)
+  })
+
+  it('extracts HTML items as defaultValue for items2', () => {
+    const items2Field = section.fields.find(f => f.key === 'items2')
+    const items = items2Field?.defaultValue as string[] | undefined
+    expect(Array.isArray(items)).toBe(true)
+    expect(items?.some(v => v.includes('<strong'))).toBe(true)
+  })
+
+  it('detects heading with fallback value', () => {
+    const headingField = section.fields.find(f => f.key === 'heading')
+    expect(headingField?.type).toBe('text')
+    expect(headingField?.defaultValue).toBe('Lizenz')
+  })
+})
+
+// ---------------------------------------------------------------------------
+// 7. PageWithHtmlFallback — Section 0 walkers must set formatting: true
+//    when fallback values contain HTML tags (<code>, <strong>).
+//
+//    Bug: attribute walker and expression walker both added fields without
+//    formatting:true even when the ?? fallback contained HTML. This caused:
+//    a) generated schema to have f.text({ label: '...' }) without formatting:true
+//    b) MiniRTE not active → raw HTML shown in plain text input
+// ---------------------------------------------------------------------------
+describe('PageWithHtmlFallback — Section 0 sets formatting:true for HTML fallbacks', () => {
+  let section: Awaited<ReturnType<typeof analyzeAstroSection>>
+
+  beforeAll(async () => {
+    const source = readFileSync(join(SECTIONS_DIR, 'PageWithHtmlFallback.astro'), 'utf-8')
+    section = await analyzeAstroSection(
+      source,
+      '_page_html_fallback',
+      'htmlFallbackPage',
+      'src/pages/html-fallback.astro',
+      { mode: 'page' },
+    )
+  })
+
+  it('detects heading without formatting (plain text fallback)', () => {
+    const f = section.fields.find(field => field.key === 'heading')
+    expect(f, 'heading must be detected').toBeDefined()
+    expect((f?.options as any)?.formatting).toBeFalsy()
+  })
+
+  it('detects description with formatting:true (set:html attr with <code> in fallback)', () => {
+    const f = section.fields.find(field => field.key === 'description')
+    expect(f, 'description must be detected').toBeDefined()
+    expect((f?.options as any)?.formatting).toBe(true)
+  })
+
+  it('description defaultValue contains the HTML with <code>', () => {
+    const f = section.fields.find(field => field.key === 'description')
+    expect((f?.defaultValue as string)).toMatch(/<code>/)
+  })
+
+  it('detects note with formatting:true (expression fallback with <strong>)', () => {
+    const f = section.fields.find(field => field.key === 'note')
+    expect(f, 'note must be detected').toBeDefined()
+    expect((f?.options as any)?.formatting).toBe(true)
+  })
+
+  it('note defaultValue contains the HTML with <strong>', () => {
+    const f = section.fields.find(field => field.key === 'note')
+    expect((f?.defaultValue as string)).toMatch(/<strong>/)
+  })
+})