1 files changed, 622 insertions, 0 deletions
diff --git a/javascript/videojs/test/unit/spatial-navigation.test.js b/javascript/videojs/test/unit/spatial-navigation.test.js
new file mode 100644
index 0000000..1c1ccb5
--- /dev/null
+++ b/javascript/videojs/test/unit/spatial-navigation.test.js
@@ -0,0 +1,622 @@
+/* eslint-env qunit */
+import SpatialNavigation from '../../src/js/spatial-navigation.js';
+import SpatialNavigationKeyCodes from '../../src/js/utils/spatial-navigation-key-codes';
+import TestHelpers from './test-helpers.js';
+import sinon from 'sinon';
+import document from 'global/document';
+import TextTrackSelect from '../../src/js/tracks/text-track-select';
+import * as Dom from '../../src/js/utils/dom.js';
+
+QUnit.module('SpatialNavigation', {
+  beforeEach() {
+    this.clock = sinon.useFakeTimers();
+    // 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;
+  },
+  afterEach() {
+    if (this.spatialNav && this.spatialNav.isListening_) {
+      this.spatialNav.stop();
+    }
+    this.player.dispose();
+    this.clock.restore();
+  }
+});
+
+QUnit.test('Initialization sets up initial properties', function(assert) {
+  assert.ok(this.spatialNav instanceof SpatialNavigation, 'Instance of SpatialNavigation');
+  assert.deepEqual(this.spatialNav.focusableComponents, [], 'Initial focusableComponents is an empty array');
+  assert.notOk(this.spatialNav.isListening_, 'isListening_ is initially false');
+  assert.notOk(this.spatialNav.isPaused_, 'isPaused_ is initially false');
+});
+
+QUnit.test('start method initializes event listeners', function(assert) {
+  const onSpy = sinon.spy(this.player, 'on');
+
+  this.spatialNav.start();
+
+  // Check if event listeners are added
+  assert.ok(onSpy.calledWith('keydown'), 'keydown event listener added');
+  assert.ok(onSpy.calledWith('loadedmetadata'), 'loadedmetadata event listener added');
+  assert.ok(onSpy.calledWith('modalKeydown'), 'modalKeydown event listener added');
+  assert.ok(onSpy.calledWith('modalclose'), 'modalclose event listener added');
+
+  // Additionally, check if isListening_ flag is set
+  assert.ok(this.spatialNav.isListening_, 'isListening_ flag is set');
+
+  onSpy.restore();
+});
+
+QUnit.test('stop method removes event listeners', function(assert) {
+  const offSpy = sinon.spy(this.player, 'off');
+
+  this.spatialNav.start();
+  this.spatialNav.stop();
+  assert.ok(offSpy.calledWith('keydown'), 'keydown event listener removed');
+  assert.notOk(this.spatialNav.isListening_, 'isListening_ flag is unset');
+  offSpy.restore();
+});
+
+QUnit.test('onKeyDown_ handles navigation keys', function(assert) {
+  // Ensure onKeyDown_ is bound correctly.
+  assert.equal(typeof this.spatialNav.onKeyDown_, 'function', 'onKeyDown_ should be a function');
+  assert.equal(this.spatialNav.onKeyDown_.hasOwnProperty('prototype'), false, 'onKeyDown_ should be bound to the instance');
+
+  // Prepare a spy for the move method to track its calls.
+  const moveSpy = sinon.spy(this.spatialNav, 'move');
+
+  // Create and dispatch a mock keydown event.
+  const event = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
+    key: 'ArrowRight',
+    code: 'ArrowRight',
+    keyCode: 39
+  });
+
+  // Directly invoke the onKeyDown_ handler to simulate receiving the event.
+  this.spatialNav.onKeyDown_(event);
+
+  // Assert that move was called correctly.
+  assert.ok(moveSpy.calledOnce, 'move method should be called once on keydown event');
+  assert.ok(moveSpy.calledWith('right'), 'move method should be called with "right" argument');
+
+  // Restore the spy to clean up.
+  moveSpy.restore();
+});
+
+QUnit.test('onKeyDown_ handles media keys', function(assert) {
+  const performMediaActionSpy = sinon.spy(this.spatialNav, 'performMediaAction_');
+
+  // Create a mock event for the 'play' key, using the hardcoded keyCode 415.
+  const event = new KeyboardEvent('keydown', { // eslint-disable-line no-undef
+    keyCode: 415
+  });
+
+  // Directly call the onKeyDown_ handler.
+  this.spatialNav.onKeyDown_(event);
+
+  // Assert that the performMediaAction_ method was called.
+  assert.ok(performMediaActionSpy.calledOnce, 'performMediaAction_ method should be called once for media play key');
+  assert.ok(performMediaActionSpy.calledWith('play'), 'performMediaAction_ should be called with "play"');
+
+  performMediaActionSpy.restore();
+});
+
+QUnit.test('onKeyDown_ handles Back key when target is closeable', function(assert) {
+  // Create a spy for the close method.
+  const closeSpy = sinon.spy();
+
+  // Create a spy for the preventDefault method.
+  const preventDefaultSpy = sinon.spy();
+
+  // Create a mock event target that is closeable.
+  const closeableTarget = {
+    close: closeSpy,
+    closeable: () => true
+  };
+
+  // Create a mock event for the 'Back' key, including a properly mocked originalEvent.
+  const event = {
+    preventDefault: preventDefaultSpy,
+    target: closeableTarget,
+    originalEvent: {
+      keyCode: SpatialNavigationKeyCodes.BACK,
+      preventDefault: preventDefaultSpy
+    }
+  };
+
+  // Stub the SpatialNavigationKeyCodes.isEventKey to return true when the 'Back' key is pressed.
+  sinon.stub(SpatialNavigationKeyCodes, 'isEventKey').callsFake((evt, keyName) => keyName === 'Back');
+
+  // Call the onKeyDown_ method with the mock event.
+  this.spatialNav.onKeyDown_(event);
+
+  // Asserts
+  assert.ok(SpatialNavigationKeyCodes.isEventKey.calledWith(event.originalEvent, 'Back'), 'isEventKey should be called with Back');
+  assert.ok(preventDefaultSpy.calledOnce, 'preventDefault should be called once');
+  assert.ok(closeSpy.calledOnce, 'close method should be called on the target');
+
+  // Restore stubs
+  SpatialNavigationKeyCodes.isEventKey.restore();
+});
+
+QUnit.test('performMediaAction_ executes play', function(assert) {
+  const playSpy = sinon.spy(this.player, 'play');
+
+  this.spatialNav.performMediaAction_('play');
+
+  assert.ok(playSpy.calledOnce, 'play method should be called once for "play" action');
+
+  playSpy.restore();
+});
+
+QUnit.test('performMediaAction_ executes pause', function(assert) {
+  const pauseSpy = sinon.spy(this.player, 'pause');
+
+  sinon.stub(this.player, 'paused').returns(false);
+
+  this.spatialNav.performMediaAction_('pause');
+
+  assert.ok(pauseSpy.calledOnce, 'pause method should be called once for "pause" action');
+
+  pauseSpy.restore();
+});
+
+QUnit.test('performMediaAction_ executes fast forward', function(assert) {
+  const userSeekSpy = sinon.spy(this.spatialNav, 'userSeek_');
+  const STEP_SECONDS = 5;
+  const initialTime = 30;
+
+  this.player.currentTime = () => initialTime;
+
+  this.spatialNav.performMediaAction_('ff');
+
+  const expectedNewTime = initialTime + STEP_SECONDS;
+
+  assert.ok(userSeekSpy.calledOnce, 'userSeek_ method should be called once for "fast forward" action');
+  assert.ok(userSeekSpy.calledWith(expectedNewTime), `userSeek_ method should be called with correct time offset: expected ${expectedNewTime}, got ${userSeekSpy.firstCall.args[0]}`);
+
+  userSeekSpy.restore();
+});
+
+QUnit.test('performMediaAction_ executes rewind', function(assert) {
+  const userSeekSpy = sinon.spy(this.spatialNav, 'userSeek_');
+  const STEP_SECONDS = 5;
+  const initialTime = 30;
+
+  this.player.currentTime = () => initialTime;
+
+  this.spatialNav.performMediaAction_('rw');
+
+  const expectedNewTime = initialTime - STEP_SECONDS;
+
+  assert.ok(userSeekSpy.calledOnce, 'userSeek_ method should be called once for "rewind" action');
+  assert.ok(userSeekSpy.calledWith(expectedNewTime), `userSeek_ method should be called with correct time offset: expected ${expectedNewTime}, got ${userSeekSpy.firstCall.args[0]}`);
+
+  userSeekSpy.restore();
+});
+
+QUnit.test('focus method sets focus on a player component', function(assert) {
+  this.spatialNav.start();
+
+  const component = this.player.getChild('bigPlayButton');
+
+  assert.ok(component, 'The target component exists.');
+
+  // Mock getIsAvailableToBeFocused to always return true
+  component.getIsAvailableToBeFocused = () => true;
+
+  // Spy on the focus method to check if it's called
+  const focusSpy = sinon.spy(component, 'focus');
+
+  this.spatialNav.focus(component);
+
+  assert.ok(focusSpy.calledOnce, 'focus method called on component');
+
+  // Clean up
+  focusSpy.restore();
+});
+
+QUnit.test('refocusComponent method refocuses the last focused component after losing focus', function(assert) {
+  this.spatialNav.start();
+
+  // Get the bigPlayButton component from the player
+  const bigPlayButton = this.player.getChild('bigPlayButton');
+
+  // Mock getIsAvailableToBeFocused to always return true for testing
+  bigPlayButton.getIsAvailableToBeFocused = () => true;
+
+  // Focus the bigPlayButton and set it as the last focused component
+  this.spatialNav.focus(bigPlayButton);
+
+  // Simulate losing focus
+  bigPlayButton.el().blur();
+
+  // Call refocusComponent to attempt to refocus the last focused component
+  this.spatialNav.refocusComponent();
+
+  // Check if the bigPlayButton is focused again
+  assert.strictEqual(this.spatialNav.lastFocusedComponent_, bigPlayButton, 'lastFocusedComponent_ should be set to the blurred component');
+});
+
+QUnit.test('move method changes focus to the right component', function(assert) {
+  this.spatialNav.start();
+
+  const rightComponent = {
+    name: () => 'rightComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 300, y: 100 }, boundingClientRect: { top: 0, left: 300, bottom: 200, right: 400 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  const currentComponent = {
+    name: () => 'currentComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 100 }, boundingClientRect: { top: 0, left: 100, bottom: 200, right: 200 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  this.spatialNav.focusableComponents = [currentComponent, rightComponent];
+  this.spatialNav.getCurrentComponent = () => currentComponent;
+
+  this.spatialNav.move('right');
+
+  assert.ok(rightComponent.focus.calledOnce, 'Focus should move to the right component');
+  assert.notOk(currentComponent.focus.called, 'Focus should not remain on the current component');
+});
+
+QUnit.test('move method changes focus to the left component', function(assert) {
+  this.spatialNav.start();
+
+  const leftComponent = {
+    name: () => 'leftComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 0, y: 100 }, boundingClientRect: { top: 0, left: 0, bottom: 200, right: 100 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  const currentComponent = {
+    name: () => 'currentComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 200, y: 100 }, boundingClientRect: { top: 0, left: 200, bottom: 200, right: 300 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  this.spatialNav.focusableComponents = [leftComponent, currentComponent];
+  this.spatialNav.getCurrentComponent = () => currentComponent;
+
+  this.spatialNav.move('left');
+
+  assert.ok(leftComponent.focus.calledOnce, 'Focus should move to the left component');
+  assert.notOk(currentComponent.focus.called, 'Focus should not remain on the current component');
+});
+
+QUnit.test('move method changes focus to the above component', function(assert) {
+  this.spatialNav.start();
+
+  const aboveComponent = {
+    name: () => 'aboveComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 0 }, boundingClientRect: { top: 0, left: 0, bottom: 100, right: 200 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  const currentComponent = {
+    name: () => 'currentComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 200 }, boundingClientRect: { top: 200, left: 0, bottom: 300, right: 200 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  this.spatialNav.focusableComponents = [aboveComponent, currentComponent];
+  this.spatialNav.getCurrentComponent = () => currentComponent;
+
+  this.spatialNav.move('up');
+
+  assert.ok(aboveComponent.focus.calledOnce, 'Focus should move to the above component');
+  assert.notOk(currentComponent.focus.called, 'Focus should not remain on the current component');
+});
+
+QUnit.test('move method changes focus to the below component', function(assert) {
+  this.spatialNav.start();
+
+  const belowComponent = {
+    name: () => 'belowComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 300 }, boundingClientRect: { top: 300, left: 0, bottom: 400, right: 200 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  const currentComponent = {
+    name: () => 'currentComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 100 }, boundingClientRect: { top: 0, left: 0, bottom: 200, right: 200 } }),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  this.spatialNav.focusableComponents = [belowComponent, currentComponent];
+  this.spatialNav.getCurrentComponent = () => currentComponent;
+
+  this.spatialNav.move('down');
+
+  assert.ok(belowComponent.focus.calledOnce, 'Focus should move to the below component');
+  assert.notOk(currentComponent.focus.called, 'Focus should not remain on the current component');
+});
+
+QUnit.test('getCurrentComponent method returns the current focused component', function(assert) {
+  this.spatialNav.start();
+
+  // Get the bigPlayButton component from the player
+  const bigPlayButton = this.player.getChild('bigPlayButton');
+
+  // Mock getIsAvailableToBeFocused to always return true for testing
+  bigPlayButton.getIsAvailableToBeFocused = () => true;
+
+  // Focus the bigPlayButton
+  this.spatialNav.focus(bigPlayButton);
+
+  // Call getCurrentComponent to get the current focused component
+  const currentComponent = this.spatialNav.getCurrentComponent();
+
+  // Check if the currentComponent is the bigPlayButton
+  assert.strictEqual(currentComponent, bigPlayButton, 'getCurrentComponent should return the focused component');
+});
+
+QUnit.test('add method adds a new focusable component', function(assert) {
+  this.spatialNav.start();
+
+  // Create a mock component with an 'el_' property and 'el' method
+  const newComponent = {
+    name: () => 'newComponent',
+    el_: document.createElement('div'),
+    el() {
+      return this.el_;
+    },
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 100 }, boundingClientRect: { top: 100, left: 100, bottom: 200, right: 200 } }),
+    getIsAvailableToBeFocused: () => true,
+    getIsFocusable: () => true
+  };
+
+  // Add the new component
+  this.spatialNav.add(newComponent);
+
+  // Check if the new component is added to the list of focusable components
+  assert.strictEqual(this.spatialNav.focusableComponents.includes(newComponent), true, 'New component should be added');
+});
+
+QUnit.test('remove method removes a focusable component', function(assert) {
+  this.spatialNav.start();
+
+  // Create a mock component
+  const componentToRemove = {
+    name: () => 'componentToRemove',
+    el_: document.createElement('div'),
+    el() {
+      return this.el_;
+    },
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 100 }, boundingClientRect: { top: 100, left: 100, bottom: 200, right: 200 } }),
+    getIsAvailableToBeFocused: () => true,
+    getIsFocusable: () => true
+  };
+
+  // Add the component to be removed
+  this.spatialNav.add(componentToRemove);
+
+  // Remove the component
+  this.spatialNav.remove(componentToRemove);
+
+  // Check if the component is removed from the list of focusable components
+  assert.strictEqual(this.spatialNav.focusableComponents.includes(componentToRemove), false, 'Component should be removed');
+});
+
+QUnit.test('clear method removes all focusable components', function(assert) {
+  this.spatialNav.start();
+
+  // Create mock components
+  const component1 = {
+    name: () => 'component1',
+    el_: document.createElement('div'),
+    el() {
+      return this.el_;
+    },
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 100 }, boundingClientRect: { top: 100, left: 100, bottom: 200, right: 200 } }),
+    getIsAvailableToBeFocused: () => true,
+    getIsFocusable: () => true
+  };
+
+  const component2 = {
+    name: () => 'component2',
+    el_: document.createElement('div'),
+    el() {
+      return this.el_;
+    },
+    focus: sinon.spy(),
+    getPositions: () => ({ center: { x: 100, y: 100 }, boundingClientRect: { top: 100, left: 100, bottom: 200, right: 200 } }),
+    getIsAvailableToBeFocused: () => true,
+    getIsFocusable: () => true
+  };
+
+  // Add the components
+  this.spatialNav.add(component1);
+  this.spatialNav.add(component2);
+
+  // Clear all components
+  this.spatialNav.clear();
+
+  // Check if the focusableComponents array is empty after clearing
+  assert.strictEqual(this.spatialNav.focusableComponents.length, 0, 'All components should be cleared');
+});
+
+QUnit.test('should call `searchForTrackSelect()` if spatial navigation is enabled on click event', function(assert) {
+  const element = document.createElement('div');
+
+  element.classList.add('vjs-text-track-settings');
+
+  const clickEvent = new MouseEvent('click', { // eslint-disable-line no-undef
+    view: this.window,
+    bubbles: true,
+    cancelable: true,
+    currentTarget: element
+  });
+
+  Object.defineProperty(clickEvent, 'relatedTarget', {writable: false, value: element});
+  Object.defineProperty(clickEvent, 'currentTarget', {writable: false, value: element});
+
+  const trackSelectSpy = sinon.spy(this.spatialNav, 'searchForTrackSelect_');
+
+  const textTrackSelectComponent = new TextTrackSelect(this.player, {
+    SelectOptions: ['Option 1', 'Option 2', 'Option 3'],
+    legendId: '1',
+    id: 1,
+    labelId: '1'
+  });
+
+  this.spatialNav.updateFocusableComponents = () => [textTrackSelectComponent];
+
+  this.spatialNav.handlePlayerBlur_(clickEvent);
+
+  assert.ok(trackSelectSpy.calledOnce);
+});
+
+QUnit.test('error on player calls updateFocusableComponents', function(assert) {
+  const updateFocusableComponentsSpy = sinon.spy(this.spatialNav, 'updateFocusableComponents');
+
+  this.spatialNav.start();
+
+  this.player.error('Error 1');
+
+  assert.ok(updateFocusableComponentsSpy.calledOnce, 'on error event spatial navigation should call "updateFocusableComponents"');
+});
+
+QUnit.test('error on player focus the second focusable element of error modal', function(assert) {
+  this.spatialNav.start();
+
+  const firstComponent = {
+    name: () => 'firstComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  const secondComponent = {
+    name: () => 'secondComponent',
+    el: () => document.createElement('div'),
+    focus: sinon.spy(),
+    getIsAvailableToBeFocused: () => true
+  };
+
+  this.spatialNav.focusableComponents = [firstComponent, secondComponent];
+  this.spatialNav.getCurrentComponent = () => firstComponent;
+  this.spatialNav.updateFocusableComponents = () => [firstComponent, secondComponent];
+
+  this.player.error({
+    code: 1,
+    dismiss: true
+  });
+
+  assert.ok(secondComponent.focus.calledOnce, 'Focus should move to the second component');
+  assert.notOk(firstComponent.focus.called, 'Focus should not remain on the first component');
+});
+
+QUnit.test('on error, modalButtons should get the buttons if those are available', function(assert) {
+  this.spatialNav.start();
+
+  const buttonContainer = Dom.createEl('div', {}, {class: 'vjs-errors-ok-button-container'});
+
+  const testEl1 = Dom.createEl('button', {}, {class: 'c1'});
+
+  // Add first element to error modal
+  buttonContainer.appendChild(testEl1);
+
+  const testEl2 = Dom.createEl('button', {}, {class: 'c1'});
+
+  // Add second element to error modal
+  buttonContainer.appendChild(testEl2);
+  this.player.errorDisplay.el().appendChild(buttonContainer);
+
+  this.player.error({
+    code: 1,
+    dismiss: true
+  });
+
+  this.spatialNav.getCurrentComponent = () => this.spatialNav.focusableComponents[0];
+
+  const getPositionsEl1Spy = sinon.spy(this.spatialNav.focusableComponents[0], 'getPositions');
+  const getPositionsEl2Spy = sinon.spy(this.spatialNav.focusableComponents[1], 'getPositions');
+
+  this.spatialNav.move('left');
+
+  assert.strictEqual(this.spatialNav.focusableComponents.length, 2, 'button elements are now part of the array of focusableComponents');
+  assert.ok(getPositionsEl1Spy.calledOnce, 'getPositions method called on button');
+  assert.ok(getPositionsEl2Spy.calledOnce, 'getPositions method called on button');
+  assert.strictEqual(this.spatialNav.focusableComponents[0].name(), 'ModalButton1', 'testEl1 name should be ModalButton1');
+  assert.strictEqual(this.spatialNav.focusableComponents[1].name(), 'ModalButton2', 'testEl2 name should be ModalButton2');
+
+  getPositionsEl1Spy.restore();
+  getPositionsEl2Spy.restore();
+});
+
+QUnit.test('on error, modalButtons added functions should work properly', function(assert) {
+  this.spatialNav.start();
+
+  const buttonContainer = Dom.createEl('div', {}, {class: 'vjs-errors-ok-button-container'});
+
+  const testEl1 = Dom.createEl('button', {}, {class: 'c1'});
+
+  // Add first element to error modal
+  buttonContainer.appendChild(testEl1);
+
+  this.player.errorDisplay.el().appendChild(buttonContainer);
+
+  this.player.error({ code: 1, dismiss: true });
+
+  assert.strictEqual(this.spatialNav.focusableComponents[0].el() instanceof Element, true, 'el function from modal buttons should return a DOM element'); // eslint-disable-line no-undef
+  assert.strictEqual(this.spatialNav.focusableComponents[0].getIsFocusable(), true, 'getIsFocusable function from modal buttons is always true');
+  assert.strictEqual(this.spatialNav.focusableComponents[0].getIsAvailableToBeFocused(), true, 'getIsAvailableToBeFocused function from modal buttons is always true');
+  assert.strictEqual(this.spatialNav.focusableComponents[0].getIsAvailableToBeFocused(), true, 'getIsAvailableToBeFocused function from modal buttons is always true');
+  assert.strictEqual(typeof this.spatialNav.focusableComponents[0].getPositions(), 'object', 'focusableComponents function from modal buttons should return an object');
+});
+
+QUnit.test('If component passes the required functions it should be added to focusableComponents', function(assert) {
+  this.spatialNav.start();
+
+  const firstComponent = {
+    name_: 'firstComponent',
+    name: () => this.name,
+    el_: document.createElement('div'),
+    el: () => this.el_,
+    focus: sinon.spy(),
+    getIsAvailableToBeFocused: () => true,
+    getIsFocusable: () => true
+  };
+
+  this.player.children_.push(firstComponent);
+  this.spatialNav.getCurrentComponent = () => firstComponent;
+  this.spatialNav.updateFocusableComponents();
+
+  assert.strictEqual(this.spatialNav.focusableComponents.length, 1, 'focusableComponents array should have 1 component');
+  assert.strictEqual(this.spatialNav.focusableComponents[0].name_, 'firstComponent', 'the name of the component in focusableComponents array should be "firstComponent"');
+});
+
+QUnit.test('Doesn\'t error if no ErrorDisplay component is present', function(assert) {
+  this.player.errorDisplay.dispose();
+  delete this.player.errorDisplay;
+
+  this.spatialNav.start();
+  assert.ok(true, 'started without throwing when errorDisplay not present');
+});