Feat/perf tests

.github/workflows/perf-tests.yml

@@ -0,0 +1,99 @@
+name: Performance Tests
+on:
+  push:
+    branches-ignore:
+      - 'main-built'
+  pull_request:
+
+jobs:
+  performance-tests:
+    name: 'Performance Tests'
+    runs-on: ubuntu-latest
+    env:
+      WP_BASE_URL: 'http://localhost:8888'
+      WP_USERNAME: 'admin'
+      WP_PASSWORD: 'password'
+      WP_AUTH_STORAGE: '.auth/wordpress.json'
+      WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: yarn
+
+      - name: Cache Composer dependencies
+        uses: actions/cache@v4
+        with:
+          path: /tmp/composer-cache
+          key: ${{ runner.os }}-${{ hashFiles('**/composer.lock') }}
+
+      - name: Setup composer
+        uses: php-actions/composer@v6
+        with:
+          php_version: '8.3'
+          dev: no
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Playwright install
+        run: yarn playwright install chromium
+
+      - name: Start wp-env
+        run: yarn wp-env
+
+      - name: Run tests
+        run: |
+          yarn test:performance
+          mv ${{ env.WP_ARTIFACTS_PATH }}/performance-results.json ${{ runner.temp }}/results_after.json
+
+      - name: Check out base commit
+        run: |
+          if [[ -z "$BASE_REF" ]]; then
+            git fetch -n origin $BASE_SHA
+            git reset --hard $BASE_SHA
+          else
+            git fetch -n origin $BASE_REF
+            git reset --hard $BASE_SHA
+          fi
+        env:
+          BASE_REF: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || '' }}
+          BASE_SHA: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event.before }}
+
+      # Run tests without causing job to fail if they don't pass (e.g. because of env issues).
+      - name: Run tests for base
+        run: |
+          npm run test:performance || true
+          if [ -f "{{ env.WP_ARTIFACTS_PATH }}/performance-results.json" ]; then
+            mv ${{ env.WP_ARTIFACTS_PATH }}/performance-results.json ${{ runner.temp }}/results_before.json
+          fi;
+
+      - name: Reset to original commit
+        run: |
+          git reset --hard $GITHUB_SHA
+
+      - name: Compare results with base
+        run: |
+          if [ -f "${{ runner.temp }}/results_before.json" ]; then
+            yarn test:performance:results ${{ runner.temp }}/results_after.json ${{ runner.temp }}/results_before.json
+          else
+            yarn test:performance:results ${{ runner.temp }}/results_after.json
+          fi;
+
+      - name: Add workflow summary
+        run: |
+          cat ${{ env.WP_ARTIFACTS_PATH }}/performance-results.md >> $GITHUB_STEP_SUMMARY
+
+      - name: Upload performance results
+        if: success()
+        uses: actions/upload-artifact@v4
+        with:
+          name: performance-results
+          path: ${{ env.WP_ARTIFACTS_PATH }}/performance-results.json

jest.config.js

@@ -5,7 +5,10 @@ module.exports = {
 	},
 	modulePathIgnorePatterns: ['<rootDir>/vendor/'],
 	testEnvironment: 'jsdom',
-	testPathIgnorePatterns: ['<rootDir>/tests/e2e/'],
+	testPathIgnorePatterns: [
+		'<rootDir>/tests/e2e/',
+		'<rootDir>/tests/performance/',
+	],
 	collectCoverage: true,
 	coverageReporters: ['text', 'cobertura'],
 };

package.json

@@ -1,69 +1,72 @@
 {
-	"name": "codeb-feature-flags",
-	"version": "0.3.2",
-	"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": "wp-scripts test-playwright",
-		"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",
-		"wp-env:coverage": "wp-env start --xdebug=coverage",
-		"php:unit": "wp-env run --env-cwd='wp-content/plugins/feature-flags' tests-wordpress composer test:unit",
-		"php:integration": "wp-env run tests-wordpress --env-cwd=wp-content/plugins/feature-flags composer test:integration",
-		"php:multisite": "wp-env run tests-wordpress --env-cwd=wp-content/plugins/feature-flags composer test:multisite"
-	},
-	"dependencies": {
-		"@testing-library/user-event": "^14.5.2",
-		"@wordpress/api-fetch": "^6.48.0",
-		"@wordpress/components": "^27.1.0",
-		"@wordpress/data": "^9.23.0",
-		"@wordpress/dom-ready": "^3.53.0",
-		"@wordpress/hooks": "^3.53.0",
-		"@wordpress/i18n": "^4.53.0",
-		"@wordpress/notices": "^4.21.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.4.2"
-	},
-	"devDependencies": {
-		"@playwright/test": "^1.42.1",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@testing-library/react": "14.2.1",
-		"@types/jest": "^29.5.12",
-		"@types/node": "^20.11.25",
-		"@types/react-syntax-highlighter": "^15.5.11",
-		"@types/wordpress__components": "^23.0.11",
-		"@wordpress/e2e-test-utils-playwright": "^0.21.0",
-		"@wordpress/env": "^9.5.0",
-		"@wordpress/eslint-plugin": "^17.10.0",
-		"@wordpress/scripts": "^27.4.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": [
-		"feature flags",
-		"wordpress",
-		"plugin"
-	]
+  "name": "codeb-feature-flags",
+  "version": "0.3.2",
+  "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": "wp-scripts test-playwright",
+	"test:js": "wp-scripts test-unit-js",
+	"test:performance": "wp-scripts test-playwright --config tests/performance/playwright.config.ts",
+	"test:performance:merge-reports": "playwright merge-reports --reporter tests/performance/config/performance-reporter.ts ./blob-report",
+	"test:performance:results": "node tests/performance/cli/results.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",
+	"wp-env:coverage": "wp-env start --xdebug=coverage",
+	"php:unit": "wp-env run --env-cwd='wp-content/plugins/feature-flags' tests-wordpress composer test:unit",
+	"php:integration": "wp-env run tests-wordpress --env-cwd=wp-content/plugins/feature-flags composer test:integration",
+	"php:multisite": "wp-env run tests-wordpress --env-cwd=wp-content/plugins/feature-flags composer test:multisite"
+  },
+  "dependencies": {
+	"@testing-library/user-event": "^14.5.2",
+	"@wordpress/api-fetch": "^6.48.0",
+	"@wordpress/components": "^27.1.0",
+	"@wordpress/data": "^9.23.0",
+	"@wordpress/dom-ready": "^3.53.0",
+	"@wordpress/hooks": "^3.53.0",
+	"@wordpress/i18n": "^4.53.0",
+	"@wordpress/notices": "^4.21.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.4.2"
+  },
+  "devDependencies": {
+	"@playwright/test": "^1.42.1",
+	"@testing-library/jest-dom": "^6.4.2",
+	"@testing-library/react": "14.2.1",
+	"@types/jest": "^29.5.12",
+	"@types/node": "^20.11.25",
+	"@types/react-syntax-highlighter": "^15.5.11",
+	"@types/wordpress__components": "^23.0.11",
+	"@wordpress/e2e-test-utils-playwright": "^0.21.0",
+	"@wordpress/env": "^9.5.0",
+	"@wordpress/eslint-plugin": "^17.10.0",
+	"@wordpress/scripts": "^27.4.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": [
+	"feature flags",
+	"wordpress",
+	"plugin"
+  ]
 }

src/components/modals/__tests__/SdkModal.test.js

@@ -4,7 +4,7 @@ import SdkModal from '../SdkModal';
 
 describe('SdkModal component', () => {
 	test('should render modal correctly', async () => {
-		const item = { name: 'Test Flag' };
+		const item = { id: 1, name: 'Test Flag', enabled: false };
 		const closeSdkModal = jest.fn();
 		render(<SdkModal item={item} closeSdkModal={closeSdkModal} />);