fix(ToggleSwitch): disable when value gets undefined

src/components/entries/ToggleSwitch.js

@@ -51,7 +51,7 @@ function ToggleSwitch(props) {
             onBlur={ onBlur }
             name={ id }
             onInput={ handleInput }
-            checked={ localValue } />
+            checked={ !!localValue } />
           <span class="bio-properties-panel-toggle-switch__slider" />
         </label>
         <p class="bio-properties-panel-toggle-switch__label">{ switcherLabel }</p>

test/spec/components/ToggleSwitch.spec.js

@@ -80,24 +80,65 @@ describe('<ToggleSwitch>', 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('<ToggleSwitch>', 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(
     <DescriptionContext.Provider value={ context }>
       <ToggleSwitch
         element={ element }