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();
+ } );
} );