diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx index f4b3dc14c25..4a533f5b9d3 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.test.tsx @@ -8,12 +8,21 @@ import userEvent from '@testing-library/user-event'; * Internal dependencies */ import { useCampaigns } from './useCampaigns'; +import { useNewCampaignTypes } from '~/marketing/hooks'; import { Campaigns } from './Campaigns'; jest.mock( './useCampaigns', () => ( { useCampaigns: jest.fn(), } ) ); +jest.mock( '~/marketing/hooks', () => ( { + useNewCampaignTypes: jest.fn(), +} ) ); + +jest.mock( './CreateNewCampaignModal', () => ( { + CreateNewCampaignModal: () =>
Create a new campaign
, +} ) ); + /** * Create a test campaign data object. */ @@ -38,6 +47,9 @@ describe( 'Campaigns component', () => { data: undefined, meta: undefined, } ); + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + loading: true, + } ); const { container } = render( ); const tablePlaceholder = container.querySelector( @@ -54,6 +66,9 @@ describe( 'Campaigns component', () => { data: undefined, meta: undefined, } ); + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + loading: false, + } ); render( ); @@ -71,6 +86,9 @@ describe( 'Campaigns component', () => { total: 0, }, } ); + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + loading: false, + } ); render( ); @@ -88,6 +106,9 @@ describe( 'Campaigns component', () => { total: 1, }, } ); + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + loading: false, + } ); const { container } = render( ); @@ -114,6 +135,9 @@ describe( 'Campaigns component', () => { total: 6, }, } ); + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + loading: false, + } ); render( ); @@ -131,4 +155,30 @@ describe( 'Campaigns component', () => { // Campaign info in the second page. expect( screen.getByText( 'Campaign 6' ) ).toBeInTheDocument(); } ); + + it( 'renders a "Create new campaign" button in the card header, and upon clicking, displays the "Create a new campaign" modal', async () => { + ( useCampaigns as jest.Mock ).mockReturnValue( { + loading: false, + error: undefined, + data: [ createTestCampaign( '1' ) ], + meta: { + total: 1, + }, + } ); + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + loading: false, + } ); + + render( ); + + expect( screen.getByText( 'Create new campaign' ) ).toBeInTheDocument(); + + await userEvent.click( + screen.getByRole( 'button', { name: 'Create new campaign' } ) + ); + + expect( + screen.getByText( 'Create a new campaign' ) + ).toBeInTheDocument(); + } ); } );