diff --git a/src/components/entries/ToggleSwitch.js b/src/components/entries/ToggleSwitch.js index e7ab57cf..7fd56df6 100644 --- a/src/components/entries/ToggleSwitch.js +++ b/src/components/entries/ToggleSwitch.js @@ -51,7 +51,7 @@ function ToggleSwitch(props) { onBlur={ onBlur } name={ id } onInput={ handleInput } - checked={ localValue } /> + checked={ !!localValue } />

{ switcherLabel }

diff --git a/test/spec/components/ToggleSwitch.spec.js b/test/spec/components/ToggleSwitch.spec.js index d2bd38aa..3cbedbb8 100644 --- a/test/spec/components/ToggleSwitch.spec.js +++ b/test/spec/components/ToggleSwitch.spec.js @@ -80,24 +80,65 @@ describe('', function() { }); - it('should set checked according to value', function() { + describe('set checked according to value', function() { + + // [value, checked] + const possibleValues = [ + [ true, true ], + [ false, false ], + [ undefined, false ], + [ {}, true ] + ]; - // given - const getValueFunctions = [ - () => true, - () => false + possibleValues.forEach(([ value, checked ]) => { + + it(`should set checked to ${checked} for ${value}`, function() { + + // when + const result = createToggleSwitch({ container, getValue: () => value }); + + // then + const toggle = domQuery(`#bio-properties-panel-${TEST_TOGGLE_ID}`, result.container); + + expect(toggle.checked).to.equal(checked); + + }); + + }); + + }); + + + describe('update on external change', function() { + + // [initialValue, updatedValue, checked] + const possibleValues = [ + [ true, false, false ], + [ false, true, true ], + [ undefined, {}, true ], + [ {}, undefined, false ] ]; - getValueFunctions.forEach(fn => { + possibleValues.forEach(([ initial, updated, checked ]) => { - // when - const result = createToggleSwitch({ container, getValue: fn }); + it(`should update ${initial} -> ${updated}`, function() { - // then - const toggle = domQuery(`#bio-properties-panel-${TEST_TOGGLE_ID}`, result.container); + // given + const givenFn = () => initial; + const updatedFn = () => updated; + const result = createToggleSwitch({ container, getValue: givenFn }); + + // when + createToggleSwitch({ container, getValue: updatedFn }, result.rerender); + + // then + const toggle = domQuery(`#bio-properties-panel-${TEST_TOGGLE_ID}`, result.container); + expect(toggle.checked).to.equal(checked); + + }); - expect(toggle.checked).to.equal(fn()); }); + }); @@ -277,7 +318,7 @@ describe('', function() { // helpers //////////////////// -function createToggleSwitch(options = {}) { +function createToggleSwitch(options = {}, renderFn = render) { const { element, id = TEST_TOGGLE_ID, @@ -296,7 +337,7 @@ function createToggleSwitch(options = {}) { getDescriptionForId }; - return render( + return renderFn(