Skip to content

Commit 1541a95

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #217 from rvsia/fix-pf4-wizard-oncancel
fix(pf4wizard): onCancel button receives formValues
2 parents a286258 + 803a7b6 commit 1541a95

File tree

8 files changed

+54
-24
lines changed

8 files changed

+54
-24
lines changed

‎packages/pf4-component-mapper/demo/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ class App extends React.Component {
5555
...formFieldsMapper,
5656
summary: Summary
5757
}}
58-
onCancel={() => console.log('Cancel action')}
58+
onCancel={console.log}
5959
layoutMapper={layoutMapper}
6060
schema={this.state.schema}
6161
uiSchema={this.state.ui}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,14 +99,15 @@ const WizardStepButtons = ({
9999
submitLabel: submit,
100100
}) }
101101
<Button type="button" variant="secondary" isDisabled={ disableBack } onClick={ handlePrev }>{ back }</Button>
102-
<Button type="button" variant="link" onClick={ formOptions.onCancel }>{ cancel }</Button>
102+
<Button type="button" variant="link" onClick={ () => formOptions.onCancel(formOptions.getState().values) }>{ cancel }</Button>
103103
</React.Fragment> }
104104
</footer>;
105105

106106
WizardStepButtons.propTypes = {
107107
formOptions: PropTypes.shape({
108108
onCancel: PropTypes.func.isRequired,
109109
handleSubmit: PropTypes.func.isRequired,
110+
getState: PropTypes.func.isRequired,
110111
}).isRequired,
111112
disableBack: PropTypes.bool,
112113
handlePrev: PropTypes.func.isRequired,

‎packages/pf4-component-mapper/src/tests/wizard/__snapshots__/step-buttons.test.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`<WizardSTepButtons should add custom className to toolbar 1`] = `
1616
Back
1717
</Component>
1818
<Component
19-
onClick={[MockFunction]}
19+
onClick={[Function]}
2020
type="button"
2121
variant="link"
2222
>
@@ -41,7 +41,7 @@ exports[`<WizardSTepButtons should render correctly 1`] = `
4141
Back
4242
</Component>
4343
<Component
44-
onClick={[MockFunction]}
44+
onClick={[Function]}
4545
type="button"
4646
variant="link"
4747
>

‎packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard-step.test.js.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ exports[`<WizardStep /> should render correctly 1`] = `
2727
}
2828
formOptions={
2929
Object {
30+
"getState": [MockFunction],
3031
"handleSubmit": [MockFunction],
3132
"onCancel": [MockFunction],
3233
"renderForm": [Function],
@@ -65,6 +66,7 @@ exports[`<WizardStep /> should render custom description 1`] = `
6566
}
6667
formOptions={
6768
Object {
69+
"getState": [MockFunction],
6870
"handleSubmit": [MockFunction],
6971
"onCancel": [MockFunction],
7072
"renderForm": [Function],
@@ -110,6 +112,7 @@ exports[`<WizardStep /> should render title with showTitle 1`] = `
110112
}
111113
formOptions={
112114
Object {
115+
"getState": [MockFunction],
113116
"handleSubmit": [MockFunction],
114117
"onCancel": [MockFunction],
115118
"renderForm": [Function],

‎packages/pf4-component-mapper/src/tests/wizard/__snapshots__/wizard.test.js.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
365365
</ComponentWithOuia>
366366
</Component>
367367
<Component
368-
onClick={[MockFunction]}
368+
onClick={[Function]}
369369
type="button"
370370
variant="link"
371371
>
@@ -374,15 +374,15 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
374374
componentProps={
375375
Object {
376376
"children": "Cancel",
377-
"onClick": [MockFunction],
377+
"onClick": [Function],
378378
"type": "button",
379379
"variant": "link",
380380
}
381381
}
382382
consumerContext={null}
383383
>
384384
<Button
385-
onClick={[MockFunction]}
385+
onClick={[Function]}
386386
ouiaContext={
387387
Object {
388388
"isOuia": false,
@@ -397,7 +397,7 @@ exports[`<Wizard /> should render correctly and unmount 1`] = `
397397
aria-label={null}
398398
className="pf-c-button pf-m-link"
399399
disabled={false}
400-
onClick={[MockFunction]}
400+
onClick={[Function]}
401401
tabIndex={null}
402402
type="button"
403403
>
@@ -1012,7 +1012,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
10121012
</ComponentWithOuia>
10131013
</Component>
10141014
<Component
1015-
onClick={[MockFunction]}
1015+
onClick={[Function]}
10161016
type="button"
10171017
variant="link"
10181018
>
@@ -1021,15 +1021,15 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
10211021
componentProps={
10221022
Object {
10231023
"children": "Cancel",
1024-
"onClick": [MockFunction],
1024+
"onClick": [Function],
10251025
"type": "button",
10261026
"variant": "link",
10271027
}
10281028
}
10291029
consumerContext={null}
10301030
>
10311031
<Button
1032-
onClick={[MockFunction]}
1032+
onClick={[Function]}
10331033
ouiaContext={
10341034
Object {
10351035
"isOuia": false,
@@ -1044,7 +1044,7 @@ exports[`<Wizard /> should render correctly in modal and unmount 1`] = `
10441044
aria-label={null}
10451045
className="pf-c-button pf-m-link"
10461046
disabled={false}
1047-
onClick={[MockFunction]}
1047+
onClick={[Function]}
10481048
tabIndex={null}
10491049
type="button"
10501050
>
@@ -1471,7 +1471,7 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
14711471
</ComponentWithOuia>
14721472
</Component>
14731473
<Component
1474-
onClick={[MockFunction]}
1474+
onClick={[Function]}
14751475
type="button"
14761476
variant="link"
14771477
>
@@ -1480,15 +1480,15 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
14801480
componentProps={
14811481
Object {
14821482
"children": "Cancel",
1483-
"onClick": [MockFunction],
1483+
"onClick": [Function],
14841484
"type": "button",
14851485
"variant": "link",
14861486
}
14871487
}
14881488
consumerContext={null}
14891489
>
14901490
<Button
1491-
onClick={[MockFunction]}
1491+
onClick={[Function]}
14921492
ouiaContext={
14931493
Object {
14941494
"isOuia": false,
@@ -1503,7 +1503,7 @@ exports[`<Wizard /> should render correctly with custom title and description 1`
15031503
aria-label={null}
15041504
className="pf-c-button pf-m-link"
15051505
disabled={false}
1506-
onClick={[MockFunction]}
1506+
onClick={[Function]}
15071507
tabIndex={null}
15081508
type="button"
15091509
>

‎packages/pf4-component-mapper/src/tests/wizard/step-buttons.test.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ describe('<WizardSTepButtons', () => {
1919
handleSubmit: jest.fn(),
2020
submit: jest.fn(),
2121
valid: true,
22+
getState: jest.fn(),
2223
},
2324
handlePrev: jest.fn(),
2425
handleNext: jest.fn(),
@@ -74,11 +75,15 @@ describe('<WizardSTepButtons', () => {
7475
expect(handleSubmit).toHaveBeenCalled();
7576
});
7677

77-
it('should call cancel function', () => {
78+
it('should call cancel function with values', () => {
79+
const VALUES = { aws: 'yes', password: '123456643' };
7880
const onCancel = jest.fn();
79-
const wrapper = mount(<WizardStepButtons { ...initialProps } formOptions={{ ...initialProps.formOptions, onCancel }} />);
81+
const wrapper = mount(<WizardStepButtons
82+
{ ...initialProps }
83+
formOptions={{ ...initialProps.formOptions, onCancel, getState: () => ({ values: VALUES }) }}
84+
/>);
8085
wrapper.find('button').last().simulate('click');
81-
expect(onCancel).toHaveBeenCalled();
86+
expect(onCancel).toHaveBeenCalledWith(VALUES);
8287
});
8388

8489
it('should call prev function', () => {

‎packages/pf4-component-mapper/src/tests/wizard/wizard-step.test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ describe('<WizardStep />', () => {
1414
renderForm: item => <div key={ item }>{ item }</div>,
1515
onCancel: jest.fn(),
1616
handleSubmit: jest.fn(),
17+
getState: jest.fn(),
1718
},
1819
FieldProvider,
1920
handlePrev: jest.fn(),

‎packages/pf4-component-mapper/src/tests/wizard/wizard.test.js

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ describe('<Wizard />', () => {
1515
let getRegisteredFieldsSchemaMock;
1616
let getRegisteredFieldsNestedSchemaMock;
1717
let getValuesNestedSchema;
18+
let initialValues;
1819

1920
const nextButtonClick = (wrapper) => {
2021
wrapper.find('button').at(0).simulate('click');
@@ -36,25 +37,31 @@ describe('<Wizard />', () => {
3637
wrapper.update();
3738
};
3839

40+
const cancelButtonClickWithHeader = (wrapper) => {
41+
wrapper.find('button').at(3).simulate('click');
42+
wrapper.update();
43+
};
44+
3945
const changeValue = (wrapper, value) => {
4046
wrapper.find('input').instance().value = value;
4147
wrapper.find('input').simulate('change');
4248
wrapper.update();
4349
};
4450

4551
beforeEach(() => {
52+
initialValues = {
53+
'foo-field': 'foo-field-value',
54+
'bar-field': 'bar-field-value',
55+
'not-visited-field': 'not-visted-field-value',
56+
};
4657
initialProps = {
4758
FieldProvider,
4859
title: 'Wizard',
4960
description: 'wizard description',
5061
formOptions: {
5162
renderForm: ([{ name }]) => <div key={ name }>{ name }</div>,
5263
getState: () => ({
53-
values: {
54-
'foo-field': 'foo-field-value',
55-
'bar-field': 'bar-field-value',
56-
'not-visited-field': 'not-visted-field-value',
57-
},
64+
values: initialValues,
5865
}),
5966
onCancel: jest.fn(),
6067
onSubmit: jest.fn(),
@@ -194,6 +201,19 @@ describe('<Wizard />', () => {
194201
});
195202
});
196203

204+
it('should pass values to cancel', () => {
205+
const onCancel = jest.fn();
206+
const wrapper = mount(<Wizard
207+
{ ...initialProps }
208+
fields={ schema }
209+
formOptions={{ ...initialProps.formOptions, onCancel }}
210+
/>);
211+
212+
cancelButtonClickWithHeader(wrapper);
213+
214+
expect(onCancel).toHaveBeenCalledWith(initialValues);
215+
});
216+
197217
it('should submit data when nested schema', () => {
198218
const onSubmit = jest.fn();
199219
const wrapper = mount(<Wizard

0 commit comments

Comments
 (0)