Merge pull request #73 from codebtech/chore/step-e2e-tests

Chore/step e2e tests

Author: m0hanraj

.github/workflows/e2e.yml

@@ -48,7 +48,9 @@ jobs:
             - name: Run Playwright tests
               run: npx playwright test
 
-            - uses: actions/upload-artifact@v4
+            - name: Upload artifacts
+              uses: actions/upload-artifact@v4
+              if: always()
               with:
                   name: playwright-report
                   path: playwright-report/

.gitignore

@@ -5,7 +5,6 @@ yarn-error.log
 .phpunit.result.cache
 .DS_Store
 testingdb
-.vscode
 .env
 .auth/
 artifacts/

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+	"recommendations": [
+		"shevaua.phpcs",
+		"sbenp.prettier-vscode"
+	],
+}

README.md

@@ -10,15 +10,15 @@ WordPress Feature flags plugin allow developers to configure features in plugins
 
 ### PHP filters
 
-#### `mr_feature_flags_max_allowed`
+#### `codeb_feature_flags_max_allowed`
 
 Filter to define the maximum number of allowed flags. It is recommended to keep this to default value, which is 20.
 
 Example usage:
 
 ```php
 add_filter(
-	'mr_feature_flags_max_allowed',
+	'codeb_feature_flags_max_allowed',
 	static function () {
 		return 10;
 	}
@@ -27,16 +27,20 @@ add_filter(
 
 ### JS filters
 
-##### `mrFeatureFlags.newFlag.defaultStatus`
+##### `codebFeatureFlags.newFlag.defaultStatus`
 
 The filter controls whether the new flag is enabled by default or not. Default `true`
 
 Example usage:
 
 ```js
-addFilter('mrFeatureFlags.newFlag.defaultStatus', 'codeb-feature-flags', () => {
-	return false;
-});
+addFilter(
+	'codebFeatureFlags.newFlag.defaultStatus',
+	'codeb-feature-flags',
+	() => {
+		return false;
+	}
+);
 ```
 
 ## Development setup
@@ -51,27 +55,33 @@ JS setup
 
 -   `yarn install`
 -   `yarn build` to create the build
--   `yarn start` to start the development watch mode
+-   `yarn start` to start the watch mode
+
+### wp-env
+
+This plugin uses `wp-env` setup to for local environment.
+
+-   `wp-env start` to start the containers
+-   `wp-env stop` to stop the containers
+
+More details on how to access local environment can be found [here](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#quick-tldr-instructions).
 
 ## Linting and formatting
 
 PHP
 
 -   `composer lint`
--   To auto fix the linting errors `composer lint:fix`
-
-💡 [VSCode extension](https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs) to auto format PHP files based on `phpcs.xml.dist` configuration
+-   `composer lint:fix` to auto fix PHP linting errors.
 
 JS
 
 -   `yarn lint:js`
-
-💡 [VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) to auto format JS / TS files based on `.prettierrc.js` configuration
+-   `yarn lint:js:fix` to auto fix JS linting errors.
 
 CSS
 
 -   `yarn lint:css`
--   To auto fix the css linting errors `yarn lint:css:fix`
+-   `yarn lint:css:fix` to auto fix CSS linting errors.
 
 ## Testing
 
@@ -85,10 +95,10 @@ CSS
 
 ### JS
 
--   Run `yarn test:js` which will run all jest and React Testing Library tests
+-   Run `yarn test:js` to run all Jest and React Testing Library tests
 
 ### E2E
 
 The E2E tests depends on `wp-env` setup. Ensure you run `wp-env start` before running the tests.
 
--   Run `yarn test:e2e` which will run all Playwright e2e tests.
+-   Run `yarn test:e2e` to run all Playwright e2e tests.

includes/Api/Flags.php

@@ -13,6 +13,7 @@
 use WP_Error;
 use WP_REST_Server;
 use WP_REST_Request;
+use CodeB\FeatureFlags\Flag;
 
 /**
  * Class Settings
@@ -22,13 +23,6 @@
  */
 class Flags {
 
-	/**
-	 * Name in options table.
-	 *
-	 * @var string $option_name
-	 */
-	public static $option_name = 'mr_feature_flags';
-
 	/**
 	 * Maximum allowed flags.
 	 *
@@ -83,7 +77,7 @@ public function register_routes(): void {
 	 * @return mixed List of flags.
 	 */
 	public function get_all_flags() {
-		$flags = get_option( self::$option_name, [] );
+		$flags = get_option( Flag::$option_name, [] );
 		return rest_ensure_response( $flags );
 	}
 
@@ -102,14 +96,14 @@ public function post_flags( WP_REST_Request $request ) {
 			/**
 			 * Filter to update max allowed feature flags.
 			 */
-			$max_allowed_flags = apply_filters( 'mr_feature_flags_max_allowed', self::$max_flags );
+			$max_allowed_flags = apply_filters( 'codeb_feature_flags_max_allowed', self::$max_flags );
 			if ( count( $input_data['flags'] ) > $max_allowed_flags ) {
 				// translators: %d is a placeholder for the maximum allowed flags.
 				$error_message = sprintf( __( 'Cannot add more than %d flags', 'codeb-feature-flags' ), $max_allowed_flags );
 				return new WP_Error( 'flag_limit_exceeded', $error_message, array( 'status' => 400 ) );
 			}
 
-			update_option( self::$option_name, $input_data['flags'] );
+			update_option( Flag::$option_name, $input_data['flags'] );
 			return rest_ensure_response(
 				array(
 					'status'  => 200,

includes/Flag.php

@@ -23,7 +23,7 @@ class Flag {
 	 *
 	 * @var string $option_name
 	 */
-	public static $option_name = 'mr_feature_flags';
+	public static $option_name = 'codeb_feature_flags';
 
 
 	/**

includes/Helper.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * This is the init file for the plugin
+ * Helper class
  *
  * @package codeb-feature-flags
  * @since 0.1.0
@@ -11,7 +11,7 @@
 namespace CodeB\FeatureFlags;
 
 /**
- * Class FeatureFlags
+ * Class Helper
  *
  * @package codeb-feature-flags
  * @since 0.1.0

includes/Settings.php

@@ -52,6 +52,6 @@ public function register_settings() {
 	 * @return void
 	 */
 	public function render_page(): void {
-		echo '<div id="mr_feature_flags_settings_screen"></div>';
+		echo '<div id="codeb_feature_flags_settings_screen"></div>';
 	}
 }

package.json

@@ -1,56 +1,60 @@
 {
-	"name": "codeb-feature-flags",
-	"version": "0.2.1",
-	"description": "Allows developers to enable / disable features based on flags.",
-	"scripts": {
-		"start": "wp-scripts start",
-		"build": "wp-scripts build",
-		"lint:js": "wp-scripts lint-js",
-		"lint:css": "wp-scripts lint-style",
-		"lint:css:fix": "npm run lint:css -- --fix",
-		"test:js": "wp-scripts test-unit-js",
-		"test:watch": "wp-scripts test-unit-js --watch",
-		"prepare": "husky",
-		"wp-env": "wp-env start",
-		"test:e2e": "npx playwright test --reporter=list"
-	},
-	"devDependencies": {
-		"@playwright/test": "^1.42.0",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@testing-library/react": "14.2.1",
-		"@types/jest": "^29.5.12",
-		"@types/node": "^20.11.20",
-		"@types/react-syntax-highlighter": "^15.5.11",
-		"@types/wordpress__components": "^23.0.11",
-		"@wordpress/e2e-test-utils-playwright": "^0.20.0",
-		"@wordpress/env": "^9.4.0",
-		"@wordpress/eslint-plugin": "^17.9.0",
-		"@wordpress/scripts": "^27.3.0",
-		"eslint": "^8.57.0",
-		"eslint-import-resolver-alias": "^1.1.2",
-		"eslint-plugin-cypress": "^2.15.1",
-		"eslint-plugin-import": "^2.29.1",
-		"husky": "^9.0.11",
-		"jest-environment-jsdom": "^29.7.0",
-		"prettier": "^3.2.5"
-	},
-	"keywords": [],
-	"author": "Mohan Raj <https://mohanraj.dev>",
-	"license": "ISC",
-	"dependencies": {
-		"@wordpress/api-fetch": "^6.48.0",
-		"@wordpress/components": "^27.0.0",
-		"@wordpress/data": "^9.22.0",
-		"@wordpress/dom-ready": "^3.52.0",
-		"@wordpress/hooks": "^3.52.0",
-		"@wordpress/i18n": "^4.52.0",
-		"@wordpress/notices": "^4.20.0",
-		"dotenv": "^16.4.5",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-syntax-highlighter": "^15.5.0",
-		"react-test-renderer": "^18.2.0",
-		"ts-loader": "^9.5.1",
-		"typescript": "^5.3.3"
-	}
-}
+  "name": "codeb-feature-flags",
+  "version": "0.3.0",
+  "description": "Allows developers to enable / disable features based on flags.",
+  "license": "ISC",
+  "author": "Mohan Raj <https://mohanraj.dev>",
+  "scripts": {
+    "build": "wp-scripts build",
+    "lint:css": "wp-scripts lint-style",
+    "lint:css:fix": "npm run lint:css -- --fix",
+    "lint:js": "wp-scripts lint-js",
+    "lint:js:fix": "wp-scripts lint-js --fix",
+    "prepare": "husky",
+    "start": "wp-scripts start",
+    "test:e2e": "npx playwright test --reporter=list",
+    "test:js": "wp-scripts test-unit-js",
+    "test:watch": "wp-scripts test-unit-js --watch",
+    "version:major": "node ./scripts/version major",
+    "version:minor": "node ./scripts/version minor",
+    "version:patch": "node ./scripts/version patch",
+    "wp-env": "wp-env start"
+  },
+  "dependencies": {
+    "@wordpress/api-fetch": "^6.48.0",
+    "@wordpress/components": "^27.0.0",
+    "@wordpress/data": "^9.22.0",
+    "@wordpress/dom-ready": "^3.52.0",
+    "@wordpress/hooks": "^3.52.0",
+    "@wordpress/i18n": "^4.52.0",
+    "@wordpress/notices": "^4.20.0",
+    "dotenv": "^16.4.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-test-renderer": "^18.2.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.42.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.20",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/wordpress__components": "^23.0.11",
+    "@wordpress/e2e-test-utils-playwright": "^0.20.0",
+    "@wordpress/env": "^9.4.0",
+    "@wordpress/eslint-plugin": "^17.9.0",
+    "@wordpress/scripts": "^27.3.0",
+    "eslint": "^8.57.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "husky": "^9.0.11",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.2.5"
+  },
+  "keywords": []
+}

playwright.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
-	workers: 4,
+	workers: process.env.CI ? 4 : 1,
 	reporter: 'html',
 	use: {
 		baseURL: process.env.WP_BASE_URL,