react-tray/lib/components/__tests__/Tray-test.js

An accessible tray component useful for navigation menus

'use strict';

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactAddonsTestUtils = require('react-addons-test-utils');

var _reactAddonsTestUtils2 = _interopRequireDefault(_reactAddonsTestUtils);

var _assert = require('assert');

var _main = require('../../main');

var _main2 = _interopRequireDefault(_main);

var _currentDiv = null;

function renderTray(props, children, callback) {
  _currentDiv = document.createElement('div');
  document.body.appendChild(_currentDiv);
  return _reactDom2['default'].render(_react2['default'].createElement(
    _main2['default'],
    props,
    children
  ), _currentDiv, callback);
}

function unmountTray() {
  _reactDom2['default'].unmountComponentAtNode(_currentDiv);
  document.body.removeChild(_currentDiv);
  _currentDiv = null;
}

/* eslint func-names:0 */
describe('react-tray', function () {
  afterEach(function () {
    unmountTray();
  });

  it('should not be visible when isOpen is false', function () {
    renderTray();
    (0, _assert.equal)(document.querySelectorAll('.ReactTray__Content').length, 0);
  });

  it('should be visible when isOpen is true', function () {
    renderTray({ isOpen: true });
    (0, _assert.equal)(document.querySelectorAll('.ReactTray__Content').length, 1);
  });

  it('should receive focus when opened', function () {
    renderTray({ isOpen: true });
    (0, _assert.equal)(document.querySelector('.ReactTray__Content'), document.activeElement);
  });

  it('should call onBlur when closed', function () {
    var blurred = false;
    renderTray({ isOpen: true, onBlur: function onBlur() {
        blurred: true;
      }, closeTimeoutMS: 0 });
    _reactAddonsTestUtils2['default'].Simulate.click(document.querySelector('.ReactTray__Overlay'));
    setTimeout(function () {
      (0, _assert.equal)(blurred, true);
    }, 0);
  });

  it('should call onOpen when it opens', function () {
    var calledOpen = false;
    renderTray({ isOpen: true, onOpen: function onOpen() {
        calledOpen = true;
      } });
    (0, _assert.equal)(calledOpen, true);
  });

  it('should close on overlay click', function () {
    renderTray({ isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0 });
    _reactAddonsTestUtils2['default'].Simulate.click(document.querySelector('.ReactTray__Overlay'));
    setTimeout(function () {
      (0, _assert.equal)(document.querySelectorAll('.ReactTray__Content').length, 0);
    }, 0);
  });

  it('should close on ESC key', function () {
    renderTray({ isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0 });
    _reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { key: 'Esc' });
    setTimeout(function () {
      (0, _assert.equal)(document.querySelectorAll('.ReactTray__Content').length, 0);
    }, 0);
  });

  it('should close on blur by default', function () {
    renderTray({ isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0 });
    _reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { key: 'Tab' });
    setTimeout(function () {
      (0, _assert.equal)(document.querySelectorAll('.ReactTray__Content').length, 0);
    }, 0);
  });

  it('should not close on blur', function () {
    renderTray({ isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0, closeOnBlur: false });
    _reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { key: 'Tab' });
    setTimeout(function () {
      (0, _assert.equal)(document.querySelectorAll('.ReactTray__Content').length, 1);
    }, 0);
  });

  describe('maintainFocus prop', function () {
    this.timeout(0);
    beforeEach(function (done) {
      var props = { isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0, maintainFocus: true };
      var children = _react2['default'].createElement(
        'div',
        null,
        _react2['default'].createElement(
          'a',
          { href: '#', id: 'one' },
          'One'
        ),
        _react2['default'].createElement(
          'a',
          { href: '#', id: 'two' },
          'Two'
        ),
        _react2['default'].createElement(
          'a',
          { href: '#', id: 'three' },
          'Three'
        )
      );
      renderTray(props, children, function () {
        return done();
      });
    });

    it('sends focus to the first item if tabbing away from the last element', function () {
      var firstItem = document.querySelector('#one');
      var lastItem = document.querySelector('#three');
      lastItem.focus();
      _reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { keyCode: 9 });
      (0, _assert.equal)(document.activeElement, firstItem);
    });

    it('sends focus to the last item if shift + tabbing from the first item', function () {
      var firstItem = document.querySelector('#one');
      var lastItem = document.querySelector('#three');
      firstItem.focus();
      _reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { keyCode: 9, shiftKey: true });
      (0, _assert.equal)(document.activeElement, lastItem);
    });
  });

  describe('getElementToFocus prop', function () {
    var getElementToFocus = function getElementToFocus() {
      return document.getElementById('two');
    };

    beforeEach(function (done) {
      var props = { isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0, maintainFocus: true, getElementToFocus: getElementToFocus };
      var children = _react2['default'].createElement(
        'div',
        null,
        _react2['default'].createElement(
          'a',
          { href: '#', id: 'one' },
          'One'
        ),
        _react2['default'].createElement(
          'a',
          { href: '#', id: 'two' },
          'Two'
        ),
        _react2['default'].createElement(
          'a',
          { href: '#', id: 'three' },
          'Three'
        )
      );
      renderTray(props, children, function () {
        return done();
      });
    });

    it('sends focus to the DOM node found via the selector passed in the prop', function () {
      var secondItem = document.querySelector('#two');
      (0, _assert.equal)(document.activeElement, secondItem);
    });
  });

  describe('getAriaHideElement prop', function () {
    var getAriaHideElement = function getAriaHideElement() {
      return document.getElementById('main_application_div');
    };

    beforeEach(function () {
      var mainDiv = document.createElement('div');
      mainDiv.id = 'main_application_div';
      document.body.appendChild(mainDiv);
    });

    it('adds aria-hidden to the given element when open', function () {
      renderTray({ isOpen: true, getAriaHideElement: getAriaHideElement });
      var el = document.getElementById('main_application_div');
      (0, _assert.equal)(el.getAttribute('aria-hidden'), 'true');
    });

    it('removes aria-hidden from the given element when closed', function () {
      renderTray({ isOpen: true, onBlur: function onBlur() {}, closeTimeoutMS: 0, getAriaHideElement: getAriaHideElement });
      _reactAddonsTestUtils2['default'].Simulate.keyDown(document.querySelector('.ReactTray__Content'), { key: 'Esc' });
      setTimeout(function () {
        var el = document.getElementById('main_application_div');
        (0, _assert.equal)(el.getAttribute('aria-hidden'), null);
      }, 0);
    });
  });
});