spec(composer-emoji): Add tests for emoji popover

Summary: Adds tests to check that emoji popover is inserting emoji correctly and adding PNGs as expected.

Test Plan: Tested locally.

Reviewers: evan, bengotow, juan

Reviewed By: juan

Subscribers: juan

Differential Revision: https://phab.nylas.com/D2810

internal_packages/composer-emoji/lib/emoji-button-popover.jsx

@@ -179,7 +179,7 @@ class EmojiButtonPopover extends React.Component {
     return searchMatches;
   }
 
-  calcPosition = (event) => {
+  calcPosition(event) {
     const rect = event.target.getBoundingClientRect();
     const position = {
       x: event.pageX - rect.left / 2,
@@ -234,7 +234,7 @@ class EmojiButtonPopover extends React.Component {
   }
 
   renderCanvas() {
-    const canvas = document.getElementById("emoji-canvas");
+    const canvas = React.findDOMNode(this.refs.emojiCanvas);
     const keys = Object.keys(this.state.categoryPositions);
     canvas.height = this.state.categoryPositions[keys[keys.length - 1]].bottom * 2;
     const ctx = canvas.getContext("2d");
@@ -308,7 +308,7 @@ class EmojiButtonPopover extends React.Component {
             />
           </div>
           <canvas
-            id="emoji-canvas"
+            ref="emojiCanvas"
             width="400"
             height="2000"
             onMouseDown={this.onMouseDown}

internal_packages/composer-emoji/spec/emoji-button-popover-spec.jsx

@@ -0,0 +1,71 @@
+import React, {addons} from 'react/addons';
+import {renderIntoDocument} from '../../../spec/nylas-test-utils';
+import Contenteditable from '../../../src/components/contenteditable/contenteditable';
+import EmojiButtonPopover from '../lib/emoji-button-popover';
+import EmojiComposerExtension from '../lib/emoji-composer-extension';
+
+const ReactTestUtils = addons.TestUtils;
+
+describe('EmojiButtonPopover', ()=> {
+  beforeEach(()=> {
+    const position = {
+      x: 20,
+      y: 40,
+    }
+    spyOn(EmojiButtonPopover.prototype, 'calcPosition').andReturn(position);
+    spyOn(EmojiComposerExtension, '_onSelectEmoji').andCallThrough();
+    this.component = renderIntoDocument(<EmojiButtonPopover />);
+    this.composer = renderIntoDocument(
+      <Contenteditable
+        html={'Testing!'}
+        onChange={jasmine.createSpy('onChange')}
+        extensions={[EmojiComposerExtension]} />
+    );
+    this.editableNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithAttr(this.composer, 'contentEditable'));
+    this.editableNode.innerHTML = "Testing!";
+    const sel = document.getSelection()
+    const textNode = this.editableNode.childNodes[0];
+    sel.setBaseAndExtent(textNode, textNode.nodeValue.length, textNode, textNode.nodeValue.length);
+    this.canvas = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(this.component, 'canvas'));
+  });
+
+  describe('when inserting emoji', ()=> {
+    it('should insert emoji on click', ()=> {
+      ReactTestUtils.Simulate.mouseDown(this.canvas);
+      waitsFor(()=> {
+        return EmojiComposerExtension._onSelectEmoji.calls.length > 0
+      });
+      expect(this.editableNode.textContent).toEqual("Testing!😀");
+    });
+
+    it('should insert an image for missing emoji', ()=> {
+      const position = {
+        x: 140,
+        y: 60,
+      }
+      EmojiButtonPopover.prototype.calcPosition.andReturn(position);
+      ReactTestUtils.Simulate.mouseDown(this.canvas);
+      waitsFor(()=> {
+        return EmojiComposerExtension._onSelectEmoji.calls.length > 0
+      });
+      expect(this.editableNode.innerHTML.indexOf("missing-emoji") > -1).toBe(true);
+    });
+  });
+
+  describe('when searching for emoji', ()=> {
+    it('should filter for matches', ()=> {
+      this.searchNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'search'))
+      const event = {
+        target: {
+          value: "heart",
+        },
+      }
+      ReactTestUtils.Simulate.change(this.searchNode, event);
+      ReactTestUtils.Simulate.mouseDown(this.canvas);
+      waitsFor(()=> {
+        return EmojiComposerExtension._onSelectEmoji.calls.length > 0
+      });
+      expect(this.editableNode.textContent).toEqual("Testing!😍");
+    });
+  });
+});