From a39bec15cc9e6d9e364e1e8ce6f34bf9507f91d1 Mon Sep 17 00:00:00 2001
From: Steven Sinatra <steven@stevensinatra.id>
Date: Fri, 26 Oct 2018 17:22:51 +1100
Subject: [PATCH 1/2] Fix Select array values showing k

---
 .../knobs/src/components/__tests__/Select.js  | 52 +++++++++++++------
 addons/knobs/src/components/types/Select.js   |  2 +-
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/addons/knobs/src/components/__tests__/Select.js b/addons/knobs/src/components/__tests__/Select.js
index ccc2e2b0255a..2deea887a64b 100644
--- a/addons/knobs/src/components/__tests__/Select.js
+++ b/addons/knobs/src/components/__tests__/Select.js
@@ -5,24 +5,46 @@ 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} />);
+
+        const green = wrapper.find('option').first();
+        expect(green.text()).toEqual('Green');
+        expect(green.prop('value')).toEqual('Green');
+      });
+    });
   });
 
-  describe('displays value', () => {
-    it('correctly maps option keys and values', () => {
-      const wrapper = shallow(<SelectType knob={knob} />);
+  describe('Array values', () => {
+    beforeEach(() => {
+      knob = {
+        name: 'Colors',
+        value: 'green',
+        options: ['green', 'red'],
+      };
+    });
+
+    describe('displays value', () => {
+      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');
+        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
index ee49a1a8343a..f024709de242 100644
--- 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);

From 86743801faf5d816a8732625e12efd067ee81d33 Mon Sep 17 00:00:00 2001
From: Steven Sinatra <steven@stevensinatra.id>
Date: Fri, 26 Oct 2018 17:27:48 +1100
Subject: [PATCH 2/2] Streamline tests

---
 .../knobs/src/components/__tests__/Select.js  | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/addons/knobs/src/components/__tests__/Select.js b/addons/knobs/src/components/__tests__/Select.js
index 2deea887a64b..9324a2af2674 100644
--- a/addons/knobs/src/components/__tests__/Select.js
+++ b/addons/knobs/src/components/__tests__/Select.js
@@ -17,14 +17,12 @@ describe('Select', () => {
       };
     });
 
-    describe('displays value', () => {
-      it('correctly maps option keys and values', () => {
-        const wrapper = shallow(<SelectType knob={knob} />);
+    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');
-      });
+      const green = wrapper.find('option').first();
+      expect(green.text()).toEqual('Green');
+      expect(green.prop('value')).toEqual('Green');
     });
   });
 
@@ -37,14 +35,12 @@ describe('Select', () => {
       };
     });
 
-    describe('displays value', () => {
-      it('correctly maps option keys and values', () => {
-        const wrapper = shallow(<SelectType knob={knob} />);
+    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');
-      });
+      const green = wrapper.find('option').first();
+      expect(green.text()).toEqual('green');
+      expect(green.prop('value')).toEqual('green');
     });
   });
 });