Jest - Доступ к функции в форме Antd.validate после отправки - PullRequest
Новая
       16

Jest - Доступ к функции в форме Antd.validate после отправки

1 голос
/ 09 января 2020

Я хочу проверить, что функция, которую я передал через props, вызывается после submit и Antd form.validateFields. После просмотра я уже пробовал ожидать (myfunction) .toHaveBeenCalled (), но это не сработало. Это работает, если моя функция выходит за пределы области form.validateFields, но не находится внутри.

Вот фрагмент кода класса, описывающего Form + функция submit. 

export class SettingsMasterbot extends React.Component<ISettingsMasterbotProps, ISettingsMasterbotState> {

    constructor(props:  ISettingsMasterbotProps) {
        super(props);
        this.state = {};
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    handleSubmit(event : React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        try {
    // this is seen as called
            this.props.changeMasterbotParameters({
                name: '',
                greetingMessages: [''],
                disambiguationMessages: [''],
                avatar: '',
                rgpd: {nbofDays: 90}
            });
        } catch (e) {
            console.error('error :',e)
        }
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values); // this shows in console

                try {
                    //this is not seen as called by test (test FAILS)
                    this.props.changeMasterbotParameters({
                        name: values.name,
                        greetingMessages: values.greetingMessages,
                        disambiguationMessages: values.disambiguationMessages,
                        avatar: '',
                        rgpd: {nbofDays: values.rgpdNbOfDays}
                    });
                } catch (e) {
                    console.error('error:',e) // this doesn't show in console
                }

            } else {
                // There has been an error, Antd form validation
                message.warning('Oh no ! Some entries are missing !');
            }
        });
    };


    render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <div>
                <Form layout={"vertical"} onSubmit={this.handleSubmit}>
                    <Header
                        style={{
                            padding: 0
                        }}
                    >
                        <PageHeader
                            title={""}
                            ghost={false}
                            extra={[
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    shape="circle"
                                    className="saveMasterbotParameters-btn"
                                    icon="save"
                                    size={"default"}
                                    key={"masterbotSettingsButton"}/>
                            ]}
    ....

И это тест, с которым я пытаюсь справиться: 

describe('>>> Settings Masterbot --- ANTD Form Unit Tests', () => {
    let wrapper: ReactWrapper;
    let accountSettings = mockupInitialState.accountSettings;
    let systemSettings = mockupInitialState.systemSettings;
    const wrapperForm = shallow(<SettingsMasterbotFormWrapper/>);
    // const component:ReactWrapper = mount(<div>wrapperForm.find(SettingsMasterbot)</div>);
    const component = wrapperForm.find(SettingsMasterbot);
    const form = component.props().form;
    const props = {
        accountSettings: accountSettings,
        systemSettings: systemSettings,
        changeMasterbotParameters: jest.fn(), //the function is mocked
        form: form
    };

    beforeAll(() => {
        wrapper = mount(<SettingsMasterbot {...props} />) // the reason of beforeAll is because of some components used in the react class have weird behavior (builds themselves several time if I beforeEach).
    });

    beforeEach(() => {
        jest.clearAllMocks();
    });

   it('+++ check saveMasterbotParameters function is called when clicking on save', () => {
        // wrapper.find('.ant-btn.saveMasterbotParameters-btn').simulate('submit', { preventDefault: ()=> {jest.fn()}});
        wrapper.find(Form).simulate('submit', { preventDefault: ()=> {jest.fn()}});
        expect(props.changeMasterbotParameters).toHaveBeenCalled(); // THIS FAILS
//FYI
        expect(wrapper.find(SettingsMasterbot).prop('changeMasterbotParameters')).toEqual(props.changeMasterbotParameters)
        // This Passes, so the props are well passed.
    });

Любые подсказки / советы приветствуются ... Я чувствую, что это прямо передо мной, но не вижу этого. Не стесняйтесь задавать вопросы, я буду редактировать по пути.

...