@wordpress/api-fetch 7.29.1-next.f34ab90e9.0 → 7.30.1-next.836ecdcae.0

package/src/test/index.js

@@ -1,56 +1,57 @@
 /**
- * Internal dependencies
- */
-import apiFetch from '../';
-
-/**
- * Mock return value for a successful fetch JSON return value.
+ * Mock response value for a successful fetch.
  *
- * @return {Promise} Mock return value.
+ * @return {Response} Mock return value.
  */
-const DEFAULT_FETCH_MOCK_RETURN = Promise.resolve( {
+const DEFAULT_FETCH_MOCK_RETURN = {
+	ok: true,
 	status: 200,
 	json: () => Promise.resolve( {} ),
-} );
+};
 
 describe( 'apiFetch', () => {
-	const originalFetch = window.fetch;
+	let apiFetch;
+	const originalFetch = globalThis.fetch;
+
+	beforeEach( async () => {
+		// Reset the `apiFetch` module before each test to clear
+		// internal variables (middlewares, fetch handler, etc.).
+		jest.resetModules();
+		apiFetch = ( await import( '../' ) ).default;
 
-	beforeEach( () => {
-		window.fetch = jest.fn();
+		globalThis.fetch = jest.fn();
 	} );
 
 	afterAll( () => {
-		window.fetch = originalFetch;
+		globalThis.fetch = originalFetch;
 	} );
 
-	it( 'should call the API properly', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-				json() {
-					return Promise.resolve( { message: 'ok' } );
-				},
-			} )
-		);
+	it( 'should call the API properly', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 200,
+			async json() {
+				return { message: 'ok' };
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).then( ( body ) => {
-			expect( body ).toEqual( { message: 'ok' } );
+		await expect( apiFetch( { path: '/random' } ) ).resolves.toEqual( {
+			message: 'ok',
 		} );
 	} );
 
-	it( 'should fetch with non-JSON body', () => {
-		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	it( 'should fetch with non-JSON body', async () => {
+		globalThis.fetch.mockResolvedValue( DEFAULT_FETCH_MOCK_RETURN );
 
 		const body = 'FormData';
 
-		apiFetch( {
+		await apiFetch( {
 			path: '/wp/v2/media',
 			method: 'POST',
 			body,
 		} );
 
-		expect( window.fetch ).toHaveBeenCalledWith(
+		expect( globalThis.fetch ).toHaveBeenCalledWith(
 			'/wp/v2/media?_locale=user',
 			{
 				credentials: 'include',
@@ -63,10 +64,10 @@ describe( 'apiFetch', () => {
 		);
 	} );
 
-	it( 'should fetch with a JSON body', () => {
-		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	it( 'should fetch with a JSON body', async () => {
+		globalThis.fetch.mockResolvedValue( DEFAULT_FETCH_MOCK_RETURN );
 
-		apiFetch( {
+		await apiFetch( {
 			path: '/wp/v2/posts',
 			method: 'POST',
 			headers: {
@@ -75,7 +76,7 @@ describe( 'apiFetch', () => {
 			data: {},
 		} );
 
-		expect( window.fetch ).toHaveBeenCalledWith(
+		expect( globalThis.fetch ).toHaveBeenCalledWith(
 			'/wp/v2/posts?_locale=user',
 			{
 				body: '{}',
@@ -89,17 +90,17 @@ describe( 'apiFetch', () => {
 		);
 	} );
 
-	it( 'should respect developer-provided options', () => {
-		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	it( 'should respect developer-provided options', async () => {
+		globalThis.fetch.mockResolvedValue( DEFAULT_FETCH_MOCK_RETURN );
 
-		apiFetch( {
+		await apiFetch( {
 			path: '/wp/v2/posts',
 			method: 'POST',
 			data: {},
 			credentials: 'omit',
 		} );
 
-		expect( window.fetch ).toHaveBeenCalledWith(
+		expect( globalThis.fetch ).toHaveBeenCalledWith(
 			'/wp/v2/posts?_locale=user',
 			{
 				body: '{}',
@@ -113,83 +114,86 @@ describe( 'apiFetch', () => {
 		);
 	} );
 
-	it( 'should return the error message properly', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 400,
-				json() {
-					return Promise.resolve( {
-						code: 'bad_request',
-						message: 'Bad Request',
-					} );
-				},
-			} )
-		);
+	it( 'should return the error message properly', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: false,
+			status: 400,
+			async json() {
+				return {
+					code: 'bad_request',
+					message: 'Bad Request',
+				};
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'bad_request',
-				message: 'Bad Request',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'bad_request',
+			message: 'Bad Request',
 		} );
 	} );
 
-	it( 'should return invalid JSON error if no json response', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-			} )
-		);
+	it( 'should return invalid JSON error if no json response', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 200,
+			async json() {
+				return JSON.parse( '' );
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'invalid_json',
-				message: 'The response is not a valid JSON response.',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'invalid_json',
+			message: 'The response is not a valid JSON response.',
 		} );
 	} );
 
-	it( 'should return invalid JSON error if response is not valid', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-				json() {
-					return Promise.reject();
-				},
-			} )
-		);
+	it( 'should return invalid JSON error if response is not valid', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 200,
+			async json() {
+				return JSON.parse( '' );
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'invalid_json',
-				message: 'The response is not a valid JSON response.',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'invalid_json',
+			message: 'The response is not a valid JSON response.',
 		} );
 	} );
 
-	it( 'should return offline error when fetch errors', () => {
-		window.fetch.mockReturnValue( Promise.reject() );
+	it( 'should return offline error when fetch errors', async () => {
+		globalThis.fetch.mockRejectedValue(
+			new TypeError( 'Failed to fetch' )
+		);
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'fetch_error',
-				message: 'You are probably offline.',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'fetch_error',
+			message: 'Could not get a valid response from the server.',
 		} );
 	} );
 
 	it( 'should throw AbortError when fetch aborts', async () => {
-		const abortError = new Error();
-		abortError.name = 'AbortError';
-		abortError.code = 20;
-
-		window.fetch.mockReturnValue( Promise.reject( abortError ) );
+		globalThis.fetch.mockImplementation(
+			( path, { signal } ) =>
+				new Promise( ( _, reject ) => {
+					if ( ! signal ) {
+						reject( new Error( 'Expected signal as argument' ) );
+						return;
+					}
+
+					signal.throwIfAborted();
+					signal.addEventListener(
+						'abort',
+						( e ) => {
+							reject( e.target.reason );
+						},
+						{ once: true }
+					);
+				} )
+		);
 
-		const controller = new window.AbortController();
+		const controller = new globalThis.AbortController();
 
 		const promise = apiFetch( {
 			path: '/random',
@@ -198,85 +202,149 @@ describe( 'apiFetch', () => {
 
 		controller.abort();
 
-		let error;
+		await expect( promise ).rejects.toMatchObject( {
+			name: 'AbortError',
+		} );
+	} );
+
+	it( 'should return null if response has no content status code', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 204,
+		} );
+
+		await expect( apiFetch( { path: '/random' } ) ).resolves.toBe( null );
+	} );
+
+	it( 'should not try to parse the response', async () => {
+		const mockResponse = {
+			ok: true,
+			status: 200,
+		};
 
-		try {
-			await promise;
-		} catch ( err ) {
-			error = err;
-		}
+		globalThis.fetch.mockResolvedValue( mockResponse );
 
-		expect( error.name ).toBe( 'AbortError' );
+		await expect(
+			apiFetch( { path: '/random', parse: false } )
+		).resolves.toBe( mockResponse );
 	} );
 
-	it( 'should return null if response has no content status code', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 204,
-			} )
-		);
+	it( 'should not try to parse the error', async () => {
+		const mockResponse = {
+			ok: false,
+			status: 400,
+		};
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( null );
-		} );
+		globalThis.fetch.mockResolvedValue( mockResponse );
+
+		await expect(
+			apiFetch( { path: '/random', parse: false } )
+		).rejects.toBe( mockResponse );
 	} );
 
-	it( 'should not try to parse the response', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-			} )
-		);
+	it( 'should refetch after successful nonce refresh', async () => {
+		apiFetch.nonceMiddleware =
+			apiFetch.createNonceMiddleware( 'old-nonce' );
+		apiFetch.use( apiFetch.nonceMiddleware );
+		apiFetch.nonceEndpoint = '/rest-nonce';
+
+		globalThis.fetch.mockImplementation( async ( path, options ) => {
+			if ( path.startsWith( '/random' ) ) {
+				if ( options?.headers[ 'X-WP-Nonce' ] === 'new-nonce' ) {
+					return {
+						ok: true,
+						status: 200,
+						json: async () => ( { code: 'success' } ),
+					};
+				}
+
+				return {
+					ok: false,
+					status: 403,
+					json: async () => ( { code: 'rest_cookie_invalid_nonce' } ),
+				};
+			}
 
-		return apiFetch( { path: '/random', parse: false } ).then(
-			( response ) => {
-				expect( response ).toEqual( {
+			if ( path.startsWith( '/rest-nonce' ) ) {
+				return {
+					ok: true,
 					status: 200,
-				} );
+					text: async () => 'new-nonce',
+				};
 			}
-		);
+
+			return {
+				ok: false,
+				status: 404,
+				json: async () => ( { code: 'rest_no_route' } ),
+			};
+		} );
+
+		await expect( apiFetch( { path: '/random' } ) ).resolves.toEqual( {
+			code: 'success',
+		} );
 	} );
 
-	it( 'should not try to parse the error', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 400,
-			} )
-		);
+	it( 'should fail with rest_cookie_invalid_nonce after failed nonce refresh', async () => {
+		apiFetch.nonceMiddleware =
+			apiFetch.createNonceMiddleware( 'old-nonce' );
+		apiFetch.use( apiFetch.nonceMiddleware );
+		apiFetch.nonceEndpoint = '/rest-nonce';
+
+		globalThis.fetch.mockImplementation( async ( path, options ) => {
+			if ( path.startsWith( '/random' ) ) {
+				if ( options?.headers[ 'X-WP-Nonce' ] === 'new-nonce' ) {
+					return {
+						ok: true,
+						status: 200,
+						json: async () => ( { code: 'success' } ),
+					};
+				}
+
+				return {
+					ok: false,
+					status: 403,
+					json: async () => ( { code: 'rest_cookie_invalid_nonce' } ),
+				};
+			}
 
-		return apiFetch( { path: '/random', parse: false } ).catch(
-			( response ) => {
-				// eslint-disable-next-line jest/no-conditional-expect
-				expect( response ).toEqual( {
+			if ( path.startsWith( '/rest-nonce' ) ) {
+				return {
+					ok: false,
 					status: 400,
-				} );
+					text: async () => '0',
+				};
 			}
-		);
+
+			return {
+				ok: false,
+				status: 404,
+				json: async () => ( { code: 'rest_no_route' } ),
+			};
+		} );
+
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'rest_cookie_invalid_nonce',
+		} );
 	} );
 
-	it( 'should not use the default fetch handler when using a custom fetch handler', () => {
+	it( 'should not use the default fetch handler when using a custom fetch handler', async () => {
 		const customFetchHandler = jest.fn();
 
 		apiFetch.setFetchHandler( customFetchHandler );
 
-		apiFetch( { path: '/random' } );
+		await apiFetch( { path: '/random' } );
 
-		expect( window.fetch ).not.toHaveBeenCalled();
+		expect( globalThis.fetch ).not.toHaveBeenCalled();
 
 		expect( customFetchHandler ).toHaveBeenCalledWith( {
 			path: '/random?_locale=user',
 		} );
 	} );
 
-	it( 'should run the last-registered user-defined middleware first', () => {
-		// This could potentially impact other tests in that a lingering
-		// middleware is left. For the purposes of this test, it is sufficient
-		// to ensure that the last-registered middleware receives the original
-		// options object. It also assumes that some built-in middleware would
-		// either mutate or clone the original options if the extra middleware
-		// had been pushed to the stack.
-		expect.assertions( 1 );
+	it( 'should run the last-registered user-defined middleware first', async () => {
+		// The test assumes that some built-in middleware will either mutate or clone
+		// the original options if the extra middleware had been pushed to the stack.
 
 		const expectedOptions = {};
 
@@ -286,6 +354,9 @@ describe( 'apiFetch', () => {
 			return next( actualOptions );
 		} );
 
-		apiFetch( expectedOptions );
+		// Set a custom fetch handler to avoid using the default fetch handler.
+		apiFetch.setFetchHandler( jest.fn() );
+
+		await apiFetch( expectedOptions );
 	} );
 } );

package/src/types.ts

@@ -1,4 +1,5 @@
-export interface APIFetchOptions extends RequestInit {
+export interface APIFetchOptions< Parse extends boolean = boolean >
+	extends RequestInit {
 	// Override headers, we only accept it as an object due to the `nonce` middleware
 	headers?: Record< string, string >;
 	path?: string;
@@ -6,13 +7,17 @@ export interface APIFetchOptions extends RequestInit {
 	/**
 	 * @default true
 	 */
-	parse?: boolean;
+	parse?: Parse;
 	data?: any;
 	namespace?: string;
 	endpoint?: string;
 }
 
-export type APIFetchMiddleware = (
-	options: APIFetchOptions,
-	next: ( nextOptions: APIFetchOptions ) => Promise< any >
+export type FetchHandler< Parse extends boolean = boolean > = (
+	nextOptions: APIFetchOptions< Parse >
+) => Promise< any >;
+
+export type APIFetchMiddleware< Parse extends boolean = boolean > = (
+	options: APIFetchOptions< Parse >,
+	next: FetchHandler< Parse >
 ) => Promise< any >;

package/src/utils/response.ts

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Calls the `json` function on the Response, throwing an error if the response
+ * doesn't have a json function or if parsing the json itself fails.
+ *
+ * @param response
+ * @return Parsed response.
+ */
+async function parseJsonAndNormalizeError( response: Response ) {
+	try {
+		return await response.json();
+	} catch {
+		throw {
+			code: 'invalid_json',
+			message: __( 'The response is not a valid JSON response.' ),
+		};
+	}
+}
+
+/**
+ * Parses the apiFetch response properly and normalize response errors.
+ *
+ * @param response
+ * @param shouldParseResponse
+ *
+ * @return Parsed response.
+ */
+export async function parseResponseAndNormalizeError(
+	response: Response,
+	shouldParseResponse = true
+) {
+	if ( ! shouldParseResponse ) {
+		return response;
+	}
+
+	if ( response.status === 204 ) {
+		return null;
+	}
+
+	return await parseJsonAndNormalizeError( response );
+}
+
+/**
+ * Parses a response, throwing an error if parsing the response fails.
+ *
+ * @param response
+ * @param shouldParseResponse
+ * @return Never returns, always throws.
+ */
+export async function parseAndThrowError(
+	response: Response,
+	shouldParseResponse = true
+) {
+	if ( ! shouldParseResponse ) {
+		throw response;
+	}
+
+	// Parse the response JSON and throw it as an error.
+	throw await parseJsonAndNormalizeError( response );
+}