Begin with some E2E Tests (#2708)

.eslintrc

@@ -9,11 +9,23 @@
   },
   "globals": {
     "browser": true,
-    "page": true,
     "wp": true,
     "Set": true
   },
   "rules": {
     "react/prop-types": 2
-  }
+  },
+  "overrides": [
+    {
+      "files": [ "tests/e2e/**/*.js" ],
+      "env": {
+        "browser": true
+      },
+      "globals": {
+        "browser": true,
+        "page": true,
+        "wp": true
+      }
+    }
+  ]
 }

.travis.yml

@@ -18,6 +18,7 @@ notifications:
 cache:
   directories:
     - $HOME/.composer/cache
+    - $HOME/.jest-cache
     - $HOME/.npm
     - $HOME/.nvm/.cache
     - $HOME/phpunit-bin
@@ -76,7 +77,20 @@ jobs:
       env: WP_VERSION=latest DEV_LIB_SKIP=phpcs,eslint,xmllint,phpsyntax,phpunit
       script:
         - source "$DEV_LIB_PATH/travis.script.sh"
-        - npm run test:js -- --ci
+        - npm run test:js -- --ci --cacheDirectory="$HOME/.jest-cache"
+
+    - name: E2E tests
+      php: "7.3"
+      env: WP_VERSION=latest DEV_LIB_SKIP=phpcs,eslint,xmllint,phpsyntax,phpunit PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
+      install:
+        - nvm install
+        - composer install
+        # npm is handled by `npm run env:start`
+      script:
+        - npm run env:start
+        - npm run build:js # after npm dependencies have been installed
+        - npm run env:reset-site
+        - npm run test:e2e
 
     - name: PHP unit tests w/ external-http (7.3, WordPress latest)
       php: "7.3"

bin/local-env/docker-compose.yml

@@ -0,0 +1,43 @@
+version: '3.1'
+
+services:
+  wordpress:
+    image: wordpress
+    restart: always
+    ports:
+      - 8890: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/amp
+      - ../../node_modules/@wordpress/e2e-tests/plugins:/var/www/html/wp-content/plugins/gutenberg-test-plugins
+      - ../../node_modules/@wordpress/e2e-tests/mu-plugins:/var/www/html/wp-content/mu-plugins
+    depends_on:
+      - mysql
+
+  cli:
+    image: wordpress:cli
+    restart: always
+    user: xfs
+    volumes:
+      - wordpress_data:/var/www/html
+      - ../../:/var/www/html/wp-content/plugins/amp
+    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/install-composer.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+COMPOSER_VERSION=`curl -Ls -w %{url_effective} -o /dev/null https://github.com/composer/composer/releases/latest | rev | cut -d '/' -f 1 | rev`
+
+# Exit if any command fails
+set -e
+
+# Include useful functions
+. "$(dirname "$0")/includes.sh"
+
+
+# Change to the expected directory
+cd "$(dirname "$0")/../.."
+
+# Check if composer is installed
+if [ "$TRAVIS" != "true" ] && ! command_exists "composer"; then
+	if ask "$(error_message "Composer isn't installed, would you like to download and install it automatically?")" Y; then
+		echo -en $(status_message "Installing Composer..." )
+		download "https://getcomposer.org/installer" | bash >/dev/null 2>&1
+		mkdir -p /usr/local/bin
+		mv composer.phar /usr/local/bin/composer
+		echo ' done!'
+	else
+		echo -e $(error_message "")
+		echo -e $(error_message "Please install Composer manually, then re-run the setup script to continue.")
+		echo -e $(error_message "Composer installation instructions can be found here: $(action_format "https://getcomposer.org/doc/00-intro.md")")
+	fi
+
+	exit 1
+fi
+
+# Check if the current Composer version is up to date.
+if [ "$TRAVIS" != "true" ] && ! [[ "$(composer --version)" == "Composer version $COMPOSER_VERSION "* ]]; then
+	echo -en $(status_message "Updating Composer..." )
+	composer self-update
+	echo ' done!'
+fi
+
+
+# Install/update packages
+echo -e $(status_message "Installing and updating Composer packages..." )
+composer install

bin/install-node-nvm.sh → bin/local-env/install-node-nvm.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
-NVM_VERSION=`curl -Ls -w %{url_effective} -o /dev/null https://github.com/creationix/nvm/releases/latest | rev | cut -d '/' -f 1 | rev`
+NVM_VERSION=`curl -Ls -w %{url_effective} -o /dev/null https://github.com/nvm-sh/nvm/releases/latest | rev | cut -d '/' -f 1 | rev`
 
 # Exit if any command fails
 set -e
@@ -19,7 +19,7 @@ if [ -n "$NVM_DIR" ]; then
 fi
 
 # Change to the expected directory
-cd "$(dirname "$0")/.."
+cd "$(dirname "$0")/../.."
 
 # Check if nvm is installed
 if [ "$TRAVIS" != "true" ] && ! command_exists "nvm"; then
@@ -30,7 +30,7 @@ if [ "$TRAVIS" != "true" ] && ! command_exists "nvm"; then
 		fi
 
 		echo -en $(status_message "Installing NVM..." )
-		download "https://raw.githubusercontent.com/creationix/nvm/$NVM_VERSION/install.sh" | bash >/dev/null 2>&1
+		download "https://raw.githubusercontent.com/nvm-sh/nvm/$NVM_VERSION/install.sh" | bash >/dev/null 2>&1
 		echo ' done!'
 
 		echo -e $(warning_message "NVM was updated, please run this command to reload it:" )
@@ -39,7 +39,7 @@ if [ "$TRAVIS" != "true" ] && ! command_exists "nvm"; then
 	else
 		echo -e $(error_message "")
 		echo -e $(error_message "Please install NVM manually, then re-run the setup script to continue.")
-		echo -e $(error_message "NVM installation instructions can be found here: $(action_format "https://github.com/creationix/nvm")")
+		echo -e $(error_message "NVM installation instructions can be found here: $(action_format "https://github.com/nvm-sh/nvm")")
 	fi
 
 	exit 1
@@ -48,7 +48,7 @@ fi
 # Check if the current nvm version is up to date.
 if [ "$TRAVIS" != "true" ] && [ $NVM_VERSION != "v$(nvm --version)" ]; then
 	echo -en $(status_message "Updating NVM..." )
-	download "https://raw.githubusercontent.com/creationix/nvm/$NVM_VERSION/install.sh" | bash >/dev/null 2>&1
+	download "https://raw.githubusercontent.com/nvm-sh/nvm/$NVM_VERSION/install.sh" | bash >/dev/null 2>&1
 	echo ' done!'
 
 	echo -e $(warning_message "NVM was updated, please run this command to reload it:" )

bin/install-wordpress.sh → bin/local-env/install-wordpress.sh

@@ -3,32 +3,19 @@
 # Exit if any command fails.
 set -e
 
-# Gutenberg script includes.
-. "$(dirname "$0")/includes.sh"
+# Common variables.
+DOCKER_COMPOSE_FILE_OPTIONS="-f $(dirname "$0")/docker-compose.yml"
+WP_DEBUG=${WP_DEBUG-true}
+SCRIPT_DEBUG=${SCRIPT_DEBUG-true}
 
-# Set up environment variables
-. "$(dirname "$0")/bootstrap-env.sh"
+# Include useful functions
+. "$(dirname "$0")/includes.sh"
 
 # These are the containers and values for the development site.
 CLI='cli'
 CONTAINER='wordpress'
 SITE_TITLE='AMP Dev'
 
-# If we're installing/re-installing the test site, change the containers used.
-if [ "$1" == '--e2e_tests' ]; then
-	CLI="${CLI}_e2e_tests"
-	CONTAINER="${CONTAINER}_e2e_tests"
-	SITE_TITLE='AMP Testing'
-
-	if ! docker ps | grep -q $CONTAINER; then
-		echo -e $(error_message "WordPress e2e tests run in their own Docker container, but that container wasn't found.")
-		echo "Please restart your Docker containers by running 'docker-compose $DOCKER_COMPOSE_FILE_OPTIONS down && docker-compose $DOCKER_COMPOSE_FILE_OPTIONS up -d' or"
-		echo "by running './bin/setup-local-env.sh' again."
-		echo ""
-		exit 1
-	fi
-fi
-
 # Get the host port for the WordPress container.
 HOST_PORT=$(docker-compose $DOCKER_COMPOSE_FILE_OPTIONS port $CONTAINER 80 | awk -F : '{printf $2}')
 
@@ -43,7 +30,7 @@ echo ''
 
 # If this is the test site, we reset the database so no posts/comments/etc.
 # dirty up the tests.
-if [ "$1" == '--e2e_tests' ]; then
+if [ "$1" == '--reset-site' ]; then
 	echo -e $(status_message "Resetting test database...")
 	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI db reset --yes --quiet
 fi
@@ -64,13 +51,8 @@ fi
 
 # Make sure the uploads and upgrade folders exist and we have permissions to add files.
 echo -e $(status_message "Ensuring that files can be uploaded...")
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod 767 /var/www/html/wp-content/plugins
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod 767 /var/www/html/wp-config.php
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod 767 /var/www/html/wp-settings.php
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER mkdir -p /var/www/html/wp-content/uploads
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod -v 767 /var/www/html/wp-content/uploads
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER mkdir -p /var/www/html/wp-content/upgrade
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod 767 /var/www/html/wp-content/upgrade
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER mkdir -p /var/www/html/wp-content/uploads /var/www/html/wp-content/upgrade
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER chmod 767 /var/www/html/wp-content/plugins /var/www/html/wp-config.php /var/www/html/wp-settings.php /var/www/html/wp-content/uploads /var/www/html/wp-content/upgrade
 
 CURRENT_WP_VERSION=$(docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run -T --rm $CLI core version)
 echo -e $(status_message "Current WordPress version: $CURRENT_WP_VERSION...")
@@ -91,31 +73,31 @@ if [ "$CURRENT_URL" != "http://localhost:$HOST_PORT" ]; then
 	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI option update siteurl "http://localhost:$HOST_PORT" --quiet
 fi
 
+# Install a dummy favicon to avoid 404 errors.
+echo -e $(status_message "Installing a dummy favicon...")
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER touch /var/www/html/favicon.ico
+
 # Activate AMP plugin.
 echo -e $(status_message "Activating AMP plugin...")
 docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI plugin activate amp --quiet
 
-if [ "$POPULAR_PLUGINS" == "true" ]; then
-	echo -e $(status_message "Activating popular plugins...")
-	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI plugin install advanced-custom-fields --activate --quiet
-	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI plugin install jetpack --activate --quiet
-	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI plugin install wpforms-lite --activate --quiet
-fi
 
-# Install a dummy favicon to avoid 404 errors.
-echo -e $(status_message "Installing a dummy favicon...")
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm $CONTAINER touch /var/www/html/favicon.ico
+# Install & activate Gutenberg plugin.
+echo -e $(status_message "Installing and activating Gutenberg plugin...")
+# todo: Use `wp plugin install --activate` once WP-CLI is updated, see https://github.com/wp-cli/extension-command/issues/176.
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI plugin install gutenberg --activate --quiet
+docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI plugin activate gutenberg --quiet
 
 # Configure site constants.
 echo -e $(status_message "Configuring site constants...")
 WP_DEBUG_CURRENT=$(docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run -T --rm -u 33 $CLI config get --type=constant --format=json WP_DEBUG)
-if [ $WP_DEBUG != $WP_DEBUG_CURRENT ]; then
+if [ "$WP_DEBUG" != $WP_DEBUG_CURRENT ]; then
 	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI config set WP_DEBUG $WP_DEBUG --raw --type=constant --quiet
 	WP_DEBUG_RESULT=$(docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run -T --rm -u 33 $CLI config get --type=constant --format=json WP_DEBUG)
 	echo -e $(status_message "WP_DEBUG: $WP_DEBUG_RESULT...")
 fi
 SCRIPT_DEBUG_CURRENT=$(docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run -T --rm -u 33 $CLI config get --type=constant --format=json SCRIPT_DEBUG)
-if [ $SCRIPT_DEBUG != $SCRIPT_DEBUG_CURRENT ]; then
+if [ "$SCRIPT_DEBUG" != $SCRIPT_DEBUG_CURRENT ]; then
 	docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm -u 33 $CLI config set SCRIPT_DEBUG $SCRIPT_DEBUG --raw --type=constant --quiet
 	SCRIPT_DEBUG_RESULT=$(docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run -T --rm -u 33 $CLI config get --type=constant --format=json SCRIPT_DEBUG)
 	echo -e $(status_message "SCRIPT_DEBUG: $SCRIPT_DEBUG_RESULT...")

bin/install-docker.sh → bin/local-env/launch-containers.sh

@@ -3,14 +3,15 @@
 # Exit if any command fails.
 set -e
 
-. "$(dirname "$0")/bootstrap-env.sh"
+# Common variables.
+DOCKER_COMPOSE_FILE_OPTIONS="-f $(dirname "$0")/docker-compose.yml"
 
 # Include useful functions.
 . "$(dirname "$0")/includes.sh"
 
 # Check that Docker is installed.
 if ! command_exists "docker"; then
-	echo -e $(error_message "Docker doesn't seem to be installed. Please head on over to the Docker site to download it: $(action_format "https://www.docker.com/community-edition#/download")")
+	echo -e $(error_message "Docker doesn't seem to be installed. Please head on over to the Docker site to download it: $(action_format "https://www.docker.com/products/docker-desktop")")
 	exit 1
 fi
 
@@ -31,16 +32,3 @@ docker-compose $DOCKER_COMPOSE_FILE_OPTIONS pull
 # Launch the containers.
 echo -e $(status_message "Starting Docker containers...")
 docker-compose $DOCKER_COMPOSE_FILE_OPTIONS up -d >/dev/null
-
-# Set up WordPress Development site.
-# Note: we don't bother installing the test site right now, because that's
-# done on every time `npm run test-e2e` is run.
-. "$(dirname "$0")/install-wordpress.sh"
-
-# Install the PHPUnit test scaffolding.
-echo -e $(status_message "Installing PHPUnit test scaffolding...")
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm wordpress_phpunit /app/bin/install-wp-tests.sh wordpress_test root example mysql $WP_VERSION false > /dev/null
-
-# Install Composer. This is only used to run WordPress Coding Standards checks.
-echo -e $(status_message "Installing and updating Composer modules...")
-docker-compose $DOCKER_COMPOSE_FILE_OPTIONS run --rm composer install