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);