Merge pull request #151 from hshoff/harry-legend-fix

[legend] fix legend style prop, add tests. fixes #150

packages/vx-legend/src/legends/Legend.js

@@ -30,9 +30,13 @@ Legend.propTypes = {
   labelTransform: PropTypes.func,
 };
 
+const defaultStyle = {
+  display: 'flex',
+};
+
 export default function Legend({
   className,
-  style,
+  style = defaultStyle,
   shapeStyle,
   scale,
   shape,
@@ -56,9 +60,8 @@ export default function Legend({
   return (
     <div
       className={cx('vx-legend', className)}
-      style={style}
       style={{
-        display: 'flex',
+        ...style,
         flexDirection: direction,
       }}
     >

packages/vx-legend/test/Legend.test.js

@@ -1,7 +1,45 @@
+import React from 'react';
+import { shallow } from 'enzyme';
 import { Legend } from '../src';
+import { scaleLinear } from '../../vx-scale';
+
+const defaultProps = {
+  scale: scaleLinear({
+    rangeRound: [10, 0],
+    domain: [0, 10],
+  }),
+};
 
 describe('<Legend />', () => {
   test('it should be defined', () => {
     expect(Legend).toBeDefined();
-  })
-})
+  });
+
+  test('it should default style to display: flex, flex-direction: column ', () => {
+    const wrapper = shallow(<Legend {...defaultProps} />);
+    expect(wrapper.prop('style')).toEqual({
+      display: 'flex',
+      flexDirection: 'column',
+    });
+  });
+
+  test('it should extend style prop', () => {
+    const wrapper = shallow(
+      <Legend {...defaultProps} style={{ display: 'block' }} />,
+    );
+    expect(wrapper.prop('style')).toEqual({
+      display: 'block',
+      flexDirection: 'column',
+    });
+  });
+
+  test('it should pass through direction prop to style prop', () => {
+    const wrapper = shallow(
+      <Legend {...defaultProps} direction="row" />,
+    );
+    expect(wrapper.prop('style')).toEqual({
+      display: 'flex',
+      flexDirection: 'row',
+    });
+  });
+});