mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 09:16:07 +08:00
6faa7d5e12
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
72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
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!😍");
|
|
});
|
|
});
|
|
});
|