remove tour steps and add tests

Author: ilicfilip

assets/js/tour.js

@@ -37,18 +37,10 @@ const prplDriverObj = prplDriver( {
 		popover, // eslint-disable-line no-unused-vars
 		{ config, state } // eslint-disable-line no-unused-vars
 	) => {
-		const settingsPopover = document.getElementById(
-			'prpl-popover-settings'
-		);
 		const monthlyBadgesPopover = document.getElementById(
 			'prpl-popover-monthly-badges'
 		);
-
-		if ( state.activeIndex === 4 ) {
-			prplTourShowPopover( settingsPopover );
-		}
-
-		if ( state.activeIndex === 7 ) {
+		if ( state.activeIndex === 5 ) {
 			prplTourShowPopover( monthlyBadgesPopover );
 		}
 
@@ -85,25 +77,16 @@ function prplMakePopoverBackdropTransparent( popover ) {
 
 // eslint-disable-next-line no-unused-vars -- This is called on a few buttons.
 function prplStartTour() {
-	const settingsPopover = document.getElementById( 'prpl-popover-settings' );
 	const monthlyBadgesPopover = document.getElementById(
 		'prpl-popover-monthly-badges'
 	);
 	const progressPlannerTourSteps = progressPlannerTour.steps;
-	progressPlannerTourSteps[ 3 ].popover.onNextClick = function () {
-		prplTourShowPopover( settingsPopover );
-		prplDriverObj.moveNext();
-	};
-	progressPlannerTourSteps[ 4 ].popover.onNextClick = function () {
-		prplTourHidePopover( settingsPopover );
-		prplDriverObj.moveNext();
-	};
 
-	progressPlannerTourSteps[ 6 ].popover.onNextClick = function () {
+	progressPlannerTourSteps[ 4 ].popover.onNextClick = function () {
 		prplTourShowPopover( monthlyBadgesPopover );
 		prplDriverObj.moveNext();
 	};
-	progressPlannerTourSteps[ 7 ].popover.onNextClick = function () {
+	progressPlannerTourSteps[ 5 ].popover.onNextClick = function () {
 		prplTourHidePopover( monthlyBadgesPopover );
 		prplDriverObj.moveNext();
 	};

classes/admin/class-tour.php

@@ -53,24 +53,6 @@ public function get_steps() {
 					'align'       => 'center',
 				],
 			],
-			[
-				'element' => '#prpl-popover-settings-trigger',
-				'popover' => [
-					'title'       => \esc_html__( 'Settings', 'progress-planner' ),
-					'description' => \esc_html__( 'With this button you can open the settings. Here you can determine which post types you want to include in your activity score.', 'progress-planner' ),
-					'side'        => 'top',
-					'align'       => 'center',
-				],
-			],
-			[
-				'element' => '#prpl-popover-settings',
-				'popover' => [
-					'title'       => \esc_html__( 'Post types', 'progress-planner' ),
-					'description' => \esc_html__( 'Simply select the post types you want to include in your activity score and hit save.', 'progress-planner' ),
-					'side'        => 'top',
-					'align'       => 'center',
-				],
-			],
 			[
 				'element' => '.prpl-widget-wrapper.prpl-todo',
 				'popover' => [

tests/e2e/tour.spec.js

@@ -15,5 +15,25 @@ test.describe( 'PRPL Tour', () => {
 		// Wait for and verify the tour popover is visible
 		const tourPopover = page.locator( '.driver-popover' );
 		await expect( tourPopover ).toBeVisible();
+
+		// Get the number of steps from the window object
+		const numberOfSteps = await page.evaluate(
+			() => window.progressPlannerTour.steps.length
+		);
+
+		// Click the next button for each step
+		const nextButton = page.locator( '.driver-popover-next-btn' );
+		for ( let i = 0; i < numberOfSteps; i++ ) {
+			await nextButton.click();
+			// Verify the tour popover remains visible for each step
+			await expect( tourPopover ).toBeVisible();
+		}
+
+		// Verify the button text changes to "Finish" on the last step
+		await expect( nextButton ).toHaveText( 'Finish' );
+
+		// Click the finish button and verify the tour popover closes
+		await nextButton.click();
+		await expect( tourPopover ).not.toBeVisible();
 	} );
 } );