ac1e3cf69e
Implements a form state task queue. This will prevent onChange handlers within the form component from processing unnecessarily often, sometimes long after the user has stopped making changes. This leads to a potentially huge number of network requests if those changes were made slower than the debounce rate. This is especially noticeable on slow networks. Does so through a new `useQueue` hook. This hook maintains a stack of events that need processing but only processes the final event to arrive. Every time a new event is pushed to the stack, the currently running process is aborted (if any), and that event becomes the next in the queue. This results in a shocking reduction in the time it takes between final change to form state and the final network response, from ~1.5 minutes to ~3 seconds (depending on the scenario, see below). This likely fixes a number of existing open issues. I will link those issues here once they are identified and verifiably fixed. Before: I'm typing slowly here to ensure my changes aren't debounce by the form. There are a total of 60 characters typed, triggering 58 network requests and taking around 1.5 minutes to complete after the final change was made. https://github.com/user-attachments/assets/49ba0790-a8f8-4390-8421-87453ff8b650 After: Here there are a total of 69 characters typed, triggering 11 network requests and taking only about 3 seconds to complete after the final change was made. https://github.com/user-attachments/assets/447f8303-0957-41bd-bb2d-9e1151ed9ec3
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import type { Page, Request } from '@playwright/test'
|
|
|
|
import { expect } from '@playwright/test'
|
|
|
|
/**
|
|
* Counts the number of network requests every `interval` milliseconds until `timeout` is reached.
|
|
* Useful to ensure unexpected network requests are not triggered by an action.
|
|
* For example, an effect within a component might fetch data multiple times unnecessarily.
|
|
* @param page The Playwright page
|
|
* @param url The URL to match in the network requests
|
|
* @param action The action to perform
|
|
* @param options Options
|
|
* @param options.allowedNumberOfRequests The number of requests that are allowed to be made, defaults to 1
|
|
* @param options.beforePoll A function to run before polling the network requests
|
|
* @param options.interval The interval in milliseconds to poll the network requests, defaults to 1000
|
|
* @param options.timeout The timeout in milliseconds to poll the network requests, defaults to 5000
|
|
* @returns The matched network requests
|
|
*/
|
|
export const assertNetworkRequests = async (
|
|
page: Page,
|
|
url: string,
|
|
action: () => Promise<any>,
|
|
{
|
|
beforePoll,
|
|
allowedNumberOfRequests = 1,
|
|
timeout = 5000,
|
|
interval = 1000,
|
|
}: {
|
|
allowedNumberOfRequests?: number
|
|
beforePoll?: () => Promise<any> | void
|
|
interval?: number
|
|
timeout?: number
|
|
} = {},
|
|
): Promise<Array<Request>> => {
|
|
const matchedRequests: Request[] = []
|
|
|
|
// begin tracking network requests
|
|
page.on('request', (request) => {
|
|
if (request.url().includes(url)) {
|
|
matchedRequests.push(request)
|
|
}
|
|
})
|
|
|
|
await action()
|
|
|
|
if (typeof beforePoll === 'function') {
|
|
await beforePoll()
|
|
}
|
|
|
|
const startTime = Date.now()
|
|
|
|
// continuously poll even after a request has been matched
|
|
// this will ensure no subsequent requests are made
|
|
// such as a result of a `useEffect` within a component
|
|
while (Date.now() - startTime < timeout) {
|
|
if (matchedRequests.length > 0) {
|
|
expect(matchedRequests.length).toBeLessThanOrEqual(allowedNumberOfRequests)
|
|
}
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, interval))
|
|
}
|
|
|
|
expect(matchedRequests.length).toBe(allowedNumberOfRequests)
|
|
|
|
return matchedRequests
|
|
}
|