feat: add E2E test support with wp-scripts and Playwright

.github/workflows/e2e.yml

@@ -0,0 +1,50 @@
+name: Test e2e
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review]
+    branches-ignore:
+      - "update_dependencies"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.ref }}
+  cancel-in-progress: true
+jobs:
+  e2e:
+    if: github.event.pull_request.draft == false && github.event.pull_request.head.repo.full_name == github.event.pull_request.base.repo.full_name
+    name: Playwright E2E tests
+    strategy:
+      fail-fast: false
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Setup PHP version
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: "7.4"
+          extensions: simplexml
+      - name: Check out source files
+        uses: actions/checkout@v4
+      - name: Install composer deps
+        run: composer install --no-dev --prefer-dist --no-progress --no-suggest
+      - name: Install npm deps
+        run: |
+          npm ci
+          npm install -g playwright-cli
+          npx playwright install --with-deps chromium
+      - name: Install environment
+        run: |
+          cp ./bin/themeisle-sdk.php ./      
+          npm run wp-env start
+      - name: Run the tests
+        run: |
+          npm run test:e2e:playwright
+        env:
+          GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}
+      - name: Archive test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-playwright-results
+          path: artifacts
+          retention-days: 1
+          if-no-files-found: ignore

.github/workflows/qa-zip.yaml

@@ -14,19 +14,13 @@ jobs:
       branch-name: ${{ steps.retrieve-branch-name.outputs.branch_name }}
       git-sha-8: ${{ steps.retrieve-git-sha-8.outputs.sha8 }}
     steps:
+      - name: Setup PHP version
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: "7.4"
+          extensions: simplexml
       - name: Check out source files
         uses: actions/checkout@v2
-      - name: Get Composer Cache Directory
-        id: composer-cache
-        run: |
-          echo "::set-output name=dir::$(composer config cache-files-dir)"
-      - name: Configure Composer cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.composer-cache.outputs.dir }}
-          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-composer-
       - name: Install composer deps
         run: composer install --no-dev --prefer-dist --no-progress --no-suggest
       - name: Install NPM deps

.github/workflows/test-php.yml

@@ -3,38 +3,30 @@ name: Test PHP
 on:
   push:
     branches-ignore:
-      - 'master'
+      - "master"
 jobs:
   phplint:
     name: PHP Lint
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Setup PHP version
-        uses: shivammathur/setup-php@v1
+        uses: shivammathur/setup-php@v2
         with:
-          php-version: '7.2'
+          php-version: "7.4"
           extensions: simplexml
       - name: Checkout source code
-        uses: actions/checkout@v2
-      - name: Get Composer Cache Directory
-        id: composer-cache
-        run: |
-          echo "::set-output name=dir::$(composer config cache-files-dir)"
-      - name: Setup Composer cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.composer-cache.outputs.dir }}
-          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-composer-
+        uses: actions/checkout@v4
       - name: Install composer
         run: composer install --prefer-dist --no-progress --no-suggest
       - name: Run PHPCS
         run: composer run lint
 
   phpunit:
     name: PHPUnit
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        php: [ "7.4", "8.0" ]
     services:
       mysql:
         image: mysql:5.7
@@ -47,25 +39,14 @@ jobs:
       - name: Setup PHP version
         uses: shivammathur/setup-php@v2
         with:
-          php-version: '7.2'
+          php-version: ${{ matrix.php }}
           extensions: simplexml, mysql
           tools: phpunit-polyfills
       - name: Checkout source code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Install WordPress Test Suite
         run: |
           bash bin/install-wp-tests.sh wordpress_test root root 127.0.0.1:${{ job.services.mysql.ports['3306'] }}
-      - name: Get Composer Cache Directory
-        id: composer-cache
-        run: |
-          echo "::set-output name=dir::$(composer config cache-files-dir)"
-      - name: Setup Composer cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.composer-cache.outputs.dir }}
-          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-composer-
       - name: Install composer
         run: composer install --prefer-dist --no-progress --no-suggest --no-dev
       - name: Run phpunit

.gitignore

@@ -1,7 +1,11 @@
+.DS_Store
 .idea
-node_modules
+.vscode
+artifact
+artifacts
+dist
 logs
+node_modules
+themeisle-sdk.php
 vendor
-.DS_Store
-dist
-artifact
+.phpunit.result.cache

.wp-env.override.json

@@ -0,0 +1,11 @@
+{
+  "core": null,
+  "plugins": [ "." ],
+  "config": {
+    "WP_DEBUG": true,
+    "WP_DEBUG_DISPLAY": true
+  },
+  "lifecycleScripts": {
+		"afterStart": "bash ./bin/setup-env-e2e.sh"
+	}
+}

README.md

@@ -28,3 +28,7 @@ and manually autoloading the load.php file in the composer.json file of your pro
 - The library works out of the box by simply loading the autoloader into the plugin/theme files.
 - Some modules are loaded only if the product is not available on WordPress.org ( licenser/review ). You can define if the product is available on wordpress.org by adding this file header `WordPress Available:  <yes|no>` where `<yes|no>` will be replaced with the proper status.
 - If the product requires is a premium one and requires a licesing mechanism, we can use `Requires License: <yes|no>` to specifically tell that the product requires license.
+
+### Guides
+- [Add and use Telemetry in a product](./docs/TELEMETRY.md)
+- [Running and adding an E2E test](./docs/E2E.md)

assets/js/build/tracking/tracking.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'b8af0b12ad3cabe4c4b8');
+<?php return array('dependencies' => array(), 'version' => 'f35e2c927fed8015fa08');

assets/js/src/tracking.js

@@ -49,8 +49,10 @@ export const getChoice = arr => {
  * @property {boolean} [ignoreLimit] - Ignore the limit of the events to be send.
  */
 
-class EventTrackingAccumulator {
-	constructor() {
+export class EventTrackingAccumulator {
+	constructor( tiTelemetry ) {
+
+		tiTelemetry ??= {}
 
 		/**
 		 * @type {Map<string, TrackingData>} - The events to be sent.
@@ -180,11 +182,9 @@ class EventTrackingAccumulator {
 	 * Send all the events in the accumulator. Clears the accumulator after sending. All the listeners will be notified.
 	 */
 	uploadEvents = async() => {
-
 		if ( 0 === this.events.size ) {
 			return;
 		}
-
 		try {
 			const events = Array.from( this.events.values() );
 			this.events.clear();
@@ -366,7 +366,7 @@ class EventTrackingAccumulator {
 }
 
 // Initialize the accumulator.
-window.tiTrk = new EventTrackingAccumulator();
+window.tiTrk = new EventTrackingAccumulator( window?.tiTelemetry );
 
 // Send the events on save for the customizer.
 window?.wp?.customize?.bind( 'save', () => {

bin/setup-env-e2e.sh

@@ -0,0 +1,17 @@
+echo "Setting up environment for e2e tests"
+
+echo "* The working directory is: $(pwd)"
+
+echo "[1] Transform into a plugin"
+if [ ! -f "./themeisle-sdk.php" ]; then
+  cp ./bin/themeisle-sdk.php ./
+else
+  echo "[Skip] The plugin file already exists"
+fi
+
+echo "[2] Activate Visualizer tracking"
+npm run wp-env run tests-cli wp option set visualizer_logger_flag "yes"
+
+echo "[3] Install plugins"
+npm run wp-env run tests-cli wp plugin install visualizer
+npm run wp-env run tests-cli wp plugin activate visualizer

composer.json

@@ -16,7 +16,8 @@
   ],
   "version": "3.3.29",
   "require-dev": {
-    "codeinwp/phpcs-ruleset": "dev-main"
+    "codeinwp/phpcs-ruleset": "dev-main",
+    "yoast/phpunit-polyfills": "^2.0"
   },
   "scripts": {
 	"format": "phpcbf --standard=phpcs.xml --report-summary --report-source -s  --runtime-set testVersion 7.2- ",