* fix options size to 31px

* creates first test for component rendering

Author: pxd3v

src/SelectBox/SelectBox.js

@@ -3,7 +3,7 @@ import propTypes from 'prop-types';
 import { StyledOptionsList, StyledOptionsListItem } from './SelectBox.styles';
 import { StyledCutout } from '../Cutout/Cutout';
 
-const SelectBox = React.forwardRef(function SelectBox(props) {
+const SelectBox = React.forwardRef(function SelectBox(props, ref) {
   const { options, value, onSelect, width, height } = props;
   const selectedListItemRef = useRef(null);
   const listRef = useRef(null);
@@ -59,7 +59,7 @@ const SelectBox = React.forwardRef(function SelectBox(props) {
   };
 
   return (
-    <StyledCutout>
+    <StyledCutout ref={ref}>
       <StyledOptionsList
         style={{ width, height }}
         ref={listRef}
@@ -93,7 +93,7 @@ SelectBox.defaultProps = {
 SelectBox.propTypes = {
   onSelect: propTypes.func,
   options: propTypes.arrayOf(
-    propTypes.objectOf({ value: propTypes.number, label: propTypes.string })
+    propTypes.shape({ value: propTypes.number, label: propTypes.string })
   ),
   value: propTypes.number,
   width: propTypes.string,

src/SelectBox/SelectBox.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { renderWithTheme } from '../../test/utils';
+import SelectBox from './SelectBox';
+
+const options = [
+  { label: 'ten', value: 0 },
+  { label: 'twenty', value: 1 },
+  { label: 'thirty', value: 2 }
+];
+
+describe('<SelectBox />', () => {
+  beforeEach(() => {
+    window.HTMLElement.prototype.scrollIntoView = function() {};
+  });
+  it('should be able to mount the component', () => {
+    const { container } = renderWithTheme(<SelectBox options={options} />);
+    expect(container.querySelector('ul').querySelector('li').textContent).toBe(
+      'ten'
+    );
+  });
+});

src/SelectBox/SelectBox.styles.js

@@ -18,7 +18,7 @@ export const StyledOptionsListItem = styled.li`
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  height: ${blockSizes.md};
+  height: 31px;
   line-height: calc(${blockSizes.md} - 4px);
   background: ${({ theme, isSelected }) =>
     isSelected ? theme.hoverBackground : 'none'};