soroban-abacus-flashcards/apps/web/svg-processing-test.js

#!/usr/bin/env node

// Test script to verify SVG processing is working
// This will test both browser-side and server-side processing

const { generateSorobanSVG } = require('./src/lib/typst-soroban.ts')

async function testSVGProcessing() {
  console.log('🧪 Testing SVG processing...\n')

  // Test configuration
  const testConfig = {
    number: 23,
    width: '120pt',
    height: '160pt',
    beadShape: 'diamond',
    colorScheme: 'place-value',
    hideInactiveBeads: false,
    enableServerFallback: false,
  }

  try {
    console.log('📋 Test Configuration:')
    console.log(JSON.stringify(testConfig, null, 2))
    console.log('\n🚀 Generating SVG...\n')

    const svg = await generateSorobanSVG(testConfig)

    console.log('✅ SVG generated successfully!')
    console.log(`📏 SVG length: ${svg.length} characters`)

    // Check for processing evidence
    console.log('\n🔍 Checking for processing evidence:')

    // Check viewBox
    const viewBoxMatch = svg.match(/viewBox="([^"]*)"/)
    if (viewBoxMatch) {
      console.log(`✓ ViewBox found: ${viewBoxMatch[1]}`)
    } else {
      console.log('❌ No viewBox found')
    }

    // Check for crop marks (should be present but could be removed)
    const hasCropMarks = svg.includes('crop-mark://')
    console.log(
      `${hasCropMarks ? '✓' : '❌'} Crop marks: ${hasCropMarks ? 'present' : 'not found'}`
    )

    // Check for bead data attributes (evidence of processing)
    const hasBeadData = svg.includes('data-bead-')
    console.log(
      `${hasBeadData ? '✓' : '❌'} Bead data attributes: ${hasBeadData ? 'present' : 'not found'}`
    )

    // Check for original typst elements vs processed elements
    const hasTypstGroups = svg.includes('class="typst-group"')
    console.log(
      `${hasTypstGroups ? '✓' : '❌'} Typst groups: ${hasTypstGroups ? 'present' : 'not found'}`
    )

    // Extract some sample data attributes to verify processing
    const dataAttrMatches = svg.match(/data-bead-[^=]+=["'][^"']*["']/g)
    if (dataAttrMatches && dataAttrMatches.length > 0) {
      console.log(`✓ Found ${dataAttrMatches.length} bead data attributes:`)
      dataAttrMatches.slice(0, 3).forEach((attr) => {
        console.log(`  - ${attr}`)
      })
      if (dataAttrMatches.length > 3) {
        console.log(`  - ... and ${dataAttrMatches.length - 3} more`)
      }
    }

    // Check for size optimization evidence
    const dimensions = svg.match(/width="([^"]*)".*height="([^"]*)"/)
    if (dimensions) {
      console.log(`✓ Dimensions: ${dimensions[1]} × ${dimensions[2]}`)
    }

    console.log('\n📊 Summary:')
    console.log(`- SVG generation: ✅ SUCCESS`)
    console.log(`- ViewBox optimization: ${viewBoxMatch ? '✅' : '❌'}`)
    console.log(`- Bead annotation processing: ${hasBeadData ? '✅' : '❌'}`)
    console.log(`- Crop mark detection: ${hasCropMarks ? '✅' : '❌'}`)

    if (hasBeadData && viewBoxMatch) {
      console.log('\n🎯 CONCLUSION: SVG processor is working correctly!')
      console.log('   - ViewBox has been optimized for cropping')
      console.log('   - Bead annotations have been extracted and converted to data attributes')
    } else {
      console.log('\n⚠️  CONCLUSION: SVG processor may not be working as expected')
      console.log('   - Check the processSVG function calls in the generation pipeline')
    }

    // Save a sample for manual inspection
    require('fs').writeFileSync('./sample-processed.svg', svg)
    console.log('\n💾 Sample SVG saved to ./sample-processed.svg for manual inspection')
  } catch (error) {
    console.error('❌ Test failed:', error.message)
    console.error('Stack:', error.stack)
  }
}

// Run the test
testSVGProcessing().catch(console.error)