build: create charts by targeting specific library

Author: contactashish13

cypress/integration/free-gutenberg.js

@@ -12,19 +12,22 @@ describe('Test Free - gutenberg', function() {
     it.skip('temp test', function() {
     });
 
-    it('Create all charts', function() {
-        cy.create_available_charts(Cypress.env('chart_types').free);
+    it('Create GoogleCharts 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 = [];
-        for(var i = 1; i <= parseInt(Cypress.env('chart_types').free); i++){
-            charts.push(i);
-        }
+        var charts = Array.from({ length: parseInt(Cypress.env('chart_types').free) + 1 }, function(_item, index) {
+            return index + 1;
+        });
 
         cy.wrap(charts).each((value, i, array) => {
             // insert a visualizer block
@@ -50,6 +53,11 @@ describe('Test Free - gutenberg', function() {
 
                 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);
 

cypress/support/commands.js

@@ -265,7 +265,7 @@ Cypress.Commands.add( 'test_advanced_settings', ($create_new_chart) => {
 });
 
 // create the first N charts available
-Cypress.Commands.add( 'create_available_charts', ($num) => {
+Cypress.Commands.add( 'create_available_charts', ($num, $lib = '') => {
     var charts = [];
     for(var i = 1; i <= parseInt($num); i++){
         charts.push(i);
@@ -283,10 +283,22 @@ Cypress.Commands.add( 'create_available_charts', ($num) => {
         .then(function ($iframe) {
             const $body = $iframe.contents().find('body');
 
-            // select the chart.
-            cy.wrap($body).find('#type-picker .type-box:nth-child(' + chart + ') .type-radio').check();
-            // create the chart.
-            cy.wrap($body).find('#toolbar input[type="submit"]').click();
+            cy.wrap($body).then(function($body){
+                // if we are targeting a particular library, remove charts that do not support it
+                // like Google may support 2nd, 3rd and 10th charts - so we will remove all but these.
+                if('' !== $lib){
+                    $body.find('#type-picker .type-box:not(.type-lib-' + $lib + ')').remove();
+                }
+                // select the chart.
+                cy.wrap($body).find('#type-picker .type-box:nth-child(' + chart + ') .type-radio').check();
+
+                // if we are targeting a particular library, then select it in the toolbar
+                if('' !== $lib){
+                    cy.wrap($body).find('.viz-select-library').select($lib);
+                }
+                // create the chart.
+                cy.wrap($body).find('#toolbar input[type="submit"]').click();
+            });
         });
 
         cy.wait( Cypress.env('wait') );
@@ -299,7 +311,6 @@ Cypress.Commands.add( 'create_available_charts', ($num) => {
         });
 
         cy.wait( Cypress.env('wait') );
-
         // verify that the chart was created and the count increased by 1
         cy.visit(Cypress.env('urls').library ).then(() => {
             cy.get('#visualizer-library .visualizer-chart').should('have.length', chart);