diff --git a/addons/knobs/src/components/__tests__/Select.js b/addons/knobs/src/components/__tests__/Select.js
index ccc2e2b0255a..9324a2af2674 100644
--- 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();
@@ -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();
+
+ 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);