feat: add Skip button in chart creation

Add Skip button for second step of Chart Creation (#1135)

Author: Soare-Robert-Daniel

classes/Visualizer/Module/Chart.php

@@ -925,6 +925,8 @@ private function _handleDataAndSettingsPage() {
 				: esc_html__( 'Create Chart', 'visualizer' );
 			if ( filter_input( INPUT_GET, 'action' ) === Visualizer_Plugin::ACTION_EDIT_CHART ) {
 				$render->cancel_button = esc_html__( 'Cancel', 'visualizer' );
+			} else {
+				$render->cancel_button = esc_html__( 'Skip', 'visualizer' );
 			}
 		} else {
 			$render->button = esc_attr__( 'Insert Chart', 'visualizer' );

tests/e2e/specs/admin.spec.js

@@ -6,7 +6,7 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 /**
  * Internal dependencies
  */
-const { createChartWithAdmin, deleteAllCharts, waitForLibraryToLoad, createAllFreeCharts } = require('../utils/common');
+const { createChartWithAdmin, deleteAllCharts, waitForLibraryToLoad, createAllFreeCharts, CHART_JS_LABELS, selectChartAdmin } = require('../utils/common');
 
 test.describe( 'Chart Library', () => {
 
@@ -125,6 +125,20 @@ test.describe( 'Chart Library', () => {
             await expect( page.locator(`#visualizer-${chartId}`).count() ).resolves.toBeGreaterThan( 0 );
         }
     } );
+
+    test( 'skip second step of chart creation', async ( { admin, page } ) => {
+        await admin.visitAdminPage( 'admin.php?page=visualizer&vaction=addnew' );
+        await page.waitForURL( '**/admin.php?page=visualizer&vaction=addnew' );
+        await page.waitForSelector('h1:text("Visualizer")');
+        
+        await selectChartAdmin( page.frameLocator('iframe'), CHART_JS_LABELS.table );
+
+        await page.frameLocator('iframe').getByRole('button', { name: 'Skip' }).click();
+        await waitForLibraryToLoad( page );
+       
+        // The Create Chart button should be not exists since we skipped the second step.
+        expect( page.frameLocator('iframe').getByRole('button', { name: 'Create Chart' }) ).toBeHidden();
+    } );
 } );
 
 test.describe( 'Support', () => {