Upgrade outdated packages; Bump React to v18

.github/workflows/build-test-measure.yml

@@ -331,6 +331,14 @@ jobs:
         env:
           COMPOSE_INTERACTIVE_NO_CLI: true
 
+
+      # TODO: Remove it once node version in .nvmrc is updated to >=16.
+      - name: Setup Node
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: 16
+          cache: npm
+
       - name: Run E2E tests
         run: npm run test:e2e:ci
 
@@ -372,6 +380,7 @@ jobs:
         include:
           - php: '8.0'
             wp: 'trunk'
+            multisite: true
             experimental: true
 
           - php: '8.1'
@@ -391,6 +400,7 @@ jobs:
             external-http: true
 
           - php: '7.4'
+            multisite: true
             wp: 'latest'
 
           - php: '7.4'
@@ -553,6 +563,14 @@ jobs:
         env:
           WP_TESTS_DIR: /tmp/wordpress-tests-lib
 
+      - name: Run multisite tests
+        if: ${{ matrix.multisite == true && needs.pre-run.outputs.changed-php-count > 0 }}
+        run: vendor/bin/phpunit --verbose
+        working-directory: ${{ env.WP_CORE_DIR }}/src/wp-content/plugins/amp
+        env:
+          WP_TESTS_DIR: /tmp/wordpress-tests-lib
+          WP_MULTISITE: 1
+
       - name: Run tests with coverage
         if: ${{ matrix.coverage == true && needs.pre-run.outputs.changed-php-count > 0 }}
         run: vendor/bin/phpunit --verbose --coverage-clover ${{ env.WP_CORE_DIR }}/src/wp-content/plugins/amp/build/logs/clover.xml
@@ -575,76 +593,6 @@ jobs:
           flags: php,unit
           fail_ci_if_error: true
 
-#-----------------------------------------------------------------------------------------------------------------------
-
-  unit-test-multisite-php:
-    name: 'Unit Tests Multisite: PHP 7.4, WP Latest'
-    needs: pre-run
-    runs-on: ubuntu-latest
-    if: needs.pre-run.outputs.changed-php-count > 0
-    continue-on-error: true
-    strategy:
-      matrix:
-        testsuite: ['default', 'external-http']
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3.6.0
-        with:
-          node-version-file: '.nvmrc'
-          cache: npm
-
-      - name: Get Composer Cache Directory
-        id: composer-cache
-        run: echo "dir=$(composer config cache-files-dir)" >> $GITHUB_OUTPUT
-
-      - name: Configure Composer cache
-        uses: actions/cache@v3.3.1
-        with:
-          path: ${{ steps.composer-cache.outputs.dir }}
-          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-composer-
-
-      - name: Install Node dependencies
-        run: npm ci
-        env:
-          CI: true
-
-      - name: Install Composer dependencies
-        run: |
-          # phpdocumentor/reflection has to be removed as it makes use of an outdated dependency.
-          composer remove --dev phpdocumentor/reflection
-          composer install --prefer-dist --ignore-platform-reqs --no-progress --no-interaction
-
-      # See https://github.com/wp-cli/wp-cli/issues/5484
-      - name: Remove conflicting Requests library
-        run: composer remove --dev --ignore-platform-reqs --no-interaction --no-scripts  roave/security-advisories wp-cli/export-command wp-cli/extension-command wp-cli/wp-cli wp-cli/wp-cli-tests
-
-      - name: Update PHPUnit
-        if: needs.pre-run.outputs.changed-php-count > 0
-        run: |
-          # We are using PHP 7.4 and WP Latest.
-          echo "Installing PHPUnit 9.3"
-          composer require --dev --ignore-platform-reqs phpunit/phpunit:"9.3.*" --with-dependencies
-
-      - name: Build plugin
-        run: npm run build:js
-
-      - name: Move amp-wp to amp
-        run: cp -r "$PWD" "/tmp/amp"
-
-      - name: Start wp-env
-        working-directory: /tmp/amp
-        run: npm run wp-env start
-
-      - name: Run multisite unit tests
-        working-directory: /tmp/amp
-        run: npm run test:php:multisite ${{ matrix.testsuite == 'external-http' && '-- --testsuite external-http' || '' }}
-
 #-----------------------------------------------------------------------------------------------------------------------
 
   feature-test-php:

assets/src/admin/site-scan-notice/index.js

@@ -14,7 +14,7 @@ import {
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
-import { render } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -94,16 +94,15 @@ domReady(() => {
 			event.filename &&
 			/amp-site-scan-notice(\.min)?\.js/.test(event.filename)
 		) {
-			render(<ErrorScreen error={event.error} />, root);
+			createRoot(root).render(<ErrorScreen error={event.error} />);
 		}
 	};
 
 	global.addEventListener('error', errorHandler);
 
-	render(
+	createRoot(root).render(
 		<Providers>
 			<SiteScanNotice />
-		</Providers>,
-		root
+		</Providers>
 	);
 });

assets/src/block-editor/store/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { registerStore } from '@wordpress/data';
+import { createReduxStore, register } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -13,10 +13,12 @@ import * as selectors from './selectors';
  */
 const MODULE_KEY = 'amp/block-editor';
 
-export default registerStore(MODULE_KEY, {
-	reducer: (state) => state,
-	selectors,
-	initialState: {
-		...window.ampBlockEditor,
-	},
-});
+export default register(
+	createReduxStore(MODULE_KEY, {
+		reducer: (state) => state,
+		selectors,
+		initialState: {
+			...window.ampBlockEditor,
+		},
+	})
+);

assets/src/block-validation/components/amp-document-status/index.js

@@ -10,7 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import AMPValidationErrorsKeptIcon from '../../../../images/amp-validation-errors-kept.svg';
 import BellIcon from '../../../../images/bell-icon.svg';
-import { BLOCK_VALIDATION_STORE_KEY } from '../../store';
+import { store as blockValidationStore } from '../../store';
 import { StatusIcon } from '../icon';
 import { SidebarNotification } from '../sidebar-notification';
 import { useAMPDocumentToggle } from '../../hooks/use-amp-document-toggle';
@@ -37,19 +37,18 @@ export default function AMPDocumentStatusNotification() {
 		unreviewedValidationErrorCount,
 	} = useSelect(
 		(select) => ({
-			isPostDirty: select(BLOCK_VALIDATION_STORE_KEY).getIsPostDirty(),
-			maybeIsPostDirty: select(
-				BLOCK_VALIDATION_STORE_KEY
-			).getMaybeIsPostDirty(),
-			keptMarkupValidationErrorCount: select(
-				BLOCK_VALIDATION_STORE_KEY
-			).getKeptMarkupValidationErrors().length,
-			reviewedValidationErrorCount: select(
-				BLOCK_VALIDATION_STORE_KEY
-			).getReviewedValidationErrors().length,
-			unreviewedValidationErrorCount: select(
-				BLOCK_VALIDATION_STORE_KEY
-			).getUnreviewedValidationErrors().length,
+			isPostDirty: select(blockValidationStore).getIsPostDirty(),
+			maybeIsPostDirty:
+				select(blockValidationStore).getMaybeIsPostDirty(),
+			keptMarkupValidationErrorCount:
+				select(blockValidationStore).getKeptMarkupValidationErrors()
+					.length,
+			reviewedValidationErrorCount:
+				select(blockValidationStore).getReviewedValidationErrors()
+					.length,
+			unreviewedValidationErrorCount:
+				select(blockValidationStore).getUnreviewedValidationErrors()
+					.length,
 		}),
 		[]
 	);

assets/src/block-validation/components/amp-document-status/test/amp-document-status-notification.js

@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import { act } from 'react-dom/test-utils';
+import { render, fireEvent } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
-import { render, unmountComponentAtNode } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -28,8 +27,6 @@ jest.mock('../../../hooks/use-errors-fetching-state-changes', () => ({
 }));
 
 describe('AMPDocumentStatusNotification', () => {
-	let container;
-
 	const openGeneralSidebar = jest.fn();
 	const closePublishSidebar = jest.fn();
 
@@ -65,18 +62,6 @@ describe('AMPDocumentStatusNotification', () => {
 		}));
 	});
 
-	beforeEach(() => {
-		// jest.clearAllMocks();
-		container = document.createElement('div');
-		document.body.appendChild(container);
-	});
-
-	afterEach(() => {
-		unmountComponentAtNode(container);
-		container.remove();
-		container = null;
-	});
-
 	it('renders only a toggle if AMP is disabled', () => {
 		setupHooks(
 			{},
@@ -86,9 +71,7 @@ describe('AMPDocumentStatusNotification', () => {
 			}
 		);
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		const { container } = render(<AMPDocumentStatusNotification />);
 
 		expect(container.children).toHaveLength(1);
 		expect(container.innerHTML).toContain('Enable AMP');
@@ -103,9 +86,7 @@ describe('AMPDocumentStatusNotification', () => {
 			}
 		);
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		const { container } = render(<AMPDocumentStatusNotification />);
 
 		expect(container.innerHTML).toContain('Enable AMP');
 		expect(
@@ -119,9 +100,7 @@ describe('AMPDocumentStatusNotification', () => {
 			isPostDirty: true,
 		});
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		let { container } = render(<AMPDocumentStatusNotification />);
 
 		expect(container.innerHTML).toContain('Enable AMP');
 		expect(container.innerHTML).toContain('Content has changed.');
@@ -133,14 +112,13 @@ describe('AMPDocumentStatusNotification', () => {
 			maybeIsPostDirty: true,
 		});
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		({ container } = render(<AMPDocumentStatusNotification />));
 
 		expect(container.innerHTML).toContain('Content may have changed.');
 
 		// Simulate button click.
-		container.querySelector('button').click();
+		fireEvent.click(container.querySelector('button'));
+
 		expect(openGeneralSidebar).toHaveBeenCalledTimes(1);
 		expect(closePublishSidebar).toHaveBeenCalledTimes(1);
 	});
@@ -150,9 +128,7 @@ describe('AMPDocumentStatusNotification', () => {
 			keptMarkupValidationErrorCount: 3,
 		});
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		const { container } = render(<AMPDocumentStatusNotification />);
 
 		expect(container.innerHTML).toContain('Enable AMP');
 		expect(container.innerHTML).toContain(
@@ -169,9 +145,7 @@ describe('AMPDocumentStatusNotification', () => {
 			unreviewedValidationErrorCount: 1,
 		});
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		const { container } = render(<AMPDocumentStatusNotification />);
 
 		expect(container.innerHTML).toContain('Enable AMP');
 		expect(container.innerHTML).toContain(
@@ -186,9 +160,7 @@ describe('AMPDocumentStatusNotification', () => {
 	it('renders a correct message if there are no errors', () => {
 		setupHooks();
 
-		act(() => {
-			render(<AMPDocumentStatusNotification />, container);
-		});
+		const { container } = render(<AMPDocumentStatusNotification />);
 
 		expect(container.innerHTML).toContain('Enable AMP');
 		expect(container.innerHTML).toContain(