Back to Repositories

Testing Spatial Navigation Key Code Implementation in video.js

This test suite validates the spatial navigation key code functionality in Video.js, focusing on keyboard event handling and control mappings. It ensures proper interpretation of media control keys and spatial navigation features.

Test Coverage Overview

The test suite provides comprehensive coverage of spatial navigation key code handling in Video.js.

Key areas tested include:

Control key interpretation (play/pause)
Event name mapping from keycodes
Fallback behavior when keyCode is unavailable
Edge case handling for missing parameters

Implementation Analysis

The testing approach utilizes QUnit’s module-based structure with proper setup and teardown procedures. Each test case employs mock KeyboardEvent objects to simulate user interactions, following a clear pattern of event creation, method invocation, and assertion verification.

Framework-specific features include:

QUnit module configuration
beforeEach/afterEach hooks
TestHelpers utility integration

Technical Details

Testing tools and configuration:

QUnit test framework
ESLint for code quality
TestHelpers utility class
Mock KeyboardEvent implementation
Spatial navigation configuration options

Best Practices Demonstrated

The test suite exemplifies several testing best practices including proper test isolation, cleanup, and comprehensive edge case coverage.

Notable practices:

Consistent test setup and teardown
Clear test case organization
Descriptive assertion messages
Comprehensive event simulation
Proper resource disposal

videojs/videoJs

test/unit/utils/spatial-navigation-key-codes.test.js

            
/* eslint-env qunit */
import SpatialNavKeyCodes from '../../../src/js/utils/spatial-navigation-key-codes.js';
import TestHelpers from '../test-helpers.js';

QUnit.module('SpatialNavigationKeys', {
  beforeEach() {
    // Ensure each test starts with a player that has spatial navigation enabled
    this.player = TestHelpers.makePlayer({
      controls: true,
      bigPlayButton: true,
      spatialNavigation: { enabled: true }
    });
    // Directly reference the instantiated SpatialNavigation from the player
    this.spatialNav = this.player.spatialNavigation;
    this.spatialNav.start();
  },
  afterEach() {
    if (this.spatialNav && this.spatialNav.isListening_) {
      this.spatialNav.stop();
    }
    this.player.dispose();
  }
});

QUnit.test('should interpret control Keydowns succesfully', function(assert) {
  // Create and dispatch a mock keydown event.
  const playKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
    key: 'play',
    code: 'play',
    keyCode: 415
  });

  const isPlayEvent = SpatialNavKeyCodes.isEventKey(playKeydown, 'play');

  // Create and dispatch a mock keydown event.
  const pauseKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
    key: 'pause',
    code: 'pause',
    keyCode: 19
  });

  const isPauseEvent = SpatialNavKeyCodes.isEventKey(pauseKeydown, 'pause');

  assert.equal(isPlayEvent, true, 'should return true if key pressed was play & play was the expected key');
  assert.equal(isPauseEvent, true, 'should return true if key pressed was pause & pause was the expected key');
});

QUnit.test('should return event name type when given a keycode', function(assert) {
  // Create and dispatch a mock keydown event.
  const ffKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
    keyCode: 417
  });

  const isffEvent = SpatialNavKeyCodes.getEventName(ffKeydown);

  // Create and dispatch a mock keydown event.
  const rwKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
    keyCode: 412
  });

  const isrwEvent = SpatialNavKeyCodes.getEventName(rwKeydown);

  assert.equal(isffEvent, 'ff', 'should return `ff` when passed keycode `417`');
  assert.equal(isrwEvent, 'rw', 'should return `rw` when passed keycode `412`');
});

QUnit.test('should return event name if keyCode is not available', function(assert) {
  // Create and dispatch a mock keydown event.
  const ffKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
    keyCode: null,
    code: 'ff'
  });

  const isffEvent = SpatialNavKeyCodes.getEventName(ffKeydown);

  // Create and dispatch a mock keydown event.
  const rwKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
    keyCode: null,
    code: 'rw'
  });

  const isrwEvent = SpatialNavKeyCodes.getEventName(rwKeydown);

  assert.equal(isffEvent, 'ff', 'should return `ff` when passed code `ff`');
  assert.equal(isrwEvent, 'rw', 'should return `rw` when passed code `rw`');
});

QUnit.test('should return `null` when  keycode && code are not passed as parameters', function(assert) {
  // Create and dispatch a mock keydown event.
  const ffKeydown = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
  });

  const isffEvent = SpatialNavKeyCodes.getEventName(ffKeydown);

  assert.equal(isffEvent, null, 'should return `null` when not passed required parameters');
});