From 3e27d06d01fe6eb3fac14112caee00a16f7535aa Mon Sep 17 00:00:00 2001
From: Ian Stewart <IanCStewart@users.noreply.github.com>
Date: Tue, 2 Jan 2018 15:03:42 +0100
Subject: [PATCH] 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 => component.jsx} | 12 +---
 src/emoji-menu/index.js                     | 13 +++++
 test/emoji-menu/get-styles.test.js          | 16 +++++-
 test/emoji-menu/index.test.js               | 62 +++++++++++++++++++++
 4 files changed, 91 insertions(+), 12 deletions(-)
 rename src/emoji-menu/{index.jsx => component.jsx} (95%)
 create mode 100644 src/emoji-menu/index.js
 create mode 100644 test/emoji-menu/index.test.js

diff --git a/src/emoji-menu/index.jsx b/src/emoji-menu/component.jsx
similarity index 95%
rename from src/emoji-menu/index.jsx
rename to src/emoji-menu/component.jsx
index 64fb6329..1e695451 100644
--- a/src/emoji-menu/index.jsx
+++ b/src/emoji-menu/component.jsx
@@ -2,9 +2,6 @@ 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';
@@ -12,7 +9,6 @@ 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;
diff --git a/src/emoji-menu/index.js b/src/emoji-menu/index.js
new file mode 100644
index 00000000..e5acb668
--- /dev/null
+++ b/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);
diff --git a/test/emoji-menu/get-styles.test.js b/test/emoji-menu/get-styles.test.js
index 3df63bf6..9c9b9e79 100644
--- a/test/emoji-menu/get-styles.test.js
+++ b/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();
diff --git a/test/emoji-menu/index.test.js b/test/emoji-menu/index.test.js
new file mode 100644
index 00000000..3faa92af
--- /dev/null
+++ b/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);
+  });
+});