Как вести подсчет количества запросов при использовании mock service worker для тестирования приложения React?

Question

В моем приложении пользователь вводит дату своего рождения, отправляется запрос, и, если он совпадает с DOB в базе данных, они отправляются на следующую страницу. Если он не совпадает, им будет показано количество оставшихся попыток до тех пор, пока их ссылка не станет недействительной. У них есть 3 попытки.

Мой вопрос в том, как мне издеваться над этой функциональностью, используя mock service worker? Мне нужно будет подсчитать, сколько раз этот запрос был выполнен и не удался.

Вот фрагмент кода обработчика, как вы можете видеть, на данный момент я жестко запрограммировал «1» после «попыток аутентификации».

      rest.post(
    'https://myapiaddress/auth',
    (req, res, ctx) => {
      const enteredDateOfBirth = req.body.data.date_of_birth
      let returnResult
      if (enteredDateOfBirth === '1988-10-01') {
        returnResult = res(
          ctx.status(200),
          ctx.json({
            data: {
              basic: 'fdafhaioubeaufbaubsaidbnf873hf8faoi'
            }
          })
        )
      } else {
        returnResult = res(
          ctx.status(400),
          ctx.json({
            errors: [
              { code: 89, message: 'Wrong date of birth. Auth attempts: 1' }
            ]
          })
        )
      }
      return returnResult
    }
  )
]

Мой шутливый тест, в котором я 3 раза подтверждаю неверную дату:

      // 1st attempt
  userEvent.click(confirmBtn)
  const warningAttemptsNum1 = await screen.findByText('1/3 attempts')
  const dateEntered = screen.getByText('(12/10/2010)')
  expect(warningAttemptsNum1).toBeInTheDocument()
  expect(dateEntered).toBeInTheDocument()
  // 2nd attempt
  userEvent.click(confirmBtn)
  const warningAttemptsNum2 = await screen.findByText('2/3 attempts')
  expect(warningAttemptsNum2).toBeInTheDocument()
  userEvent.click(confirmBtn)

  // Entering 3 times shows "link no longer valid" screen
  userEvent.click(confirmBtn)
  const linkNoLongerValidText = await screen.findByText(
    'This link is no longer valid'
  )
  expect(linkNoLongerValidText).toBeInTheDocument()

Answer 1

Ваша общая идея верна: вы можете отслеживать количество сделанных запросов, увеличивая число в преобразователе ответов.

Вот как я бы порекомендовал это сделать:

      function withTimes(handler) {
  let attempts = 0
  return (req, res, ctx) => {
    attempts++
    handler(req, res, ctx, attempts)
  }
}

rest.post('/endpoint', withTimes((req, res, ctx, attempts) => {
  const MAX_ATTEMPTS = 3
  const dob = req.body.data.date_of_birth

  if (dob === '1988-10-01') {
    return res(ctx.json({ data: { basic: 'abc-123' }}))
  }

  return res(
    ctx.status(400),
    ctx.json({
      errors: [
        {
          code: 89,
          message: `Wrong date of birth. Attempts left: ${MAX_ATTEMPTS - attempts}`
        }
      ]
    })
  )
}))

Я также вижу, что структура тела ответа, которую вы используете, очень похожа на структуру GraphQL. Обратите внимание, что вы должны использовать GraphQL API для обработки операций GraphQL.