Проверка формы при отправке с макетом данных - PullRequest
Новая
       50

Проверка формы при отправке с макетом данных

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

Я пытаюсь написать тест для моего компонента React, используя Enzyme и Jest. Мой компонент React использует Formik.

Мои первоначальные изменения выглядят следующим образом 

const emptyChange = {
    start_of_maintenance: new Date(),
    expected_end_of_maintenance: new Date(),
  };

Затем они передаются в Formik следующим образом 

const formik = useFormik({
    initialValues: changeValues,
    validationSchema: Yup.object({
      start_of_maintenance: Yup.date().min(new Date(), 'Start of Maintenance must be greater then todays date and time.'),
      expected_end_of_maintenance: Yup.date().required('Please set a end of maintenance date')
        .test('is-greater', 'Expected end of Maintenance cannot be before Start of Maintenance.', function (value) {
          return moment(value).isAfter(moment(new Date(this.parent['start_of_maintenance'])));
        }),
    }),

Обратите внимание, что я использую YUP для проверки, которая проверяет, находится ли дата окончания после даты начала, если нет, то установит ошибку. Мои start_of_maintenance & expected_end_of_maintenance - это поля, которые используют react-datepicker. и выглядит так 

<DatePicker
            id="expected_end_of_maintenance"
            name="expected_end_of_maintenance"
            selected={
              props.formik.values.expected_end_of_maintenance || new Date(Date.now())
            }
            timeInputLabel="Time:"
            dateFormat="dd/MM/yyyy HH:mm"
            timeFormat="HH:mm"
            showTimeInput
            shouldCloseOnSelect={false}
            minDate={subDays(props.formik.values.start_of_maintenance, 0)}
            showYearDropdown
            todayButton="Today"
            onChange={(date) => props.formik.setFieldValue('expected_end_of_maintenance', date)}
          />

Мой тест выглядит так 

test('testing submitting form with new change', async () => {
    advanceTo(new Date(2022, 2, 27, 0, 0, 0));

    const user = {
      id: '5dfcf74cae1b487b4f1c20fb',
      email: 'someusers@user.com',
      first_name: 'Someone',
      last_name: 'lastName',
      user_id: '4d02adb0-74c4-445f-9e0f-49752d70801d',
      created: '2019-12-20T16:31:08.734Z',
    };

    const pushMock = jest.fn();

    const formik = {
      values: {
        expected_end_of_maintenance: new Date('2024-01-30T15:09:40.367Z'),
      },
      setFieldValue: jest.fn(),
      touched: {},
    };

    const wrapper = mount(
      <UserContext.Provider value={user}>
        <ChangeForm isNew contactList={contactList} push={pushMock}>
          <ChangeFormInput formik={formik} />
        </ChangeForm>
      </UserContext.Provider>,
    );

    await act(async () => {
      const mockJsonPromise = Promise.resolve(existingChange);
      const mockFetchPromise = Promise.resolve({
        json: () => mockJsonPromise,
      });

      jest.spyOn(adalConf, 'adalApiFetch').mockImplementation(() => mockFetchPromise);

      setTimeout(() => {
        wrapper.update();
      }, 0);

      wrapper.find('form').simulate('submit', { preventDefault: () => {} });

      adalConf.adalApiFetch(fetch, '/change/single-save', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(existingChange),
      });

      expect(adalConf.adalApiFetch).toHaveBeenCalledTimes(1);
      expect(adalConf.adalApiFetch).toHaveBeenCalledWith(fetch, '/change/single-save', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(existingChange),
      });
    });

    // expect(pushMock.mock.calls.length).toBe(1);
    // expect(pushMock.mock.calls[0][0]).toEqual({ pathname: '/confirmation-change', state: { value: existingChange, changeId: 'werwe', contactList: [] } });
  });

Я также использую jest-date-mock, чтобы высмеивать дату. Однако проблема, с которой я столкнулся, заключается в том, что ожидаемая дата окончания всегда совпадает с датой начала. То, что происходит, - моя проверка возвращает ложь, которая препятствует отправке формы. Я попробовал следующее без удачи 

const expectedEndOFMaintenance = wrapper.find("t[id='expected_end_of_maintenance']");
      expectedEndOFMaintenance.instance().value = '29/03/2022 11:00';
      expectedEndOFMaintenance.simulate('change');
      console.log(expectedEndOFMaintenance.instance().value);

А также попробовал expectedEndOFMaintenance.simulate('change', { target: { selected: new Date().toISOString() } }); И снова без удачи. Не уверен, как я могу издеваться или установить значение для expected_end_of_maintenance любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 31 января 2020

Для тех, у кого есть проблемы с этим. Я исправил это следующим образом 

const expectedEndOFMaintenance = wrapper.find('input[id="expected_end_of_maintenance"]');

expectedEndOFMaintenance.simulate('change', { target: { value: new Date('2026-03-29T11:00:00.000Z').toISOString() } });

await new Promise((resolve) => setImmediate(resolve));

setTimeout(() => {
   wrapper.update();
}, 0);

wrapper.find('form').simulate('submit', { preventDefault: () => {} });

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

...