Improve CircleCI builds (godaddy-wordpress#718)

AddisMap · Nov 4, 2021 · af6876d · af6876d
1 parent 1b2f18e
commit af6876d
Show file tree

Hide file tree

Showing 131 changed files with 1,050 additions and 1,337 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.dev/bin/generate-go-screenshot-specs.sh b/.dev/bin/generate-go-screenshot-specs.sh
@@ -0,0 +1,18 @@
+#! /bin/bash
+
+set -o errexit
+set -o nounset
+
+URLS=$(curl -sS https://wpnux.godaddy.com/v2/api/templates | jq -r '.[].styles[].preview_url')
+
+for URL in $URLS; do
+    params=(${URL//[=&]/ })
+
+    template=${params[1]}
+    style=${params[3]}
+
+    preview_url=$(printf '%q' "$URL")
+    spec_filename="${template}-${style}.spec.js"
+
+    sed "s/{{TEMPLATE}}/$template/g; s/{{STYLE}}/$style/g; s,{{PREVIEW_URL}},$preview_url,g;" .dev/tests/cypress/vr-template.stub > ".dev/tests/cypress/integration/visual-regression/${spec_filename}"
+done
diff --git a/.dev/bin/generate-vr-specs.sh b/.dev/bin/generate-vr-specs.sh
@@ -4,14 +4,15 @@ set -o errexit
 set -o nounset
 
 URLS=$(curl -sS https://wpnux.godaddy.com/v2/api/templates | jq -r '.[].styles[].preview_url')
+baseURL=$(cat cypress.json | jq -r '.env.localTestURL')
 
 for URL in $URLS; do
     params=(${URL//[=&]/ })
 
     template=${params[1]}
     style=${params[3]}
 
-    preview_url=$(printf '%q' "$URL")
+    preview_url=$(printf '%q' "$baseURL/?wpnux_template_loader=1&$(echo $URL | cut -d "?" -f2)")
     spec_filename="${template}-${style}.spec.js"
 
     sed "s/{{TEMPLATE}}/$template/g; s/{{STYLE}}/$style/g; s,{{PREVIEW_URL}},$preview_url,g;" .dev/tests/cypress/vr-template.stub > ".dev/tests/cypress/integration/visual-regression/${spec_filename}"

diff --git a/.dev/bin/setup-test-specs.sh b/.dev/bin/setup-test-specs.sh
@@ -0,0 +1,51 @@
+#!/usr/bin/env bash
+
+# Allow files to be passed into the script
+CHANGEDFILES=${@-$(git diff --name-only origin/master)}
+SPECS=()
+SPECSTRING=''
+TEMPLATE_INCLUDES=''
+
+for FILE in $CHANGEDFILES
+do
+	# Changed file matches /.dev/assets/design-styles/*
+	if [[ $FILE == *".dev/assets/design-styles/"* ]]; then
+		testSpec=$(echo $FILE | cut -d'/' -f4)
+		foundwords=$(echo ${SPECS[@]} | grep -o "${testSpec}" | wc -w)
+		# The test spec does not yet exist in the SPECS array
+		if [[ "${foundwords}" -eq 0 ]]; then
+			# Spec file string is empty, do not start string with a ,
+			if [[ ${#SPECSTRING} -eq 0 ]]; then
+				SPECSTRING=".dev/tests/cypress/integration/visual-regression/*-$testSpec.spec.js"
+			else
+				SPECSTRING="${SPECSTRING},.dev/tests/cypress/integration/visual-regression/*-$testSpec.spec.js"
+			fi
+			SPECS=( "${SPECS[@]}" "${testSpec}" )
+		fi
+	fi
+done
+
+# No spec files to run
+if [ ${#SPECS[@]} -eq 0 ]; then
+	echo "Changes do not require visual regression testing."
+	circleci-agent step halt
+	exit
+fi
+
+printf "\n\033[0;33mRunning the following Cypress spec files: ${SPECS[*]}\033[0m\n"
+
+# Store $SPECSTRING value in /tmp/specstring file for later use
+echo $SPECSTRING > /tmp/specstring
+
+for SPEC in "${SPECS[@]}"
+do
+	# Spec file string is empty, do not start string with a ,
+	if [[ ${#TEMPLATE_INCLUDES} -eq 0 ]]; then
+		TEMPLATE_INCLUDES="--include '*$SPEC*'"
+	else
+		TEMPLATE_INCLUDES="${TEMPLATE_INCLUDES} --include '*$SPEC*'"
+	fi
+done
+
+# Store $TEMPLATE_INCLUDES value in /tmp/template_includes file for later use
+echo $TEMPLATE_INCLUDES > /tmp/template_includes
diff --git a/.dev/deploy-scripts/install-wp-tests.sh b/.dev/deploy-scripts/install-wp-tests.sh
@@ -17,7 +17,7 @@ DB_HOST=${4-localhost}
 WP_VERSION=${5-latest}
 SKIP_DB_CREATE=${6-false}
 
-TMPDIR=${TMPDIR-/tmp}
+TMPDIR=${TMPDIR-/var/www/html}
 TMPDIR=$(echo $TMPDIR | sed -e "s/\/$//")
 WP_TESTS_DIR=${WP_TESTS_DIR-$TMPDIR/wordpress-tests-lib}
 WP_CORE_DIR=${WP_CORE_DIR-$TMPDIR/wordpress/}
@@ -45,9 +45,9 @@ elif [[ $WP_VERSION == 'nightly' || $WP_VERSION == 'trunk' ]]; then
 	WP_TESTS_TAG="trunk"
 else
 	# http serves a single offer, whereas https serves multiple. we only want one
-	download http://api.wordpress.org/core/version-check/1.7/ /tmp/wp-latest.json
-	grep '[0-9]+\.[0-9]+(\.[0-9]+)?' /tmp/wp-latest.json
-	LATEST_VERSION=$(grep -o '"version":"[^"]*' /tmp/wp-latest.json | sed 's/"version":"//')
+	download http://api.wordpress.org/core/version-check/1.7/ /var/www/html/wp-latest.json
+	grep '[0-9]+\.[0-9]+(\.[0-9]+)?' /var/www/html/wp-latest.json
+	LATEST_VERSION=$(grep -o '"version":"[^"]*' /var/www/html/wp-latest.json | sed 's/"version":"//')
 	if [[ -z "$LATEST_VERSION" ]]; then
 		echo "Latest WordPress version could not be found"
 		exit 1
@@ -117,6 +117,8 @@ setup_wp() {
 		[email protected] \
 		--skip-email \
 		--path=$WP_CORE_DIR
+
+	wp option set permalink_structure "/%postname%/" --path=$WP_CORE_DIR
 }
 
 install_test_suite() {
@@ -174,6 +176,17 @@ install_db() {
 	mysqladmin create $DB_NAME --user="$DB_USER" --password="$DB_PASS"$EXTRA
 }
 
+install_rsync() {
+
+	if [ ! -z $(which rsync) ]; then
+		return 0
+	fi
+
+	sudo apt-get update --allow-releaseinfo-change
+	sudo apt install rsync
+
+}
+
 install_wp
 setup_wp
 install_test_suite
@@ -185,10 +198,14 @@ if [ "$CIRCLE_JOB" == 'theme-check' ]; then
 	cd ~/.wp-cli/packages/vendor/anhskohbo/wp-cli-themecheck && git pull
 fi
 
-if [ "$CIRCLE_JOB" == 'a11y-tests' ]; then
+if [[ "$CIRCLE_JOB" == 'a11y-tests' || "$CIRCLE_JOB" == 'visual-regression-chrome' || "$CIRCLE_JOB" == 'visual-regression-firefox' ]]; then
 	sudo cp ~/project/.dev/tests/apache-ci.conf /etc/apache2/sites-available
 	sudo a2ensite apache-ci.conf
+	sudo a2enmod rewrite
 	sudo service apache2 restart
+fi
+
+if [[ "$CIRCLE_JOB" == 'a11y-tests' ]]; then
 	wp db reset --yes --path=$WP_CORE_DIR
 	wp db import ~/project/.dev/tests/a11y-test-db.sql --path=$WP_CORE_DIR
 	wp search-replace https://go.test http://go.test --path=$WP_CORE_DIR
@@ -197,9 +214,29 @@ fi
 export INSTALL_PATH=$WP_CORE_DIR/wp-content/themes/go
 mkdir -p $INSTALL_PATH
 
-if [[ "$CIRCLE_JOB" == 'unit-test-73' || "$CIRCLE_JOB" == 'unit-test-74' ]]; then
-	# Unit test job, copy entire directory including config files
-	rsync -av --delete ~/project/. $INSTALL_PATH/
+# If the ~/project/go directory exists, it persisted from the build job
+if [ -d ~/project/go ]; then
+	cp -r ~/project/go/* $INSTALL_PATH/
 else
+	install_rsync
 	rsync -av --exclude-from ~/project/.distignore --delete ~/project/. $INSTALL_PATH/
 fi
+
+# PHPUnit requires the configuration file, the .dev/tests directory and
+# the languages directory (which is not shipped in the build)
+if [[ "$CIRCLE_JOB" == 'unit-tests' ]]; then
+	cp -r ~/project/languages $INSTALL_PATH/
+	cp ~/project/composer.json $INSTALL_PATH/
+	cp ~/project/composer.lock $INSTALL_PATH/
+	cp -r ~/project/.dev $INSTALL_PATH/
+	cp ~/project/phpunit.xml $INSTALL_PATH/
+fi
+
+# Visual regression tests need the .dev and the languages directories
+if [[ "$CIRCLE_JOB" == 'visual-regression-chrome' || "$CIRCLE_JOB" == 'visual-regression-firefox' ]]; then
+	cp ~/project/composer.json $INSTALL_PATH/
+	cp ~/project/composer.lock $INSTALL_PATH/
+	cp -r ~/project/languages $INSTALL_PATH/
+	cp -r ~/project/.dev $INSTALL_PATH/
+	wp theme activate go --path=$WP_CORE_DIR
+fi
diff --git a/.dev/deploy-scripts/local-install-wp-tests.sh b/.dev/deploy-scripts/local-install-wp-tests.sh
@@ -5,8 +5,8 @@ if [ $# -lt 3 ]; then
 	exit 1
 fi
 
-rm -rf /tmp/wordpress-tests-lib/
-rm -rf /tmp/wordpress/
+rm -rf /var/www/html/wordpress-tests-lib/
+rm -rf /var/www/html/wordpress/
 
 DB_NAME=$1
 DB_USER=$2
@@ -15,8 +15,8 @@ DB_HOST=${4-localhost}
 WP_VERSION=${5-latest}
 SKIP_DB_CREATE=${6-false}
 
-WP_TESTS_DIR=${WP_TESTS_DIR-/tmp/wordpress-tests-lib}
-WP_CORE_DIR=${WP_CORE_DIR-/tmp/wordpress/}
+WP_TESTS_DIR=${WP_TESTS_DIR-/var/www/html/wordpress-tests-lib}
+WP_CORE_DIR=${WP_CORE_DIR-/var/www/html/wordpress/}
 
 download() {
     if [ `which curl` ]; then
@@ -53,18 +53,18 @@ install_wp() {
 	mkdir -p $WP_CORE_DIR
 
 	if [[ $WP_VERSION == 'nightly' || $WP_VERSION == 'trunk' ]]; then
-		mkdir -p /tmp/wordpress-nightly
-		download https://wordpress.org/nightly-builds/wordpress-latest.zip  /tmp/wordpress-nightly/wordpress-nightly.zip
-		unzip -q /tmp/wordpress-nightly/wordpress-nightly.zip -d /tmp/wordpress-nightly/
-		mv /tmp/wordpress-nightly/wordpress/* $WP_CORE_DIR
+		mkdir -p /var/www/html/wordpress-nightly
+		download https://wordpress.org/nightly-builds/wordpress-latest.zip  /var/www/html/wordpress-nightly/wordpress-nightly.zip
+		unzip -q /var/www/html/wordpress-nightly/wordpress-nightly.zip -d /var/www/html/wordpress-nightly/
+		mv /var/www/html/wordpress-nightly/wordpress/* $WP_CORE_DIR
 	else
 		if [ $WP_VERSION == 'latest' ]; then
 			local ARCHIVE_NAME='latest'
 		else
 			local ARCHIVE_NAME="wordpress-$WP_VERSION"
 		fi
-		download https://wordpress.org/${ARCHIVE_NAME}.tar.gz  /tmp/wordpress.tar.gz
-		tar --strip-components=1 -zxmf /tmp/wordpress.tar.gz -C $WP_CORE_DIR
+		download https://wordpress.org/${ARCHIVE_NAME}.tar.gz  /var/www/html/wordpress.tar.gz
+		tar --strip-components=1 -zxmf /var/www/html/wordpress.tar.gz -C $WP_CORE_DIR
 	fi
 
 	download https://raw.github.com/markoheijnen/wp-mysqli/master/db.php $WP_CORE_DIR/wp-content/db.php

diff --git a/.dev/tests/apache-ci.conf b/.dev/tests/apache-ci.conf
@@ -1,12 +1,12 @@
 <VirtualHost *:80>
  LoadModule php7_module /opt/circleci/php/7.1.3/usr/lib/apache2/modules/libphp7.so
- DocumentRoot /tmp/wordpress
+ DocumentRoot /var/www/html/wordpress
  ServerName go.test
  ServerAlias *.test
  <FilesMatch \.php$>
    SetHandler application/x-httpd-php
  </FilesMatch>
- <Directory /tmp/wordpress>
+ <Directory /var/www/html/wordpress>
      Options Indexes FollowSymLinks MultiViews
      AllowOverride All
      <IfModule mod_authz_core.c>

diff --git a/.dev/tests/cypress/helpers.js b/.dev/tests/cypress/helpers.js
@@ -1,3 +1,4 @@
+let scrollToBottom = require( 'scroll-to-bottomjs' );
 
 /**
  * Capture and compare the fullpage snapshots.
@@ -6,7 +7,7 @@
  */
 export function captureDocument( path = '' ) {
     // Disable scroll-behavior as it prevents reliable full-page screenshots.
-    cy.get('html').invoke('css', 'scroll-behavior', 'auto');
+    cy.get( 'html' ).invoke( 'css', 'scroll-behavior', 'auto' );
 
     [
         { label: 'go-1080', width: 1920, height: 1080 }
@@ -18,8 +19,11 @@ export function captureDocument( path = '' ) {
     ].forEach( viewport => {
         // cy.viewport( viewport.width, viewport.height );
 
+        // Scroll to the bottom to get lazy loaded images loading fully
+        cy.window().then( cyWindow => scrollToBottom( { remoteWindow: cyWindow } ) );
+
         // Wait for any animations to finish for those we're unable to prevent right now.
-        cy.wait( 500 );
+        cy.wait( 1500 );
 
         // Take the full-page screenshot
         cy.matchImageSnapshot( `${path}/${viewport.label}` );
@@ -33,12 +37,12 @@ export function captureDocument( path = '' ) {
  */
 export function screenshotPathFromUrl( url ) {
     const urlParts = new URL( url );
-    const envEndpointParts = new URL( Cypress.env( 'templateGalleryEndpoint' ) );
+    const envEndpointParts = new URL( Cypress.env( 'localTestURL' ) );
 
     return [
-        urlParts.searchParams.get( 'lang' ),
+        Cypress.env( 'templateLang' ),
         Cypress.browser.name,
-        unslashit( urlParts.pathname.replace( envEndpointParts.pathname, '' ) ) || 'frontpage',
+        unslashit( urlParts.pathname.replace( envEndpointParts.pathname, '' ).replace( 'v2/', '' ) ) || 'frontpage',
     ].join( '/' );
 }
 
@@ -49,4 +53,19 @@ export function screenshotPathFromUrl( url ) {
  */
 export function unslashit( path ) {
     return path.replace( /(^[\/]+|[\/]+$)/, '' );
-}
+}
+
+/**
+ * Display animated objects on the page
+ */
+export function showCoBlocksAnimatedObjects() {
+  // Scroll to each animated object on the page,
+  // then scroll back to the top for the screenshot
+  cy.get( 'body' ).then( ( body ) => {
+    if ( body.find( '.coblocks-animate' ).length > 0 ) {
+      cy.get( '.coblocks-animate' ).then( ( $el ) => {
+        $el.removeClass( 'coblocks-animate' );
+      } );
+    }
+  } );
+}
diff --git a/.dev/tests/cypress/integration/visual-regression/ahoy-modern.spec.js b/.dev/tests/cypress/integration/visual-regression/ahoy-modern.spec.js
@@ -1,18 +1,13 @@
-import { captureDocument, screenshotPathFromUrl, unslashit } from '../../helpers';
+import { captureDocument, screenshotPathFromUrl, unslashit, showCoBlocksAnimatedObjects } from '../../helpers';
 
 describe( 'VR Testing: ahoy - modern', () => {
     let pages = [];
 
     it( 'Loads frontpage', () => {
-        let url = "https://wpnux.godaddy.com/v2/?template=ahoy&style=modern&lang=en_US".replace(
-            unslashit( 'https://wpnux.godaddy.com/v2/' ),
-            unslashit( Cypress.env( 'templateGalleryEndpoint' ) )
-        ).replace(
-            'en_US',
-            Cypress.env( 'templateLang' )
-        );
+        let url = "http://go.test/?wpnux_template_loader=1&template=ahoy&style=modern&lang=en_US";
 
         cy.visit( url );
+        showCoBlocksAnimatedObjects();
         captureDocument( screenshotPathFromUrl( url ) );
 
         cy.get( '#header__navigation' ).then( $headerNavigation => {
@@ -25,6 +20,7 @@ describe( 'VR Testing: ahoy - modern', () => {
     it( 'Loads additional pages', () => {
         pages.forEach( page => {
             cy.visit( page );
+            showCoBlocksAnimatedObjects();
             captureDocument( screenshotPathFromUrl( page ) );
         } );
     } );

diff --git a/.dev/tests/cypress/integration/visual-regression/ahoy-trendy.spec.js b/.dev/tests/cypress/integration/visual-regression/ahoy-trendy.spec.js
@@ -1,18 +1,13 @@
-import { captureDocument, screenshotPathFromUrl, unslashit } from '../../helpers';
+import { captureDocument, screenshotPathFromUrl, unslashit, showCoBlocksAnimatedObjects } from '../../helpers';
 
 describe( 'VR Testing: ahoy - trendy', () => {
     let pages = [];
 
     it( 'Loads frontpage', () => {
-        let url = "https://wpnux.godaddy.com/v2/?template=ahoy&style=trendy&lang=en_US".replace(
-            unslashit( 'https://wpnux.godaddy.com/v2/' ),
-            unslashit( Cypress.env( 'templateGalleryEndpoint' ) )
-        ).replace(
-            'en_US',
-            Cypress.env( 'templateLang' )
-        );
+        let url = "http://go.test/?wpnux_template_loader=1&template=ahoy&style=trendy&lang=en_US";
 
         cy.visit( url );
+        showCoBlocksAnimatedObjects();
         captureDocument( screenshotPathFromUrl( url ) );
 
         cy.get( '#header__navigation' ).then( $headerNavigation => {
@@ -25,6 +20,7 @@ describe( 'VR Testing: ahoy - trendy', () => {
     it( 'Loads additional pages', () => {
         pages.forEach( page => {
             cy.visit( page );
+            showCoBlocksAnimatedObjects();
             captureDocument( screenshotPathFromUrl( page ) );
         } );
     } );