Add e2e tests for Drag-and-Drop in the inserter (#44631)

* Add e2e tests for DnD in the inserter * Add some doc about cross-browser testing * Keep changes atomic * Add changelog and link the issue
WordPress · Oct 21, 2022 · 680354b · youknowriad · Nov 1, 2022 · 680354b
1 parent c468f8d
commit 680354b
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 3 deletions.
diff --git a/.github/workflows/end2end-test-playwright.yml b/.github/workflows/end2end-test-playwright.yml
@@ -39,15 +39,15 @@ 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

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `InserterListItem`: Fix dragging and dropping in Firefox. ([#44631](https://github.com/WordPress/gutenberg/pull/44631))
+
 ## 10.3.0 (2022-10-19)
 
 ### Bug Fix

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/README.md b/test/e2e/README.md
@@ -58,6 +58,26 @@ Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed a
 
 We can insert as many assertions in one test as needed. It's better to make explicit assertions whenever possible. For instance, if we want to assert that a button exists before clicking on it, we can do `expect( locator ).toBeVisible()` before performing `locator.click()`. This makes the tests flow better and easier to read.
 
+## Cross-browser testing
+
+By default, tests are only run in chromium. You can _tag_ tests to run them in different browsers. Use `@browser` anywhere in the test title to run it in that browser. Tests will always run in chromium by default, append `-chromium` to disable testing in chromium. Available browsers are `chromium`, `firefox`, and `webkit`.
+
+```js
+test( 'I will run in @firefox and @webkit (and chromium by default)', async ( { page } ) => {
+	// ...
+} );
+
+test( 'I will only run in @firefox but not -chromium', async ( { page } ) => {
+	// ...
+} );
+
+test.describe( 'Grouping tests (@webkit, -chromium)', () => {
+	test( 'I will only run in webkit', async ( { page } ) => {
+		// ...
+	} );
+} );
+```
+
 ## Commands
 
 ```bash
@@ -67,13 +87,26 @@ npm run test:e2e:playwright
 # Run in headed mode.
 npm run test:e2e:playwright -- --headed
 
+# Run tests with specific browsers (`chromium`, `firefox`, or `webkit`).
+npm run test:e2e:playwright -- --project=webkit --project=firefox
+
 # Run a single test file.
 npm run test:e2e:playwright -- <path_to_test_file> # E.g., npm run test:e2e:playwright -- site-editor/title.spec.js
 
-# Debugging
+# Debugging.
 npm run test:e2e:playwright -- --debug
 ```
 
+If you're developing in Linux, it currently requires testing Webkit browsers in headed mode. If you don't want to or can't run it with the GUI (e.g. if you don't have a graphic interface), prepend the command with [`xvfb-run`](https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html) to run it in a virtual environment.
+
+```bash
+# Run all available tests.
+xvfb-run npm run test:e2e:playwright
+
+# Only run webkit tests.
+xvfb-run -- npm run test:e2e:playwright -- --project=webkit
+```
+
 **Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
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 -->