woocommerce/plugins/woocommerce-admin/client/navigation/components/intro-modal/test/index.js

75 lines
1.9 KiB
JavaScript

/**
* External dependencies
*/
import { fireEvent, render, screen } from '@testing-library/react';
import { useDispatch, useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { IntroModal, INTRO_MODAL_DISMISSED_OPTION_NAME } from '../';
global.window.wcNavigation = {};
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( 'IntroModal', () => {
test( 'should not show when modal options are resolving', () => {
useSelect.mockImplementation( () => ( {
isResolving: true,
} ) );
const { container } = render( <IntroModal /> );
expect( container ).toBeEmptyDOMElement();
} );
test( 'should not dismiss when the modal has already been dismissed', () => {
const updateOptions = jest.fn();
useSelect.mockImplementation( () => ( {
isDismissed: true,
isResolving: false,
} ) );
useDispatch.mockImplementation( () => ( {
updateOptions,
} ) );
const { container } = render( <IntroModal /> );
expect( container ).toBeEmptyDOMElement();
expect( updateOptions ).not.toHaveBeenCalled();
} );
test( 'should hide and update the dismissal option when closing the modal', () => {
const updateOptions = jest.fn();
useSelect.mockImplementation( () => ( {
isResolving: false,
isDismissed: false,
} ) );
useDispatch.mockImplementation( () => ( {
updateOptions,
} ) );
render( <IntroModal /> );
fireEvent.click( screen.queryByLabelText( 'Close dialog' ) );
expect(
screen.queryByText( 'A new navigation for WooCommerce' )
).toBeNull();
expect( updateOptions ).toHaveBeenCalledWith( {
[ INTRO_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
} );
} );
} );