woocommerce/plugins/woocommerce-admin/client/wp-admin-scripts/print-shipping-label-banner/dismiss-modal/test/index.js

170 lines
4.2 KiB
JavaScript

/**
* External dependencies
*/
import { createElement, Fragment } from '@wordpress/element';
import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
*/
import { DismissModal } from '../index.js';
describe( 'Option Save events in DismissModal', () => {
const spyUpdateOptions = jest.fn();
test( 'Should save permanent dismissal', async () => {
const { getByRole } = render(
<Fragment>
<div id="woocommerce-admin-print-label" />
<DismissModal
visible={ true }
onClose={ jest.fn() }
onCloseAll={ jest.fn() }
trackElementClicked={ jest.fn() }
updateOptions={ spyUpdateOptions }
/>
</Fragment>
);
userEvent.click( getByRole( 'button', { name: "I don't need this" } ) );
await waitFor( () =>
expect( spyUpdateOptions ).toHaveBeenCalledWith( {
woocommerce_shipping_dismissed_timestamp: -1,
} )
);
} );
test( 'Should save temporary dismissal', async () => {
// Mock Date.now() so a known timestamp will be saved.
const mockDate = 123456;
const realDateNow = Date.now.bind( global.Date );
global.Date.now = jest.fn( () => mockDate );
const { getByRole } = render(
<Fragment>
<div id="woocommerce-admin-print-label" />
<DismissModal
visible={ true }
onClose={ jest.fn() }
onCloseAll={ jest.fn() }
trackElementClicked={ jest.fn() }
updateOptions={ spyUpdateOptions }
/>
</Fragment>
);
userEvent.click( getByRole( 'button', { name: 'Remind me later' } ) );
await waitFor( () =>
expect( spyUpdateOptions ).toHaveBeenCalledWith( {
woocommerce_shipping_dismissed_timestamp: mockDate,
} )
);
// Restore Date.now().
global.Date.now = realDateNow;
} );
} );
describe( 'Tracking events in DismissModal', () => {
const trackElementClicked = jest.fn();
it( 'should record an event when user clicks "I don\'t need this"', async () => {
const { getByRole } = render(
<Fragment>
<div id="woocommerce-admin-print-label" />
<DismissModal
visible={ true }
onClose={ jest.fn() }
onCloseAll={ jest.fn() }
trackElementClicked={ trackElementClicked }
updateOptions={ jest.fn() }
/>
</Fragment>
);
userEvent.click( getByRole( 'button', { name: "I don't need this" } ) );
await waitFor( () =>
expect( trackElementClicked ).toHaveBeenCalledWith(
'shipping_banner_dismiss_modal_close_forever'
)
);
} );
it( 'should record an event when user clicks "Remind me later"', async () => {
const { getByRole } = render(
<Fragment>
<div id="woocommerce-admin-print-label" />
<DismissModal
visible={ true }
onClose={ jest.fn() }
onCloseAll={ jest.fn() }
trackElementClicked={ trackElementClicked }
updateOptions={ jest.fn() }
/>
</Fragment>
);
userEvent.click( getByRole( 'button', { name: 'Remind me later' } ) );
await waitFor( () =>
expect( trackElementClicked ).toHaveBeenCalledWith(
'shipping_banner_dismiss_modal_remind_me_later'
)
);
} );
} );
describe( 'Dismissing modal', () => {
test( 'Should hide the banner by clicking permanent dismissal', async () => {
const { getByRole, getByTestId } = render(
<Fragment>
<div
id="woocommerce-admin-print-label"
data-testid="print-label"
/>
<DismissModal
visible={ true }
onClose={ jest.fn() }
onCloseAll={ jest.fn() }
trackElementClicked={ jest.fn() }
updateOptions={ jest.fn() }
/>
</Fragment>
);
userEvent.click( getByRole( 'button', { name: "I don't need this" } ) );
await waitFor( () =>
expect( getByTestId( 'print-label' ) ).not.toBeVisible()
);
} );
test( 'Should hide the banner by clicking temporary dismissal', async () => {
const { getByRole, getByTestId } = render(
<Fragment>
<div
id="woocommerce-admin-print-label"
data-testid="print-label"
/>
<DismissModal
visible={ true }
onClose={ jest.fn() }
onCloseAll={ jest.fn() }
trackElementClicked={ jest.fn() }
updateOptions={ jest.fn() }
/>
</Fragment>
);
userEvent.click( getByRole( 'button', { name: 'Remind me later' } ) );
await waitFor( () =>
expect( getByTestId( 'print-label' ) ).not.toBeVisible()
);
} );
} );