Added unit tests for SyncedEditorField

frontend/packages/console-shared/src/components/formik-fields/DynamicFormField.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FormProps } from 'react-jsonschema-form';
 import { useField, useFormikContext, FormikValues } from 'formik';
+import { Grid, GridItem } from '@patternfly/react-core';
 import { AsyncComponent } from '@console/internal/components/utils';
 
 type DynamicFormFieldProps = FormProps<any> & {
@@ -21,9 +22,8 @@ const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
   const { setFieldValue } = useFormikContext<FormikValues>();
 
   return (
-    <div className="row" style={{ marginTop: `16px` }}>
-      <div className="col-md-6 col-md-push-6 col-lg-6 col-lg-push-6">{formDescription}</div>
-      <div className="col-md-6 col-md-pull-6 col-lg-6 col-lg-pull-6">
+    <Grid gutter="md">
+      <GridItem span={6}>
         <AsyncComponent
           loader={() => import('../dynamic-form').then((c) => c.DynamicForm)}
           errors={errors}
@@ -37,8 +37,9 @@ const DynamicFormField: React.FC<DynamicFormFieldProps> = ({
           noActions
           liveValidate
         />
-      </div>
-    </div>
+      </GridItem>
+      <GridItem span={6}>{formDescription}</GridItem>
+    </Grid>
   );
 };
 

frontend/packages/console-shared/src/components/formik-fields/__tests__/SyncedEditorField.spec.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { shallow } from 'enzyme';
+import { useField } from 'formik';
+import { Alert } from '@patternfly/react-core';
+import SyncedEditorField from '../SyncedEditorField';
+import RadioGroupField from '../RadioGroupField';
+import DynamicFormField from '../DynamicFormField';
+import YAMLEditorField from '../YAMLEditorField';
+
+jest.mock('formik', () => ({
+  useField: jest.fn(() => [{ value: 'form' }, {}]),
+  useFormikContext: jest.fn(() => ({
+    values: {},
+    setFieldValue: jest.fn(),
+  })),
+}));
+
+const mockEditors = {
+  form: <DynamicFormField name="formData" schema={{}} />,
+  yaml: <YAMLEditorField name="yamlData" />,
+};
+
+const props = {
+  name: 'editorType',
+  formContext: {
+    name: 'formData',
+    editor: mockEditors.form,
+    isDisabled: false,
+  },
+  yamlContext: {
+    name: 'yamlData',
+    editor: mockEditors.yaml,
+    isDisabled: false,
+  },
+};
+describe('DropdownField', () => {
+  it('should render radio group field inline', () => {
+    const wrapper = shallow(<SyncedEditorField {...props} />);
+    expect(wrapper.find(RadioGroupField).exists()).toBe(true);
+    expect(
+      wrapper
+        .find(RadioGroupField)
+        .first()
+        .props().inline,
+    ).toBe(true);
+  });
+
+  it('should render dynamic form field if initial editor type is form', () => {
+    const wrapper = shallow(<SyncedEditorField {...props} />);
+    expect(wrapper.find(DynamicFormField).exists()).toBe(true);
+  });
+
+  it('should render dynamic form field if initial editor type is form', () => {
+    (useField as any).mockImplementation(() => [{ value: 'yaml' }, {}]);
+    const wrapper = shallow(<SyncedEditorField {...props} />);
+    expect(wrapper.find(YAMLEditorField).exists()).toBe(true);
+  });
+
+  it('should disable corresponding radio button if any editor context is disaled', () => {
+    const newProps = _.cloneDeep(props);
+    newProps.yamlContext.isDisabled = true;
+    const wrapper = shallow(<SyncedEditorField {...newProps} />);
+    expect(
+      wrapper
+        .find(RadioGroupField)
+        .first()
+        .props().options[1].isDisabled,
+    ).toBe(true);
+  });
+
+  it('should show an alert if form context is disaled', () => {
+    const newProps = _.cloneDeep(props);
+    newProps.formContext.isDisabled = true;
+    const wrapper = shallow(<SyncedEditorField {...newProps} />);
+    expect(wrapper.find(Alert).exists()).toBe(true);
+    expect(
+      wrapper
+        .find(Alert)
+        .first()
+        .props().title,
+    ).toBe('Form view is disabled for this chart because the schema is not available');
+  });
+});