96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
/**
|
|
* 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' );
|
|
} );
|
|
} );
|