Merge pull request #4586 from diagramatics/master

(bug) Fix Select array values showing k (fixes #4560)
storybookjs · Oct 31, 2018 · ee1a312 · ee1a312
1 parent 5074896
commit ee1a312
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/addons/knobs/src/components/__tests__/Select.js b/addons/knobs/src/components/__tests__/Select.js
@@ -5,18 +5,18 @@ import SelectType from '../types/Select';
 describe('Select', () => {
   let knob;
 
-  beforeEach(() => {
-    knob = {
-      name: 'Colors',
-      value: '#00ff00',
-      options: {
-        Green: '#00ff00',
-        Red: '#ff0000',
-      },
-    };
-  });
+  describe('Object values', () => {
+    beforeEach(() => {
+      knob = {
+        name: 'Colors',
+        value: '#00ff00',
+        options: {
+          Green: '#00ff00',
+          Red: '#ff0000',
+        },
+      };
+    });
 
-  describe('displays value', () => {
     it('correctly maps option keys and values', () => {
       const wrapper = shallow(<SelectType knob={knob} />);
 
@@ -25,4 +25,22 @@ describe('Select', () => {
       expect(green.prop('value')).toEqual('Green');
     });
   });
+
+  describe('Array values', () => {
+    beforeEach(() => {
+      knob = {
+        name: 'Colors',
+        value: 'green',
+        options: ['green', 'red'],
+      };
+    });
+
+    it('correctly maps option keys and values', () => {
+      const wrapper = shallow(<SelectType knob={knob} />);
+
+      const green = wrapper.find('option').first();
+      expect(green.text()).toEqual('green');
+      expect(green.prop('value')).toEqual('green');
+    });
+  });
 });
diff --git a/addons/knobs/src/components/types/Select.js b/addons/knobs/src/components/types/Select.js
@@ -6,7 +6,7 @@ import { Select } from '@storybook/components';
 const SelectType = ({ knob, onChange }) => {
   const { options } = knob;
   const entries = Array.isArray(options)
-    ? options.reduce((acc, k) => Object.assign(acc, { k }), {})
+    ? options.reduce((acc, k) => Object.assign(acc, { [k]: k }), {})
     : options;
 
   const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);