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();
+
+ expect(component.instance()).to.be.instanceOf(EmojiMenu);
+ });
+
+ it('should render root elements', () => {
+ const component = shallow();
+
+ 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();
+
+ component.setProps({ open: true });
+ expect(spy).to.have.been.calledWith(props.style);
+ });
+});