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

117 lines
4.2 KiB
React
Raw Normal View History

import React, {addons} from 'react/addons';
import {renderIntoDocument} from '../../../spec/nylas-test-utils';
import Contenteditable from '../../../src/components/contenteditable/contenteditable';
import EmojisComposerExtension from '../lib/emojis-composer-extension';
const ReactTestUtils = addons.TestUtils;
describe('EmojisComposerExtension', ()=> {
beforeEach(()=> {
spyOn(EmojisComposerExtension, 'onContentChanged').andCallThrough()
spyOn(EmojisComposerExtension, '_onSelectEmoji').andCallThrough()
const html = 'Testing!'
const onChange = jasmine.createSpy('onChange')
this.component = renderIntoDocument(
<Contenteditable html={html} onChange={onChange} extensions={[EmojisComposerExtension]}/>
)
this.editableNode = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithAttr(this.component, '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', ()=> {
runs(()=> {
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', ()=> {
runs(()=> {
this._performEdit('Testing! :h');
});
waitsFor(()=> {
return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-option').length > 0
});
runs(()=> {
expect(React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'emoji-option')).textContent === "💇 :haircut:").toBe(true);
});
})
it('should insert an emoji on enter', ()=> {
runs(()=> {
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 EmojisComposerExtension._onSelectEmoji.calls.length > 0
})
runs(()=> {
expect(this.editableNode.textContent === "Testing! 💇").toBe(true);
});
})
it('should insert an emoji on click', ()=> {
runs(()=> {
this._performEdit('Testing! :h');
});
waitsFor(()=> {
return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-picker').length > 0
});
runs(()=> {
const button = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'emoji-option'))
ReactTestUtils.Simulate.mouseDown(button);
expect(EmojisComposerExtension._onSelectEmoji).toHaveBeenCalled()
});
waitsFor(()=> {
return EmojisComposerExtension._onSelectEmoji.calls.length > 0
})
runs(()=> {
expect(this.editableNode.textContent).toEqual("Testing! 💇");
});
})
it('should move to the next emoji on arrow down', ()=> {
runs(()=> {
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 EmojisComposerExtension.onContentChanged.calls.length > 1
});
runs(()=> {
expect(React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithClass(this.component, 'emoji-option')).textContent).toEqual("🍔 :hamburger:");
});
})
it('should be able to insert two emojis next to each other', ()=> {
runs(()=> {
this._performEdit('Testing! 🍔 :h');
});
waitsFor(()=> {
return ReactTestUtils.scryRenderedDOMComponentsWithClass(this.component, 'emoji-picker').length > 0
});
})
})
})