cypress: click advanced setting and save chart

Author: contactashish13

classes/Visualizer/Gutenberg/build/block.js

@@ -112,6 +112,7 @@ class ChartSelect extends Component {
 
 						<PanelButton
 							label={ __( 'Advanced Options' ) }
+                            className="visualizer-advanced-options"
 							icon="admin-tools"
 							onClick={ () => this.setState({ route: 'showAdvanced' }) }
 						/>

classes/Visualizer/Gutenberg/src/Components/ChartSelect.js

@@ -537,6 +537,7 @@ class Editor extends Component {
 										<Button
 											isDefault
 											isLarge
+                                            className="visualizer-bttn-done"
 											onClick={ () => {
 												this.setState({ route: 'renderChart' });
 												this.props.setAttributes({ route: 'renderChart' });
@@ -547,6 +548,7 @@ class Editor extends Component {
 										<Button
 											isPrimary
 											isLarge
+                                            className="visualizer-bttn-save"
 											isBusy={ 'updateChart' === this.state.isLoading }
 											disabled={ 'updateChart' === this.state.isLoading }
 											onClick={ this.updateChart }

classes/Visualizer/Gutenberg/src/Editor.js

@@ -16,8 +16,7 @@ describe('Test Free - gutenberg', function() {
     it('Verify insertion of charts', function() {
         cy.visit('/post-new.php');
 
-        // get rid of that irritating popup
-        cy.get('.nux-dot-tip__disable').click();
+        cy.clear_welcome();
 
         var charts = [];
         for(var i = 1; i <= parseInt(Cypress.env('chart_types').free); i++){
@@ -34,16 +33,36 @@ describe('Test Free - gutenberg', function() {
             });
 
             // see the block has the correct elements.
-            cy.get('div[data-type="visualizer/chart"]').should('have.length', (i + 1));
+            cy.get('div[data-type="visualizer/chart"]').should('have.length', (i + 2));
 
             cy.get('div[data-type="visualizer/chart"]:nth-child(' + (i + 1) + ')').then( ($block) => {
+                // 2 rows - create and insert
                 cy.wrap($block).find('.visualizer-settings__content-option').should('have.length', 2);
+                
+                // click insert
                 cy.wrap($block).find('.visualizer-settings__content-option').last().click({force:true});
 
+                // insert chart
                 cy.wrap($block).find('.visualizer-settings .visualizer-settings__charts-single:nth-child(' + (i + 1) + ') .visualizer-settings__charts-controls').click();
+                
                 cy.wrap($block).find('.visualizer-settings .visualizer-settings__chart').should('have.length', 1);
+
+                // chart and footer divs
                 cy.wrap($block).find('.visualizer-settings .visualizer-settings__chart > div').should('have.length', 2);
+
+                // 2 buttons, one of them "done"
                 cy.wrap($block).find('.visualizer-settings .components-button-group button').should('have.length', 2);
+                cy.wrap($block).find('.visualizer-settings .components-button-group button.visualizer-bttn-done').should('have.length', 1);
+
+                // click advanced options
+                cy.get('.visualizer-advanced-options button.components-button').click({force:true});
+
+                // done button disappears, save button appears
+                cy.wrap($block).find('.visualizer-settings .components-button-group button.visualizer-bttn-done').should('have.length', 0);
+                cy.wrap($block).find('.visualizer-settings .components-button-group button.visualizer-bttn-save').should('have.length', 1);
+
+                // click save button
+                cy.wrap($block).find('.visualizer-settings .components-button-group button.visualizer-bttn-save').click({force:true});
             });
         });
     });

cypress/integration/free-gutenberg.js

@@ -312,3 +312,11 @@ Cypress.Commands.add( 'create_available_charts', ($num) => {
         cy.get('#visualizer-library .visualizer-chart').should('have.length', $num);
     });
 });
+
+Cypress.Commands.add( 'clear_welcome', () => {
+    cy.window().then(win => {
+        win.wp
+        && ( win.wp.data.select( "core/edit-post" ).isFeatureActive( "welcomeGuide" ) && win.wp.data.dispatch( "core/edit-post" ).toggleFeature( "welcomeGuide" ) )
+        ;
+    });
+});