Bindu, Tarun | BAH-1017 | MOBN-1551 | Fix renderWithControls method in Preview tab (#7) (#61)

* Bindu, Tarun | MOBN-1551 | Fix renderWithControls method in Preview tab

* Bindu, Tarun | MOBN-1551 | Fix unit tests

Co-authored-by: Himabindu Thungathurty <[email protected]>

Co-authored-by: tarunkumar-tw <[email protected]>

Author: binduak

Diff for: src/form-builder/components/FormPreviewModal.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import 'bahmni-form-controls/dist/helpers.js';
 import { Exception } from 'form-builder/helpers/Exception';
+import { Container } from 'bahmni-form-controls';
 
 
 export default class FormPreviewModal extends React.Component {
@@ -18,70 +20,71 @@ export default class FormPreviewModal extends React.Component {
     const defaultLocale = (window.localStorage
       && window.localStorage.getItem('openmrsDefaultLocale')) || 'en';
     this.state = {
-      formData: {},
-      container: {},
       defaultLocale,
+      recordTree: {},
     };
     this.onSave = this.onSave.bind(this);
-    this.setContainer = this.setContainer.bind(this);
+    this.updateContainer = this.updateContainer.bind(this);
+    this.onValueUpdated = this.onValueUpdated.bind(this);
   }
 
   componentDidMount() {
     try {
-      this.setContainer([]);
+      this.updateContainer([]);
     } catch (e) {
       this.props.setErrorMessage(new Exception(FormPreviewModal.formatErrors(e)).getException());
     }
   }
 
   onSave() {
     const formJson = this.props.formJson;
-    if (this.state.container.state && formJson.events.onFormSave) {
+    if (Object.keys(this.state.recordTree).length > 0 && formJson.events.onFormSave) {
       /* eslint-disable no-undef */
       try {
-        const records = runEventScript(this.state.container.state.data, formJson.events.onFormSave);
+        const records = runEventScript(this.state.recordTree, formJson.events.onFormSave);
         unMountForm(document.getElementById('form-container'));
-        this.setContainer(getObservations(records));
+        this.updateContainer(getObservations(records));
       } catch (e) {
         this.props.setErrorMessage(new Exception(FormPreviewModal.formatErrors(e)).getException());
       }
     }
   }
 
-  setContainer(observations) {
+  onValueUpdated(data) {
+    this.setState({ recordTree: data });
+  }
+
+  updateContainer(observations) {
     const metadata = this.props.formJson;
     if (metadata) {
-      const container = renderWithControls(metadata, observations, 'form-container', false, null,
-        false, this.state.defaultLocale, '');
-      this.setState({ container });
+      const container = React.createElement(Container,
+        { metadata, observations, validate: true, validateForm: false,
+          collapse: false, patient: null, locale: this.state.defaultLocale, translations: '',
+          onValueUpdated: this.onValueUpdated });
+      ReactDOM.render(container, document.getElementById('form-container'));
     }
   }
 
   render() {
     if (this.props.formJson) {
       return (
-                <div className="preview-container">
-                    <div className="preview-header">
-                        <div>Preview</div>
-                        <i className="fa fa-times" onClick={this.props.close}></i>
-                    </div>
-                    <div className="preview-body">
-                        <div className="disable-image-and-video-upload" id="form-container"> </div>
-                    </div>
-                    <div className="preview-footer">
-                        <button className="button btn--highlight" onClick={this.onSave}
-                          type="submit"
-                        >
-                          Save
-                        </button>
-                        <button className="btn preview-close-btn"
-                          onClick={this.props.close}
-                          type="reset"
-                        >
-                            Close
-                        </button>
-                    </div>
-                </div>);
+        <div className="preview-container">
+          <div className="preview-header">
+            <div>Preview</div>
+            <i className="fa fa-times" onClick={this.props.close}></i>
+          </div>
+          <div className="preview-body">
+            <div className="disable-image-and-video-upload" id="form-container"> </div>
+          </div>
+          <div className="preview-footer">
+            <button className="button btn--highlight" onClick={this.onSave} type="submit">
+              Save
+            </button>
+            <button className="btn preview-close-btn" onClick={this.props.close} type="reset">
+              Close
+            </button>
+          </div>
+        </div>);
     }
     return null;
   }

Diff for: test/form-builder/components/FormPreviewModal.spec.js

@@ -12,7 +12,7 @@ describe('FormPreviewModal', () => {
   let wrapper;
   let closeSpy;
   let setErrorMessageSpy;
-  let renderWithControlsCounter = 0;
+  let updateContainerStub;
 
   const formJson = {
     name: 'Groovy',
@@ -52,14 +52,17 @@ describe('FormPreviewModal', () => {
   beforeEach(() => {
     closeSpy = sinon.spy();
     setErrorMessageSpy = sinon.spy();
-    renderWithControlsCounter = 0;
-    window.renderWithControls = function renderWithControls() {
-      renderWithControlsCounter++;
-      return 'container';
-    };
+  });
+
+  afterEach(() => {
+    if (updateContainerStub) {
+      updateContainerStub.restore();
+    }
   });
 
   function mountComponent(formJsonMetadata) {
+    updateContainerStub = sinon.stub(FormPreviewModal.prototype, 'updateContainer')
+        .callsFake(() => {});
     wrapper = mount(
       <FormPreviewModal
         close={closeSpy}
@@ -74,7 +77,6 @@ describe('FormPreviewModal', () => {
     const container = wrapper.find('.preview-container');
     expect(container).to.have.length(1);
     expect(container.children().length).to.be.equal(3);
-    expect(renderWithControlsCounter).to.be.equal(1);
   });
 
   it('should not render create form modal when form data doesnot exist', () => {
@@ -83,7 +85,6 @@ describe('FormPreviewModal', () => {
     const container = wrapper.find('Container');
     expect(container).to.be.length(0);
     expect(modal).to.be.length(0);
-    expect(renderWithControlsCounter).to.be.equal(0);
   });
 
   it('should call close modal function when close button is clicked', () => {
@@ -109,7 +110,7 @@ describe('FormPreviewModal', () => {
   it('should call 3 window methods and set container to state on click of save button', () => {
     mountComponent(formJson);
     const button = wrapper.find('.btn--highlight');
-    wrapper.setState({ container: { state: { data: {} } } });
+    wrapper.setState({ recordTree: { record: '' } });
     let runEventScriptCounter = 0;
     let unMountFormCounter = 0;
     let getObservationsCounter = 0;
@@ -130,13 +131,6 @@ describe('FormPreviewModal', () => {
     expect(getObservationsCounter).to.equal(1);
   });
 
-  it('should set renderWithControls return value to state variable container on componentDidMount',
-    () => {
-      mountComponent(formJson);
-      expect(renderWithControlsCounter).to.be.equal(1);
-      expect(wrapper.state().container).to.equal('container');
-    });
-
   it('should return error message for single error object', () => {
     const errorMessage = FormPreviewModal.formatErrors({ message: 'It is an error' });
 
@@ -162,7 +156,7 @@ describe('FormPreviewModal', () => {
   it('should call setErrorMessage when runEventScript throws exception', () => {
     mountComponent(formJson);
     const button = wrapper.find('.btn--highlight');
-    wrapper.setState({ container: { state: { data: {} } } });
+    wrapper.setState({ recordTree: { record: '' } });
     window.runEventScript = function runEventScript() {
       throw Object.assign(new Error('Error'));
     };
@@ -176,14 +170,4 @@ describe('FormPreviewModal', () => {
     sinon.assert.calledOnce(setErrorMessageSpy);
     sinon.assert.calledWith(setErrorMessageSpy, { type: 'Exception', message: 'Error' });
   });
-
-  it('should call setErrorMessage when renderWithControls throws exception', () => {
-    window.renderWithControls = function renderWithControls() {
-      throw Object.assign(new Error('Error'));
-    };
-    mountComponent(formJson);
-
-    sinon.assert.calledOnce(setErrorMessageSpy);
-    sinon.assert.calledWith(setErrorMessageSpy, { type: 'Exception', message: 'Error' });
-  });
 });