fix: fundamental Switch state doesn't refresh (#1193)

Author: rjstyles

src/Switch/Switch.js

@@ -4,7 +4,7 @@ import FormLabel from '../Forms/FormLabel';
 import keycode from 'keycode';
 import PropTypes from 'prop-types';
 import SwitchItem from './_SwitchItem';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import 'fundamental-styles/dist/icon.css';
 import 'fundamental-styles/dist/switch.css';
 
@@ -31,6 +31,10 @@ const Switch = React.forwardRef(({
 
     let [isChecked, setIsChecked] = useState(!!checked);
 
+    useEffect(() => {
+        setIsChecked(!!checked);
+    }, [checked]);
+
     const handleChange = (e) => {
         setIsChecked(!isChecked);
         onChange(e);

src/Switch/Switch.test.js

@@ -63,4 +63,28 @@ describe('<Switch />', () => {
             ).toBe('Sample');
         });
     });
+
+    describe('Switch state change on props update', () => {
+        const wrapper = mount(<Switch checked />);
+
+        test('should change to not checked state if new props are sent with checked as false', () => {
+            //updating prop to checked as false
+            wrapper.setProps({ checked: false });
+            wrapper.update();
+
+            // check that switch is not checked
+            expect(wrapper.find('input').props().checked).toBe(false);
+            expect(wrapper.find('input').props()['aria-checked']).toBe(false);
+        });
+
+        test('should change to checked state if new props are sent with checked as true', () => {
+            //updating prop to checked as true
+            wrapper.setProps({ checked: true });
+            wrapper.update();
+
+            // check that switch is checked
+            expect(wrapper.find('input').props().checked).toBe(true);
+            expect(wrapper.find('input').props()['aria-checked']).toBe(true);
+        });
+    });
 });