Back to Repositories

Validating Player Setup Configuration in video.js

This test suite validates the initialization and setup functionality of Video.js player instances, focusing on data-setup attribute handling and configuration parsing. The tests ensure proper player initialization with various configuration options and error handling for invalid JSON inputs.

Test Coverage Overview

The test suite provides comprehensive coverage of Video.js player setup mechanisms, particularly focusing on the data-setup attribute functionality.

Tests data-setup attribute parsing and option application
Verifies player configuration with multiple options (controls, autoplay, preload, playsinline)
Validates error handling for malformed JSON configurations
Covers edge cases in initialization sequence

Implementation Analysis

The implementation utilizes QUnit’s module and test structure to organize setup-related test cases. The approach leverages TestHelpers utility methods for player and element creation, combined with Sinon.js for spy functionality to verify error logging behavior.

Uses TestHelpers.makeTag() for DOM element creation
Implements TestHelpers.makePlayer() for player instantiation
Employs Sinon.js spies for console error verification

Technical Details

Testing Framework: QUnit
Mocking Library: Sinon.js
Helper Utilities: TestHelpers custom module
Environment: Browser-like with window object
ESLint Configuration: QUnit environment
Test Setup: Individual test cases with cleanup (player.dispose())

Best Practices Demonstrated

The test suite exemplifies several testing best practices for JavaScript video player components.

Proper test isolation with player disposal after each test
Mock management with proper spy cleanup
Explicit assertions for each configuration option
Clear test case descriptions
Comprehensive error scenario coverage

videojs/videoJs

test/unit/setup.test.js

            
/* eslint-env qunit */
import TestHelpers from './test-helpers.js';
import sinon from 'sinon';
import window from 'global/window';

QUnit.module('Setup');

QUnit.test('should set options from data-setup even if autoSetup is not called before initialisation', function(assert) {
  const el = TestHelpers.makeTag();

  el.setAttribute(
    'data-setup',
    '{"controls": true, "autoplay": false, "preload": "auto", "playsinline": true}'
  );

  const player = TestHelpers.makePlayer({}, el);

  assert.ok(player.options_.controls === true);
  assert.ok(player.options_.autoplay === false);
  assert.ok(player.options_.preload === 'auto');
  assert.ok(player.options_.playsinline === true);
  player.dispose();
});

QUnit.test('should log an error if data-setup has invalid JSON', function(assert) {
  const logError = sinon.spy(window.console, 'error');

  const el = TestHelpers.makeTag();

  el.setAttribute(
    'data-setup',
    "{'controls': true}"
  );

  const player = TestHelpers.makePlayer({}, el);

  assert.ok(logError.calledWith('VIDEOJS:', 'ERROR:', 'data-setup'));
  player.dispose();
  window.console.error.restore();
});