/** * External dependencies */ import { render, screen, within } from '@testing-library/react'; import { useUserPreferences } from '@woocommerce/data'; /** * Internal dependencies */ import { Layout } from '../layout'; jest.mock( '../stats-overview', () => jest.fn().mockReturnValue(
[StatsOverview]
) ); jest.mock( '../../inbox-panel', () => jest.fn().mockReturnValue(
[InboxPanel]
) ); jest.mock( '../../store-management-links', () => ( { StoreManagementLinks: jest .fn() .mockReturnValue(
[StoreManagementLinks]
), } ) ); jest.mock( '../activity-panel', () => ( { ActivityPanel: jest.fn().mockReturnValue(
[ActivityPanel]
), } ) ); jest.mock( '@woocommerce/data', () => ( { ...jest.requireActual( '@woocommerce/data' ), useUserPreferences: jest.fn().mockReturnValue( {} ), } ) ); jest.mock( '@wordpress/element', () => { return { ...jest.requireActual( '@wordpress/element' ), Suspense: ( { children } ) =>
{ children }
, // It's not easy to mock a React.lazy component, since we only use one in this component, this mocks lazy to return a mocked lazy: () => () =>
[TaskList]
, }; } ); describe( 'Homescreen Layout', () => { it( 'should show TaskList placeholder when loading', () => { const { container } = render( {} } /> ); const placeholder = container.querySelector( '.woocommerce-task-card.is-loading' ); expect( placeholder ).toBeInTheDocument(); } ); it( 'should show TaskList inline', () => { const { container } = render( {} } /> ); // Expect that we're rendering the "full" home screen (with columns). const columns = container.querySelector( '.woocommerce-homescreen-column' ); expect( columns ).toBeInTheDocument(); // Expect that the is there too. const taskList = screen.getByText( '[TaskList]' ); expect( taskList ).toBeInTheDocument(); } ); it( 'should render TaskList alone when on task', () => { const { container } = render( {} } /> ); // Expect that we're NOT rendering the "full" home screen (with columns). const columns = container.querySelector( '.woocommerce-homescreen-column' ); expect( columns ).not.toBeInTheDocument(); // Expect that the is there though. const taskList = screen.queryByText( '[TaskList]' ); expect( taskList ).toBeInTheDocument(); } ); it( 'should not show TaskList when user has hidden', () => { render( {} } /> ); const taskList = screen.queryByText( '[TaskList]' ); expect( taskList ).not.toBeInTheDocument(); } ); it( 'should show StoreManagementLinks when TaskList is complete, even if the task list is not hidden', () => { render( {} } /> ); const storeManagementLinks = screen.queryByText( '[StoreManagementLinks]' ); expect( storeManagementLinks ).toBeInTheDocument(); } ); it( 'should default to layout option value', () => { useUserPreferences.mockReturnValue( { homepage_layout: '', } ); const { container } = render( {} } /> ); // Expect that we're rendering the two-column home screen. // The user doesn't have a preference set, but the component received a prop // defaulting to the two column view. expect( container.getElementsByClassName( 'woocommerce-homescreen two-columns' ) ).toHaveLength( 1 ); } ); it( 'should falback to single column layout', () => { useUserPreferences.mockReturnValue( { homepage_layout: '', } ); const { container } = render( {} } /> ); // Expect that we're rendering the single column home screen. // If a default layout prop isn't specified, the default falls back to single column view. const homescreen = container.getElementsByClassName( 'woocommerce-homescreen' ); expect( homescreen ).toHaveLength( 1 ); expect( homescreen[ 0 ] ).not.toHaveClass( 'two-columns' ); } ); it( 'switches to two column layout based on user preference', () => { useUserPreferences.mockReturnValue( { homepage_layout: 'two_columns', } ); const { container } = render( {} } /> ); // Expect that we're rendering the two-column home screen. expect( container.getElementsByClassName( 'woocommerce-homescreen two-columns' ) ).toHaveLength( 1 ); } ); it( 'should display the correct blocks in each column', () => { useUserPreferences.mockReturnValue( { homepage_layout: 'two_columns', } ); const { container } = render( {} } /> ); const columns = container.getElementsByClassName( 'woocommerce-homescreen-column' ); expect( columns ).toHaveLength( 2 ); const firstColumn = columns[ 0 ]; const secondColumn = columns[ 1 ]; expect( within( firstColumn ).getByText( '[TaskList]' ) ).toBeInTheDocument(); expect( within( firstColumn ).getByText( '[InboxPanel]' ) ).toBeInTheDocument(); expect( within( secondColumn ).queryByText( '[TaskList]' ) ).not.toBeInTheDocument(); expect( within( secondColumn ).queryByText( '[InboxPanel]' ) ).not.toBeInTheDocument(); expect( within( secondColumn ).getByText( '[StatsOverview]' ) ).toBeInTheDocument(); expect( within( firstColumn ).queryByText( '[StatsOverview]' ) ).not.toBeInTheDocument(); } ); it( 'should display the correct blocks in each column when task list is hidden', () => { useUserPreferences.mockReturnValue( { homepage_layout: 'two_columns', } ); const { container } = render( {} } /> ); const columns = container.getElementsByClassName( 'woocommerce-homescreen-column' ); expect( columns ).toHaveLength( 2 ); const firstColumn = columns[ 0 ]; const secondColumn = columns[ 1 ]; expect( within( firstColumn ).getByText( '[TaskList]' ) ).toBeInTheDocument(); expect( within( firstColumn ).getByText( '[InboxPanel]' ) ).toBeInTheDocument(); expect( within( secondColumn ).queryByText( '[TaskList]' ) ).not.toBeInTheDocument(); expect( within( secondColumn ).queryByText( '[InboxPanel]' ) ).not.toBeInTheDocument(); expect( within( secondColumn ).getByText( '[StatsOverview]' ) ).toBeInTheDocument(); expect( within( secondColumn ).getByText( '[StoreManagementLinks]' ) ).toBeInTheDocument(); expect( within( firstColumn ).queryByText( '[StatsOverview]' ) ).not.toBeInTheDocument(); } ); } );