Add env and e2e set up (#172)

* Add env via wp-env

* Set up End to End testing

* Update pnpm-lock.yaml

* Add E2E tests for WP Telegram Comments

* Add E2E tests for WP Telegram login settings page

* Add E2E tests for WP Telegram Login public UI

* Enable E2E tests

* Add more tests to WP Telegram login

* Add tests for WP Telegram widget

* Move mu-plugins

* Add tests for WP Telegram

.github/workflows/pr-checks.yml

@@ -91,13 +91,75 @@ jobs:
           enable-wireit-cache: true
 
       - name: Lint
-        run: "pnpm lint:js"
+        run: "pnpm run lint:js"
 
       - name: Typecheck
-        run: pnpm typecheck
+        run: pnpm run typecheck
 
       - name: Build
-        run: pnpm build
+        run: pnpm run build
 
       - name: Bundle
-        run: pnpm bundle:all
+        run: pnpm run bundle:all
+
+  e2e-tests:
+    name: "E2E Tests"
+    if: github.repository == 'wpsocio/wp-projects'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout this repo
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.ACCESS_TOKEN_IR }}
+
+      - name: Remote refs
+        uses: ./actions/upstream-refs
+        id: remote-refs
+
+      - name: Checkout premium projects repo
+        uses: actions/checkout@v4
+        with:
+          path: premium
+          token: ${{ secrets.ACCESS_TOKEN_IR }}
+          repository: ${{ secrets.PREMIUM_PROJECTS_REPO }}
+          ref: ${{ fromJSON(steps.remote-refs.outputs.result).premium || 'main' }}
+
+      - name: Setup Environment
+        uses: ./actions/setup
+        with:
+          enable-wireit-cache: true
+
+      - name: Setup PHP
+        run: "pnpm run setup:php"
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Install Playwright dependencies
+        run: |
+          npx playwright install chromium firefox webkit --with-deps
+
+      - name: Start WordPress Environment
+        run: |
+          pnpm run env-start
+
+      - name: Run tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: pnpm run test:e2e
+
+      - name: Upload debug artifacts
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: failures-artifacts
+          path: |
+            artifacts/
+            !artifacts/test-results
+          if-no-files-found: ignore
+
+      - name: Stop WordPress Environment
+        run: |
+          pnpm run env-stop

.gitignore

@@ -17,6 +17,8 @@ vendor/
 !/packages/
 !/plugins/
 !/tools/
+!/test/
+!/patches/
 
 # Ignore all plugins because there may be other plugins installed
 /plugins/*/

.wp-env.json

@@ -0,0 +1,22 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/wp-env.json",
+	"config": {
+		"WP_DEBUG_LOG": true
+	},
+	"mappings": {
+		"wp-content/plugins/wptelegram": "./plugins/wptelegram",
+		"wp-content/plugins/wptelegram-comments": "./plugins/wptelegram-comments",
+		"wp-content/plugins/wptelegram-login": "./plugins/wptelegram-login",
+		"wp-content/plugins/wptelegram-widget": "./plugins/wptelegram-widget"
+	},
+	"env": {
+		"tests": {
+			"mappings": {
+				"wp-content/plugins/classic-editor": "WordPress/classic-editor",
+				"wp-content/mu-plugins": "./test/e2e/mu-plugins",
+				"wp-content/themes/gutenberg-test-themes/twentytwentyone": "https://downloads.wordpress.org/theme/twentytwentyone.2.3.zip",
+				"wp-content/themes/gutenberg-test-themes/twentytwentyfour": "https://downloads.wordpress.org/theme/twentytwentyfour.1.2.zip"
+			}
+		}
+	}
+}

biome.json

@@ -25,6 +25,18 @@
 			"recommended": true,
 			"style": {
 				"useTemplate": "off"
+			},
+			"correctness": {
+				"noUnusedImports": {
+					"level": "warn",
+					"fix": "none"
+				},
+				"noUnusedVariables": "warn"
+			},
+			"suspicious": {
+				"noConsoleLog": {
+					"level": "warn"
+				}
 			}
 		}
 	}

package.json

@@ -18,6 +18,8 @@
 		"bundle:changed": "wireit",
 		"dev": "wireit",
 		"dev:cleanup": "wireit",
+		"env-start": "wp-env start",
+		"env-stop": "wp-env stop",
 		"lint:all": "wireit",
 		"lint:js": "wireit",
 		"lint:js:fix": "biome format ./ --fix",
@@ -29,15 +31,23 @@
 		"postinstall": "pnpm build:tools",
 		"setup:all": "wireit",
 		"setup:php": "wireit",
+		"test:e2e": "wp-scripts test-playwright --config test/e2e/playwright.config.ts",
+		"test:e2e:debug": "wp-scripts test-playwright --config test/e2e/playwright.config.ts --ui",
 		"test:php": "wireit",
 		"typecheck": "wireit",
 		"upgrade-all": "pnpm ncu -u && pnpm -r exec pnpm ncu -u",
-		"wp": "composer run wp -- "
+		"wp": "composer run wp -- ",
+		"wp-env": "wp-env"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3",
 		"@changesets/changelog-github": "^0.5.0",
 		"@changesets/cli": "^2.27.7",
+		"@playwright/test": "^1.47.2",
+		"@types/node": "^20.14.12",
+		"@wordpress/e2e-test-utils-playwright": "^1.9.0",
+		"@wordpress/env": "^10.9.0",
+		"@wordpress/scripts": "^30.1.0",
 		"@wpsocio/wpdev": "workspace:*",
 		"npm-check-updates": "^16.14.20",
 		"rimraf": "^6.0.1",

packages/js/shared/wptelegram-ui/components/rules/AddRuleGroup.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
 import { Button } from '@wpsocio/adapters';
-import { AddIcon } from '@wpsocio/icons';
 import { __ } from '@wpsocio/i18n';
+import { AddIcon } from '@wpsocio/icons';
 
 import { DEFAULT_RULE } from './constants';
 import type { RuleGroupProps } from './types';
@@ -16,7 +16,7 @@ export const AddRuleGroup: React.FC<AddRuleGroupProps> = ({ rulesArray }) => {
 
 	return (
 		<Button leftIcon={<AddIcon />} onClick={onClick}>
-			{__('Add')}
+			{__('Add rule')}
 		</Button>
 	);
 };

packages/js/shared/wptelegram-ui/components/rules/RuleSetButtons.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
+import { Box, Flex, IconButton } from '@wpsocio/adapters';
 import { __ } from '@wpsocio/i18n';
 import { AddIcon, CloseIcon } from '@wpsocio/icons';
-import { Box, Flex, IconButton } from '@wpsocio/adapters';
 
 import { DEFAULT_RULE } from './constants';
 import type { RuleSetProps } from './types';
@@ -24,7 +24,7 @@ export const RuleSetButtons: React.FC<RuleSetProps> = (props) => {
 		<Flex alignItems="center">
 			<Box ps="0.5em">
 				<IconButton
-					aria-label={__('Add')}
+					aria-label={__('Add another rule')}
 					icon={<AddIcon />}
 					onClick={onAdd}
 					title={__('Add')}
@@ -33,7 +33,7 @@ export const RuleSetButtons: React.FC<RuleSetProps> = (props) => {
 			</Box>
 			<Box ps="0.5em">
 				<IconButton
-					aria-label={__('Remove')}
+					aria-label={__('Remove this rule')}
 					icon={<CloseIcon />}
 					onClick={onRemove}
 					title={__('Remove')}

plugins/wptelegram-comments/composer.json

@@ -15,7 +15,10 @@
 	"repositories": {
 		"local": {
 			"type": "path",
-			"url": "../../packages/php/*"
+			"url": "../../packages/php/*",
+			"options": {
+				"symlink": false
+			}
 		}
 	},
 	"config": {

plugins/wptelegram-comments/dev.php

@@ -7,7 +7,7 @@
  * @package           @WPTelegram/Comments
  *
  * @wordpress-plugin
- * Plugin Name:       WP Telegram Comments Dev
+ * Plugin Name:       WP Telegram Comments
  * Plugin URI:        https://t.me/WPTelegram
  * Description:       ❌ DO NOT DELETE ❌ Development Environment for WP Telegram Comments. Versioned high to avoid auto update.
  * Version:           999.999.999

plugins/wptelegram-comments/src/includes/restApi/SettingsController.php

@@ -250,7 +250,7 @@ public static function sanitize_param( $value, WP_REST_Request $request, $key )
 			case 'post_types':
 				return array_map( 'sanitize_text_field', $value );
 			case 'exclude':
-				return implode( ',', array_filter( array_map( 'sanitize_text_field', explode( ',', $value ) ) ) );
+				return implode( ',', array_filter( array_map( 'intval', explode( ',', $value ) ) ) );
 		}
 	}
 }

plugins/wptelegram-login/composer.json

@@ -18,7 +18,10 @@
 	"repositories": {
 		"local": {
 			"type": "path",
-			"url": "../../packages/php/*"
+			"url": "../../packages/php/*",
+			"options": {
+				"symlink": false
+			}
 		}
 	},
 	"config": {