Merge pull request #1049 from rvsia/fixToggle

fix(carbon): fix switch toggled attribute

Author: Hyperkid123

packages/carbon-component-mapper/src/switch/switch.js

@@ -8,14 +8,19 @@ import prepareProps from '../prepare-props';
 import HelperTextBlock from '../helper-text-block/helper-text-block';
 
 const Switch = (props) => {
-  const { input, meta, onText, offText, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi(prepareProps(props));
+  const { input, meta, onText, offText, validateOnMount, helperText, WrapperProps, ...rest } = useFieldApi({
+    ...prepareProps(props),
+    type: 'checkbox'
+  });
 
   const invalid = (meta.touched || validateOnMount) && (meta.error || meta.submitError);
   const warnText = (meta.touched || validateOnMount) && meta.warning;
 
+  const { checked, ...inputRest } = input;
+
   return (
     <div {...WrapperProps}>
-      <Toggle {...input} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />
+      <Toggle {...inputRest} toggled={checked} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />
       <HelperTextBlock helperText={helperText} errorText={invalid} warnText={warnText} />
     </div>
   );

packages/carbon-component-mapper/src/tests/switch.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mount } from 'enzyme';
+
+import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
+
+import FormTemplate from '../form-template';
+import componentMapper from '../component-mapper';
+import { Toggle } from 'carbon-components-react';
+
+describe('<Switch />', () => {
+  it('initialValue works', async () => {
+    const spy = jest.fn();
+    const schema = {
+      fields: [
+        {
+          component: componentTypes.SWITCH,
+          name: 'switch',
+          label: 'Switch',
+          initialValue: true
+        }
+      ]
+    };
+
+    const wrapper = mount(
+      <FormRenderer
+        onSubmit={(values) => spy(values)}
+        FormTemplate={(props) => <FormTemplate {...props} />}
+        schema={schema}
+        componentMapper={componentMapper}
+      />
+    );
+
+    expect(wrapper.find(Toggle)).toHaveLength(1);
+    expect(wrapper.find(Toggle).props().toggled).toEqual(true);
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(spy).toHaveBeenCalledWith({ switch: true });
+    spy.mockClear();
+
+    await act(async () => {
+      wrapper.find('input').simulate('change', { target: { checked: false } });
+    });
+    wrapper.update();
+
+    expect(wrapper.find(Toggle).props().toggled).toEqual(false);
+
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+    });
+    wrapper.update();
+
+    expect(spy).toHaveBeenCalledWith({});
+  });
+});