Тестирование preConfirm хука SweetAlert2 в модуле React - PullRequest
Новая
       18

Тестирование preConfirm хука SweetAlert2 в модуле React

1 голос
/ 16 октября 2019

Имея имя модуля React Modal как таковое: 

import withReactContent from 'sweetalert2-react-content'

export const Modal = withReactContent(Swal)
const showModal = props => {
  return Modal.fire({
    ...props,
    showCloseButton: true
  })
}

export default showModal

, которое используется в другом компоненте в качестве поля подтверждения для действия пользователя 

export const renderDeployModal = (deploymentId) => {
  console.log(' - renderDeployModal - ')
  Modal.fire({
    type: 'question',
    text: `Are you sure you wish to re-deploy this (${deploymentId})?`,
    showCancelButton: true,
    confirmButtonText: 'Deploy',
    preConfirm: () => {
      console.log(' - preConfirm - ')
      return apiRequest(`/deployments/${deploymentId}/trigger`, {}, 'POST')
        .then(response => {
          return response.body
        })
        .catch(response => {
          Modal.showValidationMessage(response.message)
        })
    },
    allowOutsideClick: () => !Modal.isLoading()
  }).then(result => {
    if (result.value) {
      notify('success', 'Your deployment has triggered.')
    }
  })
}

Реализация работает, но я застрял с тестированием логики, которая выполняется в preConfirm ловушке, потому что я не могу придумать, как вручную запустить Modal.clickConfirm() в моих тестах и ​​на самом деле работает 

import * as mockModal from '../../modal'
jest.mock('../../modal')

describe('renderDeployModal', () => {

  it('fails to run a deploy without deploymentId argument', async () => {
    const Modal = mockModal.Modal.mockImplementationOnce()

    Modal.fire.mockImplementationOnce(() => Promise.resolve({ value: false }))
    Modal.clickConfirm = jest.fn()

    // Modal.clickConfirm.mockImplementation(() => Promise.resolve())
    // const spy = jest.spyOn(mockModal.Modal, 'clickConfirm')

    apiRequest.default = jest.fn().mockReturnValue(Promise.reject(new Error('foo')))
    await renderDeployModal(null)
    await Promise.resolve()

    Modal.clickConfirm()
    await Promise.resolve()

    expect(Modal.fire).toHaveBeenCalled()
    expect(Modal.clickConfirm).toHaveBeenCalled()
    expect(apiRequest.default).toHaveBeenCalledWith(`/deployments/null/trigger`, {}, 'POST')
  })

Тест вышене соответствует последнему ожидаемому значению apiRequest. 

  console.log src/actions.js:111
     - renderDeployModal -
 FAIL  src/actions.test.js
...
    ✕ fails to run a deploy without deploymentId argument (56ms)

  ● renderDeployModal › fails to run a deploy without deploymentId argument

    expect(jest.fn()).toHaveBeenCalledWith(expected)

    Expected mock function to have been called with:
      ["/deployments/null/trigger", {}, "POST"]
    But it was not called.

      148 |     expect(Modal.fire).toHaveBeenCalled()
      149 |     expect(Modal.clickConfirm).toHaveBeenCalled()
    > 150 |     expect(apiRequest.default).toHaveBeenCalledWith(`/deployments/null/trigger`, {}, 'POST')
          |                                ^

Также отображается console.log(' - renderDeployModal - '), но не отображается console.log(' - preConfirm - '), указывая, что Modal.clickConfirm() работает неправильно.

Чтоя здесь скучаю? У меня нет идей (хороших или плохих), чтобы попробовать.

1 Ответ

1 голос
/ 16 октября 2019

Всякий раз, когда вы макетируете модуль, как у вас есть 

jest.mock('../../modal')

, он создает фиктивную функцию для каждого свойства объекта объекта модуля без реализации.

Итак, вы передаете объект в Modal.fire(), который имеет обратный вызов preConfirm, но нет ничего, что могло бы вызвать его. Таким образом, вам, вероятно, следует изменить макетную реализацию на что-то вроде: 

Modal.fire.mockImplementationOnce(({ preConfirm }) => {
  preConfirm(); // <- execute the given callback
  return Promise.resolve({ value: false })
})

, а затем ожидать, что она будет называться

примечание: икстати нет смысла 

test('if I call a function it`s actually being called', () => {
    Modal.clickConfirm() // <- execute a function within the test
    expect(Modal.clickConfirm).toHaveBeenCalled() // and make sure it have been called few lines below
});
...