mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-12 06:11:35 -05:00
510e686b7b
GitOrigin-RevId: 9cd0b4429a9c2b3df9c18957aef21ef021e5fdfd
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.restore()
|
|
|
|
status = {
|
|
loading: false,
|
|
success: null,
|
|
error: null,
|
|
}
|
|
})
|
|
|
|
after(function () {
|
|
fetchMock.restore()
|
|
})
|
|
|
|
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.flush(true)
|
|
expect(fetchMock.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
|
|
})
|
|
})
|