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

96 lines
2.3 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { render } from '@testing-library/react';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import Header from '../';
global.window.wcNavigation = {};
jest.mock( '@woocommerce/wc-admin-settings', () => ( {
...jest.requireActual( '@woocommerce/wc-admin-settings' ),
getSetting: jest.fn( ( setting ) => {
const settings = {
homeUrl: 'https://fake-site-url.com',
siteTitle: 'Fake & Title <3',
};
return settings[ setting ];
} ),
} ) );
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( 'Header', () => {
test( 'should not show the button when the site icon is requesting', () => {
useSelect.mockImplementation( () => ( {
isRequestingSiteIcon: true,
siteIconUrl: null,
} ) );
const { container } = render( <Header /> );
expect( container.querySelector( 'img' ) ).toBeNull();
} );
test( 'should show the button when the site icon has resolved', () => {
useSelect.mockImplementation( () => ( {
isRequestingSiteIcon: false,
siteIconUrl: '#',
} ) );
const { container } = render( <Header /> );
expect( container.querySelector( 'img' ) ).not.toBeNull();
} );
test( 'should start with the nav expanded in larger viewports', () => {
Object.defineProperty( window.HTMLElement.prototype, 'clientWidth', {
configurable: true,
value: 2000,
} );
render( <Header /> );
expect( Object.values( document.body.classList ) ).toContain(
'is-wc-nav-expanded'
);
} );
test( 'should start with the nav folded when the viewport is smaller', () => {
Object.defineProperty( window.HTMLElement.prototype, 'clientWidth', {
configurable: true,
value: 480,
} );
render( <Header /> );
expect( Object.values( document.body.classList ) ).toContain(
'is-wc-nav-folded'
);
} );
test( 'should decode site titles', () => {
const { container } = render( <Header /> );
expect(
container.querySelector(
'.woocommerce-navigation-header__site-title'
).textContent
).toBe( 'Fake & Title <3' );
} );
} );