Merge pull request #219 from rvsia/wizardOnCloseIconValues

fix(pf4wizard): pass formValues to onClose icon cancel action
data-driven-forms · Nov 11, 2019 · 5c97155 · 5c97155
2 parents 095c6fc + ba1403d
commit 5c97155
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/packages/pf4-component-mapper/src/form-fields/wizard/wizard.js b/packages/pf4-component-mapper/src/form-fields/wizard/wizard.js
@@ -249,7 +249,7 @@ class Wizard extends React.Component {
           { title && <WizardHeader
             title={ title }
             description={ description }
-            onClose={ formOptions.onCancel }
+            onClose={ () => formOptions.onCancel(formOptions.getState().values) }
           /> }
           <div className="pf-c-wizard__outer-wrap">
             <WizardNav>

diff --git a/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap b/packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap
@@ -67,15 +67,15 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
       >
         <WizardHeader
           description="wizard description"
-          onClose={[MockFunction]}
+          onClose={[Function]}
           title="Wizard"
         >
           <div
             className="pf-c-wizard__header"
           >
             <Component
               className="pf-c-wizard__close"
-              onClick={[MockFunction]}
+              onClick={[Function]}
               variant="plain"
             >
               <ComponentWithOuia
@@ -91,15 +91,15 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
                       title={null}
                     />,
                     "className": "pf-c-wizard__close",
-                    "onClick": [MockFunction],
+                    "onClick": [Function],
                     "variant": "plain",
                   }
                 }
                 consumerContext={null}
               >
                 <Button
                   className="pf-c-wizard__close"
-                  onClick={[MockFunction]}
+                  onClick={[Function]}
                   ouiaContext={
                     Object {
                       "isOuia": false,
@@ -113,7 +113,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
                     aria-label={null}
                     className="pf-c-button pf-m-plain pf-c-wizard__close"
                     disabled={false}
-                    onClick={[MockFunction]}
+                    onClick={[Function]}
                     tabIndex={null}
                     type="button"
                   >
@@ -714,15 +714,15 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                 >
                   <WizardHeader
                     description="wizard description"
-                    onClose={[MockFunction]}
+                    onClose={[Function]}
                     title="Wizard"
                   >
                     <div
                       className="pf-c-wizard__header"
                     >
                       <Component
                         className="pf-c-wizard__close"
-                        onClick={[MockFunction]}
+                        onClick={[Function]}
                         variant="plain"
                       >
                         <ComponentWithOuia
@@ -738,15 +738,15 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                                 title={null}
                               />,
                               "className": "pf-c-wizard__close",
-                              "onClick": [MockFunction],
+                              "onClick": [Function],
                               "variant": "plain",
                             }
                           }
                           consumerContext={null}
                         >
                           <Button
                             className="pf-c-wizard__close"
-                            onClick={[MockFunction]}
+                            onClick={[Function]}
                             ouiaContext={
                               Object {
                                 "isOuia": false,
@@ -760,7 +760,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
                               aria-label={null}
                               className="pf-c-button pf-m-plain pf-c-wizard__close"
                               disabled={false}
-                              onClick={[MockFunction]}
+                              onClick={[Function]}
                               tabIndex={null}
                               type="button"
                             >
@@ -1157,7 +1157,7 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
               description
             </div>
           }
-          onClose={[MockFunction]}
+          onClose={[Function]}
           title={
             <div>
               Title
@@ -1169,7 +1169,7 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
           >
             <Component
               className="pf-c-wizard__close"
-              onClick={[MockFunction]}
+              onClick={[Function]}
               variant="plain"
             >
               <ComponentWithOuia
@@ -1185,15 +1185,15 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
                       title={null}
                     />,
                     "className": "pf-c-wizard__close",
-                    "onClick": [MockFunction],
+                    "onClick": [Function],
                     "variant": "plain",
                   }
                 }
                 consumerContext={null}
               >
                 <Button
                   className="pf-c-wizard__close"
-                  onClick={[MockFunction]}
+                  onClick={[Function]}
                   ouiaContext={
                     Object {
                       "isOuia": false,
@@ -1207,7 +1207,7 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
                     aria-label={null}
                     className="pf-c-button pf-m-plain pf-c-wizard__close"
                     disabled={false}
-                    onClick={[MockFunction]}
+                    onClick={[Function]}
                     tabIndex={null}
                     type="button"
                   >

diff --git a/packages/pf4-component-mapper/src/tests/wizard/wizard.test.js b/packages/pf4-component-mapper/src/tests/wizard/wizard.test.js
@@ -42,6 +42,11 @@ describe('<Wizard />', () => {
     wrapper.update();
   };
 
+  const closeIconClickWithHeader = (wrapper) =>  {
+    wrapper.find('button').at(0).simulate('click');
+    wrapper.update();
+  };
+
   const changeValue = (wrapper, value) => {
     wrapper.find('input').instance().value = value;
     wrapper.find('input').simulate('change');
@@ -201,7 +206,7 @@ describe('<Wizard />', () => {
     });
   });
 
-  it('should pass values to cancel', () => {
+  it('should pass values to cancel button', () => {
     const onCancel = jest.fn();
     const wrapper = mount(<Wizard
       { ...initialProps }
@@ -214,6 +219,19 @@ describe('<Wizard />', () => {
     expect(onCancel).toHaveBeenCalledWith(initialValues);
   });
 
+  it('should pass values to cancel - close icon', () => {
+    const onCancel = jest.fn();
+    const wrapper = mount(<Wizard
+      { ...initialProps }
+      fields={ schema }
+      formOptions={{ ...initialProps.formOptions, onCancel }}
+    />);
+
+    closeIconClickWithHeader(wrapper);
+
+    expect(onCancel).toHaveBeenCalledWith(initialValues);
+  });
+
   it('should submit data when nested schema', () => {
     const onSubmit = jest.fn();
     const wrapper = mount(<Wizard