timeline-svg/test/testHelpers.js

// Test helpers and utilities

export const createSampleProject = () => ({
  name: "Test Project",
  description: "A test project for unit testing",
  dataSource: "test.csv",
  stylesheet: "test.css",
  svgTemplate: "test.svg",
  settings: {
    timelineMonths: 12
  },
  fieldMapping: {
    id: "ID",
    title: "Title",
    lane: "Lane",
    due: ["Due"]
  }
})

export const createSampleItems = () => [
  {
    id: "T-1",
    title: "First Task",
    lane: "Development",
    due: new Date("2025-01-15")
  },
  {
    id: "T-2",
    title: "Second Task",
    lane: "Testing",
    due: new Date("2025-02-20")
  },
  {
    id: "T-3",
    title: "Third Task",
    lane: "Development",
    due: new Date("2025-03-10")
  }
]

export const createSampleCSV = () => `ID,Title,Lane,Due
T-1,First Task,Development,2025-01-15
T-2,Second Task,Testing,2025-02-20
T-3,Third Task,Development,2025-03-10`

// Create a proper template-v2.svg format with template elements in defs
export const createSampleTemplate = () => `<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Month template -->
    <g id="month-template" style="display:none">
      <line x1="{{MONTH_X}}" y1="{{GRID_TOP}}" x2="{{MONTH_X}}" y2="{{GRID_BOTTOM}}" stroke="#E0E0E0" stroke-width="1"/>
      <rect x="{{MONTH_X_OFFSET}}" y="{{MONTH_LABEL_Y_OFFSET}}" width="60" height="24" fill="#F5F5F5" rx="4"/>
      <text x="{{MONTH_TEXT_X}}" y="{{MONTH_LABEL_Y}}" font-family="Arial" font-size="12" fill="#424242">{{MONTH_LABEL}}</text>
      <line x1="{{MONTH_SEP_X}}" y1="{{GRID_TOP}}" x2="{{MONTH_SEP_X}}" y2="{{GRID_BOTTOM}}" stroke="#BDBDBD" stroke-width="2"/>
    </g>

    <!-- Lane template -->
    <g id="lane-template" style="display:none">
      <rect x="{{LANE_X}}" y="{{LANE_Y}}" width="{{LANE_WIDTH}}" height="{{LANE_HEIGHT}}" fill="#FAFAFA" stroke="#E0E0E0" rx="8"/>
      <text x="{{LABEL_X}}" y="{{LABEL_Y}}" font-family="Arial" font-size="14" font-weight="bold" fill="#212121">{{LANE_NAME}}</text>
    </g>

    <!-- Task template -->
    <g id="item-template" style="display:none">
      <circle cx="{{ITEM_X}}" cy="{{ITEM_Y}}" r="6" fill="#1976D2"/>
      <text x="{{TEXT_X}}" y="{{TEXT_Y}}" font-family="Arial" font-size="11" fill="#424242">{{ITEM_ID}} {{ITEM_TITLE}}</text>
    </g>
  </defs>

  <rect width="100%" height="100%" fill="#FFFFFF"/>
  {{MONTHS}}
  {{LANES}}
</svg>`

// Create a malformed template missing required elements (for error testing)
export const createMalformedTemplate = (missingElement = 'month-template') => {
  const templates = {
    'month-template': `<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="lane-template" style="display:none">
      <rect x="{{LANE_X}}" y="{{LANE_Y}}" width="{{LANE_WIDTH}}" height="{{LANE_HEIGHT}}" fill="#FAFAFA"/>
    </g>
    <g id="item-template" style="display:none">
      <circle cx="{{ITEM_X}}" cy="{{ITEM_Y}}" r="6" fill="#1976D2"/>
    </g>
  </defs>
  {{MONTHS}}
  {{LANES}}
</svg>`,
    'lane-template': `<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="month-template" style="display:none">
      <line x1="{{MONTH_X}}" y1="{{GRID_TOP}}" x2="{{MONTH_X}}" y2="{{GRID_BOTTOM}}" stroke="#E0E0E0"/>
    </g>
    <g id="item-template" style="display:none">
      <circle cx="{{ITEM_X}}" cy="{{ITEM_Y}}" r="6" fill="#1976D2"/>
    </g>
  </defs>
  {{MONTHS}}
  {{LANES}}
</svg>`,
    'item-template': `<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="month-template" style="display:none">
      <line x1="{{MONTH_X}}" y1="{{GRID_TOP}}" x2="{{MONTH_X}}" y2="{{GRID_BOTTOM}}" stroke="#E0E0E0"/>
    </g>
    <g id="lane-template" style="display:none">
      <rect x="{{LANE_X}}" y="{{LANE_Y}}" width="{{LANE_WIDTH}}" height="{{LANE_HEIGHT}}" fill="#FAFAFA"/>
    </g>
  </defs>
  {{MONTHS}}
  {{LANES}}
</svg>`
  }
  return templates[missingElement] || templates['month-template']
}

// Create a large dataset for stress testing (50+ items)
export const createLargeDataset = (itemCount = 60) => {
  const lanes = ['Development', 'Testing', 'Design', 'DevOps', 'Documentation']
  const startDate = new Date('2025-01-01')
  const items = []

  for (let i = 1; i <= itemCount; i++) {
    const daysOffset = Math.floor(i * 8) // Spread items across ~480 days (16 months)
    const dueDate = new Date(startDate)
    dueDate.setDate(dueDate.getDate() + daysOffset)

    items.push({
      id: `TASK-${i}`,
      title: `Task ${i}: Implementation Item`,
      lane: lanes[i % lanes.length],
      due: dueDate
    })
  }

  return items
}

export const mockFetch = (data, ok = true) => {
  global.fetch.mockResolvedValueOnce({
    ok,
    status: ok ? 200 : 404,
    statusText: ok ? 'OK' : 'Not Found',
    json: () => Promise.resolve(data),
    text: () => Promise.resolve(typeof data === 'string' ? data : JSON.stringify(data))
  })
}

// Helper to mock Papa.parse with proper CSV parsing
export const mockPapaParse = () => {
  global.Papa.parse.mockImplementation((text, options) => {
    const lines = text.trim().split('\n')
    const headers = lines[0].split(',')
    const data = lines.slice(1).map(line => {
      const values = line.split(',')
      const obj = {}
      headers.forEach((header, i) => {
        obj[header] = values[i]
      })
      return obj
    })
    options.complete({ data })
  })
}

export const expectElementToHaveText = (selector, text) => {
  const element = document.querySelector(selector)
  expect(element).toBeTruthy()
  expect(element.textContent).toContain(text)
}

export const expectSVGToContain = (selector, expectedContent) => {
  const svg = document.querySelector(selector)
  expect(svg).toBeTruthy()
  expect(svg.outerHTML).toContain(expectedContent)
}