Add CI workflow for JS unit tests (#250)

Props priethor, cbravobernal.

Author: priethor

.github/workflows/e2e.yml

@@ -82,7 +82,7 @@ jobs:
               uses: codecov/codecov-action@v5
               with:
                   token: ${{ secrets.CODECOV_TOKEN }}
-                  files: ./coverage/lcov.info
+                  files: ./coverage/e2e/lcov.info
                   flags: e2e
                   slug: WordPress/secure-custom-fields
                   name: e2e-coverage

.github/workflows/phpunit.yml

@@ -47,13 +47,13 @@ jobs:
           composer install --no-progress --prefer-dist --no-interaction
 
       - name: Run PHPUnit with coverage
-        run: vendor/bin/phpunit --coverage-clover=coverage.xml
+        run: mkdir -p coverage/phpunit && vendor/bin/phpunit --coverage-clover=coverage/phpunit/coverage.xml
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           slug: WordPress/secure-custom-fields
-          files: ./coverage.xml
+          files: ./coverage/phpunit/coverage.xml
           flags: phpunit
           name: phpunit-php-${{ matrix.php }}

.github/workflows/unit-tests.yml

@@ -0,0 +1,65 @@
+name: JavaScript Unit Tests
+
+on:
+    pull_request:
+        branches: [trunk]
+    push:
+        branches: [trunk]
+    # Allow manually triggering the workflow
+    workflow_dispatch:
+
+# Cancels all previous workflow runs for pull requests that have not completed
+concurrency:
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+# Disable permissions for all available scopes by default
+permissions: {}
+
+jobs:
+    unit-js:
+        name: Node.js ${{ matrix.node }}
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+        strategy:
+            fail-fast: false
+            matrix:
+                event: ['${{ github.event_name }}']
+                node: ['20', '22', '24']
+                exclude:
+                    # On PRs: only test minimum supported version
+                    - event: 'pull_request'
+                      node: '22'
+                    - event: 'pull_request'
+                      node: '24'
+
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+              with:
+                  show-progress: false
+                  persist-credentials: false
+
+            - name: Setup Node.js and install dependencies
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node }}
+                  cache: 'npm'
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Run unit tests
+              run: npm run test:unit -- --ci --coverage
+
+            - name: Upload coverage to Codecov
+              if: always()
+              uses: codecov/codecov-action@v5
+              with:
+                  token: ${{ secrets.CODECOV_TOKEN }}
+                  files: ./coverage/unit/lcov.info
+                  flags: javascript
+                  slug: WordPress/secure-custom-fields
+                  name: unit-js-node-${{ matrix.node }}
+                  fail_ci_if_error: false

.nycrc

@@ -1,6 +1,6 @@
 {
 	"tempDir": ".nyc_output",
-	"reportDir": "./coverage",
+	"reportDir": "./coverage/e2e",
 	"reporter": [ "html", "lcov", "text" ],
 	"include": [ "assets/src/**/*.js", "assets/src/**/*.jsx" ],
 	"exclude": [

assets/src/js/pro/blocks-v3/components/error-boundary.js

@@ -1,4 +1,5 @@
 import { Component, createContext } from '@wordpress/element';
+import { BlockPlaceholder } from './block-placeholder';
 
 // Create context outside the class
 export const ErrorBoundaryContext = createContext( null );
@@ -37,6 +38,8 @@ export class ErrorBoundary extends Component {
 	}
 
 	componentDidCatch( error, errorInfo ) {
+		acf.debug( 'Block preview error caught:', error, errorInfo );
+
 		// Call optional onError callback
 		if ( this.props.onError ) {
 			this.props.onError( error, errorInfo );
@@ -123,19 +126,10 @@ export const BlockPreviewErrorFallback = ( {
 	}
 
 	return (
-		<Placeholder
-			icon={ <Icon icon={ blockIcon } /> }
-			label={ blockLabel }
+		<BlockPlaceholder
+			setBlockFormModalOpen={ setBlockFormModalOpen }
+			blockLabel={ blockLabel }
 			instructions={ errorMessage }
-		>
-			<Button
-				variant="primary"
-				onClick={ () => {
-					setBlockFormModalOpen( true );
-				} }
-			>
-				{ acf.__( 'Edit Block' ) }
-			</Button>
-		</Placeholder>
+		/>
 	);
 };

jest.config.js

@@ -15,5 +15,7 @@ module.exports = {
 		'!**/node_modules/**',
 		'!**/vendor/**',
 	],
+	coverageDirectory: 'coverage/unit',
+	coverageReporters: [ 'lcov', 'text', 'html' ],
 	transformIgnorePatterns: [ 'node_modules/(?!(react-jsx-parser)/)' ],
 };

tests/js/blocks-v3/block-edit-error-boundary.test.js

@@ -116,13 +116,14 @@ describe( 'ErrorBoundary Component', () => {
 			</ErrorBoundary>
 		);
 
-		// Verify debug was called
+		// Verify debug was called in componentDidCatch
 		expect( global.acf.debug ).toHaveBeenCalledWith(
 			'Block preview error caught:',
 			expect.any( Error ),
 			expect.any( Object )
 		);
 
+		// Verify debug was called in BlockPreviewErrorFallback
 		expect( global.acf.debug ).toHaveBeenCalledWith(
 			'Block preview error:',
 			expect.any( Error )