Merge pull request #650 from Codeinwp/development

rodica-andronache · web-flow · commit 6c0044edd07e · 2020-02-17T15:57:41.000+02:00
New Cypress tests for the Gutenberg block
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ cypress/integration/examples
 cypress/integration/localhost*
 cypress/plugins
 cypress.env.json
+grunt
diff --git a/.travis.yml b/.travis.yml
@@ -25,6 +25,13 @@ matrix:
       script:
         - docker-compose -f docker-compose.travis.yml up -d
         - chmod +x ./bin/run-e2e-tests.sh ./bin/wp-init.sh && ./bin/wp-init.sh && ./bin/run-e2e-tests.sh
+    - name: Cypress Gutenberg
+      language: node_js
+      node_js:
+        - 10.8
+      script:
+        - docker-compose -f docker-compose.travis.yml up -d
+        - chmod +x ./bin/run-e2e-tests-gutenberg.sh ./bin/wp-init.sh && ./bin/wp-init.sh && ./bin/run-e2e-tests-gutenberg.sh
   allow_failures:
     - env: TEST_SUITE=Wraith_Visual_Regression_Testing WRAITH_FAIL=5
 branches:
diff --git a/bin/run-e2e-tests-gutenberg.sh b/bin/run-e2e-tests-gutenberg.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+if [[ "$TRAVIS" == "true" ]]; then
+    npm install --only=dev --prefix ./cypress/
+    composer install --no-dev
+fi
+
+wp_host='localhost'
+windows=`echo $OSTYPE | grep -i -e "win" -e "msys" -e "cygw" | wc -l`
+args='-it';
+if [[ $windows -gt 0 ]]; then
+    wp_host=`docker-machine ip`
+    args=''
+fi
+
+# exit on error
+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
diff --git a/bin/run-e2e-tests.sh b/bin/run-e2e-tests.sh
@@ -25,3 +25,4 @@ npm run cypress:run
 # test free - sources
 export CYPRESS_SPEC_TO_RUN="free-sources.js"
 npm run cypress:run
+
diff --git a/classes/Visualizer/Gutenberg/Block.php b/classes/Visualizer/Gutenberg/Block.php
@@ -102,6 +102,7 @@ public function enqueue_gutenberg_scripts() {
 			'charts'    => Visualizer_Module_Admin::_getChartTypesLocalized(),
 			'adminPage' => menu_page_url( 'visualizer', false ),
 			'sqlTable'  => $table_col_mapping,
+			'chartsPerPage' => defined( 'TI_CYPRESS_TESTING' ) ? 20 : 6,
 		);
 		wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
 
diff --git a/classes/Visualizer/Gutenberg/build/block.css b/classes/Visualizer/Gutenberg/build/block.css
diff --git a/classes/Visualizer/Gutenberg/build/block.js b/classes/Visualizer/Gutenberg/build/block.js
diff --git a/classes/Visualizer/Gutenberg/build/handsontable.css b/classes/Visualizer/Gutenberg/build/handsontable.css
diff --git a/classes/Visualizer/Gutenberg/build/handsontable.js b/classes/Visualizer/Gutenberg/build/handsontable.js
diff --git a/classes/Visualizer/Gutenberg/src/Components/Charts.js b/classes/Visualizer/Gutenberg/src/Components/Charts.js
@@ -39,26 +39,29 @@ class Charts extends Component {
 		this.state = {
 			charts: null,
 			isBusy: false,
-			chartsLoaded: false
+			chartsLoaded: false,
+            perPage: visualizerLocalize.chartsPerPage
 		};
 	}
 
 	async componentDidMount() {
+        const perPage = visualizerLocalize.chartsPerPage;
 
 		// Fetch review again if block loaded after saving.
-		let result = await apiFetch({ path: 'wp/v2/visualizer/?per_page=6&meta_key=visualizer-chart-library&meta_value=ChartJS' });
+		let result = await apiFetch({ path: 'wp/v2/visualizer/?per_page=' + perPage + '&meta_key=visualizer-chart-library&meta_value=ChartJS' });
 		this.setState({ charts: result });
 	}
 
 	async loadMoreCharts() {
 		const offset = ( this.state.charts ).length;
 		let chartsLoaded = this.state.chartsLoaded;
+        const perPage = this.state.perPage;
 
 		this.setState({ isBusy: true });
 
-		let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=6&meta_key=visualizer-chart-library&meta_value=ChartJS&offset=${ offset }` });
+		let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=${ perPage }&meta_key=visualizer-chart-library&meta_value=ChartJS&offset=${ offset }` });
 
-		if ( 6 > result.length ) {
+		if ( perPage > result.length ) {
 			chartsLoaded = true;
 		}
 
@@ -71,7 +74,7 @@ class Charts extends Component {
 
 	render() {
 
-		const { charts, isBusy, chartsLoaded } = this.state;
+		const { charts, isBusy, chartsLoaded, perPage } = this.state;
 
 		return (
 			<div className="visualizer-settings__charts">
@@ -125,7 +128,7 @@ class Charts extends Component {
                                         }
 
 										return (
-											<div className="visualizer-settings__charts-single">
+											<div className="visualizer-settings__charts-single" key={ `chart-${ charts[i].id }` }>
 
 												<div className="visualizer-settings__charts-title">
 													{ title }
@@ -172,7 +175,7 @@ class Charts extends Component {
 									}) }
 								</div>
 
-								{ ! chartsLoaded && 5 < charts.length && (
+								{ ! chartsLoaded && perPage - 1 < charts.length && (
 									<Button
 										isPrimary
 										isLarge
diff --git a/classes/Visualizer/Module/Admin.php b/classes/Visualizer/Module/Admin.php
@@ -71,8 +71,28 @@ public function __construct( Visualizer_Plugin $plugin ) {
 		$this->_addAction( 'visualizer_chart_schedules_spl', 'addSplChartSchedules', null, 10, 3 );
 
 		$this->_addAction( 'admin_init', 'init' );
+
+		if ( defined( 'TI_CYPRESS_TESTING' ) ) {
+			$this->load_cypress_hooks();
+		}
+
 	}
 
+	/**
+	 * Define the hooks that are needed for cypress.
+	 *
+	 * @since   3.4.0
+	 * @access  private
+	 */
+	private function load_cypress_hooks() {
+		// all charts should load on the same page without pagination.
+		add_filter(
+			'visualizer_query_args', function( $args ) {
+				$args['posts_per_page'] = 20;
+				return $args;
+			}, 10, 1
+		);
+	}
 
 	/**
 	 * Add disabled `optgroup` schedules to the drop downs.
@@ -741,7 +761,7 @@ private function getQuery() {
 			$meta[]                   = $query;
 			$query_args['meta_query'] = $meta;
 		}
-		$q = new WP_Query( $query_args );
+		$q = new WP_Query( apply_filters( 'visualizer_query_args', $query_args ) );
 		return $q;
 	}
 
diff --git a/classes/Visualizer/Plugin.php b/classes/Visualizer/Plugin.php
@@ -28,7 +28,7 @@
 class Visualizer_Plugin {
 
 	const NAME = 'visualizer';
-	const VERSION = '3.4.1';
+	const VERSION = '3.4.2';
 
 	// custom post types
 	const CPT_VISUALIZER = 'visualizer';
diff --git a/css/media.css b/css/media.css
@@ -1,5 +1,5 @@
 /*
-	Version: 3.4.1
+	Version: 3.4.2
 */
 #visualizer-library-view {
 	padding: 30px 10px 10px 30px;
diff --git a/cypress.json b/cypress.json
@@ -1,25 +1,25 @@
 {
   "env": {
-    "urls" : {
-        "library": "/admin.php?page=visualizer",
-        "samples": "https://s3.amazonaws.com/downloads.themeisle.com/samples-visualizer/"
+    "urls": {
+      "library": "/admin.php?page=visualizer",
+      "samples": "https://s3.amazonaws.com/downloads.themeisle.com/samples-visualizer/"
     },
     "chart_types": {
-        "free": 9,
-        "pro": 6
+      "free": 9,
+      "pro": 6
     },
     "features_locked": {
-        "free": 7,
-        "plan1": 5,
-        "plan2": 0
+      "free": 7,
+      "plan1": 5,
+      "plan2": 0
     },
     "query": "SELECT post_type, count(*) from wp_posts GROUP by post_type",
     "wait": 10000,
     "editors": {
-        "free": 2,
-        "selected" : "table"
+      "free": 2,
+      "selected": "table"
     }
   },
   "videoUploadOnPasses": false,
   "projectId": "2375tg"
-}
+}
diff --git a/cypress/docker-compose.yml b/cypress/docker-compose.yml
@@ -1,7 +1,7 @@
 version: '3.3'
 services:
   cypress:
-    image: "cypress/included:3.2.0"
+    image: "cypress/included:3.8.2"
     network_mode: "host"
     environment:
       - CYPRESS_RECORD_KEY=${CYPRESS_RECORD_KEY}
diff --git a/cypress/integration/free-gutenberg.js b/cypress/integration/free-gutenberg.js
@@ -0,0 +1,51 @@
+describe('Test Free - gutenberg', 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('Create all charts', function() {
+        cy.create_available_charts(Cypress.env('chart_types').free);
+    });
+
+    it('Verify insertion of charts', function() {
+        cy.visit('/post-new.php');
+
+        // get rid of that irritating popup
+        cy.get('.nux-dot-tip__disable').click();
+
+        var charts = [];
+        for(var i = 1; i <= parseInt(Cypress.env('chart_types').free); i++){
+            charts.push(i);
+        }
+
+        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 + 1));
+
+            cy.get('div[data-type="visualizer/chart"]:nth-child(' + (i + 1) + ')').then( ($block) => {
+                cy.wrap($block).find('.visualizer-settings__content-option').should('have.length', 2);
+                cy.wrap($block).find('.visualizer-settings__content-option').last().click({force:true});
+
+                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);
+                cy.wrap($block).find('.visualizer-settings .visualizer-settings__chart > div').should('have.length', 2);
+                cy.wrap($block).find('.visualizer-settings .components-button-group button').should('have.length', 2);
+            });
+        });
+    });
+
+})
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -30,7 +30,12 @@ import 'cypress-file-upload';
 
 // generates a random number upto max
 Cypress.Commands.add( 'get_random_int', (max) => {
-    return Math.floor(Math.random() * Math.floor(max));
+    var num = Math.floor(Math.random() * Math.floor(max));
+    // 0 is 'empty', so generate a 
+    if(num === 0){
+        num = 1;
+    }
+    return num;
 });
 
 
@@ -221,7 +226,8 @@ Cypress.Commands.add( 'test_advanced_settings', ($create_new_chart) => {
         expect(content).to.not.equal(first_chart);
     });
 
-    cy.get('.visualizer-chart-action.visualizer-chart-edit').first().click();
+    // if the settings cause the chart to be malformed, an error might show and click has to be forced
+    cy.get('.visualizer-chart-action.visualizer-chart-edit').first().click({force:true});
 
     cy.wait( Cypress.env('wait') );
 
@@ -257,4 +263,53 @@ Cypress.Commands.add( 'test_advanced_settings', ($create_new_chart) => {
             });
         });
     });
-});
+});
+
+// create the first N charts available
+Cypress.Commands.add( 'create_available_charts', ($num) => {
+    var charts = [];
+    for(var i = 1; i <= parseInt($num); i++){
+        charts.push(i);
+    }
+
+    // iterate through the first N charts in the types screen and create each one.
+    cy.wrap(charts).each((chart, i, array) => {
+        cy.visit(Cypress.env('urls').library ).then(() => {
+            cy.get('.add-new-h2.add-new-chart').first().click();
+        });
+
+        cy.wait( Cypress.env('wait') );
+
+        cy.get('iframe')
+        .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.wait( Cypress.env('wait') );
+
+        cy.get('iframe')
+        .then(function ($iframe) {
+            const $body = $iframe.contents().find('body');
+            // create the chart.
+            cy.wrap($body).find('#toolbar input#settings-button').click();
+        });
+
+        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);
+        });
+
+    });
+
+    // verify that all charts have been created
+    cy.visit(Cypress.env('urls').library ).then(() => {
+        cy.get('#visualizer-library .visualizer-chart').should('have.length', $num);
+    });
+});
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -23,3 +23,12 @@ import './commands'
 Cypress.Cookies.defaults({
     whitelist: /wordpress_.*/
 })
+
+// ignore JS errors.
+Cypress.on('uncaught:exception', (err, runnable) => {
+    expect(err.message).to.include('Google Charts loader.js can only be loaded once');
+    done();
+    return false;
+});
+
+
diff --git a/index.php b/index.php
@@ -4,7 +4,7 @@
 	Plugin Name: Visualizer: Tables and Charts for WordPress
 	Plugin URI: https://themeisle.com/plugins/visualizer-charts-and-graphs-lite/
 	Description: A simple, easy to use and quite powerful tool to create, manage and embed interactive charts into your WordPress posts and pages. The plugin uses Google Visualization API to render charts, which supports cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases.
-	Version: 3.4.1
+	Version: 3.4.2
 	Author: Themeisle
 	Author URI: http://themeisle.com
 	License: GPL v2.0 or later
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "visualizer",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "Visualizer Lite",
   "repository": {
     "type": "git",
@@ -26,11 +26,11 @@
     "lasttranslator": "Themeisle Translate Team <friends@themeisle.com>"
   },
   "devDependencies": {
-    "cypress-file-upload": "^3.3.4",
     "cypress": "^3.4.1",
+    "cypress-file-upload": "^3.3.4",
+    "grunt-helpscout-faq": "~0.1.0",
     "grunt-plugin-fleet": "github:codeinwp/grunt-plugin-fleet",
-    "load-project-config": "~0.2.0",
-    "grunt-helpscout-faq": "~0.1.0"
+    "load-project-config": "~0.2.0"
   },
   "wraithSlug": [
     "visualizer"
