Internal: Test home page [TMZ-895]

.wp-env.json

@@ -1,6 +1,6 @@
 {
     "core": null,
-    "phpVersion": "8.1",
+    "phpVersion": "8.0",
     "plugins": [
         "https://downloads.wordpress.org/plugin/elementor.latest-stable.zip"
     ],
@@ -15,7 +15,6 @@
         "SCRIPT_DEBUG": false,
         "WP_DEBUG": true,
         "WP_DEBUG_LOG": true,
-        "WP_DEBUG_DISPLAY": false,
-        "HELLO_THEME_VERSION": "3.4.4"
+        "WP_DEBUG_DISPLAY": false
     }
 }

modules/admin-home/rest/admin-config.php

@@ -6,6 +6,7 @@
 	exit; // Exit if accessed directly.
 }
 
+use Elementor\Core\DocumentTypes\Page;
 use HelloTheme\Includes\Utils;
 use WP_REST_Server;
 
@@ -24,9 +25,11 @@ public function register_routes() {
 	}
 
 	public function get_admin_config() {
+		$elementor_page_id = Utils::is_elementor_active() ? $this->ensure_elementor_page_exists() : null;
+
 		$config = $this->get_welcome_box_config( [] );
 
-		$config = $this->get_site_parts( $config );
+		$config = $this->get_site_parts( $config, $elementor_page_id );
 
 		$config = $this->get_resources( $config );
 
@@ -40,6 +43,57 @@ public function get_admin_config() {
 		return rest_ensure_response( [ 'config' => $config ] );
 	}
 
+	private function ensure_elementor_page_exists(): int {
+		$existing_page = \Elementor\Core\DocumentTypes\Page::get_elementor_page();
+
+		if ( $existing_page ) {
+			return $existing_page->ID;
+		}
+
+		$page_data = [
+			'post_title'    => 'Hello Theme page',
+			'post_content'  => '',
+			'post_status'   => 'draft',
+			'post_type'     => 'page',
+			'meta_input'    => [
+				'_elementor_edit_mode' => 'builder',
+				'_elementor_template_type' => 'wp-page',
+			],
+		];
+
+		$page_id = wp_insert_post( $page_data );
+
+		if ( is_wp_error( $page_id ) ) {
+			throw new \RuntimeException( 'Failed to create Elementor page: ' . esc_html( $page_id->get_error_message() ) );
+		}
+
+		if ( ! $page_id ) {
+			throw new \RuntimeException( 'Page creation returned invalid ID' );
+		}
+
+		wp_update_post([
+			'ID' => $page_id,
+			'post_title' => 'Hello Theme #' . $page_id,
+		]);
+		return $page_id;
+	}
+
+	private function get_elementor_editor_url( ?int $page_id, string $active_tab ): string {
+		$active_kit_id = Utils::elementor()->kits_manager->get_active_id();
+
+		$url = add_query_arg(
+			[
+				'post' => $page_id,
+				'action' => 'elementor',
+				'active-tab' => $active_tab,
+				'active-document' => $active_kit_id,
+			],
+			admin_url( 'post.php' )
+		);
+
+		return $url . '#e:run:panel/global/open';
+	}
+
 	public function get_resources( array $config ) {
 		$config['resourcesData'] = [
 			'community' => [
@@ -92,7 +146,7 @@ public function get_resources( array $config ) {
 		return $config;
 	}
 
-	public function get_site_parts( array $config ): array {
+	public function get_site_parts( array $config, ?int $elementor_page_id = null ): array {
 		$last_five_pages_query = new \WP_Query(
 			[
 				'posts_per_page'         => 5,
@@ -136,7 +190,7 @@ public function get_site_parts( array $config ): array {
 
 		$common_parts = [];
 
-		$customizer_header_footer_url = $this->get_open_homepage_with_tab( '', [ 'autofocus[section]' => 'hello-options' ] );
+		$customizer_header_footer_url = $this->get_open_homepage_with_tab( $elementor_page_id, '', null, [ 'autofocus[section]' => 'hello-options' ] );
 
 		$header_part  = [
 			'id'      => 'header',
@@ -161,8 +215,8 @@ public function get_site_parts( array $config ): array {
 					'icon'  => 'ThemeBuilderIcon',
 				],
 			];
-			$header_part['link'] = $this->get_open_homepage_with_tab( 'hello-settings-header' );
-			$footer_part['link'] = $this->get_open_homepage_with_tab( 'hello-settings-footer' );
+			$header_part['link'] = $this->get_open_homepage_with_tab( $elementor_page_id, 'hello-settings-header' );
+			$footer_part['link'] = $this->get_open_homepage_with_tab( $elementor_page_id, 'hello-settings-footer' );
 
 			if ( Utils::has_pro() ) {
 				$header_part = $this->update_pro_part( $header_part, 'header' );
@@ -184,7 +238,7 @@ public function get_site_parts( array $config ): array {
 
 		$config['siteParts'] = apply_filters( 'hello-plus-theme/template-parts', $site_parts );
 
-		return $this->get_quicklinks( $config );
+		return $this->get_quicklinks( $config, $elementor_page_id );
 	}
 
 	private function update_pro_part( array $part, string $location ): array {
@@ -197,7 +251,7 @@ private function update_pro_part( array $part, string $location ): array {
 			$edit_link = get_edit_post_link( $first_document_id, 'admin' ) . '&action=elementor';
 
 		} else {
-			$edit_link = $this->get_open_homepage_with_tab( 'hello-settings-' . $location );
+			$edit_link = $this->get_open_homepage_with_tab( null, 'hello-settings-' . $location );
 		}
 		$part['sublinks'] = [
 			[
@@ -213,44 +267,50 @@ private function update_pro_part( array $part, string $location ): array {
 		return $part;
 	}
 
-	public function get_open_homepage_with_tab( $action, $customizer_fallback_args = [] ): string {
-		if ( Utils::is_elementor_active() && method_exists( \Elementor\Core\DocumentTypes\Page::class, 'get_site_settings_url_config' ) ) {
-			return \Elementor\Core\DocumentTypes\Page::get_site_settings_url_config( $action )['url'];
+	public function get_open_homepage_with_tab( ?int $page_id, $action, $section = null, $customizer_fallback_args = [] ): string {
+		if ( Utils::is_elementor_active() ) {
+			$url = $page_id ? $this->get_elementor_editor_url( $page_id, $action ) : Page::get_site_settings_url_config( $action )['url'];
+
+			if ( $section ) {
+				$url = add_query_arg( 'active-section', $section, $url );
+			}
+
+			return $url;
 		}
 
 		return add_query_arg( $customizer_fallback_args, self_admin_url( 'customize.php' ) );
 	}
 
-	public function get_quicklinks( $config ): array {
+	public function get_quicklinks( $config, ?int $elementor_page_id = null ): array {
 		$config['quickLinks'] = [
 			'site_name'    => [
 				'title' => __( 'Site Name', 'hello-elementor' ),
-				'link'  => $this->get_open_homepage_with_tab( 'settings-site-identity', [ 'autofocus[section]' => 'title_tagline' ] ),
+				'link'  => $this->get_open_homepage_with_tab( $elementor_page_id, 'settings-site-identity', null, [ 'autofocus[section]' => 'title_tagline' ] ),
 				'icon'  => 'TextIcon',
 
 			],
 			'site_logo'    => [
 				'title' => __( 'Site Logo', 'hello-elementor' ),
-				'link'  => $this->get_open_homepage_with_tab( 'settings-site-identity', [ 'autofocus[section]' => 'title_tagline' ] ),
+				'link'  => $this->get_open_homepage_with_tab( $elementor_page_id, 'settings-site-identity', null, [ 'autofocus[section]' => 'title_tagline' ] ),
 				'icon'  => 'PhotoIcon',
 			],
 			'site_favicon' => [
 				'title' => __( 'Site Favicon', 'hello-elementor' ),
-				'link'  => $this->get_open_homepage_with_tab( 'settings-site-identity', [ 'autofocus[section]' => 'title_tagline' ] ),
+				'link'  => $this->get_open_homepage_with_tab( $elementor_page_id, 'settings-site-identity', null, [ 'autofocus[section]' => 'title_tagline' ] ),
 				'icon'  => 'AppsIcon',
 			],
 		];
 
 		if ( Utils::is_elementor_active() ) {
 			$config['quickLinks']['site_colors'] = [
 				'title' => __( 'Site Colors', 'hello-elementor' ),
-				'link'  => $this->get_open_homepage_with_tab( 'global-colors' ),
+				'link'  => $this->get_open_homepage_with_tab( $elementor_page_id, 'global-colors' ),
 				'icon'  => 'BrushIcon',
 			];
 
 			$config['quickLinks']['site_fonts'] = [
 				'title' => __( 'Site Fonts', 'hello-elementor' ),
-				'link'  => $this->get_open_homepage_with_tab( 'global-typography' ),
+				'link'  => $this->get_open_homepage_with_tab( $elementor_page_id, 'global-typography' ),
 				'icon'  => 'UnderlineIcon',
 			];
 		}

tests/playwright/tests/admin/hello-theme-admin-home.test.ts

@@ -0,0 +1,77 @@
+import { parallelTest as test } from '../../parallelTest.ts';
+import { expect } from '@playwright/test';
+
+test.describe( 'Hello Theme Admin Home Page', () => {
+	test.beforeEach( async ( { page } ) => {
+		await page.goto( '/wp-admin/admin.php?page=hello-elementor' );
+	} );
+
+	test( 'should display Welcome to Hello Theme message and take screenshot', async ( { page } ) => {
+		const welcomeSection = page.locator( 'text=Go Pro, Go Limitless' ).locator( '..' ).locator( '..' );
+		await expect.soft( welcomeSection ).toHaveScreenshot( 'welcome-section.png' );
+	} );
+
+	test( 'should display Quick Links section', async ( { page } ) => {
+		const quickLinksHeading = page.locator( 'h6:has-text("Quick Links")' );
+		await expect( quickLinksHeading ).toBeVisible();
+		await expect( quickLinksHeading ).toContainText( 'Quick Links' );
+		const quickLinksSection = page.locator( 'text=Quick Links' ).locator( '..' ).locator( '..' );
+		await expect( quickLinksSection ).toContainText( 'These quick actions will get your site airborne in a flash.' );
+		const expectedQuickLinks = [
+			'Site Name',
+			'Site Logo',
+			'Site Favicon',
+			'Site Colors',
+			'Site Fonts',
+		];
+		for ( const linkText of expectedQuickLinks ) {
+			const linkElement = page.locator( `h6:has-text("${ linkText }")` );
+			await expect( linkElement ).toBeVisible();
+		}
+	} );
+
+	test( 'should navigate to correct pages from Quick Links', async ( { page } ) => {
+		const quickLinksTests = [
+			{
+				linkText: 'Site Name',
+				expectedUrlPattern: /post\.php\?post=\d+&action=elementor.*active-tab=settings-site-identity/,
+				expectedPageSection: '.elementor-control-section_settings-site-identity',
+			},
+			{
+				linkText: 'Site Logo',
+				expectedUrlPattern: /post\.php\?post=\d+&action=elementor.*active-tab=settings-site-identity/,
+				expectedPageSection: '.elementor-control-section_settings-site-identity',
+			},
+			{
+				linkText: 'Site Favicon',
+				expectedUrlPattern: /post\.php\?post=\d+&action=elementor.*active-tab=settings-site-identity/,
+				expectedPageSection: '.elementor-control-section_settings-site-identity',
+			},
+			{
+				linkText: 'Site Colors',
+				expectedUrlPattern: /post\.php\?post=\d+&action=elementor.*active-tab=global-colors/,
+				expectedPageSection: '.elementor-control-section_global_colors',
+			},
+			{
+				linkText: 'Site Fonts',
+				expectedUrlPattern: /post\.php\?post=\d+&action=elementor.*active-tab=global-typography/,
+				expectedPageSection: '.elementor-control-section_text_style',
+			},
+		];
+		for ( const linkTest of quickLinksTests ) {
+			await page.goto( '/wp-admin/admin.php?page=hello-elementor' );
+			const linkElement = page.locator( `h6:has-text("${ linkTest.linkText }") a` );
+			await expect( linkElement ).toBeVisible();
+
+			await Promise.all( [
+				page.waitForURL( linkTest.expectedUrlPattern ),
+				linkElement.click(),
+			] );
+
+			expect( page.url() ).toMatch( linkTest.expectedUrlPattern );
+			await page.waitForSelector( '#elementor-kit-panel' );
+			const location = page.locator( linkTest.expectedPageSection );
+			await expect( location ).toBeVisible();
+		}
+	} );
+} );

tests/wp-env/config/setup.sh

@@ -1,56 +1,10 @@
 #!/bin/bash
 set -eox pipefail
 
-echo "=== SETUP.SH DEBUG ==="
-echo "Current working directory:"
-pwd
-echo ""
-
-echo "WordPress themes directory contents:"
-ls -la /var/www/html/wp-content/themes/ || echo "Could not list themes directory"
-echo ""
-
-echo "Checking for hello-elementor theme specifically:"
-if [ -d "/var/www/html/wp-content/themes/hello-elementor" ]; then
-    echo "✅ hello-elementor directory found"
-    echo "Contents:"
-    ls -la /var/www/html/wp-content/themes/hello-elementor/ | head -10
-    echo ""
-
-    echo "Checking for style.css:"
-    if [ -f "/var/www/html/wp-content/themes/hello-elementor/style.css" ]; then
-        echo "✅ style.css found"
-        echo "Theme header:"
-        head -10 /var/www/html/wp-content/themes/hello-elementor/style.css
-    else
-        echo "❌ style.css missing"
-    fi
-else
-    echo "❌ hello-elementor directory not found"
-    echo "Available theme directories:"
-    ls -la /var/www/html/wp-content/themes/
-fi
-echo ""
-
 wp plugin activate elementor
-echo "Available themes (via WP-CLI):"
-wp theme list
-echo ""
-
-echo "Attempting to activate hello-theme theme..."
-wp theme activate hello-theme || {
-    echo "❌ Failed to activate hello-theme, trying hello-elementor..."
-    wp theme activate hello-elementor || {
-        echo "❌ Both activation attempts failed. Final theme list:"
-        wp theme list
-        echo "❌ Available theme directories in WordPress:"
-        ls -la /var/www/html/wp-content/themes/
-        echo "❌ Theme activation completely failed"
-        exit 1
-    }
-}
+wp theme activate hello-theme
 
-WP_CLI_CONFIG_PATH=hello-elementor-config/wp-cli.yml wp rewrite structure '/%postname%/' --hard
+WP_CLI_CONFIG_PATH=hello-theme-config/wp-cli.yml wp rewrite structure '/%postname%/' --hard
 
 # Remove the Guttenberg welcome guide popup
 wp user meta add admin wp_persisted_preferences 'a:2:{s:14:\"core/edit-post\";a:2:{b:1;s:12:\"welcomeGuide\";b:0;}}'
@@ -63,7 +17,8 @@ wp option set elementor_onboarded true
 
 # Add user meta so the announcement popup will not be displayed - ED-9723
 for id in $(wp user list --field=ID)
-do wp user meta add "$id" "announcements_user_counter" 999
+    do wp user meta add "$id" "announcements_user_counter" 999
+    wp user meta add "$id" "elementor_onboarded" "a:1:{s:27:\"ai-get-started-announcement\";b:1;}"
 done
 
 wp cache flush