PF4 wizard use formRenderer in tests

Author: rvsia

packages/pf4-component-mapper/src/form-fields/wizard/wizard-nav.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { WizardNavItem, WizardNav } from '@patternfly/react-core';
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
+import { PropTypes } from 'prop-types';
 
 const memoValues = (initialValue) => {
   let valueCache = initialValue;
@@ -52,6 +53,16 @@ const WizardNavigationInternal = React.memo(({
   }));
 }, isEqual);
 
+WizardNavigationInternal.propTypes = {
+  activeStepIndex: PropTypes.number.isRequired,
+  formOptions: PropTypes.shape({
+    valid: PropTypes.bool.isRequired,
+  }).isRequired,
+  maxStepIndex: PropTypes.number.isRequired,
+  jumpToStep: PropTypes.func.isRequired,
+  navSchema: PropTypes.array.isRequired,
+};
+
 class WizardNavigationClass extends React.Component {
   constructor(props) {
     super(props);
@@ -112,4 +123,15 @@ class WizardNavigationClass extends React.Component {
   }
 }
 
+WizardNavigationClass.propTypes = {
+  activeStepIndex: PropTypes.number.isRequired,
+  formOptions: PropTypes.object.isRequired,
+  maxStepIndex: PropTypes.number.isRequired,
+  jumpToStep: PropTypes.func.isRequired,
+  setPrevSteps: PropTypes.func.isRequired,
+  navSchema: PropTypes.array.isRequired,
+  values: PropTypes.object.isRequired,
+  crossroads: PropTypes.arrayOf(PropTypes.string),
+};
+
 export default WizardNavigationClass;

packages/pf4-component-mapper/src/form-fields/wizard/wizard.js

@@ -183,6 +183,21 @@ class Wizard extends React.Component {
     return schema;
   };
 
+  handleSubmitFinal = () => this.props.formOptions.onSubmit(
+    this.handleSubmit(
+      this.props.formOptions.getState().values,
+      [ ...this.state.prevSteps, this.state.activeStep ],
+      this.props.formOptions.getRegisteredFields,
+    ),
+    this.props.formOptions
+  );
+
+  setPrevSteps = () => this.setState((prevState) => ({
+    navSchema: this.createSchema({ currentIndex: this.state.activeStepIndex }),
+    prevSteps: prevState.prevSteps.slice(0, this.state.activeStepIndex),
+    maxStepIndex: this.state.activeStepIndex,
+  }))
+
   render() {
     if (this.state.loading) {
       return null;
@@ -205,22 +220,12 @@ class Wizard extends React.Component {
     } = this.props;
     const { activeStepIndex, navSchema, maxStepIndex, isDynamic } = this.state;
 
-    const handleSubmit = () =>
-      formOptions.onSubmit(
-        this.handleSubmit(
-          formOptions.getState().values,
-          [ ...this.state.prevSteps, this.state.activeStep ],
-          formOptions.getRegisteredFields,
-        ),
-        formOptions
-      );
-
     const currentStep = (
       <WizardStep
         { ...this.findCurrentStep(this.state.activeStep) }
         formOptions={{
           ...formOptions,
-          handleSubmit,
+          handleSubmit: this.handleSubmitFinal,
         }}
         buttonLabels={ buttonLabels }
         FieldProvider={ FieldProvider }
@@ -233,7 +238,7 @@ class Wizard extends React.Component {
         <div className={ `pf-c-wizard ${inModal ? '' : 'no-shadow'} ${isCompactNav ? 'pf-m-compact-nav' : ''} ${setFullWidth ? 'pf-m-full-width' : ''} ${setFullHeight ? 'pf-m-full-height' : ''}` }
           role="dialog"
           aria-modal={ inModal ? 'true' : undefined }
-          onKeyDown={ e => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext, handleSubmit) }
+          onKeyDown={ e => handleEnter(e, formOptions, this.state.activeStep, this.findCurrentStep, this.handleNext,  this.handleSubmitFinal) }
         >
           { title && <WizardHeader
             title={ title }
@@ -253,11 +258,7 @@ class Wizard extends React.Component {
                     crossroads={ crossroads }
                     isDynamic={ isDynamic }
                     values={ values }
-                    setPrevSteps={ () => this.setState((prevState) => ({
-                      navSchema: this.createSchema({ currentIndex: activeStepIndex }),
-                      prevSteps: prevState.prevSteps.slice(0, activeStepIndex),
-                      maxStepIndex: activeStepIndex,
-                    })) }
+                    setPrevSteps={ this.setPrevSteps }
                   />
                 ) }
               </FormSpyProvider>