Add Docker-based E2E test infrastructure

.babelrc

@@ -1,9 +1,7 @@
 {
 	"presets": [
-		[ "@babel/env", {
-			"useBuiltIns": "entry",
-			"corejs": 2
-		} ],
+		"@babel/env",
+		"@wordpress/default",
 		"@babel/preset-react"
 	],
 	"plugins": [

.eslintrc.json

@@ -1,8 +1,9 @@
 {
 	"extends": [
 		"eslint:recommended",
-    "plugin:react/recommended",
-    "wordpress"
+		"plugin:react/recommended",
+		"wordpress",
+		"plugin:jest/recommended"
 	],
 	"parser": "babel-eslint",
 	"env": {

.travis.yml

@@ -42,18 +42,27 @@ before_install:
       curl -s http://api.wordpress.org/core/version-check/1.7/ > /tmp/wp-latest.json
       WP_VERSION=$(grep -o '"version":"[^"]*' /tmp/wp-latest.json | sed 's/"version":"//')
     fi
-  - git clone --depth=1 --branch="$WP_VERSION" git://develop.git.wordpress.org/ /tmp/wordpress
-  - cp /tmp/wordpress/wp-tests-config-sample.php /tmp/wordpress/tests/phpunit/wp-tests-config.php
+  - |
+    if [[ "$PHP" == "1" ]]; then
+      git clone --depth=1 --branch="$WP_VERSION" git://develop.git.wordpress.org/ /tmp/wordpress
+      cp /tmp/wordpress/wp-tests-config-sample.php /tmp/wordpress/tests/phpunit/wp-tests-config.php
+    fi
 
 before_script:
-  - export WP_DEVELOP_DIR=/tmp/wordpress
-  - export WP_TESTS_DIR=/tmp/wordpress/tests/phpunit
-  - npm install -g gulp-cli
+  - npm install || exit 1
   - composer install
-  - bash tests/bin/install-wp-tests.sh wordpress_test root '' localhost
+  - |
+    if [[ "$PHP" == "1" ]] || [[ "$JS" == "1" ]] || [[ "$SNIFF" == "1" ]]; then
+      npm install -g gulp-cli
+    fi
+  - |
+    if [[ "$PHP" == "1" ]]; then
+      export WP_DEVELOP_DIR=/tmp/wordpress
+      export WP_TESTS_DIR=/tmp/wordpress/tests/phpunit
+      bash tests/bin/install-wp-tests.sh wordpress_test root '' localhost
+    fi
 
 script:
-  - npm install || exit 1
   - |
     if [[ "$SNIFF" == "1" ]]; then
       gulp phpcs || exit 1
@@ -64,29 +73,50 @@ script:
       npx gulp qunit || exit 1 # QUnit tests
       npm run test || exit 1 # Bundle size test
       travis_retry npm run travis:visualtest || exit 1 # Visual regression tests
-    else
+    fi
+  - |
+    if [[ "$PHP" == "1" ]]; then
       gulp phpunit || exit 1
     fi
+  - |
+    if [[ "$E2E" == "1" ]]; then
+      npm run build || exit 1 # Build for tests.
+      npm run env:start
+      npm run env:reset-site
+      npm run test:e2e
+      npm run env:stop
+    fi
 
-matrix:
+jobs:
   include:
     - stage: test
-      php: 5.4
-      env: WP_VERSION=4.7 PHPCS_PHP_VERSION='5.4' SNIFF=1
-    - stage: test
+      name: Lint
+      php: 7.3
+      env: WP_VERSION=4.7 PHPCS_PHP_VERSION='5.4' SNIFF=1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+    - name: PHP Tests (PHP 5.6, WordPress latest)
       php: 5.6
-      env: WP_VERSION=latest
-    - stage: test
+      env: WP_VERSION=latest PHP=1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+    - name: PHP Tests (PHP 7.3, WordPress latest)
       php: 7.3
-      env: WP_VERSION=latest
-    - stage: test
+      env: WP_VERSION=latest PHP=1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+    - name: JS Tests
       php: 7.3
       env: WP_VERSION=latest JS=1
+    - name: PHP Tests (PHP 7.4, WordPress trunk)
+      stage: test
+      php: 7.4snapshot
+      env: WP_VERSION=master PHP=1 PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
     - stage: test
-      php: 'nightly'
-      env: WP_VERSION=master
+      name: E2E Tests (WordPress latest)
+      env: E2E=1
+    - stage: test
+      name: E2E Tests (WordPress 4.7)
+      env: E2E=1 WP_VERSION=4.7.13
+    - stage: test
+      name: E2E Tests (WordPress 4.9, Gutenberg 4.9)
+      env: E2E=1 WP_VERSION=4.9.10 GUTENBERG_VERSION=4.9.0
   allow_failures:
-    - php: 'nightly'
+    - php: 7.4snapshot
       env: WP_VERSION=master
 
 services:

bin/local-env/docker-compose.yml

@@ -0,0 +1,42 @@
+version: '3.1'
+
+services:
+  wordpress:
+    image: wordpress
+    restart: always
+    ports:
+      - 9002:80
+    environment:
+      WORDPRESS_DB_HOST: mysql
+      WORDPRESS_DB_PASSWORD: example
+      ABSPATH: /usr/src/wordpress/
+      WORDPRESS_DEBUG: 1
+      WORDPRESS_CONFIG_EXTRA: |
+        define( 'SCRIPT_DEBUG', true );
+    volumes:
+      - wordpress_data:/var/www/html
+      - ../../:/var/www/html/wp-content/plugins/google-site-kit
+      - ../../tests/e2e/plugins:/var/www/html/wp-content/plugins/google-site-kit-test-plugins
+    depends_on:
+      - mysql
+
+  cli:
+    image: wordpress:cli
+    restart: always
+    user: xfs
+    volumes:
+      - wordpress_data:/var/www/html
+      - ../../:/var/www/html/wp-content/plugins/google-site-kit
+    depends_on:
+      - mysql
+      - wordpress
+
+  mysql:
+    image: mysql:5.7
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: example
+      MYSQL_DATABASE: wordpress_test
+
+volumes:
+  wordpress_data:

bin/local-env/includes.sh

@@ -0,0 +1,134 @@
+#!/bin/bash
+
+##
+# Ask a Yes/No question, and way for a reply.
+#
+# This is a general-purpose function to ask Yes/No questions in Bash, either with or without a default
+# answer. It keeps repeating the question until it gets a valid answer.
+#
+# @param {string} prompt    The question to ask the user.
+# @param {string} [default] Optional. "Y" or "N", for the default option to use if none is entered.
+# @param {int}    [timeout] Optional. The number of seconds to wait before using the default option.
+#
+# @returns {bool} true if the user replies Yes, false if the user replies No.
+##
+ask() {
+    # Source: https://djm.me/ask
+    local timeout endtime timediff prompt default reply
+
+    while true; do
+
+		timeout="${3:-}"
+
+        if [ "${2:-}" = "Y" ]; then
+            prompt="Y/n"
+            default=Y
+        elif [ "${2:-}" = "N" ]; then
+            prompt="y/N"
+            default=N
+        else
+            prompt="y/n"
+            default=
+			timeout=
+        fi
+
+		if [ -z "$timeout" ]; then
+        	# Ask the question (not using "read -p" as it uses stderr not stdout)
+        	echo -en "$1 [$prompt] "
+
+        	# Read the answer (use /dev/tty in case stdin is redirected from somewhere else)
+        	read reply </dev/tty
+		else
+			endtime=$((`date +%s` + $timeout));
+			while [ "$endtime" -ge `date +%s` ]; do
+				timediff=$(($endtime - `date +%s`))
+
+				echo -en "\r$1 [$prompt] (Default $default in ${timediff}s) "
+				read -t 1 reply </dev/tty
+
+				if [ -n "$reply" ]; then
+					break
+				fi
+			done
+		fi
+
+        # Default?
+        if [ -z "$reply" ]; then
+            reply=$default
+        fi
+
+        # Check if the reply is valid
+        case "$reply" in
+            Y*|y*) return 0 ;;
+            N*|n*) return 1 ;;
+        esac
+
+    done
+}
+
+##
+# Download from a remote source.
+#
+# Checks for the existence of curl and wget, then downloads the remote file using the first available option.
+#
+# @param {string} remote  The remote file to download.
+# @param {string} [local] Optional. The local filename to use. If it isn't passed, STDOUT is used.
+#
+# @return {bool} Whether the download succeeded or not.
+##
+download() {
+    if command_exists "curl"; then
+        curl -s -o "${2:--}" "$1"
+    elif command_exists "wget"; then
+		wget -nv -O "${2:--}" "$1"
+    fi
+}
+
+##
+# Add error message formatting to a string, and echo it.
+#
+# @param {string} message The string to add formatting to.
+##
+error_message() {
+	echo -en "\033[31mERROR\033[0m: $1"
+}
+
+##
+# Add warning message formatting to a string, and echo it.
+#
+# @param {string} message The string to add formatting to.
+##
+warning_message() {
+	echo -en "\033[33mWARNING\033[0m: $1"
+}
+
+##
+# Add status message formatting to a string, and echo it.
+#
+# @param {string} message The string to add formatting to.
+##
+status_message() {
+	echo -en "\033[32mSTATUS\033[0m: $1"
+}
+
+##
+# Add formatting to an action string.
+#
+# @param {string} message The string to add formatting to.
+##
+action_format() {
+	echo -en "\033[32m$1\033[0m"
+}
+
+##
+# Check if the command exists as some sort of executable.
+#
+# The executable form of the command could be an alias, function, builtin, executable file or shell keyword.
+#
+# @param {string} command The command to check.
+#
+# @return {bool} Whether the command exists or not.
+##
+command_exists() {
+	type -t "$1" >/dev/null 2>&1
+}