build: create charts by targeting specific library

Author: contactashish13

bin/clean.sh

@@ -0,0 +1,2 @@
+# delete all charts
+wp post delete $(wp post list --post_type='visualizer' --format=ids) --force 

bin/run-e2e-tests-gutenberg.sh

@@ -19,5 +19,11 @@ set -e
 export CYPRESS_HOST=$wp_host
 
 docker exec $args visualizer_wordpress wp --quiet plugin deactivate classic-editor
+
 export CYPRESS_SPEC_TO_RUN="free-gutenberg.js"
 npm run cypress:run
+
+docker exec $args visualizer_wordpress bash /var/www/html/ti-bin/clean.sh
+
+export CYPRESS_SPEC_TO_RUN="free-gutenberg-datatable.js"
+npm run cypress:run

cypress/integration/free-gutenberg-datatable.js

@@ -0,0 +1,77 @@
+describe('Test Free - gutenberg (datatable)', function() {
+    before(function(){
+        Cypress.config('baseUrl', Cypress.env('host') + 'wp-admin/');
+
+        // login to WP
+        cy.visit(Cypress.env('host') + 'wp-login.php');
+        cy.get('#user_login').clear().type( Cypress.env('login') );
+        cy.get('#user_pass').clear().type( Cypress.env('pass') );
+        cy.get('#wp-submit').click();
+    });
+
+    it.skip('temp test', function() {
+    });
+
+    it('Create charts charts', function() {
+        cy.create_available_charts(1, 'DataTable');
+    });
+
+    it('Verify insertion of charts', function() {
+        cy.visit('/post-new.php');
+
+        cy.clear_welcome();
+
+        var charts = Array.from({ length: 1 }, function(_item, index) {
+            return index + 1;
+        });
+
+        cy.wrap(charts).each((value, i, array) => {
+            // insert a visualizer block
+            cy.get('div.edit-post-header-toolbar .block-editor-inserter button').click();
+            cy.get('.components-popover__content').then(function ($popup) {
+                cy.wrap($popup).find('.block-editor-inserter__search').type('visua');
+                cy.wrap($popup).find('.block-editor-inserter__results ul.block-editor-block-types-list li').should('have.length', 1);
+                cy.wrap($popup).find('.block-editor-inserter__results ul.block-editor-block-types-list li button').click();
+            });
+
+            // see the block has the correct elements.
+            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);
+
+                // log a line to show which chart we are trying to insert.
+                cy.wrap($block).find('.visualizer-settings .visualizer-settings__chart').then( ($chart_block) => {
+                    cy.log('Processing chart: ' + Cypress.$($chart_block).attr('data-chart-type'));
+                });
+
+                // 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

@@ -12,20 +12,16 @@ describe('Test Free - gutenberg', function() {
     it.skip('temp test', function() {
     });
 
-    it('Create GoogleCharts charts', function() {
+    it('Create charts', function() {
         cy.create_available_charts(Cypress.env('chart_types').free, 'GoogleCharts');
     });
 
-    it('Create DataTable charts', function() {
-        cy.create_available_charts(1, 'DataTable');
-    });
-
     it('Verify insertion of charts', function() {
         cy.visit('/post-new.php');
 
         cy.clear_welcome();
 
-        var charts = Array.from({ length: parseInt(Cypress.env('chart_types').free) + 1 }, function(_item, index) {
+        var charts = Array.from({ length: parseInt(Cypress.env('chart_types').free) }, function(_item, index) {
             return index + 1;
         });
 

docker-compose.travis.yml

@@ -25,6 +25,7 @@ services:
        - ~/wpcore:/var/www/html/
        - ./wp-content:/var/www/html/wp-content/
        - .:/var/www/html/wp-content/plugins/visualizer/
+       - ./bin/:/var/www/html/ti-bin/
     restart: always
     environment:
       WORDPRESS_DB_NAME: wordpress