woocommerce/plugins/woocommerce-admin/client/customize-store/intro/tests/intro-banner.test.tsx

128 lines
3.1 KiB
TypeScript

/**
* External dependencies
*/
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { AnyInterpreter } from 'xstate';
/**
* Internal dependencies
*/
import { Intro } from '../';
import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
jest.mock( '../../assembler-hub/site-hub', () => ( {
SiteHub: jest.fn( () => null ),
} ) );
jest.mock( '~/utils/react-hooks/use-network-status', () => ( {
useNetworkStatus: jest.fn(),
} ) );
describe( 'Intro Banners', () => {
it( 'should display NetworkOfflineBanner when network is offline', () => {
( useNetworkStatus as jest.Mock ).mockImplementation( () => true );
render(
<Intro
sendEvent={ jest.fn() }
context={ {
intro: {
hasErrors: false,
activeTheme: '',
themeData: {
themes: [],
_links: {
browse_all: {
href: '',
},
},
},
activeThemeHasMods: false,
customizeStoreTaskCompleted: false,
currentThemeIsAiGenerated: false,
},
themeConfiguration: {},
} }
currentState={ 'intro' }
parentMachine={ null as unknown as AnyInterpreter }
/>
);
expect(
screen.getByText( /Please check your internet connection./i )
).toBeInTheDocument();
} );
it( 'should display the default banner by default', () => {
const sendEventMock = jest.fn();
( useNetworkStatus as jest.Mock ).mockImplementation( () => false );
render(
<Intro
sendEvent={ sendEventMock }
context={ {
intro: {
hasErrors: false,
activeTheme: '',
themeData: {
themes: [],
_links: {
browse_all: {
href: '',
},
},
},
activeThemeHasMods: false,
customizeStoreTaskCompleted: false,
currentThemeIsAiGenerated: false,
},
themeConfiguration: {},
} }
currentState={ 'intro' }
parentMachine={ null as unknown as AnyInterpreter }
/>
);
expect(
screen.getByText( /Use the power of AI to design your store/i )
).toBeInTheDocument();
const button = screen.getByRole( 'button', {
name: /Design with AI/i,
} );
fireEvent.click( button );
expect( sendEventMock ).toHaveBeenCalledWith( {
type: 'DESIGN_WITH_AI',
} );
} );
it( 'should display the existing ai theme banner when customizeStoreTaskCompleted and currentThemeIsAiGenerated', () => {
const sendEventMock = jest.fn();
( useNetworkStatus as jest.Mock ).mockImplementation( () => false );
render(
<Intro
sendEvent={ sendEventMock }
context={ {
intro: {
hasErrors: false,
activeTheme: '',
themeData: {
themes: [],
_links: {
browse_all: {
href: '',
},
},
},
activeThemeHasMods: false,
customizeStoreTaskCompleted: true,
currentThemeIsAiGenerated: true,
},
themeConfiguration: {},
} }
currentState={ 'intro' }
parentMachine={ null as unknown as AnyInterpreter }
/>
);
expect(
screen.getByText( /Customize your custom theme/i )
).toBeInTheDocument();
} );
} );