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

// eslint-disable testing-library/no-dom-import
/**
 * External dependencies
 */
import { getByTestId, waitFor } from '@testing-library/dom';

/**
 * Internal dependencies
 */
import {
	getMiniCartTotalsFromLocalStorage,
	getMiniCartTotalsFromServer,
	updateTotals,
} from '../data';

// This is a simplified version of the response of the Cart API endpoint.
const responseMock = {
	ok: true,
	json: async () => ( {
		totals: {
			total_price: '1600',
			currency_code: 'USD',
			currency_symbol: '$',
			currency_minor_unit: 2,
			currency_decimal_separator: '.',
			currency_thousand_separator: ',',
			currency_prefix: '$',
			currency_suffix: '',
		},
		items_count: 2,
	} ),
} as Response;
const localStorageMock = {
	totals: {
		total_price: '1600',
		currency_code: 'USD',
		currency_symbol: '$',
		currency_minor_unit: 2,
		currency_decimal_separator: '.',
		currency_thousand_separator: ',',
		currency_prefix: '$',
		currency_suffix: '',
	},
	itemsCount: 2,
};

const initializeLocalStorage = () => {
	Object.defineProperty( window, 'localStorage', {
		value: {
			getItem: jest
				.fn()
				.mockReturnValue( JSON.stringify( localStorageMock ) ),
			setItem: jest.fn(),
		},
		writable: true,
	} );
};

// This is a simplified version of the Mini-Cart DOM generated by MiniCart.php.
const getMiniCartDOM = () => {
	const div = document.createElement( 'div' );
	div.innerHTML = `
	<div class="wc-block-mini-cart">
		<div class="wc-block-mini-cart__amount" data-testid="amount"></div>
		<div class="wc-block-mini-cart__badge" data-testid="quantity"></div>
	</div>`;
	return div;
};

describe( 'Mini-Cart frontend script', () => {
	it( 'updates the cart contents based on the localStorage values', async () => {
		initializeLocalStorage();
		const container = getMiniCartDOM();
		document.body.appendChild( container );

		updateTotals( getMiniCartTotalsFromLocalStorage() );

		// Assert that we are rendering the amount.
		await waitFor( () =>
			expect( getByTestId( container, 'amount' ).textContent ).toBe(
				'$16.00'
			)
		);
		// Assert that we are rendering the quantity.
		await waitFor( () =>
			expect( getByTestId( container, 'quantity' ).textContent ).toBe(
				'2'
			)
		);
	} );

	it( 'updates the cart contents based on the API response', async () => {
		jest.spyOn( window, 'fetch' ).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/'
			)
		);

		// Assert we saved the values returned to the localStorage.
		await waitFor( () =>
			expect( window.localStorage.setItem.mock.calls[ 0 ][ 1 ] ).toEqual(
				JSON.stringify( localStorageMock )
			)
		);

		// Assert that we are rendering the amount.
		await waitFor( () =>
			expect( getByTestId( container, 'amount' ).textContent ).toBe(
				'$16.00'
			)
		);
		// Assert that we are rendering the quantity.
		await waitFor( () =>
			expect( getByTestId( container, 'quantity' ).textContent ).toBe(
				'2'
			)
		);
		jest.restoreAllMocks();
	} );
} );