Skip to content

Implement testing framework with Vitest and JSDOM #8

@killerwolf

Description

@killerwolf

Background

Currently, the project has no testing infrastructure in place. The npm test command is just a placeholder that exits with an error. Adding proper testing will ensure library reliability and make it easier to identify regressions when making changes.

Tasks

  1. Add Vitest and JSDOM as devDependencies
  2. Create a basic vitest.config.js file to configure the testing environment
  3. Implement initial tests for the core functionality:
    • VisualImageTool instantiation
    • getFocusPoint() behavior
    • toggleFocusPoint() functionality
    • Other public API methods
  4. Update npm scripts to include test and test:watch commands
  5. Extend GitHub Actions workflow to run tests

Recommended Setup

// package.json additions
"devDependencies": {
  "vitest": "^1.2.0",
  "jsdom": "^24.0.0"
},
"scripts": {
  "test": "vitest run",
  "test:watch": "vitest"
}

Example test structure:

// src/visual-image-tool.test.js
import { describe, it, expect, beforeEach, afterEach } from 'vitest'
import VisualImageTool from './visual-image-tool.js'

describe('VisualImageTool', () => {
  let container
  let imageElement
  let instance
  
  beforeEach(() => {
    // Setup DOM elements
    container = document.createElement('div')
    document.body.appendChild(container)
    
    imageElement = document.createElement('img')
    imageElement.src = 'data:image/png;base64,iVBORw0KGgoAAAANSU'
    container.appendChild(imageElement)
    
    // Create instance
    instance = new VisualImageTool(imageElement)
  })
  
  afterEach(() => {
    // Cleanup
    if (instance) {
      instance.destroy()
    }
    document.body.removeChild(container)
  })
  
  it('should initialize with default focus point', () => {
    const focusPoint = instance.getFocusPoint()
    expect(focusPoint).toEqual({ x: 0, y: 0 })
  })
  
  // Add more tests for other methods and functionality
})

Expected Outcome

  • Comprehensive test suite covering all public API functionality
  • Tests integrated into CI/CD workflow
  • Documentation on how to run tests for contributors

This addresses item #2 from the review in issue #6.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions