e2e test improvements (#530)

* chore: avoid using default mysql port on host machine

* chore: update broken test

* chore: update broken preview test

* chore: update e2e test instructions

* docs: formatting and wording updates

* docs: .env.test.local -> .env.test

DEVELOPMENT.md

@@ -97,8 +97,8 @@ Use [Codeception](https://codeception.com/) for running end-2-end tests in the b
 
 ### 1. Environment Setup
 
+1. Install [Docker](https://www.docker.com/get-started).
 1. Install [Composer](https://getcomposer.org/).
-   - Within the `plugins/wpe-headless` directory, run `composer install`.
 1. Install [Google Chrome](https://www.google.com/chrome/).
 1. Install [Chromedriver](https://chromedriver.chromium.org/downloads)
    - The major version will need to match your Google Chrome [version](https://www.whatismybrowser.com/detect/what-version-of-chrome-do-i-have). See [Chromedriver Version Selection](https://chromedriver.chromium.org/downloads/version-selection).
@@ -107,23 +107,28 @@ Use [Codeception](https://codeception.com/) for running end-2-end tests in the b
    - In shell, run `chromedriver --version`. _Note: If you are using OS X, it may prevent this program from opening. Open "Security & Privacy" and allow chromedriver_.
    - Run `chromedriver --version` again. _Note: On OS X, you may be prompted for a final time, click "Open"_. When you can see the version, chromedriver is ready.
 
-### 2. Headless Site Setup
+### 2. Front-end Setup
 
-1. From within the headless site `examples/getting-started` copy `.env.test.sample` to `.env.test`.
-   - If you are using the provided Docker build, you will not need to adjust any variables in the `.env.testing` file; else, you can adjust the environment variables as needed.
+1. Create the following `.env.test` in `examples/next/getting-started`.
+```
+# Your WordPress site URL
+NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8080
+
+# Plugin secret found in WordPress Settings->Headless
+WP_HEADLESS_SECRET=00000000-0000-0000-0000-000000000001
+```
+2. From within `examples/next/getting-started`, run `NODE_ENV=test npm run dev`.
 
-### 3. WPE Headless Setup
+### 3. WordPress Setup
 
+1. Leave the node server running and open a new shell.
 1. Move into the WPE Headless plugin directory `plugins/wpe-headless`.
+1. Run `composer install` if you haven't already.
 1. Prepare a test WordPress site.
-   - We have provided a Docker build to reduce the setup needed. You are welcome to set up your own WordPress end-2-end testing site.
-     1. Install [Docker](https://www.docker.com/get-started).
-     1. Run `docker-compose up -d --build`. If building for the first time, it could take some time to download and build the images.
-     1. Run `docker-compose exec --workdir=/var/www/html/wp-content/plugins/wpe-headless --user=www-data wordpress wp plugin install wp-graphql --activate`
-     1. Run `docker-compose exec --workdir=/var/www/html/wp-content/plugins/wpe-headless --user=www-data wordpress wp db export tests/_data/dump.sql`
+    1. Run `docker-compose up -d --build`. If building for the first time, it could take some time to download and build the images.
+    1. Run `docker-compose exec --workdir=/var/www/html/wp-content/plugins/wpe-headless --user=www-data wordpress wp plugin install wp-graphql --activate`
+    1. Run `docker-compose exec --workdir=/var/www/html/wp-content/plugins/wpe-headless --user=www-data wordpress wp db export tests/_data/dump.sql`
 1. Copy `.env.testing.example` to `.env.testing`.
-   - If you are using the provided Docker build, you will not need to adjust any variables in the `.env.testing` file.
-   - If you are not using the provided Docker build, edit the `.env.testing` file with your test WordPress site information.
 1. Run `vendor/bin/codecept run acceptance` to start the end-2-end tests.
 
 ### Browser testing documentation

plugins/wpe-headless/.env.testing.example

@@ -3,8 +3,8 @@ WP_ROOT_FOLDER=/var/www/html
 # Use the following for mysql socket connections
 # TEST_SITE_DB_DSN=mysql:unix_socket=/path/to/unit/mysql.sock;dbname=local
 
-TEST_SITE_DB_DSN=mysql:host=127.0.0.1:3306;dbname=wordpress
-TEST_SITE_DB_HOST=127.0.0.1:3306
+TEST_SITE_DB_DSN=mysql:host=127.0.0.1:33066;dbname=wordpress
+TEST_SITE_DB_HOST=127.0.0.1:33066
 TEST_SITE_DB_NAME=wordpress
 TEST_SITE_DB_USER=root
 TEST_SITE_DB_PASSWORD=wordpress
@@ -22,4 +22,4 @@ TEST_SITE_WP_URL=http://localhost:8080
 TEST_SITE_WP_DOMAIN=localhost:8080
 TEST_SITE_ADMIN_EMAIL=admin@example.com
 
-HEADLESS_SITE_URL=http://localhost:3000
+HEADLESS_SITE_URL=http://localhost:3000

plugins/wpe-headless/docker-compose.yml

@@ -20,7 +20,7 @@ services:
     image: mysql:5.7
     restart: always
     ports:
-      - 3306:3306
+      - 33066:3306
     environment:
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
@@ -31,4 +31,4 @@ services:
 
 volumes:
   wordpress:
-  db:
+  db:

plugins/wpe-headless/tests/acceptance/PostPreviewCest.php

@@ -9,13 +9,15 @@ public function i_can_view_the_post_preview_link(AcceptanceTester $I)
     {
         $post_title = 'Post Preview Post';
         $post_name = 'post-preview-post';
+		$post_content = 'Unpublished preview post content.';
         $front_end_url = 'http://localhost:3000';
 
         $I->haveWpeHeadlessSetting('frontend_uri', $front_end_url);
         $I->haveWpeHeadlessSetting('secret_key', '00000000-0000-0000-0000-000000000001');
         $post_id = $I->havePostInDatabase([
             'post_type' => 'post',
             'post_title' => $post_title,
+			'post_content' => $post_content,
             'post_name' => $post_name,
         ]);
 
@@ -28,7 +30,10 @@ public function i_can_view_the_post_preview_link(AcceptanceTester $I)
             "${front_end_url}/${post_name}/?preview=true",
         );
 
-        $I->amOnHeadlessSite("${post_name}/?preview=true");
-        $I->see('Post Preview Post', 'main.content-single h1');
+		$I->click('Preview in new tab');
+		$I->switchToNextTab();
+		$I->wait(2); // Wait for authentication
+        $I->see($post_title, 'section h1');
+		$I->see($post_content, 'main.content-single .wrap p');
     }
 }

plugins/wpe-headless/tests/acceptance/SettingsCest.php

@@ -22,11 +22,11 @@ public function i_can_see_the_default_settings(AcceptanceTester $I)
         $I->amOnPluginsPage();
 
         // Deactivate plugin and remove settings.
-        $I->deactivatePlugin('wpengine-headless');
+        $I->deactivatePlugin('wp-engine-headless');
         $I->dontHaveOptionInDatabase('wpe_headless');
 
         // Reactivate plugin triggering default settings.
-        $I->activatePlugin('wpengine-headless');
+        $I->activatePlugin('wp-engine-headless');
 
         $settings = $I->grabOptionFromDatabase('wpe_headless');