Back to Repositories

Testing CloseButton Component Functionality in video.js

This test suite validates the CloseButton component functionality in Video.js, focusing on element creation, event handling, and keyboard interactions. The tests ensure proper button initialization, custom text configuration, and ESC key response.

Test Coverage Overview

The test suite provides comprehensive coverage of the CloseButton component functionality.

Element creation and structure validation
Custom control text configuration
Click event handling and triggering
Keyboard accessibility with ESC key support

Implementation Analysis

The testing approach utilizes QUnit’s module-based structure with beforeEach/afterEach hooks for proper test isolation. The implementation leverages sinon for spy functionality and TestHelpers for player instantiation and element assertions.

Tests follow a clear pattern of setup, action, and assertion, with explicit expectations count management.

Technical Details

Testing Framework: QUnit
Mocking Library: Sinon.js
Custom Utilities: TestHelpers
Environment: eslint-env qunit
Key Dependencies: Video.js player instance

Best Practices Demonstrated

The test suite exemplifies several testing best practices including proper test isolation, cleanup, and resource management.

Consistent beforeEach/afterEach setup and teardown
Explicit assertion counting
Modular test organization
Comprehensive DOM element validation
Event handling verification

videojs/videoJs

test/unit/close-button.test.js

            
/* eslint-env qunit */
import CloseButton from '../../src/js/close-button';
import sinon from 'sinon';
import TestHelpers from './test-helpers';

const getMockEscapeEvent = () => ({
  key: 'Escape',
  which: 27,
  preventDefault() {},
  stopPropagation() {}
});

QUnit.module('CloseButton', {

  beforeEach() {
    this.player = TestHelpers.makePlayer();
    this.btn = new CloseButton(this.player);
  },

  afterEach() {
    this.player.dispose();
    this.btn.dispose();
  }
});

QUnit.test('should create the expected element', function(assert) {
  const elAssertions = TestHelpers.assertEl(assert, this.btn.el(), {
    tagName: 'button',
    classes: [
      'vjs-button',
      'vjs-close-button',
      'vjs-control'
    ]
  });

  assert.expect(elAssertions.count + 1);
  elAssertions();
  assert.strictEqual(this.btn.el().querySelector('.vjs-control-text').innerHTML, 'Close');
});

QUnit.test('should allow setting the controlText_ property as an option', function(assert) {
  const text = 'OK!';
  const btn = new CloseButton(this.player, {controlText: text});

  assert.expect(1);
  assert.strictEqual(btn.controlText_, text, 'set the controlText_ property');

  btn.dispose();
});

QUnit.test('should trigger an event on activation', function(assert) {
  const spy = sinon.spy();

  this.btn.on('close', spy);
  this.btn.trigger('click');
  assert.expect(1);
  assert.strictEqual(spy.callCount, 1, 'the "close" event was triggered');
});

QUnit.test('pressing ESC triggers close()', function(assert) {
  const spy = sinon.spy();

  this.btn.on('close', spy);
  this.btn.handleKeyDown(getMockEscapeEvent());
  assert.expect(1);
  assert.strictEqual(spy.callCount, 1, 'ESC closed the modal');
});