test: add basic skins test

package.json

@@ -47,6 +47,8 @@
     "babel-runtime": "^6.26.0",
     "emoji-datasource": "4.0.4",
     "emojilib": "^2.2.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.11.2",
     "inflection": "1.10.0",
     "jest": "^23.0.0",
     "mkdirp": "0.5.1",

src/components/__tests__/skins-dot.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { shallow, configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import SkinsDot from '../skins-dot'
+
+configure({ adapter: new Adapter() })
+
+test('click dot to expand the menu', () => {
+  let currentSkin
+  const onChange = (skin) => {
+    currentSkin = skin
+  }
+  const i18n = {
+    skintones: {
+      1: 'Default Skin Tone',
+      2: 'Light Skin Tone',
+      3: 'Medium-Light Skin Tone',
+      4: 'Medium Skin Tone',
+      5: 'Medium-Dark Skin Tone',
+      6: 'Dark Skin Tone',
+    },
+  }
+
+  const skins = shallow(<SkinsDot skin={1} onChange={onChange} i18n={i18n} />)
+
+  // component should be un-expanded by default
+  expect(skins.find('[aria-haspopup]').prop('aria-label')).toEqual(
+    'Default Skin Tone',
+  )
+  expect(skins.find('[aria-haspopup]').prop('aria-expanded')).toEqual(false)
+
+  // simulate click
+  skins.find('[aria-haspopup]').simulate('click', {
+    currentTarget: {
+      getAttribute(name) {
+        if (name === 'data-skin') {
+          return 1
+        }
+      },
+    },
+  })
+
+  // component should now be expanded
+  expect(skins.find('[aria-haspopup]').prop('aria-expanded')).toEqual(true)
+  expect(skins.find('[data-skin=1]').prop('aria-pressed')).toEqual(true)
+  expect(skins.find('[data-skin=2]').prop('aria-pressed')).toEqual(false)
+})

src/components/skins.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import NimbleEmoji from './emoji/nimble-emoji'
-
 export default class Skins extends React.PureComponent {
   constructor(props) {
     super(props)