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

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

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

xdescribe('EmojiComposerExtension', function 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.substr(0, newHTML.length - 1);
        const sel = document.getSelection();
        const textNode = this.editableNode.childNodes[0];
        sel.setBaseAndExtent(textNode, textNode.length, textNode, textNode.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).toContain('emoji haircut');
      });
    });

    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).toContain('emoji haircut');
      });
    });

    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);
      });
    });
  });
});