Home Reference Source Test

spatial-navigation-cursor/index.test.js

// @flow
/*global global*/
import test from 'ava';
import { JSDOM } from 'jsdom';
import td from 'testdouble';
import CursorManager from './index.js';

var observe = td.func();
var disconnect = td.func();

test.before(() => {
  global.window = new JSDOM('<body><div id="root"><p class="focused" style="position: absolute; top: 100px; left: 50px;">focused</p></div></body>').window;
  global.document = global.window.document;
  global.MutationObserver = class {
    observe() { observe() }
    disconnect() { disconnect() }
  }
  global.getComputedStyle = () => ({ borderLeftWidth: '2px', borderTopWidth: '2px' });
});

test.after(() => {
  delete global.window;
  delete global.document;
  delete global.MutationObserver;
  delete global.getComputedStyle;
});

test('cursor', t => {
  const root = document.getElementById('root');
  if (!root) {
    t.fail();
    return;
  }

  const cursorManager = new CursorManager({
    root,
    focusClassName: 'focused'
  });

  const actual = cursorManager.getCursor();
  t.is(actual.style.display, '');

  cursorManager.start();
  t.is(actual, root.querySelector('.__spatial-navigation-cursor__'));
  t.is(actual.classList.item(0), '__spatial-navigation-cursor__');
  t.is(actual.style.position, 'absolute');
  t.is(parseInt(actual.style.top, 10), 0);
  t.is(parseInt(actual.style.left, 10), 0);
  t.is(td.explain(observe).callCount, 1);

  cursorManager.stop();
  t.is(root.querySelector('.__spatial-navigation-cursor__'), null);
  t.is(td.explain(disconnect).callCount, 1);

  const listener = td.func();
  cursorManager.addEventListener(CursorManager.Events.FOCUS_UPDATED, listener);
  (cursorManager/*: any*/).trigger_(CursorManager.Events.FOCUS_UPDATED);
  t.is(td.explain(listener).callCount, 1);

  cursorManager.removeEventListener(CursorManager.Events.FOCUS_UPDATED, listener);
  (cursorManager/*: any*/).trigger_(CursorManager.Events.FOCUS_UPDATED);
  t.is(td.explain(listener).callCount, 1);
});