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(