feat(Tests): improve test status display flow

* tmp * feat(TestStatus): minor tweaks * feat(TestStatus): display waiting status * feat(TestStatus): change wordings * feat(TestStatus): show test started message * fix(notifications): always show test started
bleech · Dec 18, 2023 · 2f27169 · 2f27169
1 parent afe1a30
commit 2f27169
Show file tree

Hide file tree

Showing 21 changed files with 502 additions and 140 deletions.
diff --git a/assets/admin.scss b/assets/admin.scss
@@ -11,6 +11,10 @@
 		&--running {
 			color: $alert-green;
 		}
+
+		&--waiting {
+			color: $alert-yellow;
+		}
 	}
 }
 

diff --git a/components/admin-notification/index.php b/components/admin-notification/index.php
@@ -41,12 +41,12 @@
 		$template = dirname( __FILE__ ) . '/views/admin-notification-test-disabled.php';
 		break;
 
-	case 'unlock_more_tests':
-		$template = dirname( __FILE__ ) . '/views/admin-notification-unlock-more-tests.php';
+	case 'test_started':
+		$template = dirname( __FILE__ ) . '/views/admin-notification-test-started.php';
 		break;
 
-	case 'run_manual_test':
-		$template = dirname( __FILE__ ) . '/views/admin-notification-run-manual-test.php';
+	case 'unlock_more_tests':
+		$template = dirname( __FILE__ ) . '/views/admin-notification-unlock-more-tests.php';
 		break;
 
 	default:

diff --git a/components/admin-notification/script.js b/components/admin-notification/script.js
@@ -20,4 +20,97 @@ jQuery( document ).ready( function ( $ ) {
 			} );
 		}
 	} );
+	if ( ! window.customElements.get( 'vrts-relative-time' ) ) {
+		window.customElements.define(
+			'vrts-relative-time',
+			RelativeTimeElement
+		);
+	}
 } );
+
+class RelativeTimeElement extends window.HTMLElement {
+	// constructor (element) {
+	// 	this.element = element
+	// 	// get date from utc timestamp
+
+	// 	// this.time = new Date( element.getAttribute( 'time' ) );
+	// 	// this.update();
+	// }
+
+	// observe attribute time
+	static get observedAttributes() {
+		return [ 'time' ];
+	}
+
+	// update time when attribute time changes
+	attributeChangedCallback( name, oldValue, newValue ) {
+		if ( name === 'time' ) {
+			this.time = new Date( newValue );
+			this.update();
+		}
+	}
+
+	// connectedCallback() {
+	// 	this.time = new Date( this.getAttribute( 'time' ) );
+	// 	this.update();
+	// }
+
+	update() {
+		this.innerText = `${ extractDate( this.time ) } at ${ extractTime(
+			this.time
+		) }`;
+	}
+}
+
+function extractDate( inputDate ) {
+	const { __ } = wp.i18n;
+	const today = new Date();
+	// Set the time to midnight for an accurate date comparison
+	today.setHours( 0, 0, 0, 0 );
+
+	// Create a Date object for the input date
+	const comparisonDate = new Date( inputDate );
+	comparisonDate.setHours( 0, 0, 0, 0 );
+
+	// Calculate the difference in days
+	const difference = ( comparisonDate - today ) / ( 1000 * 3600 * 24 );
+
+	// Determine if the date is today, tomorrow, or yesterday
+	if ( difference === 0 ) {
+		return __( 'Today', 'visual-regression-testing' );
+	} else if ( difference === 1 ) {
+		return __( 'Tomorrow', 'visual-regression-testing' );
+	} else if ( difference === -1 ) {
+		return __( 'Yesterday', 'visual-regression-testing' );
+	}
+	return dateFormat( inputDate, 'Y/m/d' );
+}
+
+function extractTime( inputDate ) {
+	return dateFormat( inputDate, 'g:i a' );
+}
+
+// format date like in php date_format
+function dateFormat( date, format ) {
+	const pad = ( number ) => ( number < 10 ? `0${ number }` : number );
+	const d = pad( date.getDate() );
+	const m = pad( date.getMonth() + 1 );
+	const y = date.getFullYear();
+	const Y = date.getFullYear();
+	const H = date.getHours();
+	const i = pad( date.getMinutes() );
+	const s = date.getSeconds();
+	const g = date.getHours() % 12 || 12;
+	const a = date.getHours() >= 12 ? 'pm' : 'am';
+
+	return format
+		.replace( 'd', d )
+		.replace( 'm', m )
+		.replace( 'y', y )
+		.replace( 'Y', Y )
+		.replace( 'H', H )
+		.replace( 'i', i )
+		.replace( 's', s )
+		.replace( 'g', g )
+		.replace( 'a', a );
+}
diff --git a/components/admin-notification/views/admin-notification-run-manual-test.php b/components/admin-notification/views/admin-notification-run-manual-test.php
diff --git a/components/admin-notification/views/admin-notification-test-started.php b/components/admin-notification/views/admin-notification-test-started.php
@@ -0,0 +1,7 @@
+<div class="vrts-notice notice notice-info" data-view="<?php echo esc_attr( $data['view'] ); ?>">
+	<?php wp_nonce_field( 'vrts_admin_notice_nonce' ); ?>
+	<h3><?php esc_html_e( 'Testing has started', 'visual-regression-tests' ); ?></h3>
+	<p>
+	<?php esc_html_e( 'If the testing detects any visual differences, we will notify you via e-mail alerts.', 'visual-regression-tests' ); ?>
+	</p>
+</div>
diff --git a/components/metabox-classic-editor/index.php b/components/metabox-classic-editor/index.php
@@ -60,16 +60,16 @@
 
 	<p class="figure-title"><strong><?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?></strong></p>
 	<figure class="figure">
-		<?php if ( $data['target_screenshot_url'] ) { ?>
-			<a class="figure-link" href="<?php echo esc_url( $data['target_screenshot_url'] ); ?>" target="_blank" rel="noreferrer" title="<?php esc_html_e( 'View full snapshot image in new tab', 'visual-regression-tests' ); ?>">
-				<img class="figure-image" src="<?php echo esc_url( $data['target_screenshot_url'] ); ?>" loading="lazy" alt="<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
+		<?php if ( $data['base_screenshot_url'] ) { ?>
+			<a class="figure-link" href="<?php echo esc_url( $data['base_screenshot_url'] ); ?>" target="_blank" rel="noreferrer" title="<?php esc_html_e( 'View full snapshot image in new tab', 'visual-regression-tests' ); ?>">
+				<img class="figure-image" src="<?php echo esc_url( $data['base_screenshot_url'] ); ?>" loading="lazy" alt="<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
 			</a>
 		<?php } else { ?>
 			<img class="figure-image" src="<?php echo esc_attr( $data['placeholder_image_data_url'] ); ?>" alt="<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
 		<?php } ?>
 		<figcaption class="howto">
-			<?php if ( $data['snapshot_date'] && $data['target_screenshot_url'] ) { ?>
-				<p><?php esc_html_e( 'Snapshot created on', 'visual-regression-tests' ); ?> <?php echo esc_html( $data['snapshot_date'] ); ?></p>
+			<?php if ( $data['base_screenshot_date'] && $data['base_screenshot_url'] ) { ?>
+				<p><?php esc_html_e( 'Snapshot created on', 'visual-regression-tests' ); ?> <?php echo esc_html( $data['base_screenshot_date'] ); ?></p>
 			<?php } else { ?>
 				<p><?php esc_html_e( 'Snapshot: in progress', 'visual-regression-tests' ); ?></p>
 			<?php } ?>

diff --git a/components/tests-page/script.js b/components/tests-page/script.js
@@ -256,7 +256,7 @@ window.wp = window.wp || {};
 					// Update the snapshot column in the table and set the status of the snapshot.
 					const snapshotStatus = response.snapshot_status;
 					const $snapshotColumn = $(
-						'#test-' + id + ' .snapshot_date'
+						'#test-' + id + ' .base_screenshot_date'
 					);
 					if (
 						null !== snapshotStatus &&

diff --git a/components/tests-page/views/tests-page-list.php b/components/tests-page/views/tests-page-list.php
@@ -1,7 +1,9 @@
 <?php
+
 use Vrts\Features\Admin_Notices;
 use Vrts\Features\Subscription;
 use Vrts\Services\Manual_Test_Service;
+
 ?>
 
 <div class="wrap vrts_list_table_page">
@@ -21,7 +23,7 @@
 			<li>
 				<form method="post" id="form-run-manual-tests">
 					<?php wp_nonce_field( 'submit_run_manual_tests', '_wpnonce' ); ?>
-					<input type="submit" name="submit_run_manual_tests" value="<?php esc_attr_e( 'Run Tests', 'visual-regression-tests' ); ?>"
+					<input type="submit" name="submit_run_manual_tests" value="<?php esc_attr_e( 'Run All Tests', 'visual-regression-tests' ); ?>"
 						class="page-title-action button-secondary"
 						id="<?php echo ( ! $data['is_connected'] || ! $data['running_tests_count'] ) ? 'run-manual-tests-disabled' : 'run-manual-tests'; ?>"
 						<?php echo ( ! $data['is_connected'] || ! $data['running_tests_count'] ) ? ' disabled' : ''; ?>
@@ -62,7 +64,7 @@ class="page-title-action button-secondary"
 		$vrts_manual_test_service = new Manual_Test_Service();
 		if ( $vrts_manual_test_service->is_active() ) {
 			$vrts_manual_test_service->delete_option();
-			Admin_Notices::render_notification( 'run_manual_test', false, [] );
+			Admin_Notices::render_notification( 'test_started', false, [] );
 		}
 		?>
 	</form>

diff --git a/composer.lock b/composer.lock
diff --git a/editor/components/metabox/index.js b/editor/components/metabox/index.js
@@ -213,9 +213,9 @@ const Metabox = () => {
 			) }
 			{ test.id && !! test.status && (
 				<Screenshot
-					url={ test.target_screenshot_url }
+					url={ test.base_screenshot_url }
 					placeholderUrl={ placeholderImageDataUrl }
-					finishDate={ test.snapshot_date }
+					finishDate={ test.base_screenshot_date }
 				/>
 			) }
 			{ test.id && (

diff --git a/includes/core/utilities/class-date-time-helpers.php b/includes/core/utilities/class-date-time-helpers.php
@@ -2,6 +2,8 @@
 
 namespace Vrts\Core\Utilities;
 
+use DateTimeZone;
+
 class Date_Time_Helpers {
 	/**
 	 * Get the date and time WordPress native formatted.
@@ -14,17 +16,54 @@ public static function get_formatted_date_time( $date = null ) {
 		if ( null === $date ) {
 			return null;
 		}
-		$formatted_date = get_date_from_gmt( $date );
-		$date = date_create( $formatted_date );
+		$date = self::date_from_gmt( $date );
 
-		$date = sprintf(
+		$formatted_date = sprintf(
 			/* translators: 1: Date, 2: Time. */
 			esc_html_x( '%1$s at %2$s', 'date at time', 'visual-regression-tests' ),
 			/* translators: Date format. See https://www.php.net/manual/datetime.format.php */
 			date_format( $date, esc_html_x( 'Y/m/d', 'date format', 'visual-regression-tests' ) ),
 			/* translators: Time format. See https://www.php.net/manual/datetime.format.php */
 			date_format( $date, esc_html_x( 'g:i a', 'time format', 'visual-regression-tests' ) )
 		);
+		return $formatted_date;
+	}
+
+	/**
+	 * Get the date and time WordPress native formatted.
+	 *
+	 * @param mixed $date a DateTime string.
+	 *
+	 * @return string Formatted date and time.
+	 */
+	public static function get_formatted_relative_date_time( $date = null ) {
+		if ( null === $date ) {
+			return null;
+		}
+		$date = self::date_from_gmt( $date );
+
+		$formatted_date = sprintf(
+			/* translators: 1: Date, 2: Time. */
+			esc_html_x( '%1$s at %2$s', 'date at time', 'visual-regression-tests' ),
+			/* translators: Date format. See https://www.php.net/manual/datetime.format.php */
+			date_format( $date, esc_html_x( 'Y/m/d', 'date format', 'visual-regression-tests' ) ),
+			/* translators: Time format. See https://www.php.net/manual/datetime.format.php */
+			date_format( $date, esc_html_x( 'g:i a', 'time format', 'visual-regression-tests' ) )
+		);
+		return '<vrts-relative-time time="' . date_format( $date, 'c' ) . '">' . $formatted_date . '</vrts-relative-time>';
+	}
+
+	/**
+	 * Get the date WordPress native formatted.
+	 *
+	 * @param mixed $date a DateTime string.
+	 *
+	 * @return string Formatted date.
+	 */
+	private static function date_from_gmt( $date ) {
+		$date = date_create( $date, new DateTimeZone( 'UTC' ) );
+		$date->setTimezone( wp_timezone() );
+
 		return $date;
 	}
 }
diff --git a/includes/features/class-cron-jobs.php b/includes/features/class-cron-jobs.php
@@ -59,7 +59,7 @@ public static function remove_jobs() {
 	 */
 	public function fetch_test_updates( $test_id, $try_number = 1 ) {
 		$test = Test::get_item( $test_id );
-		if ( empty( $test ) || empty( $test->snapshot_date ) ) {
+		if ( empty( $test ) || empty( $test->base_screenshot_date ) ) {
 			$service = new Test_Service();
 			$service->fetch_and_update_tests();
 

diff --git a/includes/features/class-enqueue-scripts.php b/includes/features/class-enqueue-scripts.php
@@ -120,8 +120,8 @@ public function enqueue_block_editor_assets() {
 					'rest_url' => esc_url_raw( rest_url() ),
 					'has_post_alert' => Test::has_post_alert( $post->ID ),
 					'test_status' => (bool) Test::get_status( $post->ID ),
-					'target_screenshot_url' => Test::get_target_screenshot_url( $post->ID ),
-					'snapshot_date' => Date_Time_Helpers::get_formatted_date_time( Test::get_snapshot_date( $post->ID ) ),
+					'base_screenshot_url' => Test::get_base_screenshot_url( $post->ID ),
+					'base_screenshot_date' => Date_Time_Helpers::get_formatted_date_time( Test::get_base_screenshot_date( $post->ID ) ),
 					'testing_status_instructions' => $testing_status_instructions,
 					'placeholder_image_data_url' => vrts()->get_snapshot_placeholder_image(),
 					'remaining_tests' => Subscription::get_remaining_tests(),

diff --git a/includes/features/class-metaboxes.php b/includes/features/class-metaboxes.php
@@ -111,9 +111,9 @@ public function render_metabox() {
 		global $post;
 		$post_id = $post->ID ? $post->ID : 0;
 		$run_tests_checked = ! empty( Test::get_item_id( $post_id ) );
-		$snapshot_date = Test::get_snapshot_date( $post_id );
-		if ( $snapshot_date ) {
-			$snapshot_date = Date_Time_Helpers::get_formatted_date_time( $snapshot_date );
+		$base_screenshot_date = Test::get_base_screenshot_date( $post_id );
+		if ( $base_screenshot_date ) {
+			$base_screenshot_date = Date_Time_Helpers::get_formatted_date_time( $base_screenshot_date );
 		}
 
 		$alert_id = Test::get_alert_id( $post_id );
@@ -138,8 +138,8 @@ public function render_metabox() {
 			'field_test_status_key' => self::$field_test_status_key,
 			'has_post_alert' => Test::has_post_alert( $post_id ),
 			'test_status' => (bool) Test::get_status( $post_id ),
-			'target_screenshot_url' => Test::get_target_screenshot_url( $post_id ),
-			'snapshot_date' => $snapshot_date,
+			'base_screenshot_url' => Test::get_base_screenshot_url( $post_id ),
+			'base_screenshot_date' => $base_screenshot_date,
 			'testing_status_instructions' => $testing_status_instructions,
 			'placeholder_image_data_url' => vrts()->get_snapshot_placeholder_image(),
 			'is_new_test' => self::is_new_test( $post_id ),

diff --git a/includes/features/class-tests-page.php b/includes/features/class-tests-page.php
@@ -238,9 +238,23 @@ public function process_column_actions() {
 				'testing-disabled' => ( Service::is_connected() ? true : false ),
 				'post_id' => $test->post_id,
 			], $page_url);
-		}
 
-		if ( ! $deleted ) {
+			if ( ! $deleted ) {
+				$redirect_to = add_query_arg( [ 'message' => 'error' ], $page_url );
+			}
+		} elseif ( $test_id && 'run-manual-test' === $action ) {
+			$service = new Manual_Test_Service();
+			$service->run_tests( [ $test_id ] );
+			$test = Test::get_item( $test_id );
+
+			$redirect_to = add_query_arg([
+				'message' => 'success',
+				'run-manual-test' => true,
+				'post_id' => $test->post_id,
+			], $page_url);
+		}//end if
+
+		if ( empty( $redirect_to ) ) {
 			$redirect_to = add_query_arg( [ 'message' => 'error' ], $page_url );
 		}