Back to Repositories

Testing HTMLTrackElementList Management in Video.js

This test suite validates the functionality of HTMLTrackElementList class in Video.js, focusing on track element management and list operations. The tests ensure proper handling of HTML track elements used for captions and chapters in video playback.

Test Coverage Overview

The test suite provides comprehensive coverage of HTMLTrackElementList functionality, focusing on list length management and track element retrieval.

Tests list length initialization and updates
Verifies track element retrieval by track reference
Validates dynamic addition and removal of track elements
Covers edge cases with different track kinds (captions, chapters)

Implementation Analysis

The testing approach uses QUnit framework to systematically verify HTMLTrackElementList behavior. Tests employ a modular structure with isolated test cases and clear assertions.

Uses mock tech implementation for isolation
Implements TextTrack instances with unique IDs
Utilizes QUnit’s assertion methods for verification

Technical Details

Testing Framework: QUnit
Test Environment: Node.js
Key Dependencies: video.js core modules
Mock Objects: defaultTech, genericHtmlTrackElements
ESLint Configuration: QUnit environment

Best Practices Demonstrated

The test suite exemplifies strong testing practices through clear organization and thorough validation.

Isolated test cases with specific assertions
Proper mock object implementation
Clear test descriptions and expectations
Consistent verification patterns
Comprehensive edge case coverage

videojs/videoJs

test/unit/tracks/html-track-element-list.test.js

            
/* eslint-env qunit */
import HTMLTrackElementList from '../../../src/js/tracks/html-track-element-list.js';
import TextTrack from '../../../src/js/tracks/text-track.js';

const defaultTech = {
  textTracks() {},
  on() {},
  off() {},
  one() {},
  currentTime() {}
};

const track1 = new TextTrack({
  id: 1,
  tech: defaultTech
});
const track2 = new TextTrack({
  id: 2,
  tech: defaultTech
});

const genericHtmlTrackElements = [{
  tech() {},
  kind: 'captions',
  track: track1
}, {
  tech() {},
  kind: 'chapters',
  track: track2
}];

QUnit.module('HTML Track Element List');

QUnit.test('HTMLTrackElementList\'s length is set correctly', function(assert) {
  const htmlTrackElementList = new HTMLTrackElementList(genericHtmlTrackElements);

  assert.equal(
    htmlTrackElementList.length,
    genericHtmlTrackElements.length,
    `the length is ${genericHtmlTrackElements.length}`
  );
});

QUnit.test('can get html track element by track', function(assert) {
  const htmlTrackElementList = new HTMLTrackElementList(genericHtmlTrackElements);

  assert.equal(
    htmlTrackElementList.getTrackElementByTrack_(track1).kind,
    'captions',
    'track1 has kind of captions'
  );
  assert.equal(
    htmlTrackElementList.getTrackElementByTrack_(track2).kind,
    'chapters',
    'track2 has kind of captions'
  );
});

QUnit.test('length is updated when new tracks are added or removed', function(assert) {
  const htmlTrackElementList = new HTMLTrackElementList(genericHtmlTrackElements);

  htmlTrackElementList.addTrackElement_({tech() {}});
  assert.equal(
    htmlTrackElementList.length,
    genericHtmlTrackElements.length + 1,
    `the length is ${genericHtmlTrackElements.length + 1}`
  );
  htmlTrackElementList.addTrackElement_({tech() {}});
  assert.equal(
    htmlTrackElementList.length,
    genericHtmlTrackElements.length + 2,
    `the length is ${genericHtmlTrackElements.length + 2}`
  );

  htmlTrackElementList.removeTrackElement_(htmlTrackElementList.getTrackElementByTrack_(track1));
  assert.equal(
    htmlTrackElementList.length,
    genericHtmlTrackElements.length + 1,
    `the length is ${genericHtmlTrackElements.length + 1}`
  );
  htmlTrackElementList.removeTrackElement_(htmlTrackElementList.getTrackElementByTrack_(track2));
  assert.equal(
    htmlTrackElementList.length,
    genericHtmlTrackElements.length,
    `the length is ${genericHtmlTrackElements.length}`
  );
});