@appearhere/bloom/components/Calendar/DayPicker/DayPickerItem.test.js

Appear Here's pattern library and styleguide

/* global jasmine:true */
import React from 'react';
import moment from 'moment';
import { render, findDOMNode } from 'react-dom';
import { Simulate } from 'react-addons-test-utils';
import { ENTER } from '../../../constants/keycodes';

import DayPickerItem from './DayPickerItem';

describe('DayPickerItem', () => {
  it('renders with a date without crashing', () => {
    const div = document.createElement('div');
    render(<DayPickerItem />, div);
  });

  describe('.handleInteraction', () => {
    it('fires the `onInteraction` callback when clicked with', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onInteraction={ spy }
        />,
        div
      );

      Simulate.click(findDOMNode(component));
      expect(spy.calls.count()).toEqual(1);
      expect(spy.calls.mostRecent().args[1].isSame(now)).toBe(true);
    });

    it('fires the `onInteraction` callback when touched', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onInteraction={ spy }
        />,
        div
      );

      Simulate.touchEnd(findDOMNode(component));
      expect(spy.calls.count()).toEqual(1);
      expect(spy.calls.mostRecent().args[1].isSame(now)).toBe(true);
    });

    it('fires the `onInteraction` callback when the user pressed `enter`', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onInteraction={ spy }
        />,
        div
      );

      Simulate.keyUp(findDOMNode(component), { keyCode: ENTER });
      expect(spy.calls.count()).toEqual(1);
      expect(spy.calls.mostRecent().args[1].isSame(now)).toBe(true);
    });

    it('doesn\'t fire the `onInteraction` callback the user presses any other key besides `enter`',
      () => {
        let component;
        const div = document.createElement('div');
        const spy = jasmine.createSpy();
        const now = moment();

        render(
          <DayPickerItem
            ref={ (c) => { component = c; } }
            day={ now }
            onInteraction={ spy }
          />,
          div
        );

        Simulate.keyUp(findDOMNode(component), { keyCode: 1 });
        expect(spy.calls.count()).toEqual(0);
      }
    );

    it('doesn\'t fire the `onInteraction` callback when interacted with whilst disabled', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onInteraction={ spy }
          getDayState={ () => ({
            isDisabled: true,
          }) }
        />,
        div
      );

      Simulate.click(findDOMNode(component));
      expect(spy.calls.count()).toEqual(0);
    });
  });

  describe('.handleHighlight', () => {
    it('fires the `onHighlight` callback when the mouse passes over', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onHighlight={ spy }
        />,
        div
      );

      Simulate.mouseOver(findDOMNode(component));
      expect(spy.calls.count()).toEqual(1);
      expect(spy.calls.mostRecent().args[1].isSame(now)).toBe(true);
    });

    it('fires the `onHighlight` callback when it is given focus', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onHighlight={ spy }
        />,
        div
      );

      Simulate.focus(findDOMNode(component));
      expect(spy.calls.count()).toEqual(1);
      expect(spy.calls.mostRecent().args[1].isSame(now)).toBe(true);
    });

    it('doesn\'t fire the `onHighlight` callback when interacted with whilst disabled', () => {
      let component;
      const div = document.createElement('div');
      const spy = jasmine.createSpy();
      const now = moment();

      render(
        <DayPickerItem
          ref={ (c) => { component = c; } }
          day={ now }
          onHighlight={ spy }
          getDayState={ () => ({
            isDisabled: true,
          }) }
        />,
        div
      );

      Simulate.mouseOver(findDOMNode(component));
      expect(spy.calls.count()).toEqual(0);
    });
  });
});