woocommerce/plugins/woocommerce-admin/client/navigation/components/favorite-button/test/index.js

110 lines
2.8 KiB
JavaScript

/**
* External dependencies
*/
import { render } from '@testing-library/react';
import { useDispatch, useSelect } from '@wordpress/data';
import userEvent from '@testing-library/user-event';
import { createElement } from '@wordpress/element';
/**
* Internal dependencies
*/
import FavoriteButton from '../';
jest.mock( '@wordpress/data', () => {
// Require the original module to not be mocked...
const originalModule = jest.requireActual( '@wordpress/data' );
return {
__esModule: true, // Use it when dealing with esModules
...originalModule,
useDispatch: jest.fn().mockReturnValue( {} ),
useSelect: jest.fn().mockReturnValue( {} ),
};
} );
describe( 'FavoriteButton', () => {
test( 'should not show when favorites are still resolving', () => {
useSelect.mockImplementation( () => ( {
favorites: [],
isResolving: true,
} ) );
const { container } = render( <FavoriteButton id="my-item" /> );
expect(
container.querySelector( '.woocommerce-navigation-favorite-button' )
).toBeNull();
} );
test( 'should show the empty star when item is not favorited', () => {
useSelect.mockImplementation( () => ( {
favorites: [],
isResolving: false,
} ) );
const { container } = render( <FavoriteButton id="my-item" /> );
expect( container.querySelector( '.star-empty-icon' ) ).not.toBeNull();
} );
test( 'should show the filled star when item is favorited', () => {
useSelect.mockImplementation( () => ( {
favorites: [ 'my-item' ],
isResolving: false,
} ) );
const { container } = render( <FavoriteButton id="my-item" /> );
expect( container.querySelector( '.star-filled-icon' ) ).not.toBeNull();
} );
test( 'should remove the favorite when toggling a favorited item', () => {
useSelect.mockImplementation( () => ( {
favorites: [ 'my-item' ],
isResolving: false,
} ) );
const addFavorite = jest.fn();
const removeFavorite = jest.fn();
useDispatch.mockReturnValue( {
addFavorite,
removeFavorite,
} );
const { container } = render( <FavoriteButton id="my-item" /> );
userEvent.click(
container.querySelector( '.woocommerce-navigation-favorite-button' )
);
expect( addFavorite ).not.toHaveBeenCalled();
expect( removeFavorite ).toHaveBeenCalled();
} );
test( 'should add the favorite when toggling a unfavorited item', () => {
useSelect.mockImplementation( () => ( {
favorites: [],
isResolving: false,
} ) );
const addFavorite = jest.fn();
const removeFavorite = jest.fn();
useDispatch.mockReturnValue( {
addFavorite,
removeFavorite,
} );
const { container } = render( <FavoriteButton id="my-item" /> );
userEvent.click(
container.querySelector( '.woocommerce-navigation-favorite-button' )
);
expect( addFavorite ).toHaveBeenCalled();
expect( removeFavorite ).not.toHaveBeenCalled();
} );
} );