initial commit
This commit is contained in:
@ -0,0 +1,206 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import TestRenderer, { act } from 'react-test-renderer';
|
||||
import { createRegistry, RegistryProvider } from '@wordpress/data';
|
||||
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import * as mockUseStoreCart from '../use-store-cart';
|
||||
import { useStoreCartItemQuantity } from '../use-store-cart-item-quantity';
|
||||
|
||||
jest.mock( '../use-store-cart', () => ( {
|
||||
useStoreCart: jest.fn(),
|
||||
} ) );
|
||||
|
||||
jest.mock( '@woocommerce/block-data', () => ( {
|
||||
__esModule: true,
|
||||
CART_STORE_KEY: 'test/store',
|
||||
} ) );
|
||||
|
||||
// Make debounce instantaneous.
|
||||
jest.mock( 'use-debounce', () => ( {
|
||||
useDebounce: ( a ) => [ a ],
|
||||
} ) );
|
||||
|
||||
describe( 'useStoreCartItemQuantity', () => {
|
||||
let registry, renderer;
|
||||
|
||||
const getWrappedComponents = ( Component ) => (
|
||||
<RegistryProvider value={ registry }>
|
||||
<Component />
|
||||
</RegistryProvider>
|
||||
);
|
||||
|
||||
const getTestComponent = ( options ) => () => {
|
||||
const props = useStoreCartItemQuantity( options );
|
||||
return <div { ...props } />;
|
||||
};
|
||||
|
||||
let mockRemoveItemFromCart;
|
||||
let mockChangeCartItemQuantity;
|
||||
const setupMocks = ( { isPendingDelete, isPendingQuantity } ) => {
|
||||
mockRemoveItemFromCart = jest
|
||||
.fn()
|
||||
.mockReturnValue( { type: 'removeItemFromCartAction' } );
|
||||
mockChangeCartItemQuantity = jest
|
||||
.fn()
|
||||
.mockReturnValue( { type: 'changeCartItemQuantityAction' } );
|
||||
registry.registerStore( storeKey, {
|
||||
reducer: () => ( {} ),
|
||||
actions: {
|
||||
removeItemFromCart: mockRemoveItemFromCart,
|
||||
changeCartItemQuantity: mockChangeCartItemQuantity,
|
||||
},
|
||||
selectors: {
|
||||
isItemPendingDelete: jest
|
||||
.fn()
|
||||
.mockReturnValue( isPendingDelete ),
|
||||
isItemPendingQuantity: jest
|
||||
.fn()
|
||||
.mockReturnValue( isPendingQuantity ),
|
||||
},
|
||||
} );
|
||||
};
|
||||
|
||||
beforeEach( () => {
|
||||
registry = createRegistry();
|
||||
renderer = null;
|
||||
} );
|
||||
|
||||
afterEach( () => {
|
||||
mockRemoveItemFromCart.mockReset();
|
||||
mockChangeCartItemQuantity.mockReset();
|
||||
} );
|
||||
|
||||
describe( 'with no errors and not pending', () => {
|
||||
beforeEach( () => {
|
||||
setupMocks( { isPendingDelete: false, isPendingQuantity: false } );
|
||||
mockUseStoreCart.useStoreCart.mockReturnValue( {
|
||||
cartErrors: {},
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'update quantity value should happen instantly', () => {
|
||||
const TestComponent = getTestComponent( {
|
||||
key: '123',
|
||||
quantity: 1,
|
||||
} );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { setItemQuantity, quantity } = renderer.root.findByType(
|
||||
'div'
|
||||
).props;
|
||||
|
||||
expect( quantity ).toBe( 1 );
|
||||
|
||||
act( () => {
|
||||
setItemQuantity( 2 );
|
||||
} );
|
||||
|
||||
const { quantity: newQuantity } = renderer.root.findByType(
|
||||
'div'
|
||||
).props;
|
||||
|
||||
expect( newQuantity ).toBe( 2 );
|
||||
} );
|
||||
|
||||
it( 'removeItem should call the dispatch action', () => {
|
||||
const TestComponent = getTestComponent( {
|
||||
key: '123',
|
||||
quantity: 1,
|
||||
} );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { removeItem } = renderer.root.findByType( 'div' ).props;
|
||||
|
||||
act( () => {
|
||||
removeItem();
|
||||
} );
|
||||
|
||||
expect( mockRemoveItemFromCart ).toHaveBeenCalledWith( '123' );
|
||||
} );
|
||||
|
||||
it( 'setItemQuantity should call the dispatch action', () => {
|
||||
const TestComponent = getTestComponent( {
|
||||
key: '123',
|
||||
quantity: 1,
|
||||
} );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { setItemQuantity } = renderer.root.findByType( 'div' ).props;
|
||||
|
||||
act( () => {
|
||||
setItemQuantity( 2 );
|
||||
} );
|
||||
|
||||
expect( mockChangeCartItemQuantity.mock.calls ).toEqual( [
|
||||
[ '123', 2 ],
|
||||
] );
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'should expose store errors', () => {
|
||||
const mockCartErrors = [ { message: 'Test error' } ];
|
||||
setupMocks( { isPendingDelete: false, isPendingQuantity: false } );
|
||||
mockUseStoreCart.useStoreCart.mockReturnValue( {
|
||||
cartErrors: mockCartErrors,
|
||||
} );
|
||||
|
||||
const TestComponent = getTestComponent( {
|
||||
key: '123',
|
||||
quantity: 1,
|
||||
} );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { cartItemQuantityErrors } = renderer.root.findByType(
|
||||
'div'
|
||||
).props;
|
||||
|
||||
expect( cartItemQuantityErrors ).toEqual( mockCartErrors );
|
||||
} );
|
||||
|
||||
it( 'isPendingDelete should depend on the value provided by the store', () => {
|
||||
setupMocks( { isPendingDelete: true, isPendingQuantity: false } );
|
||||
mockUseStoreCart.useStoreCart.mockReturnValue( {
|
||||
cartErrors: {},
|
||||
} );
|
||||
|
||||
const TestComponent = getTestComponent( {
|
||||
key: '123',
|
||||
quantity: 1,
|
||||
} );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { isPendingDelete } = renderer.root.findByType( 'div' ).props;
|
||||
|
||||
expect( isPendingDelete ).toBe( true );
|
||||
} );
|
||||
} );
|
||||
@ -0,0 +1,235 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import TestRenderer, { act } from 'react-test-renderer';
|
||||
import { createRegistry, RegistryProvider } from '@wordpress/data';
|
||||
import { previewCart } from '@woocommerce/resource-previews';
|
||||
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { defaultCartData, useStoreCart } from '../use-store-cart';
|
||||
import { useEditorContext } from '../../../providers/editor-context';
|
||||
|
||||
jest.mock( '../../../providers/editor-context', () => ( {
|
||||
useEditorContext: jest.fn(),
|
||||
} ) );
|
||||
|
||||
jest.mock( '@woocommerce/block-data', () => ( {
|
||||
...jest.requireActual( '@woocommerce/block-data' ),
|
||||
__esModule: true,
|
||||
CART_STORE_KEY: 'test/store',
|
||||
} ) );
|
||||
|
||||
describe( 'useStoreCart', () => {
|
||||
let registry, renderer;
|
||||
|
||||
const receiveCartMock = () => {};
|
||||
|
||||
const previewCartData = {
|
||||
cartCoupons: previewCart.coupons,
|
||||
cartItems: previewCart.items,
|
||||
cartFees: previewCart.fees,
|
||||
cartItemsCount: previewCart.items_count,
|
||||
cartItemsWeight: previewCart.items_weight,
|
||||
cartNeedsPayment: previewCart.needs_payment,
|
||||
cartNeedsShipping: previewCart.needs_shipping,
|
||||
cartTotals: previewCart.totals,
|
||||
cartIsLoading: false,
|
||||
cartItemErrors: [],
|
||||
cartErrors: [],
|
||||
billingAddress: {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
company: '',
|
||||
address_1: '',
|
||||
address_2: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postcode: '',
|
||||
country: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
},
|
||||
shippingAddress: {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
company: '',
|
||||
address_1: '',
|
||||
address_2: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postcode: '',
|
||||
country: '',
|
||||
phone: '',
|
||||
},
|
||||
shippingRates: previewCart.shipping_rates,
|
||||
extensions: {},
|
||||
shippingRatesLoading: false,
|
||||
cartHasCalculatedShipping: true,
|
||||
};
|
||||
|
||||
const mockCartItems = [ { key: '1', id: 1, name: 'Lorem Ipsum' } ];
|
||||
const mockShippingAddress = {
|
||||
city: 'New York',
|
||||
};
|
||||
const mockCartData = {
|
||||
coupons: [],
|
||||
items: mockCartItems,
|
||||
fees: [],
|
||||
itemsCount: 1,
|
||||
itemsWeight: 10,
|
||||
needsPayment: true,
|
||||
needsShipping: true,
|
||||
billingAddress: {},
|
||||
shippingAddress: mockShippingAddress,
|
||||
shippingRates: [],
|
||||
hasCalculatedShipping: true,
|
||||
extensions: {},
|
||||
errors: [],
|
||||
receiveCart: undefined,
|
||||
paymentRequirements: [],
|
||||
};
|
||||
const mockCartTotals = {
|
||||
currency_code: 'USD',
|
||||
};
|
||||
const mockCartIsLoading = false;
|
||||
const mockCartErrors = [];
|
||||
const mockStoreCartData = {
|
||||
cartCoupons: [],
|
||||
cartItems: mockCartItems,
|
||||
cartItemErrors: [],
|
||||
cartItemsCount: 1,
|
||||
cartItemsWeight: 10,
|
||||
cartNeedsPayment: true,
|
||||
cartNeedsShipping: true,
|
||||
cartTotals: mockCartTotals,
|
||||
cartIsLoading: mockCartIsLoading,
|
||||
cartErrors: mockCartErrors,
|
||||
cartFees: [],
|
||||
billingAddress: {},
|
||||
shippingAddress: mockShippingAddress,
|
||||
shippingRates: [],
|
||||
extensions: {},
|
||||
shippingRatesLoading: false,
|
||||
cartHasCalculatedShipping: true,
|
||||
receiveCart: undefined,
|
||||
paymentRequirements: [],
|
||||
};
|
||||
|
||||
const getWrappedComponents = ( Component ) => (
|
||||
<RegistryProvider value={ registry }>
|
||||
<Component />
|
||||
</RegistryProvider>
|
||||
);
|
||||
|
||||
const getTestComponent = ( options ) => () => {
|
||||
const { receiveCart, ...results } = useStoreCart( options );
|
||||
return <div results={ results } receiveCart={ receiveCart } />;
|
||||
};
|
||||
|
||||
const setUpMocks = () => {
|
||||
const mocks = {
|
||||
selectors: {
|
||||
getCartData: jest.fn().mockReturnValue( mockCartData ),
|
||||
getCartErrors: jest.fn().mockReturnValue( mockCartErrors ),
|
||||
getCartTotals: jest.fn().mockReturnValue( mockCartTotals ),
|
||||
hasFinishedResolution: jest
|
||||
.fn()
|
||||
.mockReturnValue( ! mockCartIsLoading ),
|
||||
isCustomerDataUpdating: jest.fn().mockReturnValue( false ),
|
||||
},
|
||||
};
|
||||
registry.registerStore( storeKey, {
|
||||
reducer: () => ( {} ),
|
||||
selectors: mocks.selectors,
|
||||
} );
|
||||
};
|
||||
|
||||
beforeEach( () => {
|
||||
registry = createRegistry();
|
||||
renderer = null;
|
||||
setUpMocks();
|
||||
} );
|
||||
|
||||
afterEach( () => {
|
||||
useEditorContext.mockReset();
|
||||
} );
|
||||
|
||||
describe( 'in frontend', () => {
|
||||
beforeEach( () => {
|
||||
useEditorContext.mockReturnValue( {
|
||||
isEditor: false,
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'return default data when shouldSelect is false', () => {
|
||||
const TestComponent = getTestComponent( { shouldSelect: false } );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { results, receiveCart } = renderer.root.findByType(
|
||||
'div'
|
||||
).props;
|
||||
const {
|
||||
receiveCart: defaultReceiveCart,
|
||||
...remaining
|
||||
} = defaultCartData;
|
||||
expect( results ).toEqual( remaining );
|
||||
expect( receiveCart ).toEqual( defaultReceiveCart );
|
||||
} );
|
||||
|
||||
it( 'return store data when shouldSelect is true', () => {
|
||||
const TestComponent = getTestComponent( { shouldSelect: true } );
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { results, receiveCart } = renderer.root.findByType(
|
||||
'div'
|
||||
).props;
|
||||
|
||||
expect( results ).toEqual( mockStoreCartData );
|
||||
expect( receiveCart ).toBeUndefined();
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'in editor', () => {
|
||||
beforeEach( () => {
|
||||
useEditorContext.mockReturnValue( {
|
||||
isEditor: true,
|
||||
previewData: {
|
||||
previewCart: {
|
||||
...previewCart,
|
||||
receiveCart: receiveCartMock,
|
||||
},
|
||||
},
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'return preview data in editor', () => {
|
||||
const TestComponent = getTestComponent();
|
||||
|
||||
act( () => {
|
||||
renderer = TestRenderer.create(
|
||||
getWrappedComponents( TestComponent )
|
||||
);
|
||||
} );
|
||||
|
||||
const { results, receiveCart } = renderer.root.findByType(
|
||||
'div'
|
||||
).props;
|
||||
|
||||
expect( results ).toEqual( previewCartData );
|
||||
expect( receiveCart ).toEqual( receiveCartMock );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
Reference in New Issue
Block a user