mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2025-07-28 20:00:10 +02:00
b901bb6c75
* Update fetch-mock to version 12 * Replace `fetchMock.done` by `fetchMock.callHistory.done` * Replace `…Mock.called` by `…Mock.callHistory.called` * Replace `fetchMock.reset` by `fetchMock.hardReset` * Replace `fetchMock.restore` by `fetchMock.hardReset` * Replace `fetchMock.resetHistory` by `fetchMock.clearHistory` * Replace `fetchMock.calls` by `fetchMock.callHistory.calls` * Replace `fetchMock.flush` by `fetchMock.callHistory.flush` * Update tests for fetch-mock version 12 See https://www.wheresrhys.co.uk/fetch-mock/docs/Usage/upgrade-guide * Update stories for fetch-mock version 12 * Remove `overwriteRoutes` option * Add `fetchMock.spyGlobal()` to storybook * Remove deprecated `sendAsJson` param * Replace `fetchMock.hardReset()` by `fetchMock.removeRoutes().clearHistory()` * Fixup fetch-mock in storybook: Call `mockGlobal` inside the hook, call `removeRoutes` and `unmockGlobal` on cleanup Behaviour can be tested by navigating between https://storybook.dev-overleaf.com/main/?path=/story/editor-ai-error-assistant-compile-log-entries--first-log-entry https://storybook.dev-overleaf.com/main/?path=/story/editor-ai-error-assistant-compile-log-entries--rate-limited https://storybook.dev-overleaf.com/main/?path=/story/project-list-notifications--project-invite https://storybook.dev-overleaf.com/main/?path=/story/project-list-notifications--project-invite-network-error And clicking the buttons GitOrigin-RevId: 35611b4430259e4c21c3d819ad18b2e6dab66242
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import fetchMock from 'fetch-mock'
|
|
import { expect } from 'chai'
|
|
import React from 'react'
|
|
import { render, waitFor } from '@testing-library/react'
|
|
import useAbortController from '../../../../frontend/js/shared/hooks/use-abort-controller'
|
|
import { getJSON } from '../../../../frontend/js/infrastructure/fetch-json'
|
|
|
|
describe('useAbortController', function () {
|
|
let status: {
|
|
loading: boolean
|
|
success: boolean | null
|
|
error: any | null
|
|
}
|
|
|
|
beforeEach(function () {
|
|
fetchMock.removeRoutes().clearHistory()
|
|
|
|
status = {
|
|
loading: false,
|
|
success: null,
|
|
error: null,
|
|
}
|
|
})
|
|
|
|
after(function () {
|
|
fetchMock.removeRoutes().clearHistory()
|
|
})
|
|
|
|
function AbortableRequest({ url }: { url: string }) {
|
|
const { signal } = useAbortController()
|
|
|
|
React.useEffect(() => {
|
|
status.loading = true
|
|
|
|
getJSON(url, { signal })
|
|
.then(() => {
|
|
status.success = true
|
|
})
|
|
.catch(error => {
|
|
status.error = error
|
|
})
|
|
.finally(() => {
|
|
status.loading = false
|
|
})
|
|
}, [signal, url])
|
|
|
|
return null
|
|
}
|
|
|
|
it('calls then when the request succeeds', async function () {
|
|
fetchMock.get('/test', { status: 204 }, { delay: 100 })
|
|
|
|
render(<AbortableRequest url="/test" />)
|
|
|
|
expect(status.loading).to.be.true
|
|
await waitFor(() => expect(status.loading).to.be.false)
|
|
|
|
expect(status.success).to.be.true
|
|
expect(status.error).to.be.null
|
|
})
|
|
|
|
it('calls catch when the request fails', async function () {
|
|
fetchMock.get('/test', { status: 500 }, { delay: 100 })
|
|
|
|
render(<AbortableRequest url="/test" />)
|
|
|
|
expect(status.loading).to.be.true
|
|
await waitFor(() => expect(status.loading).to.be.false)
|
|
|
|
expect(status.success).to.be.null
|
|
expect(status.error).not.to.be.null
|
|
})
|
|
|
|
it('cancels a request when unmounted', async function () {
|
|
fetchMock.get('/test', { status: 204 }, { delay: 100 })
|
|
|
|
const { unmount } = render(<AbortableRequest url="/test" />)
|
|
|
|
expect(status.loading).to.be.true
|
|
|
|
unmount()
|
|
|
|
await fetchMock.callHistory.flush(true)
|
|
expect(fetchMock.callHistory.done()).to.be.true
|
|
|
|
// wait for Promises to be resolved
|
|
await new Promise(resolve => setTimeout(resolve, 0))
|
|
|
|
expect(status.success).to.be.null
|
|
expect(status.error).to.be.null
|
|
expect(status.loading).to.be.true
|
|
})
|
|
})
|