Testing & Debugging Keyboard Events

Testing Utilities

// testUtils/keyboard.js
export class KeyboardTestUtils {
  static createEvent(key, options = {}) {
    const defaults = {
      key,
      code: this.getCodeFromKey(key),
      keyCode: this.getKeyCodeFromKey(key),
      bubbles: true,
      cancelable: true,
      ...options
    };
    
    return new KeyboardEvent('keydown', defaults);
  }
  
  static getCodeFromKey(key) {
    const codeMap = {
      'a': 'KeyA', 'b': 'KeyB', 'c': 'KeyC',
      'Enter': 'Enter', 'Escape': 'Escape',
      ' ': 'Space', 'Tab': 'Tab',
      'ArrowUp': 'ArrowUp', 'ArrowDown': 'ArrowDown'
    };
    return codeMap[key] || `Key${key.toUpperCase()}`;
  }
  
  static getKeyCodeFromKey(key) {
    const keyCodeMap = {
      'a': 65, 'b': 66, 'c': 67,
      'Enter': 13, 'Escape': 27,
      ' ': 32, 'Tab': 9
    };
    return keyCodeMap[key] || 0;
  }
  
  static async typeSequence(element, keys, delay = 50) {
    for (const key of keys) {
      element.dispatchEvent(this.createEvent(key));
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
  
  static mockKeyboardEvent() {
    const original = window.KeyboardEvent;
    
    window.KeyboardEvent = function(type, init) {
      const event = new Event(type, init);
      Object.assign(event, init);
      return event;
    };
    
    return () => {
      window.KeyboardEvent = original;
    };
  }
}

Cypress Keyboard Testing

// cypress/e2e/keyboard.cy.js
describe('Keyboard Events', () => {
  beforeEach(() => {
    cy.visit('/app');
  });
  
  it('handles keyboard shortcuts', () => {
    // Get OS-specific modifier
    const modifier = Cypress.platform === 'darwin' ? '{cmd}' : '{ctrl}';
    
    // Test save shortcut
    cy.get('[data-testid="editor"]').type(`${modifier}s`);
    cy.get('[data-testid="save-status"]').should('contain', 'Saved');
    
    // Test undo/redo
    cy.get('[data-testid="editor"]')
      .type('Hello World')
      .type(`${modifier}z`)
      .should('have.value', '')
      .type(`${modifier}{shift}z`)
      .should('have.value', 'Hello World');
  });
  
  it('navigates with keyboard', () => {
    // Tab navigation
    cy.get('body').tab();
    cy.focused().should('have.attr', 'data-testid', 'search-input');
    
    cy.focused().tab();
    cy.focused().should('have.attr', 'data-testid', 'nav-button');
    
    // Arrow key navigation in menu
    cy.get('[data-testid="menu-trigger"]').click();
    cy.focused()
      .type('{downarrow}')
      .type('{downarrow}')
      .type('{enter}');
    
    cy.url().should('include', '/settings');
  });
  
  // Custom command for keyboard testing
  Cypress.Commands.add('typeShortcut', (shortcut) => {
    const keys = shortcut.split('+').map(key => {
      const keyMap = {
        'cmd': '{cmd}',
        'ctrl': '{ctrl}',
        'alt': '{alt}',
        'shift': '{shift}',
        'enter': '{enter}',
        'esc': '{esc}'
      };
      return keyMap[key.toLowerCase()] || key;
    });
    
    cy.focused().type(keys.join(''));
  });
  
  it('uses custom shortcuts command', () => {
    cy.get('[data-testid="editor"]').focus();
    cy.typeShortcut('ctrl+b');
    cy.get('[data-testid="bold-indicator"]').should('be.visible');
  });
});

Performance Measurement

// Performance monitoring for keyboard events
class KeyboardPerformanceMonitor {
  constructor() {
    this.metrics = {
      eventCount: 0,
      totalTime: 0,
      maxTime: 0,
      handlers: new Map()
    };
  }
  
  wrapHandler(name, handler) {
    return (event) => {
      const start = performance.now();
      
      try {
        handler(event);
      } finally {
        const duration = performance.now() - start;
        this.recordMetric(name, duration);
        
        if (duration > 16) { // Longer than one frame
          console.warn(`Slow keyboard handler "${name}": ${duration.toFixed(2)}ms`);
        }
      }
    };
  }
  
  recordMetric(handler, duration) {
    this.metrics.eventCount++;
    this.metrics.totalTime += duration;
    this.metrics.maxTime = Math.max(this.metrics.maxTime, duration);
    
    if (!this.metrics.handlers.has(handler)) {
      this.metrics.handlers.set(handler, {
        count: 0,
        totalTime: 0,
        maxTime: 0
      });
    }
    
    const handlerMetrics = this.metrics.handlers.get(handler);
    handlerMetrics.count++;
    handlerMetrics.totalTime += duration;
    handlerMetrics.maxTime = Math.max(handlerMetrics.maxTime, duration);
  }
  
  getReport() {
    const avgTime = this.metrics.totalTime / this.metrics.eventCount;
    
    const report = {
      summary: {
        totalEvents: this.metrics.eventCount,
        averageTime: avgTime.toFixed(2) + 'ms',
        maxTime: this.metrics.maxTime.toFixed(2) + 'ms',
        totalTime: this.metrics.totalTime.toFixed(2) + 'ms'
      },
      handlers: []
    };
    
    this.metrics.handlers.forEach((metrics, name) => {
      report.handlers.push({
        name,
        count: metrics.count,
        avgTime: (metrics.totalTime / metrics.count).toFixed(2) + 'ms',
        maxTime: metrics.maxTime.toFixed(2) + 'ms',
        totalTime: metrics.totalTime.toFixed(2) + 'ms'
      });
    });
    
    return report;
  }
  
  startProfiling() {
    if ('PerformanceObserver' in window) {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (entry.name.includes('keydown') || entry.name.includes('keyup')) {
            console.log('Event timing:', entry.name, entry.duration);
          }
        }
      });
      
      observer.observe({ entryTypes: ['event'] });
      return () => observer.disconnect();
    }
  }
}

// Usage
const monitor = new KeyboardPerformanceMonitor();

// Wrap handlers
document.addEventListener('keydown', 
  monitor.wrapHandler('main-handler', (e) => {
    // Your handler logic
  })
);

// Get performance report
setTimeout(() => {
  console.table(monitor.getReport());
}, 10000);

Testing Checklist

• ✓ Unit tests for all keyboard handlers
• ✓ E2E tests for critical user flows
• ✓ Cross-browser compatibility tests
• ✓ Performance monitoring in place
• ✓ Debugging utilities available
• ✓ Accessibility tests passing