Issue #552 emoji menu (#1008)

* Fixed uncoverd lines for emoji-menu/get-style test.

* New structure for correct testing.

* Added index test for emoji-menu.

src/emoji-menu/index.jsx → src/emoji-menu/component.jsx

@@ -2,17 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import emojione from 'emojione';
 import _ from 'lodash';
-import Radium from 'radium';
-import compose from 'recompose/compose';
-import onClickOutside from 'react-onclickoutside';
 import EventListener from 'react-event-listener';
 import emojis from './emoji';
 import EmojiCategory from './emoji-category';
 import EmojiModifiers from './emoji-modifiers';
 import EmojiCategories from './emoji-categories';
 import Storage from './storage';
 import getStyles from './get-styles';
-import themeable from '../themeable';
 import colors from '../settings/colors';
 
 const storage = new Storage();
@@ -204,14 +200,8 @@ class EmojiMenu extends Component {
   }
 }
 
-const enhance = compose(
-  themeable(),
-  onClickOutside,
-  Radium
-);
-
 EmojiMenu.propTypes = propTypes;
 EmojiMenu.defaultProps = defaultProps;
 EmojiMenu.displayName = displayName;
 
-export default enhance(EmojiMenu);
+export default EmojiMenu;

src/emoji-menu/index.js

@@ -0,0 +1,13 @@
+import Radium from 'radium';
+import compose from 'recompose/compose';
+import onClickOutside from 'react-onclickoutside';
+import themeable from '../themeable';
+import EmojiMenu from './component';
+
+const enhance = compose(
+  themeable(),
+  onClickOutside,
+  Radium
+);
+
+export default enhance(EmojiMenu);

test/emoji-menu/get-styles.test.js

@@ -74,7 +74,7 @@ describe('EmojiMenu.getStyles', () => {
     });
   });
 
-  describe('modifierHeader', () => {
+  describe('header', () => {
     it('should get styles', () => {
       const style = getStyles.header();
 
@@ -88,6 +88,20 @@ describe('EmojiMenu.getStyles', () => {
     });
   });
 
+  describe('modifiers', () => {
+    it('should get styles', () => {
+      const style = getStyles.modifiers();
+
+      expect(style).to.deep.equal(styles.modifiers);
+    });
+
+    it('should combine styles', () => {
+      const style = getStyles.modifiers({ color: 'red' });
+
+      expect(style).to.have.property('color', 'red');
+    });
+  });
+
   describe('modifier', () => {
     it('should get styles', () => {
       const style = getStyles.modifier();

test/emoji-menu/index.test.js

@@ -0,0 +1,62 @@
+/* eslint-env mocha */
+/* eslint react/jsx-filename-extension: [0] */
+import React from 'react';
+import chai, { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import EventListener from 'react-event-listener';
+import EmojiMenu from '../../src/emoji-menu/component';
+import EmojiModifiers from '../../src/emoji-menu/emoji-modifiers';
+import EmojiCategory from '../../src/emoji-menu/emoji-category';
+import EmojiCategories from '../../src/emoji-menu/emoji-categories';
+import getStyles from '../../src/emoji-menu/get-styles';
+
+chai.use(sinonChai);
+
+describe('EmojiFilter', () => {
+  const props = {
+    style: {},
+    hideMenu: () => {},
+    sendEmoji: () => {},
+    color: '#1BA6C4'
+  };
+
+  beforeEach(() => {
+    global.navigator = { userAgent: 'all' };
+  });
+
+  afterEach(() => {
+    global.navigator = undefined;
+  });
+
+  it('should be an instanceOf AdminBadge', () => {
+    const component = shallow(<EmojiMenu {...props} />);
+
+    expect(component.instance()).to.be.instanceOf(EmojiMenu);
+  });
+
+  it('should render root elements', () => {
+    const component = shallow(<EmojiMenu {...props} />);
+
+    expect(component.find('section')).to.have.length(0);
+    expect(component.find(EmojiModifiers)).to.have.length(0);
+    expect(component.find(EmojiCategory)).to.have.length(0);
+    expect(component.find(EmojiCategories)).to.have.length(0);
+    expect(component.find(EventListener)).to.have.length(0);
+
+    component.setProps({ open: true });
+    expect(component.find(EmojiModifiers)).to.have.length(1);
+    expect(component.find(EmojiCategory)).to.have.length(1);
+    expect(component.find(EmojiCategories)).to.have.length(1);
+    expect(component.find(EventListener)).to.have.length(1);
+  });
+
+  it('should get root styles', () => {
+    const spy = sinon.spy(getStyles, 'root');
+    const component = shallow(<EmojiMenu {...props} />);
+
+    component.setProps({ open: true });
+    expect(spy).to.have.been.calledWith(props.style);
+  });
+});