1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-23 02:04:34 +02:00
video.js/test/unit/transient-button.test.js
mister-ben 1afe5049e6
feat: Adds a transient button component (#8629)
## Description
Adds a `TransientButton` component for the types of button that are
shown on top of the video briefly during playback and reappear when
there is user activity. e.g. Unmute buttons, skip intro. It aims is to
be a generic button type to be extended. Some basic styles are provided
but kept light to not complicate customisation.
It's important to insert a transient button before the control bar for
the tab order to make sense.

_Optionally_ takes focus when shown.

## Specific Changes proposed
Adds `TransientButton` component.

## Requirements Checklist
- [x] Feature implemented / Bug fixed
- [ ] If necessary, more likely in a feature request than a bug fix
- [x] Change has been verified in an actual browser (Chrome, Firefox,
IE)
  - [x] Unit Tests updated or fixed
  - [ ] Docs/guides updated
- [x] Example:
https://deploy-preview-8629--videojs-preview.netlify.app/sandbox/transient-button.html
- [x] Has no DOM changes which impact accessiblilty or trigger warnings
(e.g. Chrome issues tab)
  - [x] Has no changes to JSDoc which cause `npm run docs:api` to error
- [ ] Reviewed by Two Core Contributors
2024-07-06 07:40:31 +01:00

90 lines
3.0 KiB
JavaScript

/* eslint-env qunit */
import TransientButton from '../../src/js/transient-button.js';
import TestHelpers from './test-helpers.js';
import sinon from 'sinon';
QUnit.module('TransientButton');
QUnit.test('show and hide should add and remove force-display class', function(assert) {
const player = TestHelpers.makePlayer();
const testButton = new TransientButton(player, {});
player.addChild(testButton);
assert.false(testButton.hasClass('force-display'), 'button is initially hidden');
testButton.show();
assert.true(testButton.hasClass('force-display'), 'button has force-display after show()');
testButton.hide();
assert.false(testButton.hasClass('force-display'), 'button no longer has force-display after hide()');
player.dispose();
});
QUnit.test('show and hide should add and remove force-display class', function(assert) {
this.clock = sinon.useFakeTimers();
const player = TestHelpers.makePlayer();
const testButton = new TransientButton(player, {});
player.hasStarted(true);
player.userActive(false);
player.addChild(testButton);
assert.false(testButton.hasClass('force-display'), 'button is initially hidden');
testButton.show();
assert.true(testButton.hasClass('force-display'), 'button has force-display after show()');
this.clock.tick(2000);
assert.true(testButton.hasClass('force-display'), 'button still has force-display until timeout');
this.clock.tick(2500);
assert.false(testButton.hasClass('force-display'), 'button no longer has force-display until timeout');
player.dispose();
this.clock.restore();
});
QUnit.test('applies posiiton classes', function(assert) {
const player = TestHelpers.makePlayer();
const testButton1 = new TransientButton(player, { position: ['top', 'left']});
const testButton2 = new TransientButton(player, { position: ['bottom', 'right']});
const testButton3 = new TransientButton(player, {});
assert.ok(testButton1.hasClass('vjs-top'), 'position top yields vjs-top class');
assert.ok(testButton1.hasClass('vjs-left'), 'position left yields vjs-left class');
assert.ok(testButton2.hasClass('vjs-bottom'), 'position bottom yields vjs-bottom class');
assert.ok(testButton2.hasClass('vjs-right'), 'position right yields vjs-right class');
['vjs-top', 'vjs-neartop', 'vjs-bottom', 'vjs-left', 'vjs-right'].forEach(positionClass => {
assert.false(testButton3.hasClass(positionClass), `with no options should be no ${positionClass} class`);
});
player.dispose();
});
QUnit.test('takes focus only when specified', function(assert) {
const player = TestHelpers.makePlayer();
const testButton1 = new TransientButton(player, {});
const testButton2 = new TransientButton(player, {takeFocus: true});
const spy1 = sinon.spy(testButton1.el_, 'focus');
const spy2 = sinon.spy(testButton2.el_, 'focus');
player.addChild(testButton1);
testButton1.show();
assert.false(spy1.called, 'by default a button should not take focus');
player.addChild(testButton2);
testButton2.show();
assert.true(spy2.called, 'when enabled button should take focus');
player.dispose();
});