Adding an easy local environment setup and Cypress e2e tests

.gitignore

@@ -1,6 +1,7 @@
 # Directories/files that may be generated by this project
 build
 coverage
+cypress
 node_modules
 gutenberg.zip
 

.travis.yml

@@ -1,8 +1,12 @@
-sudo: false
+sudo: required
+
 dist: trusty
 
 language: php
 
+services:
+  - docker
+
 notifications:
   email:
     on_success: never
@@ -20,41 +24,46 @@ before_install:
 
 jobs:
   include:
-    - stage: unit
+    - stage: test
       php: 5.6
       script: composer install && ./vendor/bin/phpcs
 
-    - stage: unit
+    - stage: test
       script:
         - npm install || exit 1
         - npm run ci || exit 1
 
-    - stage: unit
+    - stage: test
       php: 7.1
       env: WP_VERSION=latest
       script:
         - ./bin/run-wp-unit-tests.sh
 
-    - stage: unit
+    - stage: test
       php: 5.6
       env: WP_VERSION=latest
       script:
         - ./bin/run-wp-unit-tests.sh
+      if: branch = master and type != "pull_request"
 
-    - stage: unit
+    - stage: test
       php: 7.1
       env: WP_VERSION=latest SWITCH_TO_PHP=5.3
       script:
         - ./bin/run-wp-unit-tests.sh
+      if: branch = master and type != "pull_request"
 
-    - stage: unit
+    - stage: test
       php: 7.1
       env: WP_VERSION=latest SWITCH_TO_PHP=5.2
       script:
         - ./bin/run-wp-unit-tests.sh
 
-stages:
-  - unit
+    - stage: test
+      script:
+        - npm install || exit 1
+        - npm run build || exit 1
+        - ./bin/run-e2e-tests.sh || exit 1
 
 before_deploy:
   - npm install

CONTRIBUTING.md

@@ -1,24 +1,29 @@
 # Contributing
 
-## Installing & Building the Plugin
+## Getting Started
 
 Gutenberg is a Node.js-based project, built primarily in JavaScript. Be sure to have <a href="https://nodejs.org/en/">Node.js installed first</a>. If you already have Node.js installed, make sure it's version 6.11.1 or higher for this plugin to work correctly. You can check your Node.js version by typing `node -v` in the Terminal prompt.
 
 You should also have the latest release of <a href="https://npmjs.org">npm installed</a>, npm is a separate project from Node.js and is updated frequently. If you've just installed Node.js which includes a version of npm within the installation you most likely will need to also update your npm install. To update npm, type this into your terminal: `npm install npm@latest -g`
 
 To test the plugin, or to contribute to it, you can clone this repository and build the plugin files using Node. How you do that depends on whether you're developing locally or uploading the plugin to a remote host.
 
-### On A Remote Server
+### Local Environment
 
-Open a terminal (or if on Windows, a command prompt) and navigate to the repository you cloned. Now type `npm install` to get the dependencies all set up. Once that finishes, you can type `npm run build`. You can now upload the entire repository to your `wp-content/plugins` directory on your webserver and activate the plugin from the WordPress admin. You'll get a separate WordPress menu item called Gutenberg.
+First, you need a WordPress Environment to run the plugin on. The quickest way to get up and running is to use the provided docker setup. Just install [docker](https://www.docker.com/) on your machine and run `./bin/setup-local-env.sh`.
 
-You can also type `npm run package-plugin` which will run the two commands above and create a zip file automatically for you which you can use to install Gutenberg through the WordPress admin.
+The WordPress installation should be available at `http://localhost:8888` (username: `admin`, password: `password`).
+Inside the "docker" directory, you can use any docker command to interact with your containers.
+
+Alternatively, you can use your own local WordPress environment and clone this repository right into your `wp-content/plugins` directory.
 
-### On a Local WordPress Environment
+Next, open a terminal (or if on Windows, a command prompt) and navigate to the repository you cloned. Now type `npm install` to get the dependencies all set up. Then you can type `npm run dev` in your terminal or command prompt to keep the plugin building in the background as you work on it.
+
+### On A Remote Server
 
-If you have a local WordPress environment, you can clone this repository right into your `wp-content/plugins` directory. `npm install` will get the dependencies set up. Then you can type `npm run dev` in your terminal or command prompt to keep the plugin building in the background as you work on it.
+Open a terminal (or if on Windows, a command prompt) and navigate to the repository you cloned. Now type `npm install` to get the dependencies all set up. Once that finishes, you can type `npm run build`. You can now upload the entire repository to your `wp-content/plugins` directory on your webserver and activate the plugin from the WordPress admin.
 
-Some good options for a local WordPress development environment include <a href="https://varyingvagrantvagrants.org/">VVV</a> and <a href="https://www.mamp.info/">Mamp</a>.
+You can also type `npm run package-plugin` which will run the two commands above and create a zip file automatically for you which you can use to install Gutenberg through the WordPress admin.
 
 ## Workflow
 
@@ -52,6 +57,27 @@ To run unit tests only, use `npm run test-unit` instead.
 
 Code style in JavaScript is enforced using [ESLint](http://eslint.org/). The above `npm test` will execute both unit tests and code linting. Code linting can be verified independently by running `npm run lint`.
 
+### End to end Testing (integration tests)
+
+If you're using the built-in local environment above, you can run the e2e tests locally using this command:
+
+```bash
+npm run test-e2e
+```
+
+or interactively
+
+```bash
+npm run test-e2e:watch
+```
+
+If you're using another local environment setup, you can still run the e2e tests by overriding the base URL and the default WP username/password used in the tests like so:
+
+```bash
+cypress_base_url=http://my-custom-basee-url cypress_username=myusername cypress_password=mypassword npm run test-e2e
+```
+
+
 ### PHP Testing
 
 Tests for PHP use [PHPUnit](https://phpunit.de/) as the testing framework. Before starting, you should install PHPUnit and have a copy of [WordPress Develop](https://github.com/WordPress/wordpress-develop) available and setup a [`wp-tests-config.php`](https://make.wordpress.org/core/handbook/testing/automated-testing/phpunit/#setup) file. If the Gutenberg plugin is installed in the context of a WordPress Develop site, you can run `phpunit` directly from the command-line. Otherwise, you will need to specify the path to WordPress Develop's test directory as an environment variable:

bin/run-e2e-tests.sh

@@ -0,0 +1,11 @@
+# Exit if any command fails
+set -e
+
+# Change to the expected directory
+cd "$(dirname "$0")/../"
+
+# Setup local environement
+( ./bin/setup-local-env.sh )
+
+# Run the tests
+npm run test-e2e

bin/setup-local-env.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+# Exit if any command fails
+set -e
+
+# Change to the expected directory
+cd "$(dirname "$0")/../docker"
+
+# Launch the WordPress docker
+docker-compose up -d
+
+# Wait until the docker containers are setup properely
+echo "Attempting to connect to wordpress"
+until $(curl -L http://localhost:8888 -so - | grep -q "WordPress"); do
+    printf '.'
+    sleep 5
+done
+
+# Install WordPress
+docker run -it --rm --volumes-from wordpress-dev --network container:wordpress-dev wordpress:cli core install --url=localhost:8888 --title=Gutenberg --admin_user=admin --admin_password=password [email protected]
+
+# Activate Gutenberg
+docker run -it --rm --volumes-from wordpress-dev --network container:wordpress-dev wordpress:cli plugin activate gutenberg

cypress.json

@@ -0,0 +1,11 @@
+{
+	"baseUrl": "http://localhost:8888",
+	"env": {
+		"username": "admin",
+		"password": "password"
+	},
+	"integrationFolder": "test/e2e/integration",
+	"supportFile": "test/e2e/support",
+	"videoRecording": false,
+	"chromeWebSecurity": false
+}

docker/docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.1'
+
+services:
+
+  wordpress:
+    image: wordpress
+    ports:
+      - 8888:80
+    environment:
+      WORDPRESS_DB_PASSWORD: example
+    volumes:
+      - ../:/var/www/html/wp-content/plugins/gutenberg
+    container_name: wordpress-dev
+
+  mysql:
+    image: mysql:5.7
+    environment:
+      MYSQL_ROOT_PASSWORD: example