Improve Menu implementation and add initial test

src/atoms/Menu.js

+import React from 'react'
+import classnames from 'classnames'
+import classes from './Menu.local.css'
+
+class Menu extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      open: false,
+      selected: props.value
+    }
+  }
+
+  toggleMenu = () => {
+    this.setState({
+      open: !this.state.open
+    })
+  }
+
+  handleSelect = selected => {
+    this.setState({
+      selected,
+      open: false
+    })
+
+    // TODO: fire "change" event
+  }
+
+  optionLabel = value => {
+    const { options } = this.props
+
+    return options.find(option => option.value === value).label
+  }
+
+  render () {
+    const { options, placeholder = 'Choose in the list' } = this.props
+    const { open, selected } = this.state
+
+    return (
+      <div className={classes.root}>
+        <div>
+          <button
+            className={classes.opener}
+            onClick={this.toggleMenu}>
+            {selected ? (
+              <span>{this.optionLabel(selected)}</span>
+            ) : (
+              <span className={classes.placeholder}>{placeholder}</span>
+            )}
+            <span className={classes.arrow}>{ open ? '▲' : '▼' }</span>
+          </button>
+        </div>
+
+        <div className={classes.menuContainer}>
+          {open && (
+            <div className={classes.menu}>
+              {options.map(option => (
+                <div
+                  key={option.value}
+                  className={classnames(classes.option, {
+                    [classes.active]: option.value === selected
+                  })}
+                  onClick={() => this.handleSelect(option.value)}
+                >{option.label || option.value}</div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Menu

src/atoms/Menu.local.css

@@ -41,6 +41,7 @@
 .option {
   cursor: pointer;
   padding: 10px;
+  white-space: nowrap;
 }
 
 .option:hover {

src/index.js

+export { default as Menu } from './atoms/Menu'
 export { default as Tags } from './atoms/Tags'
 export { default as AppBar } from './molecules/AppBar'
 export { default as YesOrNo } from './molecules/YesOrNo'

test/Menu.test.js

+import React from 'react'
+import { shallow } from 'enzyme'
+// import renderer from 'react-test-renderer'
+
+import Menu from '../src/atoms/Menu'
+
+const props = {
+  options: [
+    { value: 'foo', label: 'Foo' },
+    { value: 'bar', label: 'Bar' },
+  ],
+  value: 'foo'
+}
+
+const wrapper = shallow(<Menu {...props} />)
+
+describe('Menu', () => {
+  /*test('Snapshot', () => {
+    const tree = renderer.create(
+      <Menu {...props} />
+    ).toJSON()
+    expect(tree).toMatchSnapshot()
+  })*/
+
+  test('Renders a Menu', () => {
+    expect(wrapper.is('div')).toBeTruthy()
+    expect(wrapper).toHaveLength(1)
+  })
+})