woocommerce/plugins/woocommerce-admin/client/header/test/index.js

131 lines
3.3 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

jest.mock( '@woocommerce/wc-admin-settings', () => ( {
...jest.requireActual( '@woocommerce/wc-admin-settings' ),
getSetting() {
return 'Fake Site Title';
},
} ) );
jest.mock( '@woocommerce/tracks', () => ( {
...jest.requireActual( '@woocommerce/tracks' ),
recordEvent: jest.fn(),
} ) );
jest.mock( '@woocommerce/data', () => ( {
...jest.requireActual( '@woocommerce/data' ),
useUserPreferences: () => ( {
updateUserPreferences: () => {},
// mock to disable the mobile app banner while testing this component
android_app_banner_dismissed: 'yes',
} ),
} ) );
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,
useSelect: jest.fn().mockReturnValue( {
menuItems: [],
} ),
};
} );
/**
* External dependencies
*/
import { render, fireEvent } from '@testing-library/react';
/**
* Internal dependencies
*/
import { Header } from '../index.js';
global.window.wcNavigation = {};
const encodedBreadcrumb = [
[ 'admin.php?page=wc-settings', 'Settings' ],
'Accounts & Privacy',
];
const stubLocation = ( location ) => {
jest.spyOn( window, 'location', 'get' ).mockReturnValue( {
...window.location,
...location,
} );
};
describe( 'Header', () => {
beforeEach( () => {
// Mock RAF to be synchronous for testing
jest.spyOn( window, 'requestAnimationFrame' ).mockImplementation(
( cb ) => {
cb();
}
);
// Mock user preferences to avoid testing the MobileAppBanner here
// Disable the ActivityPanel so it isn't tested here
window.wcAdminFeatures[ 'activity-panels' ] = false;
} );
afterEach( () => {
window.requestAnimationFrame.mockRestore();
} );
it( 'should render a back button and a custom title on task list pages', () => {
stubLocation( { href: 'http://localhost?task=payments' } );
const { queryByTestId, queryByText } = render(
<Header sections={ encodedBreadcrumb } isEmbedded={ false } />
);
expect(
queryByTestId( 'header-back-button' )
).not.toBeEmptyDOMElement();
expect(
queryByText( 'Choose payment methods' )
).not.toBeEmptyDOMElement();
} );
it( 'should render decoded breadcrumb name', () => {
const { queryByText } = render(
<Header sections={ encodedBreadcrumb } isEmbedded={ true } />
);
expect( queryByText( 'Accounts &amp; Privacy' ) ).toBe( null );
expect( queryByText( 'Accounts & Privacy' ) ).not.toBe( null );
} );
it( 'should only have the is-scrolled class if the page is scrolled', () => {
const { container } = render(
<Header sections={ encodedBreadcrumb } isEmbedded={ false } />
);
const topLevelElement = container.firstChild;
expect( Object.values( topLevelElement.classList ) ).not.toContain(
'is-scrolled'
);
Object.defineProperty( window, 'pageYOffset', {
value: 200,
writable: false,
} );
fireEvent.scroll( window, { target: { scrollY: 200 } } );
expect( Object.values( topLevelElement.classList ) ).toContain(
'is-scrolled'
);
} );
it( 'correctly updates the document title to reflect the navigation state', () => {
render(
<Header sections={ encodedBreadcrumb } isEmbedded={ false } />
);
expect( document.title ).toBe(
'Accounts & Privacy Settings Fake Site Title — WooCommerce'
);
} );
} );