Admin Menu: Adding tests to test Jetpack admin menu 'current' menu it…

…em class and menu order (#39374)

projects/plugins/jetpack/_inc/client/test/main.js

@@ -17,3 +17,54 @@ describe( 'Main', () => {
 		expect( component.find( 'Main' ) ).toBeDefined();
 	} );
 } );
+
+describe( 'Admin Menu Functionality', () => {
+	// Mock the Jetpack submenu.
+	const mockMenuHtml = `
+	<li id="toplevel_page_jetpack">
+	<ul class="wp-submenu">
+		<li class="wp-submenu-head" aria-hidden="true">Jetpack</li>
+		<li><a href="https://jetpack.com/redirect/?source=cloud-activity-log-wp-menu">Activity Log</a></li>
+		<li><a href="/wp-admin/admin.php?page=jetpack#/settings">Settings</a></li>
+		<li class="current"><a href="/wp-admin/admin.php?page=jetpack#/dashboard">Dashboard</a></li>
+	</ul>
+	</li>
+	`;
+
+	beforeEach( () => {
+		document.body.innerHTML = mockMenuHtml;
+	} );
+
+	/**
+	 * Utility function to simulate a click on a menu item
+	 * @param {Element} menuItem - The menu item to click
+	 */
+	function simulateClick( menuItem ) {
+		const menuItems = document.querySelectorAll( '.wp-submenu li:not(.wp-submenu-head)' );
+		menuItems.forEach( item => item.classList.remove( 'current' ) );
+		menuItem.parentElement.classList.add( 'current' );
+	}
+
+	it( 'should apply the "current" class to the clicked menu item', () => {
+		const myMenu = document.querySelector( '#toplevel_page_jetpack' );
+		const subMenu = myMenu.querySelector( '.wp-submenu' );
+
+		const dashboardItem = subMenu.querySelector(
+			'a[href="/wp-admin/admin.php?page=jetpack#/dashboard"]'
+		);
+		const settingsItem = subMenu.querySelector(
+			'a[href="/wp-admin/admin.php?page=jetpack#/settings"]'
+		);
+
+		// For test purposes we'll give 'Dashboard' the 'current' class
+		expect( dashboardItem.parentElement ).toHaveClass( 'current' );
+		expect( settingsItem.parentElement ).not.toHaveClass( 'current' );
+
+		// Simulate clicking on the 'Settings' menu item
+		simulateClick( settingsItem );
+
+		// After clicking, 'Settings' should have the 'current' class and 'Dashboard' should not
+		expect( settingsItem.parentElement ).toHaveClass( 'current' );
+		expect( dashboardItem.parentElement ).not.toHaveClass( 'current' );
+	} );
+} );

projects/plugins/jetpack/changelog/add-jetpack-admin-menu-tests

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Admin menu: Adding tests to check for 'current' class when menu item selected.

projects/plugins/jetpack/tests/php/general/test_jetpack-admin-menu.php

@@ -0,0 +1,106 @@
+<?php
+/**
+ * @package automattic/jetpack
+ */
+
+use Automattic\Jetpack\Backup\V0004\Jetpack_Backup;
+use Automattic\Jetpack\Stats_Admin\Dashboard;
+use Automattic\Jetpack\VideoPress\Admin_UI;
+use Automattic\Jetpack\WordAds\Dashboard as WordAdsDashboard;
+/**
+ * Class WP_Test_Jetpack_Admin_Menu
+ */
+class WP_Test_Jetpack_Admin_Menu extends WP_UnitTestCase {
+
+	/**
+	 * Set up.
+	 */
+	public function set_up() {
+		parent::set_up();
+		// Create a user and set it up as current.
+		$user_id = self::factory()->user->create_and_get(
+			array(
+				'role' => 'administrator',
+			)
+		);
+		wp_set_current_user( $user_id->ID );
+
+		// Mock a connection
+		Jetpack_Options::update_option( 'master_user', $user_id->ID );
+		Jetpack_Options::update_option( 'id', 1234 );
+		Jetpack_Options::update_option( 'blog_token', 'asdasd.123123' );
+		Jetpack_Options::update_option( 'user_tokens', array( $user_id->ID => "honey.badger.$user_id->ID" ) );
+	}
+
+	/**
+	 * Tear down.
+	 */
+	public function tear_down() {
+		parent::tear_down();
+		Jetpack_Options::delete_option( 'master_user' );
+		Jetpack_Options::delete_option( 'id' );
+		Jetpack_Options::delete_option( 'blog_token' );
+		Jetpack_Options::delete_option( 'user_tokens' );
+	}
+
+	/**
+	 * Test the order of many of the Jetpack admin menu items.
+	 *
+	 * @see https://github.com/Automattic/jetpack-roadmap/issues/856#issuecomment-2308599496
+	 */
+	public function test_jetpack_admin_menu_order() {
+		global $submenu;
+
+		require_once JETPACK__PLUGIN_DIR . '_inc/lib/admin-pages/class.jetpack-react-page.php';
+		$jetpack_react = new Jetpack_React_Page();
+		$jetpack_react->jetpack_add_dashboard_sub_nav_item();
+		$jetpack_react->jetpack_add_settings_sub_nav_item();
+
+		$jetpack_stats = new Dashboard();
+		$jetpack_stats::init();
+
+		$jetpack_video = new Admin_UI();
+		$jetpack_video->init();
+
+		$jetpack_wordads = new WordAdsDashboard();
+		$jetpack_wordads->init_hooks();
+
+		$jetpack_backup = new Jetpack_Backup();
+		$jetpack_backup->initialize();
+
+		do_action( 'admin_menu' );
+
+		if ( ! isset( $submenu['jetpack'] ) ) {
+			return;
+		}
+
+		$submenu_names = array_column( $submenu['jetpack'], 3 );
+		// Capture the positions of these submenu items.
+		$stats_submenu_position      = array_search( 'Stats', $submenu_names, true );
+		$videopress_submenu_position = array_search( 'Jetpack VideoPress', $submenu_names, true );
+		$backup_submenu_position     = array_search( 'Jetpack VaultPress Backup', $submenu_names, true );
+		$search_submenu_position     = array_search( 'Jetpack Search', $submenu_names, true );
+		$wordads_submenu_position    = array_search( 'WordAds Settings', $submenu_names, true );
+		$settings_submenu_position   = array_search( 'Settings', $submenu_names, true );
+		$dashboard_submenu_position  = array_search( 'Dashboard', $submenu_names, true );
+
+		// Some sites - multisites / WoA for example - may not have all of the menu items.
+		if ( in_array( 'My Jetpack', $submenu_names, true ) ) {
+			$my_jetpack_submenu_position = array_search( 'My Jetpack', $submenu_names, true );
+			$this->assertTrue( $my_jetpack_submenu_position < $stats_submenu_position, 'My Jetpack should be above Stats in the submenu order.' );
+		}
+
+		if ( in_array( 'Activity Log', $submenu_names, true ) ) {
+			$activity_log_submenu_position = array_search( 'Activity Log', $submenu_names, true );
+			$this->assertTrue( $activity_log_submenu_position < $search_submenu_position, 'Activity Log should be above Search in the submenu order.' );
+			$this->assertTrue( $backup_submenu_position < $activity_log_submenu_position, 'Jetpack VaultPress Backup should be above Activity Log in the submenu order.' );
+		}
+
+		$this->assertTrue( $stats_submenu_position < $videopress_submenu_position, 'Stats should be above VideoPress in the submenu order.' );
+		$this->assertTrue( $videopress_submenu_position < $backup_submenu_position, 'Jetpack VideoPress should be above Jetpack VaultPress Backup in the submenu order.' );
+		$this->assertTrue( $backup_submenu_position < $search_submenu_position, 'Jetpack VaultPress Backup should be above Search in the submenu order.' );
+		$this->assertTrue( $search_submenu_position < $wordads_submenu_position, 'Search should be above WordAds in the submenu order.' );
+		$this->assertTrue( $wordads_submenu_position < $settings_submenu_position, 'WordAds should be above Settings in the submenu order.' );
+		$this->assertTrue( $settings_submenu_position < $dashboard_submenu_position, 'Settings should be above Dashboard in the submenu order.' );
+	}
+}