Mailspring/internal_packages/composer-emoji/spec/emoji-composer-extension-spec.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-addons-test-utils';

import {renderIntoDocument} from '../../../spec/nylas-test-utils';
import Contenteditable from '../../../src/components/contenteditable/contenteditable';
import EmojiComposerExtension from '../lib/emoji-composer-extension';

describe('EmojiComposerExtension', ()=> {
  beforeEach(()=> {
    spyOn(EmojiComposerExtension, 'onContentChanged').andCallThrough()
    spyOn(EmojiComposerExtension, '_onSelectEmoji').andCallThrough()
    this.component = renderIntoDocument(
      <Contenteditable
        html={''}
        onChange={jasmine.createSpy('onChange')}
        extensions={[EmojiComposerExtension]} />
    )
    this.editableNode = ReactDOM.findDOMNode(this.component).querySelector('[contenteditable]');
  })

  describe('when emoji trigger is typed', ()=> {
    beforeEach(()=> {
      this._performEdit = (newHTML) => {
        this.editableNode.innerHTML = newHTML;
        const sel = document.getSelection()
        const textNode = this.editableNode.childNodes[0];
        sel.setBaseAndExtent(textNode, textNode.nodeValue.length, textNode, textNode.nodeValue.length);
      }
    })

    it('should show the emoji picker', ()=> {
      this._performEdit('Testing! :h');
      waitsFor(()=> {
        return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-picker').length > 0
      });
    })

    it('should be focused on the first emoji in the list', ()=> {
      this._performEdit('Testing! :h');
      waitsFor(()=> {
        return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-option').length > 0
      });
      runs(()=> {
        expect(ReactDOM.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'emoji-option')).textContent.indexOf(":haircut:") !== -1).toBe(true);
      });
    })

    it('should insert an emoji on enter', ()=> {
      this._performEdit('Testing! :h');
      waitsFor(()=> {
        return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-picker').length > 0
      });
      runs(()=> {
        ReactTestUtils.Simulate.keyDown(this.editableNode, {key: "Enter", keyCode: 13, which: 13});
      });
      waitsFor(()=> {
        return EmojiComposerExtension._onSelectEmoji.calls.length > 0
      })
      runs(()=> {
        expect(this.editableNode.innerHTML).toEqual(`Testing!&nbsp;<img class="emoji haircut" src="images/composer-emoji/apple/1f487.png" width="14" height="14" style="margin-top: -5px;">`);
      });
    })

    it('should insert an emoji on click', ()=> {
      this._performEdit('Testing! :h');
      waitsFor(()=> {
        return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-picker').length > 0
      });
      runs(()=> {
        const button = ReactDOM.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'emoji-option'))
        ReactTestUtils.Simulate.mouseDown(button);
        expect(EmojiComposerExtension._onSelectEmoji).toHaveBeenCalled()
      });
      waitsFor(()=> {
        return EmojiComposerExtension._onSelectEmoji.calls.length > 0
      })
      runs(()=> {
        expect(this.editableNode.innerHTML).toEqual(`Testing!&nbsp;<img class="emoji haircut" src="images/composer-emoji/apple/1f487.png" width="14" height="14" style="margin-top: -5px;">`);
      });
    })

    it('should move to the next emoji on arrow down', ()=> {
      this._performEdit('Testing! :h');
      waitsFor(()=> {
        return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-option').length > 0
      });
      runs(()=> {
        ReactTestUtils.Simulate.keyDown(this.editableNode, {key: "ArrowDown", keyCode: 40, which: 40});
      });
      waitsFor(()=> {
        return EmojiComposerExtension.onContentChanged.calls.length > 1
      });
      runs(()=> {
        expect(ReactDOM.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'emoji-option')).textContent.indexOf(":hamburger:") !== -1).toBe(true);
      });
    })
  })
})