From 3e620c41c6cf44a3c9f4f800c51418685a3114b1 Mon Sep 17 00:00:00 2001 From: Gan Eng Chin Date: Sat, 4 Mar 2023 01:02:46 +0800 Subject: [PATCH] Add tests for CreateNewCampaignModal. --- .../CreateNewCampaignModal.test.tsx | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.test.tsx diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.test.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.test.tsx new file mode 100644 index 00000000000..ae87287a006 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/CreateNewCampaignModal/CreateNewCampaignModal.test.tsx @@ -0,0 +1,151 @@ +/** + * External dependencies + */ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +/** + * Internal dependencies + */ +import { + useNewCampaignTypes, + useRecommendedChannels, + useRegisteredChannels, +} from '~/marketing/hooks'; +import { CreateNewCampaignModal } from './CreateNewCampaignModal'; + +jest.mock( '@woocommerce/components', () => { + const originalModule = jest.requireActual( '@woocommerce/components' ); + + return { + __esModule: true, + ...originalModule, + Spinner: () =>
Spinner
, + }; +} ); + +jest.mock( '~/marketing/hooks', () => ( { + useNewCampaignTypes: jest.fn(), + useRecommendedChannels: jest.fn(), + useRegisteredChannels: jest.fn(), +} ) ); + +describe( 'CreateNewCampaignModal component', () => { + it( 'renders new campaign types with recommended channels', async () => { + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + data: [ + { + id: 'google-ads', + icon: 'https://woocommerce.com/wp-content/uploads/2021/06/woo-GoogleListingsAds-jworee.png', + name: 'Google Ads', + description: + 'Boost your product listings with a campaign that is automatically optimized to meet your goals.', + createUrl: + 'https://wc1.test/wp-admin/admin.php?page=wc-admin&path=/google/dashboard&subpath=/campaigns/create', + channelName: 'Google Listings and Ads', + channelSlug: 'google-listings-and-ads', + }, + ], + } ); + ( useRecommendedChannels as jest.Mock ).mockReturnValue( { + data: [ + { + title: 'Pinterest for WooCommerce', + description: + 'Grow your business on Pinterest! Use this official plugin to allow shoppers to Pin products while browsing your store, track conversions, and advertise on Pinterest.', + url: 'https://woocommerce.com/products/pinterest-for-woocommerce/?utm_source=marketingtab&utm_medium=product&utm_campaign=wcaddons', + direct_install: true, + icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/pinterest.svg', + product: 'pinterest-for-woocommerce', + plugin: 'pinterest-for-woocommerce/pinterest-for-woocommerce.php', + categories: [ 'marketing' ], + subcategories: [ + { slug: 'sales-channels', name: 'Sales channels' }, + ], + tags: [ + { + slug: 'built-by-woocommerce', + name: 'Built by WooCommerce', + }, + ], + show_extension_promotions: true, + }, + { + title: 'Amazon, eBay & Walmart Integration for WooCommerce', + description: + 'Convert Woocommerce into a fully-featured omnichannel commerce platform, leveraging powerful automation and real-time sync to connect your brand with millions of new customers on the world\u2019s largest online marketplaces.', + url: 'https://woocommerce.com/products/amazon-ebay-integration/?utm_source=marketingtab&utm_medium=product&utm_campaign=wcaddons', + direct_install: false, + icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/amazon-ebay.svg', + product: 'amazon-ebay-integration', + plugin: 'woocommerce-amazon-ebay-integration/woocommerce-amazon-ebay-integration.php', + categories: [ 'marketing' ], + subcategories: [ + { slug: 'sales-channels', name: 'Sales channels' }, + ], + tags: [], + }, + ], + } ); + ( useRegisteredChannels as jest.Mock ).mockReturnValue( { + refetch: jest.fn(), + } ); + render( {} } /> ); + + expect( screen.getByText( 'Google Ads' ) ).toBeInTheDocument(); + expect( + screen.getByText( + 'Boost your product listings with a campaign that is automatically optimized to meet your goals.' + ) + ).toBeInTheDocument(); + + // Click button to expand recommended channels section. + await userEvent.click( + screen.getByRole( 'button', { + name: 'Add channels for other campaign types', + } ) + ); + + expect( + screen.getByText( 'Pinterest for WooCommerce' ) + ).toBeInTheDocument(); + + expect( + screen.getByText( + 'Amazon, eBay & Walmart Integration for WooCommerce' + ) + ).toBeInTheDocument(); + } ); + + it( 'does not render recommended channels section when there are no recommended channels', async () => { + ( useNewCampaignTypes as jest.Mock ).mockReturnValue( { + data: [ + { + id: 'google-ads', + icon: 'https://woocommerce.com/wp-content/uploads/2021/06/woo-GoogleListingsAds-jworee.png', + name: 'Google Ads', + description: + 'Boost your product listings with a campaign that is automatically optimized to meet your goals.', + createUrl: + 'https://wc1.test/wp-admin/admin.php?page=wc-admin&path=/google/dashboard&subpath=/campaigns/create', + channelName: 'Google Listings and Ads', + channelSlug: 'google-listings-and-ads', + }, + ], + } ); + ( useRecommendedChannels as jest.Mock ).mockReturnValue( { + data: [], + } ); + ( useRegisteredChannels as jest.Mock ).mockReturnValue( { + refetch: jest.fn(), + } ); + render( {} } /> ); + + // The expand button should not be there. + expect( + screen.queryByRole( 'button', { + name: 'Add channels for other campaign types', + } ) + ).not.toBeInTheDocument(); + } ); +} );