E2E Tests: Disable access to remote block directory and patterns

.github/workflows/tests-e2e.yml

@@ -67,7 +67,7 @@ jobs:
   build:
     name: Build plugin
     runs-on: ubuntu-latest
-    timeout-minutes: 30
+    timeout-minutes: 60
     steps:
       - name: Harden Runner
         uses: step-security/harden-runner@18bf8ad2ca49c14cbb28b91346d626ccfb00c518
@@ -128,7 +128,7 @@ jobs:
   e2e:
     name: '${{ matrix.browser }} - WP ${{ matrix.wp }} (${{ matrix.shard }})'
     runs-on: ubuntu-latest
-    timeout-minutes: 30
+    timeout-minutes: 60
     continue-on-error: ${{ matrix.experimental == true }}
     needs: [build, nonce]
     strategy:

bin/local-env/docker-compose.yml

@@ -37,6 +37,7 @@ services:
     volumes:
       - wordpress_data:/var/www/html
       - ../../:/var/www/html/wp-content/plugins/web-stories
+      - ../../packages/e2e-tests/src/plugins:/var/www/html/wp-content/plugins/web-stories-test-plugins
       - ../../packages/e2e-tests/src/assets:/var/www/html/wp-content/e2e-assets
     depends_on:
       - mysql

bin/local-env/install-wordpress.sh

@@ -160,6 +160,9 @@ wp plugin install classic-widgets --force --quiet
 echo -e $(status_message "Activating Twenty Twenty theme...")
 wp theme install twentytwenty --activate --force --quiet
 
+echo -e $(status_message "Disable block directory and remote patterns...")
+wp plugin activate web-stories-test-plugins/disable-block-directory --quiet
+
 # Set pretty permalinks.
 echo -e $(status_message "Setting permalink structure...")
 wp rewrite structure '%postname%' --hard --quiet
@@ -194,7 +197,7 @@ fi
 
 MEDIA_TRASH_CURRENT=!MEDIA_TRASH;
 if [[ "$(wp config has --type=constant MEDIA_TRASH)" ]]; then
-  $MEDIA_TRASH_CURRENT=$(wp config get --type=constant --format=json MEDIA_TRASH | tr -d '\r')
+  MEDIA_TRASH_CURRENT=$(wp config get --type=constant --format=json MEDIA_TRASH | tr -d '\r')
 fi
 
 if [[ "$MEDIA_TRASH" != $MEDIA_TRASH_CURRENT ]]; then

includes/Media/SVG.php

@@ -257,24 +257,24 @@ public function wp_handle_upload( array $upload ): array {
 	 *
 	 * @since 1.3.0
 	 *
-	 * @param array         $wp_check_filetype_and_ext {
-	 *                                                 Values for the extension, mime type, and corrected filename.
+	 * @param array               $wp_check_filetype_and_ext {
+	 *                                                       Values for the extension, mime type, and corrected filename.
 	 *
-	 * @type string|false   $ext                       File extension, or false if the file doesn't match a mime type.
-	 * @type string|false   $type                      File mime type, or false if the file doesn't match a mime type.
-	 * @type string|false   $proper_filename           File name with its correct extension, or false if it cannot be
+	 * @type string|false         $ext                       File extension, or false if the file doesn't match a mime type.
+	 * @type string|false         $type                      File mime type, or false if the file doesn't match a mime type.
+	 * @type string|false         $proper_filename           File name with its correct extension, or false if it cannot be
 	 *       determined.
 	 * }
-	 * @param string        $file                      Full path to the file.
-	 * @param string        $filename                  The name of the file (may differ from $file due to
-	 *                                                 $file being in a tmp directory).
-	 * @param string[]|null $mimes                     Array of mime types keyed by their file extension regex.
-	 * @param string|bool   $real_mime                 The actual mime type or false if the type cannot be determined.
+	 * @param string              $file                      Full path to the file.
+	 * @param string              $filename                  The name of the file (may differ from $file due to
+	 *                                                       $file being in a tmp directory).
+	 * @param string[]|null|false $mimes                     Array of mime types keyed by their file extension regex.
+	 * @param string|bool         $real_mime                 The actual mime type or false if the type cannot be determined.
 	 * @return array{ext?: string, type?: string, proper_filename?: bool}
 	 *
 	 * @phpstan-param array{ext?: string, type?: string, proper_filename?: bool} $wp_check_filetype_and_ext
 	 */
-	public function wp_check_filetype_and_ext( array $wp_check_filetype_and_ext, string $file, string $filename, ?array $mimes, $real_mime ): array {
+	public function wp_check_filetype_and_ext( array $wp_check_filetype_and_ext, string $file, string $filename, $mimes, $real_mime ): array {
 		if ( 'image/svg' === $real_mime ) {
 			$wp_check_filetype_and_ext = [
 				'ext'             => self::EXT,

includes/namespace.php

@@ -41,7 +41,7 @@
  *
  * @param bool $network_wide Whether to activate network-wide.
  */
-function activate( bool $network_wide = false ): void {
+function activate( ?bool $network_wide = false ): void {
 	$network_wide = (bool) $network_wide;
 
 	// Runs all PluginActivationAware services.
@@ -116,7 +116,7 @@ function remove_site( WP_Error $error, $site ): void {
  *
  * @param bool $network_wide Whether to deactivate network-wide.
  */
-function deactivate( bool $network_wide = false ): void {
+function deactivate( ?bool $network_wide = false ): void {
 	$network_wide = (bool) $network_wide;
 
 	// Runs all PluginDeactivationAware services.

packages/e2e-tests/src/jest.config.js

@@ -46,8 +46,8 @@ export default {
   setupFilesAfterEnv: [
     'jest-extended/all',
     '<rootDir>/packages/e2e-tests/src/config/bootstrap.js',
-    '@wordpress/jest-puppeteer-axe',
-    '@wordpress/jest-console',
+    '<rootDir>/packages/e2e-tests/node_modules/@wordpress/jest-puppeteer-axe',
+    '<rootDir>/packages/e2e-tests/node_modules/@wordpress/jest-console',
     'expect-puppeteer',
   ],
   modulePathIgnorePatterns: ['<rootDir>/build', '<rootDir>/vendor'],

packages/e2e-tests/src/plugins/disable-block-directory.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Plugin Name: E2E Tests Disable Block Directory
+ * Plugin URI:  https://github.com/googleforcreators/web-stories-wp
+ * Description: Disable access to block directory and remote patterns.
+ * Author:      Google
+ * Author URI:  https://opensource.google.com
+ * License:     Apache License 2.0
+ * License URI: https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * @copyright 2023 Google LLC
+ * @license   https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
+ */
+
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+namespace Google\Web_Stories\E2E\BlockDirectory;
+
+add_action(
+	'admin_init',
+	function() {
+		remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
+		remove_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_block_editor_assets_block_directory' );
+	}
+);
+
+add_filter( 'should_load_remote_block_patterns', '__return_false' );

packages/e2e-tests/src/specs/editor/backgroundAudio.js

@@ -92,8 +92,9 @@ describe('Background Audio', () => {
     it('should allow adding background audio', async () => {
       await createNewStory();
 
-      // Select the current page by clicking bg change quick action (because of empty state).
-      await expect(page).toClick('button', { text: 'Change background color' });
+      await page.focus('[aria-label="Element: Background"]');
+
+      await expect(page).toClick('li', { text: /^Style$/i });
 
       await expect(page).toMatch('Page Background Audio');
 
@@ -129,8 +130,9 @@ describe('Background Audio', () => {
     it('should allow adding background audio with captions', async () => {
       await createNewStory();
 
-      // Select the current page by clicking bg change quick action (because of empty state).
-      await expect(page).toClick('button', { text: 'Change background color' });
+      await page.focus('[aria-label="Element: Background"]');
+
+      await expect(page).toClick('li', { text: /^Style$/i });
 
       await expect(page).toMatch('Page Background Audio');
 
@@ -180,12 +182,9 @@ describe('Background Audio', () => {
         it('should allow adding background audio', async () => {
           await createNewStory();
 
-          // Select the current page by clicking bg change quick action (because of empty state).
-          await expect(page).toClick('button', {
-            text: 'Change background color',
-          });
+          await page.focus('[aria-label="Element: Background"]');
 
-          await page.keyboard.press('Escape');
+          await expect(page).toClick('li', { text: /^Style$/i });
 
           await expect(page).toMatch('Page Background Audio');
 
@@ -202,6 +201,9 @@ describe('Background Audio', () => {
             text: 'Use audio file',
           });
 
+          // Dialog should disappear by now.
+          await expect(page).not.toMatch('Insert external background audio');
+
           await page.waitForSelector('audio source[src*="audio.mp3"]');
 
           await expect(page).not.toMatchElement('button', {
@@ -214,12 +216,9 @@ describe('Background Audio', () => {
         it('should allow adding background audio with captions', async () => {
           await createNewStory();
 
-          // Select the current page by clicking bg change quick action (because of empty state).
-          await expect(page).toClick('button', {
-            text: 'Change background color',
-          });
+          await page.focus('[aria-label="Element: Background"]');
 
-          await page.keyboard.press('Escape');
+          await expect(page).toClick('li', { text: /^Style$/i });
 
           await expect(page).toMatch('Page Background Audio');