Social: Add admin page unit tests (#41951)

* Add unit tests for the social admin page

* Add structural unit tests to the admin page

* changelog

* Flip feature flag logic

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13539999216

Upstream-Ref: Automattic/jetpack@8af3587

Author: gmjuhasz

CHANGELOG.md

@@ -12,6 +12,9 @@ This is an alpha version! The changes listed here are not final.
 ### Security
 - Social: Moved Mastodon input form to start
 
+### Added
+- Added unit tests for the admin page
+
 ### Changed
 - Social | Improve connect URL generation
 

src/components/admin-page/test/page-header.test.jsx

@@ -0,0 +1,47 @@
+// eslint-disable-next-line import/order -- This is a test file and we need to import the mocks first
+import { mockStore } from '../../../utils/test-mocks.js';
+import { isJetpackSelfHostedSite } from '@automattic/jetpack-script-data';
+import { render, screen } from '@testing-library/react';
+import { hasSocialPaidFeatures } from '../../../utils';
+import AdminPageHeader from '../page-header';
+
+describe( 'AdminPageHeader', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockStore();
+	} );
+
+	it( 'should show license text when no paid features and is Jetpack site', () => {
+		hasSocialPaidFeatures.mockReturnValue( false );
+		isJetpackSelfHostedSite.mockReturnValue( true );
+
+		render( <AdminPageHeader /> );
+		expect(
+			screen.getByText( /Already have an existing plan or license key\?/i )
+		).toBeInTheDocument();
+		expect( screen.getByRole( 'link' ) ).toHaveAttribute(
+			'href',
+			'https://example.com/add-license'
+		);
+	} );
+
+	it( 'should not show license text when has paid features', () => {
+		hasSocialPaidFeatures.mockReturnValue( true );
+		isJetpackSelfHostedSite.mockReturnValue( true );
+
+		render( <AdminPageHeader /> );
+		expect(
+			screen.queryByText( /Already have an existing plan or license key\?/i )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should not show license text when not a Jetpack site', () => {
+		hasSocialPaidFeatures.mockReturnValue( false );
+		isJetpackSelfHostedSite.mockReturnValue( false );
+
+		render( <AdminPageHeader /> );
+		expect(
+			screen.queryByText( /Already have an existing plan or license key\?/i )
+		).not.toBeInTheDocument();
+	} );
+} );

src/components/admin-page/test/social-admin-page.test.jsx

@@ -0,0 +1,140 @@
+// eslint-disable-next-line import/order -- This is a test file and we need to import the mocks first
+import { mockStore } from '../../../utils/test-mocks';
+import { useConnection } from '@automattic/jetpack-connection';
+import { isJetpackSelfHostedSite, siteHasFeature } from '@automattic/jetpack-script-data';
+import { render, screen } from '@testing-library/react';
+import { SocialAdminPage } from '../';
+import { getSocialScriptData } from '../../../utils';
+
+// Mock child components to simplify testing - We only test the SocialAdminPage component here
+jest.mock( '../connection-screen', () => () => <div data-testid="connection-screen" /> );
+jest.mock( '../header', () => () => <div data-testid="header" /> );
+jest.mock( '../info-section', () => () => <div data-testid="info-section" /> );
+jest.mock( '../page-header', () => () => <div data-testid="page-header" /> );
+jest.mock( '../pricing-page', () => ( { onDismiss } ) => (
+	<button data-testid="pricing-page" onClick={ onDismiss } onKeyDown={ onDismiss } />
+) );
+jest.mock( '../support-section', () => () => <div data-testid="support-section" /> );
+jest.mock( '../toggles/social-image-generator-toggle', () => () => (
+	<div data-testid="social-image-generator-toggle" />
+) );
+jest.mock( '../toggles/social-module-toggle', () => () => (
+	<div data-testid="social-module-toggle" />
+) );
+jest.mock( '../toggles/social-notes-toggle', () => () => (
+	<div data-testid="social-notes-toggle" />
+) );
+jest.mock( '../toggles/utm-toggle', () => () => <div data-testid="utm-toggle" /> );
+
+describe( 'SocialAdminPage', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockStore();
+		useConnection.mockReturnValue( {
+			isUserConnected: true,
+			isRegistered: true,
+		} );
+		isJetpackSelfHostedSite.mockReturnValue( true );
+		siteHasFeature.mockReturnValue( true );
+		getSocialScriptData.mockReturnValue( {
+			plugin_info: {
+				social: { version: '1.0.0' },
+				jetpack: { version: '1.0.0' },
+			},
+		} );
+	} );
+
+	describe( 'Page rendering', () => {
+		it( 'should render connection screen when not connected', () => {
+			useConnection.mockReturnValue( {
+				isUserConnected: false,
+				isRegistered: false,
+			} );
+
+			render( <SocialAdminPage /> );
+			expect( screen.getByTestId( 'connection-screen' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should render main admin page when connected', () => {
+			render( <SocialAdminPage /> );
+
+			expect( screen.getByTestId( 'page-header' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'header' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'info-section' ) ).toBeInTheDocument();
+			expect( screen.getByTestId( 'support-section' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should render pricing page when showPricingPage is true and no paid features', () => {
+			mockStore( {
+				getSocialSettings: () => ( { showPricingPage: true } ),
+			} );
+
+			render( <SocialAdminPage /> );
+			expect( screen.getByTestId( 'pricing-page' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Toggle visibility', () => {
+		describe( 'UTM toggle', () => {
+			it( 'should show when module is enabled', () => {
+				render( <SocialAdminPage /> );
+				expect( screen.getByTestId( 'utm-toggle' ) ).toBeInTheDocument();
+			} );
+
+			it( 'should not show when module is disabled', () => {
+				mockStore( {
+					getSocialModuleSettings: () => ( { publicize: false } ),
+				} );
+				render( <SocialAdminPage /> );
+				expect( screen.queryByTestId( 'utm-toggle' ) ).not.toBeInTheDocument();
+			} );
+		} );
+
+		describe( 'Social Notes toggle', () => {
+			it( 'should show when plugin is active and module is enabled', () => {
+				render( <SocialAdminPage /> );
+				expect( screen.getByTestId( 'social-notes-toggle' ) ).toBeInTheDocument();
+			} );
+
+			it( 'should not show when plugin is not active', () => {
+				getSocialScriptData.mockReturnValue( {
+					plugin_info: {
+						social: { version: null },
+						jetpack: { version: '1.0.0' },
+					},
+				} );
+				render( <SocialAdminPage /> );
+				expect( screen.queryByTestId( 'social-notes-toggle' ) ).not.toBeInTheDocument();
+			} );
+
+			it( 'should not show when module is disabled', () => {
+				mockStore( {
+					getSocialModuleSettings: () => ( { publicize: false } ),
+				} );
+				render( <SocialAdminPage /> );
+				expect( screen.queryByTestId( 'social-notes-toggle' ) ).not.toBeInTheDocument();
+			} );
+		} );
+
+		describe( 'Social Image Generator toggle', () => {
+			it( 'should show when feature is available and module is enabled', () => {
+				render( <SocialAdminPage /> );
+				expect( screen.getByTestId( 'social-image-generator-toggle' ) ).toBeInTheDocument();
+			} );
+
+			it( 'should not show when feature is not available', () => {
+				siteHasFeature.mockReturnValue( false );
+				render( <SocialAdminPage /> );
+				expect( screen.queryByTestId( 'social-image-generator-toggle' ) ).not.toBeInTheDocument();
+			} );
+
+			it( 'should not show when module is disabled', () => {
+				mockStore( {
+					getSocialModuleSettings: () => ( { publicize: false } ),
+				} );
+				render( <SocialAdminPage /> );
+				expect( screen.queryByTestId( 'social-image-generator-toggle' ) ).not.toBeInTheDocument();
+			} );
+		} );
+	} );
+} );

src/components/admin-page/test/social-module-toggle.test.jsx

@@ -0,0 +1,86 @@
+// eslint-disable-next-line import/order -- This is a test file and we need to import the mocks first
+import { mockStore } from '../../../utils/test-mocks';
+import { getScriptData } from '@automattic/jetpack-script-data';
+import { render, screen } from '@testing-library/react';
+import { useDispatch } from '@wordpress/data';
+import { getSocialScriptData, hasSocialPaidFeatures } from '../../../utils';
+import SocialModuleToggle from '../toggles/social-module-toggle';
+
+jest.mock( '../../connection-management', () => () => <div data-testid="connection-management" /> );
+
+describe( 'SocialModuleToggle', () => {
+	const mockUpdateSettings = jest.fn();
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+		mockStore();
+
+		// Mock dispatch to capture updateSocialModuleSettings calls
+		useDispatch.mockReturnValue( {
+			updateSocialModuleSettings: mockUpdateSettings,
+		} );
+
+		// Default script data mocks
+		getScriptData.mockReturnValue( {
+			site: {
+				wpcom: { blog_id: '123' },
+			},
+		} );
+
+		getSocialScriptData.mockReturnValue( {
+			urls: { connectionsManagementPage: 'https://example.com/connections' },
+			feature_flags: { useAdminUiV1: true },
+			is_publicize_enabled: true,
+		} );
+	} );
+
+	it( 'should render connection management component by default', () => {
+		render( <SocialModuleToggle /> );
+
+		expect( screen.getByTestId( 'connection-management' ) ).toBeInTheDocument();
+		expect( screen.queryByText( /Manage social media connections/i ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render legacy UI when useAdminUiV1 is false', () => {
+		getSocialScriptData.mockReturnValue( {
+			urls: { connectionsManagementPage: 'https://example.com/connections' },
+			feature_flags: { useAdminUiV1: false },
+			is_publicize_enabled: true,
+		} );
+
+		render( <SocialModuleToggle /> );
+
+		expect( screen.getByText( /Manage social media connections/i ) ).toBeInTheDocument();
+		expect( screen.getByText( /Manage social media connections/i ) ).toBeEnabled();
+	} );
+
+	it( 'should render with module disabled', () => {
+		getSocialScriptData.mockReturnValue( {
+			urls: { connectionsManagementPage: 'https://example.com/connections' },
+			feature_flags: { useAdminUiV1: false },
+			is_publicize_enabled: true,
+		} );
+
+		mockStore( {
+			getSocialModuleSettings: () => ( { publicize: false } ),
+		} );
+
+		render( <SocialModuleToggle /> );
+
+		expect( screen.getByText( /Manage social media connections/i ) ).toBeInTheDocument();
+		expect( screen.getByText( /Manage social media connections/i ) ).toBeDisabled();
+	} );
+
+	it( 'should show upgrade trigger when no paid features', () => {
+		render( <SocialModuleToggle /> );
+
+		expect( screen.getByText( /Unlock advanced sharing options/i ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not show upgrade trigger with paid features', () => {
+		hasSocialPaidFeatures.mockReturnValue( true );
+		render( <SocialModuleToggle /> );
+
+		expect( screen.queryByText( /Unlock advanced sharing options/i ) ).not.toBeInTheDocument();
+	} );
+} );

src/utils/test-mocks.js

@@ -0,0 +1,79 @@
+import { jest } from '@jest/globals';
+
+// Dependencies mocks
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+	useDispatch: jest.fn(),
+	createSelector: jest.fn(),
+	createReduxStore: jest.fn(),
+	register: jest.fn(),
+	combineReducers: jest.fn( () => () => ( {} ) ),
+	createRegistrySelector: jest.fn( fn => fn ),
+} ) );
+
+jest.mock( '@automattic/jetpack-connection', () => ( {
+	useConnection: jest.fn(),
+} ) );
+
+jest.mock( '@automattic/jetpack-script-data', () => ( {
+	getScriptData: jest.fn(),
+	isWpcomPlatformSite: jest.fn(),
+	isJetpackSelfHostedSite: jest.fn(),
+	isSimpleSite: jest.fn(),
+	siteHasFeature: jest.fn(),
+	getMyJetpackUrl: jest.fn( () => 'https://example.com/add-license' ),
+} ) );
+
+jest.mock( '@wordpress/editor', () => ( {
+	store: 'core/editor',
+} ) );
+
+jest.mock( '@wordpress/core-data', () => ( {
+	store: 'core',
+} ) );
+
+jest.mock( '@automattic/jetpack-components', () => ( {
+	AdminPage: ( { children, header } ) => (
+		<div>
+			{ header }
+			{ children }
+		</div>
+	),
+	AdminSection: ( { children } ) => <div>{ children }</div>,
+	AdminSectionHero: ( { children } ) => <div>{ children }</div>,
+	Container: ( { children } ) => <div>{ children }</div>,
+	Col: ( { children } ) => <div>{ children }</div>,
+	GlobalNotices: () => null,
+	Button: ( { children, disabled, onClick } ) => (
+		<button disabled={ disabled } onClick={ onClick }>
+			{ children }
+		</button>
+	),
+	Text: ( { children } ) => <div>{ children }</div>,
+	ContextualUpgradeTrigger: ( { description } ) => <div>{ description }</div>,
+	getRedirectUrl: jest.fn(),
+	useBreakpointMatch: jest.fn().mockReturnValue( [ false ] ),
+} ) );
+
+jest.mock( './', () => ( {
+	...jest.requireActual( './' ),
+	getSocialScriptData: jest.fn( () => ( {
+		plugin_info: {
+			social: { version: '1.0.0' },
+			jetpack: { version: '1.0.0' },
+		},
+	} ) ),
+	hasSocialPaidFeatures: jest.fn( () => false ),
+} ) );
+
+// Store
+const defaultStore = {
+	getSocialModuleSettings: () => ( { publicize: true } ),
+	getSocialSettings: () => ( { showPricingPage: false } ),
+	isSavingSocialModuleSettings: () => false,
+};
+
+export const mockStore = ( overrides = {} ) => {
+	const store = { ...defaultStore, ...overrides };
+	jest.requireMock( '@wordpress/data' ).useSelect.mockImplementation( fn => fn( () => store ) );
+};