diff --git a/admin/class-wordpress-diffy-admin.php b/admin/class-wordpress-diffy-admin.php index f643469..2c13cb4 100644 --- a/admin/class-wordpress-diffy-admin.php +++ b/admin/class-wordpress-diffy-admin.php @@ -150,8 +150,10 @@ public function addPluginAdminMenu() { public function registerAndBuildFields() { // Two settings API Key and Project ID. register_setting('reading', 'diffy_api_key'); - register_setting('reading', 'diffy_project_id'); - register_setting('other', 'diffy_last_screenshot_id'); + register_setting('reading', 'diffy_project_id', [$this, 'diffy_validate_project_id_callback']); + register_setting('other', 'diffy_first_screenshot_id'); + register_setting('other', 'diffy_second_screenshot_id'); + register_setting('other', 'diffy_diff_id'); // Introduction section. add_settings_section( @@ -222,4 +224,71 @@ public function displayPluginAdminDashboard() { require_once 'wordpress-diffy-settings-form.php'; } + /** + * Validate if settings are saved correctly. + */ + public function diffy_validate_project_id_callback($project_id) { + $diffy_api_key = get_option('diffy_api_key'); + + if (empty($diffy_api_key)) { + add_settings_error( + 'diffy', + 'diffy', + __( 'Please add API Key' ), + 'error' + ); + return $project_id; + } + + if (empty($project_id)) { + add_settings_error( + 'diffy', + 'diffy', + __( 'Please add Project ID' ), + 'error' + ); + return $project_id; + } + + try { + \Diffy\Diffy::setApiKey($diffy_api_key); + } + catch (\Exception $exception) { + add_settings_error( + 'diffy', + 'diffy', + sprintf( __( 'Invalid API Key %s' ), $diffy_api_key), + 'error' + ); + return $project_id; + } + + try { + $project = \Diffy\Project::get($project_id); + } + catch (\Exception $exception) { + + } + + if (empty($project)) { + add_settings_error( + 'diffy', + 'diffy', + sprintf( __( 'Invalid Project ID %s' ), $project_id), + 'error' + ); + return $project_id; + } + + add_settings_error( + 'diffy', + 'diffy', + /* translators: %d: Number of requests. */ + __( 'We have verified your API Key and Project ID. You are good to go.' ), + 'success' + ); + + return $project_id; + } + } diff --git a/js/plugins-scripts.js b/js/plugins-scripts.js new file mode 100644 index 0000000..9b3b6fd --- /dev/null +++ b/js/plugins-scripts.js @@ -0,0 +1,48 @@ +( function( $ ) { + + /** + * Call backend to check the job status and display its status to the user. + * + * @param string jobType + */ + showDiffyStatus = function(jobType) { + var showDiffyStatusInterval = setInterval(function() { + + var data = { + 'action': jobType + }; + $.post(settings.ajaxurl, data, function (response) { + var data = response.data; + + if (response.success) { + if (response.data.status == 'completed') { + clearInterval(showDiffyStatusInterval); + } + $('.diffy-message').html(response.data.message); + } else { + + } + }) + .fail(function () { + console.log("Diffy ajax error"); + }); + }, 5000); + }; + + // Triggered right before ajax request is sent to update plugin. + $( document ).on('wp-plugin-updating', function(){ + $('.update-message').after('

Diffy creates first set of screenshots (before update).

'); + + showDiffyStatus('diffy_first_screenshots'); + }); + + // Triggered after plugin was successfully updated. + $( document ).on('wp-plugin-update-success', function(){ + $('.diffy-message').html('Updates completed. Now Diffy creates second set of screenshots and comparison.'); + + showDiffyStatus('diffy_second_screenshots'); + }); + + + +})( jQuery ); \ No newline at end of file diff --git a/js/scripts.js b/js/scripts.js index 4009f82..f8fc0da 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -4,8 +4,8 @@ $('#diffy-register').click(function() { $('.diffy-register-error').remove(); - $('#diffy-register').html('Registering a user and creating project...'); - $('#diffy-register').attr('disabled', true); + $('.diffy-register-wrapper').after('

Registering a user and creating project...

'); + $('.diffy-register-wrapper').hide(); var data = { 'action' : 'diffy_register' @@ -18,6 +18,7 @@ '

Diffy account & project created. It is created by using your email address "' + data.email + '" and password "' + data.password + '". Please note these credentials. But no worries you can always reset the password if you need to.

'; $('.diffy-register-wrapper').html(success_message); + $('input[name=diffy_api_key]').val(data.diffy_api_key); $('input[name=diffy_project_id]').val(data.diffy_project_id); } @@ -25,10 +26,9 @@ var error_message = '
\n' + '

' + data.error_message + '. Please go to Diffy app and retrieve API Key and set up the project manually.

'; $('.diffy-register-wrapper').append(error_message); - - $('#diffy-register').html('One click register'); - $('#diffy-register').attr('disabled', false); } + $('.updating-message').remove(); + $('.diffy-register-wrapper').show(); }) .fail(function() { console.log( "Ajax error" ); diff --git a/readme.txt b/readme.txt index ed0952d..fbcfdc9 100644 --- a/readme.txt +++ b/readme.txt @@ -1,10 +1,10 @@ -=== Diffy === +=== Diffy Visual Regression Testing === Contributors: ygerasimov Tags: visual regression testing, updates verification, automated testing Requires at least: 4.8 -Tested up to: 5.5.0 +Tested up to: 5.5.1 Requires PHP: 7.0 -Stable tag: 0.9.1 +Stable tag: 0.9.3 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Development: https://github.com/DiffyWebsite/wordpress-diffy diff --git a/vendor/diffywebsite/diffy-php/src/Diff.php b/vendor/diffywebsite/diffy-php/src/Diff.php index ffae7c9..6b945bb 100644 --- a/vendor/diffywebsite/diffy-php/src/Diff.php +++ b/vendor/diffywebsite/diffy-php/src/Diff.php @@ -83,7 +83,7 @@ public static function create(int $projectId, int $screenshotId1, int $screensho * Load full info on Diff. * * @param int $diffId - * @return mixed + * @return \Diffy\Diff */ public static function retrieve(int $diffId) { @@ -111,6 +111,29 @@ public function isCompleted() return in_array($this->data['state'], [self::COMPLETED, self::ZIPFILE, self::COMPLETED_HOOK_EXECUTED, self::WITHOUT_ZIP]); } + /** + * How long it will take to complete the diff. + * + * @return string + */ + public function getEstimate() + { + return 'under 1 minute'; + } + + /** + * How long it will take to complete the diff. + * + * @return string + */ + public function getReadableResult() + { + if ($this->data['result'] == 0) { + return 'No changes found'; + } + return sprintf('%d% pages changed. See the report', $this->data['result'], $this->data['diffSharedUrl']); + } + /** * Check if Diff is failed. * diff --git a/vendor/diffywebsite/diffy-php/src/Screenshot.php b/vendor/diffywebsite/diffy-php/src/Screenshot.php index 3a49abe..d8febb4 100644 --- a/vendor/diffywebsite/diffy-php/src/Screenshot.php +++ b/vendor/diffywebsite/diffy-php/src/Screenshot.php @@ -78,7 +78,7 @@ public static function setBaselineSet(int $projectId, int $screenshotId) * Load full info on Screenshot. * * @param \Diffy\int $screenshotId - * @return mixed + * @return \Diffy\Screenshot */ public static function retrieve(int $screenshotId) { @@ -106,6 +106,11 @@ public function isCompleted() return in_array($this->data['state'], [self::COMPLETED, self::COMPLETED_HOOK_EXECUTED, self::ZIPFILE]); } + public function getEstimate() + { + return $this->data['status']['estimate']; + } + /** * Create Screenshot from browserstack. diff --git a/wordpress-diffy.php b/wordpress-diffy.php index 0968298..24ac8f2 100644 --- a/wordpress-diffy.php +++ b/wordpress-diffy.php @@ -4,7 +4,7 @@ * * Diffy is visual regression testing platform. * - * @package Diffy + * @package Diffy Visual Regression Testing * @subpackage Main * @since 1.0.0 */ @@ -15,7 +15,7 @@ * Description: Diffy allows you to see if any of your updates caused visual changes on the site. * Author: Diffy * Author URI: https://diffy.website/ - * Version: 0.9.0 + * Version: 0.9.3 * License: GPLv2 or later (license.txt) */ @@ -79,6 +79,13 @@ function diffy_self_deactivate() { * Runs when we start upgrade process. Create first set of screenshots. */ function diffy_create_first_screenshots($options) { + add_settings_error( + 'diffy', + 'diffy', + __( 'Diffy started first set of screenshots. Waiting until completed and run updates.' ), + 'success' + ); + $diffy_api_key = get_option('diffy_api_key'); $diffy_project_id = get_option('diffy_project_id'); if (empty($diffy_api_key) || empty($diffy_project_id)) { @@ -94,6 +101,7 @@ function diffy_create_first_screenshots($options) { $screenshot_id = 0; try { $screenshot_id = \Diffy\Screenshot::create($diffy_project_id, 'production'); + update_option('diffy_first_screenshot_id', $screenshot_id); // Assume that screenshots should be created in 20 mins max. for ($i = 0; $i < 240; $i++) { sleep(5); @@ -107,34 +115,169 @@ function diffy_create_first_screenshots($options) { return $options; } - if (!empty($screenshot_id)) { - update_option('diffy_last_screenshot_id', $screenshot_id); - } - return $options; } - add_filter( 'upgrader_package_options', 'diffy_create_first_screenshots' ); /** * Runs after updates completed. Create second set of screenshots and diff. */ function diffy_create_second_screenshots_diff() { - $last_screenshot_id = get_option('diffy_last_screenshot_id'); - if (empty($last_screenshot_id)) { + $first_screenshot_id = get_option('diffy_first_screenshot_id'); + if (empty($first_screenshot_id)) { return; } $diffy_project_id = get_option('diffy_project_id'); try { $second_screenshot_id = \Diffy\Screenshot::create($diffy_project_id, 'production'); - \Diffy\Diff::create($diffy_project_id, $last_screenshot_id, $second_screenshot_id); + update_option('diffy_second_screenshot_id', $second_screenshot_id); + + $diff_id = \Diffy\Diff::create($diffy_project_id, $first_screenshot_id, $second_screenshot_id); + update_option('diffy_diff_id', $diff_id); } catch (\Exception $e) { return; } - - add_option('diffy_last_screenshot_id', 0); } add_action( 'upgrader_process_complete', 'diffy_create_second_screenshots_diff' ); +/** + * Add js to the plugins listing page. + */ +function diffy_plugins_page_add_javascript($plugins) { + wp_enqueue_script( + 'diffy-plugins-page', + plugin_dir_url(__FILE__) . 'js/plugins-scripts.js', + array('jquery'), + NULL, + TRUE + ); + + // set variables for script + wp_localize_script( + 'diffy-plugins-page', + 'settings', + array( + 'ajaxurl' => admin_url( 'admin-ajax.php' ), + ) + ); + + return $plugins; +} +add_filter( 'all_plugins', 'diffy_plugins_page_add_javascript' ); + +/** + * Ajax requests to check the status of first set of screenshots. + */ +function diffy_ajax_first_screenshots_callback() { + $diffy_api_key = get_option('diffy_api_key'); + $diffy_project_id = get_option('diffy_project_id'); + if (empty($diffy_api_key) || empty($diffy_project_id)) { + wp_send_json_error([ + 'error_message' => 'Diffy API Key and project ID are empty', + ]); + } + + try { + \Diffy\Diffy::setApiKey($diffy_api_key); + } + catch (\Exception $exception) { + wp_send_json_error([ + 'error_message' => 'Could not set Diffy API Key', + ]); + } + + $first_screenshot_id = get_option('diffy_first_screenshot_id'); + if (!empty($first_screenshot_id)) { + try { + $screenshot = \Diffy\Screenshot::retrieve($first_screenshot_id); + if (!$screenshot->isCompleted()) { + wp_send_json_success( [ + 'status' => 'progress', + 'message' => sprintf('Creating first set of screenshots. %s.', ucfirst($screenshot->getEstimate())), + ] ); + } + else { + wp_send_json_success( [ + 'status' => 'completed', + 'message' => 'Completed creating first set of screenshots. Wordpress plugin update in progress.', + ] ); + } + } + catch (\Exception $exception) { + wp_send_json_error([ + 'error_message' => sprintf('Could not retrieve Screenshot ID %d', $first_screenshot_id) + ]); + } + } + +} +add_action( 'wp_ajax_diffy_first_screenshots', 'diffy_ajax_first_screenshots_callback'); + +/** + * Ajax requests to check the status of second set of screenshots and the diff. + */ +function diffy_ajax_second_screenshots_callback() { + $diffy_api_key = get_option('diffy_api_key'); + $diffy_project_id = get_option('diffy_project_id'); + if (empty($diffy_api_key) || empty($diffy_project_id)) { + wp_send_json_error([ + 'error_message' => 'Diffy API Key and project ID are empty', + ]); + } + + try { + \Diffy\Diffy::setApiKey($diffy_api_key); + } + catch (\Exception $exception) { + wp_send_json_error([ + 'error_message' => 'Could not set Diffy API Key', + ]); + } + + $second_screenshot_id = get_option('diffy_second_screenshot_id'); + if (!empty($second_screenshot_id)) { + try { + $screenshot = \Diffy\Screenshot::retrieve($second_screenshot_id); + if (!$screenshot->isCompleted()) { + wp_send_json_success( [ + 'status' => 'progress', + 'message' => sprintf('Creating second set of screenshots. %s.', ucfirst($screenshot->getEstimate())), + ] ); + } + update_option('diffy_second_screenshot_id', 0); + } + catch (\Exception $exception) { + wp_send_json_error([ + 'error_message' => sprintf('Could not retrieve Screenshot ID %d', $second_screenshot_id) + ]); + } + } + + + $diff_id = get_option('diffy_diff_id'); + if (!empty($diff_id)) { + try { + $diff = \Diffy\Diff::retrieve($diff_id); + if (!$diff->isCompleted()) { + wp_send_json_success( [ + 'status' => 'progress', + 'message' => sprintf('Second set completed. Comparing screenshots. %s.', ucfirst($diff->getEstimate())), + ] ); + } + update_option('diffy_diff_id', 0); + wp_send_json_success( [ + 'status' => 'completed', + 'message' => sprintf('Comparison completed. %s.', $diff->getReadableResult()), + ] ); + } + catch (\Exception $exception) { + wp_send_json_error([ + 'error_message' => sprintf('Could not retrieve Diff ID %d', $diff_id) + ]); + } + } + +} +add_action( 'wp_ajax_diffy_second_screenshots', 'diffy_ajax_second_screenshots_callback');