Add e2e tests for DnD in the inserter

WordPress · Oct 13, 2022 · 05a2ed6 · 05a2ed6
1 parent d7e9b29
commit 05a2ed6
Show file tree

Hide file tree

Showing 6 changed files with 352 additions and 3 deletions.
diff --git a/.github/workflows/end2end-test-playwright.yml b/.github/workflows/end2end-test-playwright.yml
@@ -39,22 +39,22 @@ jobs:
 
             - name: Install Playwright dependencies
               run: |
-                  npx playwright install chromium --with-deps
+                  npx playwright install chromium firefox webkit --with-deps
 
             - name: Install WordPress and start the server
               run: |
                   npm run wp-env start
 
             - name: Run the tests
               run: |
-                  npm run test:e2e:playwright
+                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright
 
             - name: Archive debug artifacts (screenshots, traces)
               uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
               if: always()
               with:
                   name: failures-artifacts
-                  path: artifacts
+                  path: artifacts/test-results
                   if-no-files-found: ignore
 
             - name: Archive flaky tests report

diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -49,6 +49,8 @@
 				border-radius: $radius-block-ui;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
+				// This fixes drag-and-drop in Firefox.
+				pointer-events: none;
 			}
 		}
 

diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import os from 'os';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { devices } from '@playwright/test';
@@ -54,6 +55,30 @@ const config: PlaywrightTestConfig = {
 		{
 			name: 'chromium',
 			use: { ...devices[ 'Desktop Chrome' ] },
+			grepInvert: /-chromium/,
+		},
+		{
+			name: 'webkit',
+			use: {
+				...devices[ 'Desktop Safari' ],
+				/**
+				 * Headless webkit won't receive dataTransfer with custom types in the
+				 * drop event on Linux. The solution is to use `xvfb-run` to run the tests.
+				 * ```sh
+				 * xvfb-run npm run test:e2e:playwright
+				 * ```
+				 * See `.github/workflows/end2end-test-playwright.yml` for advanced usages.
+				 */
+				headless: os.type() !== 'Linux',
+			},
+			grep: /@webkit/,
+			grepInvert: /-webkit/,
+		},
+		{
+			name: 'firefox',
+			use: { ...devices[ 'Desktop Firefox' ] },
+			grep: /@firefox/,
+			grepInvert: /-firefox/,
 		},
 	],
 };

diff --git a/...refox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt b/...refox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt
@@ -0,0 +1,11 @@
+<!-- wp:paragraph -->
+<p>Dummy text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
+<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"url":"#","service":"chain"} /-->
+
+<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
+<!-- /wp:social-links -->
diff --git a/...firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt b/...firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt
@@ -0,0 +1,11 @@
+<!-- wp:paragraph -->
+<p>Dummy text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
+<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"url":"#","service":"chain"} /-->
+
+<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
+<!-- /wp:social-links -->