Fix: Mini-Cart block shows wrong total if theres multiple installs on…

… the same domain (#11257)

assets/js/blocks/mini-cart/utils/data.ts

@@ -13,6 +13,7 @@ import {
 } from '@woocommerce/types';
 import { getSettingWithCoercion } from '@woocommerce/settings';
 import type { ColorPaletteOption } from '@woocommerce/editor-components/color-panel/types';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -128,15 +129,9 @@ export const getMiniCartTotalsFromLocalStorage = ():
 export const getMiniCartTotalsFromServer = async (): Promise<
 	[ CartResponseTotals, number ] | undefined
 > => {
-	return fetch( '/wp-json/wc/store/v1/cart/' )
-		.then( ( response ) => {
-			// Check if the response was successful.
-			if ( ! response.ok ) {
-				throw new Error();
-			}
-
-			return response.json();
-		} )
+	return apiFetch< CartResponse >( {
+		path: '/wc/store/v1/cart',
+	} )
 		.then( ( data: CartResponse ) => {
 			// Save server data to local storage, so we can re-fetch it faster
 			// on the next page load.

assets/js/blocks/mini-cart/utils/test/data.ts

@@ -4,6 +4,7 @@
  */
 import { getByTestId, waitFor } from '@testing-library/dom';
 import { getSettingWithCoercion } from '@woocommerce/settings';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -17,23 +18,20 @@ import {
 
 // This is a simplified version of the response of the Cart API endpoint.
 const responseMock = {
-	ok: true,
-	json: async () => ( {
-		totals: {
-			total_price: '1800',
-			total_items: '1400',
-			total_items_tax: '200',
-			currency_code: 'USD',
-			currency_symbol: '$',
-			currency_minor_unit: 2,
-			currency_decimal_separator: '.',
-			currency_thousand_separator: ',',
-			currency_prefix: '$',
-			currency_suffix: '',
-		},
-		items_count: 2,
-	} ),
-} as Response;
+	totals: {
+		total_price: '1800',
+		total_items: '1400',
+		total_items_tax: '200',
+		currency_code: 'USD',
+		currency_symbol: '$',
+		currency_minor_unit: 2,
+		currency_decimal_separator: '.',
+		currency_thousand_separator: ',',
+		currency_prefix: '$',
+		currency_suffix: '',
+	},
+	items_count: 2,
+};
 const localStorageMock = {
 	totals: {
 		total_price: '1800',
@@ -80,6 +78,8 @@ jest.mock( '@woocommerce/settings', () => {
 	};
 } );
 
+jest.mock( '@wordpress/api-fetch' );
+
 describe( 'Mini-Cart frontend script when "the display prices during cart and checkout" option is set to "Including Tax"', () => {
 	beforeAll( () => {
 		( getSettingWithCoercion as jest.Mock ).mockReturnValue( true );
@@ -110,17 +110,17 @@ describe( 'Mini-Cart frontend script when "the display prices during cart and ch
 	} );
 
 	it( 'updates the cart contents based on the API response', async () => {
-		jest.spyOn( window, 'fetch' ).mockResolvedValue( responseMock );
+		apiFetch.mockResolvedValue( responseMock );
 		const container = getMiniCartDOM();
 		document.body.appendChild( container );
 
 		getMiniCartTotalsFromServer().then( updateTotals );
 
 		// Assert we called the correct endpoint.
 		await waitFor( () =>
-			expect( window.fetch ).toHaveBeenCalledWith(
-				'/wp-json/wc/store/v1/cart/'
-			)
+			expect( apiFetch ).toHaveBeenCalledWith( {
+				path: '/wc/store/v1/cart',
+			} )
 		);
 
 		// Assert we saved the values returned to the localStorage.
@@ -172,17 +172,17 @@ describe( 'Mini-Cart frontend script when "the display prices during cart and ch
 	} );
 
 	it( 'updates the cart contents based on the API response', async () => {
-		jest.spyOn( window, 'fetch' ).mockResolvedValue( responseMock );
+		apiFetch.mockResolvedValue( responseMock );
 		const container = getMiniCartDOM();
 		document.body.appendChild( container );
 
 		getMiniCartTotalsFromServer().then( updateTotals );
 
 		// Assert we called the correct endpoint.
 		await waitFor( () =>
-			expect( window.fetch ).toHaveBeenCalledWith(
-				'/wp-json/wc/store/v1/cart/'
-			)
+			expect( apiFetch ).toHaveBeenCalledWith( {
+				path: '/wc/store/v1/cart',
+			} )
 		);
 
 		// Assert we saved the values returned to the localStorage.