diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml index ea8e9cf6a3638c..2e6eb3b49994a9 100644 --- a/.github/workflows/end2end-test.yml +++ b/.github/workflows/end2end-test.yml @@ -55,17 +55,15 @@ jobs: - name: Run the tests env: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 - SHARD_PART: ${{ matrix.part }} - SHARD_TOTAL: ${{ matrix.totalParts }} run: | - xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e -- --shard="${SHARD_PART}/${SHARD_TOTAL}" + xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run --workspace @wordpress/e2e-tests-playwright test:e2e -- --shard=${{ matrix.part }}/${{ matrix.totalParts }} - name: Archive debug artifacts (screenshots, traces) uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0 if: ${{ !cancelled() }} with: name: failures-artifacts--${{ matrix.part }} - path: artifacts/test-results + path: test/e2e/artifacts/test-results if-no-files-found: ignore - name: Archive blob reports (HTML) @@ -81,7 +79,7 @@ jobs: if: ${{ !cancelled() }} with: name: flaky-tests-report--${{ matrix.part }} - path: flaky-tests + path: test/e2e/flaky-tests if-no-files-found: ignore merge-artifacts: diff --git a/package-lock.json b/package-lock.json index 04f6649b13385e..a114bb64f7231a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,10 @@ "workspaces": [ "packages/*", "routes/*", - "storybook" + "storybook", + "test/e2e", + "test/performance", + "test/storybook-playwright" ], "devDependencies": { "@apidevtools/json-schema-ref-parser": "11.6.4", @@ -25,7 +28,6 @@ "@emotion/styled": "11.14.1", "@inquirer/prompts": "7.2.0", "@octokit/rest": "16.26.0", - "@playwright/test": "1.58.2", "@testing-library/jest-dom": "6.9.1", "@testing-library/react": "16.3.2", "@testing-library/user-event": "14.6.1", @@ -36,7 +38,6 @@ "@types/semver": "7.3.8", "@types/sprintf-js": "1.1.2", "@types/uuid": "8.3.1", - "@vitejs/plugin-react": "5.1.2", "@wordpress/build": "file:./packages/wp-build", "@wordpress/vips": "file:./packages/vips", "ajv": "8.17.1", @@ -63,7 +64,6 @@ "eslint-plugin-testing-library": "6.0.2", "execa": "4.0.2", "fast-glob": "^3.2.7", - "filenamify": "4.2.0", "glob": "7.1.2", "husky": "7.0.0", "jest": "29.6.2", @@ -100,7 +100,6 @@ "stylelint-plugin-logical-css": "^1.2.3", "typescript": "5.9.3", "uuid": "9.0.1", - "vite": "7.3.0", "wait-on": "8.0.1" }, "engines": { @@ -20659,6 +20658,10 @@ "resolved": "packages/e2e-tests", "link": true }, + "node_modules/@wordpress/e2e-tests-playwright": { + "resolved": "test/e2e", + "link": true + }, "node_modules/@wordpress/edit-post": { "resolved": "packages/edit-post", "link": true @@ -20843,6 +20846,10 @@ "resolved": "packages/patterns", "link": true }, + "node_modules/@wordpress/performance-tests": { + "resolved": "test/performance", + "link": true + }, "node_modules/@wordpress/plugins": { "resolved": "packages/plugins", "link": true @@ -20959,6 +20966,10 @@ "resolved": "storybook", "link": true }, + "node_modules/@wordpress/storybook-playwright": { + "resolved": "test/storybook-playwright", + "link": true + }, "node_modules/@wordpress/style-engine": { "resolved": "packages/style-engine", "link": true @@ -63037,11 +63048,9 @@ } }, "routes/home/node_modules/@wordpress/i18n": { - "resolved": "routes/i18n", + "resolved": "packages/i18n", "link": true }, - "routes/html-entities": {}, - "routes/i18n": {}, "routes/navigation": { "name": "@wordpress/navigation-route", "version": "1.0.0", @@ -63134,11 +63143,11 @@ } }, "routes/post-edit/node_modules/@wordpress/html-entities": { - "resolved": "routes/html-entities", + "resolved": "packages/html-entities", "link": true }, "routes/post-edit/node_modules/@wordpress/i18n": { - "resolved": "routes/i18n", + "resolved": "packages/i18n", "link": true }, "routes/post-list": { @@ -63277,10 +63286,12 @@ "@storybook/addon-docs": "^10.2.8", "@storybook/icons": "^2.0.1", "@storybook/react-vite": "^10.2.8", + "@vitejs/plugin-react": "^5.1.2", "@wordpress/theme": "file:../packages/theme", "storybook": "^10.2.8", "storybook-addon-tag-badges": "^3.0.4", - "terser": "^5.37.0" + "terser": "^5.37.0", + "vite": "^7.3.0" } }, "storybook/node_modules/acorn": { @@ -63321,6 +63332,40 @@ "engines": { "node": ">=10" } + }, + "test/e2e": { + "name": "@wordpress/e2e-tests-playwright", + "version": "0.0.0", + "license": "GPL-2.0-or-later", + "devDependencies": { + "@playwright/test": "^1.58.2", + "@wordpress/e2e-test-utils-playwright": "file:../../packages/e2e-test-utils-playwright", + "@wordpress/scripts": "file:../../packages/scripts", + "filenamify": "^4.2.0" + } + }, + "test/performance": { + "name": "@wordpress/performance-tests", + "version": "0.0.0", + "license": "GPL-2.0-or-later", + "devDependencies": { + "@playwright/test": "^1.58.2", + "@types/node": "^20.17.10", + "@wordpress/e2e-test-utils-playwright": "file:../../packages/e2e-test-utils-playwright", + "@wordpress/scripts": "file:../../packages/scripts" + } + }, + "test/storybook-playwright": { + "name": "@wordpress/storybook-playwright", + "version": "0.0.0", + "license": "GPL-2.0-or-later", + "devDependencies": { + "@playwright/test": "^1.58.2", + "@storybook/react-vite": "^10.1.11", + "@wordpress/element": "file:../../packages/element", + "@wordpress/storybook": "file:../../storybook", + "storybook": "^10.1.11" + } } } } diff --git a/package.json b/package.json index a5671a8bc7a39a..3ad2981e48c2d7 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,6 @@ "@emotion/styled": "11.14.1", "@inquirer/prompts": "7.2.0", "@octokit/rest": "16.26.0", - "@playwright/test": "1.58.2", "@testing-library/jest-dom": "6.9.1", "@testing-library/react": "16.3.2", "@testing-library/user-event": "14.6.1", @@ -61,7 +60,6 @@ "@types/semver": "7.3.8", "@types/sprintf-js": "1.1.2", "@types/uuid": "8.3.1", - "@vitejs/plugin-react": "5.1.2", "@wordpress/build": "file:./packages/wp-build", "@wordpress/vips": "file:./packages/vips", "ajv": "8.17.1", @@ -88,7 +86,6 @@ "eslint-plugin-testing-library": "6.0.2", "execa": "4.0.2", "fast-glob": "^3.2.7", - "filenamify": "4.2.0", "glob": "7.1.2", "husky": "7.0.0", "jest": "29.6.2", @@ -125,7 +122,6 @@ "stylelint-plugin-logical-css": "^1.2.3", "typescript": "5.9.3", "uuid": "9.0.1", - "vite": "7.3.0", "wait-on": "8.0.1" }, "overrides": { @@ -180,14 +176,14 @@ "prestorybook:build": "npm run build -- --skip-types", "storybook:build": "npm run --workspace @wordpress/storybook storybook:build", "storybook:dev": "concurrently \"npm run dev\" \"wait-on .dev-ready && npm run --workspace @wordpress/storybook storybook:dev\"", - "storybook:e2e:dev": "concurrently \"npm run dev\" \"wait-on .dev-ready && storybook dev -c test/storybook-playwright/storybook -p 50241\"", + "storybook:e2e:dev": "concurrently \"npm run dev\" \"wait-on .dev-ready && npm run --workspace @wordpress/storybook-playwright storybook:dev\"", "test": "npm-run-all lint test:unit", "test:create-block": "bash ./bin/test-create-block.sh", - "test:e2e": "wp-scripts test-playwright --config test/e2e/playwright.config.ts", - "test:e2e:debug": "wp-scripts test-playwright --config test/e2e/playwright.config.ts --ui", + "test:e2e": "npm run --workspace @wordpress/e2e-tests-playwright test:e2e", + "test:e2e:debug": "npm run --workspace @wordpress/e2e-tests-playwright test:e2e:debug", "test:e2e:playwright": "npm run test:e2e", "test:e2e:playwright:debug": "npm run test:e2e:debug", - "test:e2e:storybook": "playwright test --config test/storybook-playwright/playwright.config.ts", + "test:e2e:storybook": "npm run --workspace @wordpress/storybook-playwright test:e2e", "test:e2e:watch": "npm run test:e2e -- --watch", "test:native": "cross-env NODE_ENV=test jest --config test/native/jest.config.js", "test:native:watch": "npm run test:native -- --watch", @@ -196,8 +192,8 @@ "test:native:perf": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\"' reassure", "test:native:perf:baseline": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\"' reassure --baseline", "test:native:update": "npm run test:native -- --updateSnapshot", - "test:performance": "wp-scripts test-playwright --config test/performance/playwright.config.ts", - "test:performance:debug": "wp-scripts test-playwright --config test/performance/playwright.config.ts --debug", + "test:performance": "npm run --workspace @wordpress/performance-tests test:performance", + "test:performance:debug": "npm run --workspace @wordpress/performance-tests test:performance:debug", "test:php": "npm-run-all lint:php test:unit:php", "test:php:watch": "wp-env --config .wp-env.test.json run --env-cwd='wp-content/plugins/gutenberg' cli composer run-script test:watch", "test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js", @@ -253,6 +249,9 @@ "workspaces": [ "packages/*", "routes/*", - "storybook" + "storybook", + "test/e2e", + "test/performance", + "test/storybook-playwright" ] } diff --git a/storybook/components/component-status-indicator/index.tsx b/storybook/components/component-status-indicator/index.tsx index 62e51f023384a2..f8f2dc93809f29 100644 --- a/storybook/components/component-status-indicator/index.tsx +++ b/storybook/components/component-status-indicator/index.tsx @@ -15,7 +15,8 @@ export function ComponentStatusIndicator() { return null; } - const statusInfo = statuses[ componentStatus.status ]; + const statusInfo = + statuses[ componentStatus.status as keyof typeof statuses ]; if ( ! statusInfo ) { return null; diff --git a/storybook/package.json b/storybook/package.json index 2a4a4cb6963d44..6a81ee67a6ce8d 100644 --- a/storybook/package.json +++ b/storybook/package.json @@ -24,10 +24,12 @@ "@storybook/addon-docs": "^10.2.8", "@storybook/icons": "^2.0.1", "@storybook/react-vite": "^10.2.8", + "@vitejs/plugin-react": "^5.1.2", "@wordpress/theme": "file:../packages/theme", "storybook": "^10.2.8", "storybook-addon-tag-badges": "^3.0.4", - "terser": "^5.37.0" + "terser": "^5.37.0", + "vite": "^7.3.0" }, "publishConfig": { "access": "public" diff --git a/test/e2e/package.json b/test/e2e/package.json new file mode 100644 index 00000000000000..20f844d6ed1bbf --- /dev/null +++ b/test/e2e/package.json @@ -0,0 +1,36 @@ +{ + "name": "@wordpress/e2e-tests-playwright", + "version": "0.0.0", + "description": "End-to-end tests for WordPress Gutenberg.", + "private": true, + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "gutenberg", + "e2e", + "playwright" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/test/e2e/README.md", + "repository": { + "type": "git", + "url": "git+https://github.com/WordPress/gutenberg.git", + "directory": "test/e2e" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "devDependencies": { + "@playwright/test": "^1.58.2", + "@wordpress/e2e-test-utils-playwright": "file:../../packages/e2e-test-utils-playwright", + "@wordpress/scripts": "file:../../packages/scripts", + "filenamify": "^4.2.0" + }, + "publishConfig": { + "access": "public" + }, + "scripts": { + "test:e2e": "wp-scripts test-playwright --config playwright.config.ts", + "test:e2e:debug": "wp-scripts test-playwright --config playwright.config.ts --ui" + } +} diff --git a/test/e2e/specs/admin/font-library.spec.js b/test/e2e/specs/admin/font-library.spec.js index ba4dddf9ee83c6..c30e5cce44b4c7 100644 --- a/test/e2e/specs/admin/font-library.spec.js +++ b/test/e2e/specs/admin/font-library.spec.js @@ -42,8 +42,8 @@ test.describe( 'Font Library', () => { const fileChooser = await fileChooserPromise; // Provides coverage for https://github.com/WordPress/gutenberg/issues/59023. await fileChooser.setFiles( [ - './test/e2e/assets/Exo2-Regular.woff', - './test/e2e/assets/Exo2-SemiBoldItalic.woff2', + './assets/Exo2-Regular.woff', + './assets/Exo2-SemiBoldItalic.woff2', ] ); // Check fonts were installed. diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js index c9b1cd2539eb38..5e79b1d2ecceb0 100644 --- a/test/e2e/specs/editor/blocks/classic.spec.js +++ b/test/e2e/specs/editor/blocks/classic.spec.js @@ -151,14 +151,7 @@ class MediaUtils { constructor( { page } ) { this.page = page; - this.TEST_IMAGE_FILE_PATH = path.join( - __dirname, - '..', - '..', - '..', - 'assets', - '10x10_e2e_test_image_z9T8jK.png' - ); + this.TEST_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_z9T8jK.png'; } async upload( inputElement ) { diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js index 1afd6ba9997e86..06cdd16ae01d5b 100644 --- a/test/e2e/specs/editor/blocks/cover.spec.js +++ b/test/e2e/specs/editor/blocks/cover.spec.js @@ -567,23 +567,9 @@ class CoverBlockUtils { /** @type {Page} */ this.page = page; - this.TEST_IMAGE_FILE_PATH = path.join( - __dirname, - '..', - '..', - '..', - 'assets', - '10x10_e2e_test_image_z9T8jK.png' - ); + this.TEST_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_z9T8jK.png'; - this.GREEN_IMAGE_FILE_PATH = path.join( - __dirname, - '..', - '..', - '..', - 'assets', - '10x10_e2e_test_image_green.png' - ); + this.GREEN_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_green.png'; } async upload( locator, imagePath ) { diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js index 6e42a48935e73c..a123de455ae1e2 100644 --- a/test/e2e/specs/editor/blocks/gallery.spec.js +++ b/test/e2e/specs/editor/blocks/gallery.spec.js @@ -24,10 +24,7 @@ test.describe( 'Gallery', () => { await requestUtils.deleteAllMedia(); uploadedMedia = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); } ); @@ -291,14 +288,7 @@ class GalleryBlockUtils { constructor( { page } ) { this.page = page; - this.TEST_IMAGE_FILE_PATH = path.join( - __dirname, - '..', - '..', - '..', - 'assets', - '10x10_e2e_test_image_z9T8jK.png' - ); + this.TEST_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_z9T8jK.png'; } async upload( inputElement ) { diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 816126fd2b4810..eac8bc8533957e 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -965,10 +965,7 @@ test.describe( 'Image - lightbox', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.deleteAllMedia(); uploadedMedia = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); } ); @@ -1147,12 +1144,9 @@ class ImageBlockUtils { constructor( { page } ) { /** @type {Page} */ this.page = page; - this.basePath = path.join( __dirname, '..', '..', '..', 'assets' ); + this.basePath = './assets'; - this.TEST_IMAGE_FILE_PATH = path.join( - this.basePath, - '10x10_e2e_test_image_z9T8jK.png' - ); + this.TEST_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_z9T8jK.png'; } async upload( inputElement, customFile = null ) { @@ -1162,7 +1156,7 @@ class ImageBlockUtils { const fileName = uuid(); const tmpFileName = path.join( tmpDirectory, fileName + '.png' ); const filePath = customFile - ? path.join( this.basePath, customFile ) + ? this.basePath + '/' + customFile : this.TEST_IMAGE_FILE_PATH; await fs.copyFile( filePath, tmpFileName ); diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js index 4918ac3d619b5a..f43c84ef65fd7c 100644 --- a/test/e2e/specs/editor/blocks/paragraph.spec.js +++ b/test/e2e/specs/editor/blocks/paragraph.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); - /** * WordPress dependencies */ @@ -67,11 +62,7 @@ test.describe( 'Paragraph', () => { await editor.insertBlock( { name: 'core/paragraph' } ); const testImageName = '10x10_e2e_test_image_z9T8jK.png'; - const testImagePath = path.join( - __dirname, - '../../../assets', - testImageName - ); + const testImagePath = `./assets/${ testImageName }`; const { dragOver, drop } = await pageUtils.dragFiles( testImagePath ); diff --git a/test/e2e/specs/editor/collaboration/collaboration-block-gauntlet.spec.ts b/test/e2e/specs/editor/collaboration/collaboration-block-gauntlet.spec.ts index c4c6f9a6da8bed..0a19dbb2ab9efb 100644 --- a/test/e2e/specs/editor/collaboration/collaboration-block-gauntlet.spec.ts +++ b/test/e2e/specs/editor/collaboration/collaboration-block-gauntlet.spec.ts @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import path from 'path'; - /** * Internal dependencies */ @@ -234,10 +229,7 @@ test.describe( 'Collaboration - Block Gauntlet', () => { test.setTimeout( 30_000 ); const uploadedMedia = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); const post = await requestUtils.createPost( { @@ -589,10 +581,7 @@ test.describe( 'Collaboration - Block Gauntlet', () => { test.setTimeout( 30_000 ); const uploadedMedia = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); const post = await requestUtils.createPost( { diff --git a/test/e2e/specs/editor/plugins/image-size.spec.js b/test/e2e/specs/editor/plugins/image-size.spec.js index 665b9035727077..03834ff82b55b9 100644 --- a/test/e2e/specs/editor/plugins/image-size.spec.js +++ b/test/e2e/specs/editor/plugins/image-size.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); - /** * WordPress dependencies */ @@ -29,7 +24,7 @@ test.describe( 'changing image size', () => { requestUtils, } ) => { const fileName = '1024x768_e2e_test_image_size.jpeg'; - const filePath = path.join( './test/e2e/assets', fileName ); + const filePath = `./assets/${ fileName }`; await admin.createNewPost(); const media = await requestUtils.uploadMedia( filePath ); diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js index 259995a87e0c7d..c0960447f7e747 100644 --- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js +++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js @@ -1,9 +1,9 @@ /** * External dependencies */ -import path from 'path'; import fs from 'fs'; import os from 'os'; +import path from 'path'; import { v4 as uuid } from 'uuid'; /** @@ -32,14 +32,7 @@ test.describe( 'adding inline tokens', () => { await page.click( 'role=button[name="More"i]' ); await page.click( 'role=menuitem[name="Inline image"i]' ); - const testImagePath = path.join( - __dirname, - '..', - '..', - '..', - 'assets', - '10x10_e2e_test_image_z9T8jK.png' - ); + const testImagePath = './assets/10x10_e2e_test_image_z9T8jK.png'; const fileName = uuid(); const tmpFileName = path.join( os.tmpdir(), fileName + '.png' ); fs.copyFileSync( testImagePath, tmpFileName ); diff --git a/test/e2e/specs/editor/various/big-image-size-threshold.spec.js b/test/e2e/specs/editor/various/big-image-size-threshold.spec.js index 30239f121c7e38..d866d0789e0edf 100644 --- a/test/e2e/specs/editor/various/big-image-size-threshold.spec.js +++ b/test/e2e/specs/editor/various/big-image-size-threshold.spec.js @@ -221,12 +221,9 @@ class ImageBlockUtils { constructor( { page } ) { /** @type {Page} */ this.page = page; - this.basePath = path.join( __dirname, '..', '..', '..', 'assets' ); + this.basePath = './assets'; - this.TEST_IMAGE_FILE_PATH = path.join( - this.basePath, - '10x10_e2e_test_image_z9T8jK.png' - ); + this.TEST_IMAGE_FILE_PATH = `${ this.basePath }/10x10_e2e_test_image_z9T8jK.png`; } async upload( inputElement, customFile = null ) { @@ -237,7 +234,7 @@ class ImageBlockUtils { const extension = customFile ? path.extname( customFile ) : '.png'; const tmpFileName = path.join( tmpDirectory, fileName + extension ); const filePath = customFile - ? path.join( this.basePath, customFile ) + ? `${ this.basePath }/${ customFile }` : this.TEST_IMAGE_FILE_PATH; await fs.copyFile( filePath, tmpFileName ); diff --git a/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js index 170b4ca7455d95..03ca5a0c669ef0 100644 --- a/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js +++ b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js @@ -1,7 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); /** * WordPress dependencies */ @@ -14,15 +10,12 @@ test.describe( 'Registered sources', () => { await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' ); await requestUtils.deleteAllMedia(); const placeholderMedia = await requestUtils.uploadMedia( - path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); imagePlaceholderSrc = placeholderMedia.source_url; const testingImgMedia = await requestUtils.uploadMedia( - path.join( - './test/e2e/assets', - '1024x768_e2e_test_image_size.jpeg' - ) + './assets/1024x768_e2e_test_image_size.jpeg' ); testingImgSrc = testingImgMedia.source_url; } ); @@ -717,10 +710,7 @@ test.describe( 'Registered sources', () => { requestUtils, } ) => { const customFieldMedia = await requestUtils.uploadMedia( - path.join( - './test/e2e/assets', - '1024x768_e2e_test_image_size.jpeg' - ) + './assets/1024x768_e2e_test_image_size.jpeg' ); testingImgSrc = customFieldMedia.source_url; diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index 75474fcb042798..d1366a57729024 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); - /** * WordPress dependencies */ @@ -372,11 +367,7 @@ test.describe( 'Draggable block', () => { ); const testImageName = '10x10_e2e_test_image_z9T8jK.png'; - const testImagePath = path.join( - __dirname, - '../../../assets', - testImageName - ); + const testImagePath = `./assets/${ testImageName }`; { const { dragOver, drop } = diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index 543ae027cfc7f1..ba469950dba3cc 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); - /** * WordPress dependencies */ @@ -769,10 +764,7 @@ test.describe( 'insert media from inserter', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.deleteAllMedia(); uploadedMedia = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); } ); test.afterAll( async ( { requestUtils } ) => { diff --git a/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js index bb390d2b39a8e4..632ebf82b0fa53 100644 --- a/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js +++ b/test/e2e/specs/editor/various/manage-reusable-blocks.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import path from 'path'; - /** * WordPress dependencies */ @@ -20,14 +15,7 @@ test.describe( 'Managing reusable blocks', () => { await page.click( 'role=button[name="Import from JSON"i]' ); // Select the file to upload. - const testReusableBlockFile = path.join( - __dirname, - '..', - '..', - '..', - 'assets', - 'greeting-reusable-block.json' - ); + const testReusableBlockFile = './assets/greeting-reusable-block.json'; await page.setInputFiles( 'input[type="file"]', testReusableBlockFile ); // Submit the form. diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index 13eee114f5457c..04300105feb856 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); - /** * WordPress dependencies */ @@ -1126,10 +1121,7 @@ test.describe( 'Pattern Overrides', () => { editor, } ) => { const imageName = 'Editable image'; - const TEST_IMAGE_FILE_PATH = path.resolve( - __dirname, - '../../../assets/10x10_e2e_test_image_z9T8jK.png' - ); + const TEST_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_z9T8jK.png'; const { id } = await requestUtils.createBlock( { title: 'Pattern', content: ` @@ -1186,10 +1178,7 @@ test.describe( 'Pattern Overrides', () => { editor, } ) => { const imageName = 'Editable image'; - const TEST_IMAGE_FILE_PATH = path.resolve( - __dirname, - '../../../assets/10x10_e2e_test_image_z9T8jK.png' - ); + const TEST_IMAGE_FILE_PATH = './assets/10x10_e2e_test_image_z9T8jK.png'; const { id } = await requestUtils.createBlock( { title: 'Pattern', content: ` @@ -1242,17 +1231,11 @@ test.describe( 'Pattern Overrides', () => { // Upload two images, one for the original pattern, one for the override. const { id: originalImageId, source_url: originalImageSrc } = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); const { id: overrideImageId, source_url: overrideImageSrc } = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/1024x768_e2e_test_image_size.jpeg' - ) + './assets/1024x768_e2e_test_image_size.jpeg' ); const overrideName = 'test'; @@ -1311,17 +1294,11 @@ test.describe( 'Pattern Overrides', () => { // Upload two images, one for the original pattern, one for the override. const { id: originalImageId, source_url: originalImageSrc } = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/10x10_e2e_test_image_z9T8jK.png' - ) + './assets/10x10_e2e_test_image_z9T8jK.png' ); const { id: overrideImageId, source_url: overrideImageSrc } = await requestUtils.uploadMedia( - path.resolve( - process.cwd(), - 'test/e2e/assets/1024x768_e2e_test_image_size.jpeg' - ) + './assets/1024x768_e2e_test_image_size.jpeg' ); const overrideName = 'test'; diff --git a/test/e2e/specs/site-editor/page-list.spec.js b/test/e2e/specs/site-editor/page-list.spec.js index e4f8862aaa4b20..7c9f7045b6a37d 100644 --- a/test/e2e/specs/site-editor/page-list.spec.js +++ b/test/e2e/specs/site-editor/page-list.spec.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -const path = require( 'path' ); - /** * WordPress dependencies */ @@ -74,10 +69,8 @@ test.describe( 'Page List', () => { } ); await placeholder.click(); const mediaLibrary = page.getByRole( 'dialog' ); - const TEST_IMAGE_FILE_PATH = path.resolve( - __dirname, - '../../assets/10x10_e2e_test_image_z9T8jK.png' - ); + const TEST_IMAGE_FILE_PATH = + './assets/10x10_e2e_test_image_z9T8jK.png'; const fileChooserPromise = page.waitForEvent( 'filechooser' ); diff --git a/test/e2e/tsconfig.json b/test/e2e/tsconfig.json index 8fa3892b32b1ef..080d514f6f3634 100644 --- a/test/e2e/tsconfig.json +++ b/test/e2e/tsconfig.json @@ -5,7 +5,6 @@ "checkJs": false, "noEmit": true, "rootDir": ".", - "typeRoots": [ "../../typings", "../../node_modules/@types" ], "types": [ "node" ] }, "include": [ "." ], diff --git a/test/performance/package.json b/test/performance/package.json new file mode 100644 index 00000000000000..c7385197969378 --- /dev/null +++ b/test/performance/package.json @@ -0,0 +1,36 @@ +{ + "name": "@wordpress/performance-tests", + "version": "0.0.0", + "description": "Performance tests for WordPress Gutenberg.", + "private": true, + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "gutenberg", + "performance", + "playwright" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/test/performance/README.md", + "repository": { + "type": "git", + "url": "git+https://github.com/WordPress/gutenberg.git", + "directory": "test/performance" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "devDependencies": { + "@playwright/test": "^1.58.2", + "@types/node": "^20.17.10", + "@wordpress/e2e-test-utils-playwright": "file:../../packages/e2e-test-utils-playwright", + "@wordpress/scripts": "file:../../packages/scripts" + }, + "publishConfig": { + "access": "public" + }, + "scripts": { + "test:performance": "wp-scripts test-playwright --config playwright.config.ts", + "test:performance:debug": "wp-scripts test-playwright --config playwright.config.ts --debug" + } +} diff --git a/test/storybook-playwright/package.json b/test/storybook-playwright/package.json new file mode 100644 index 00000000000000..5473925c7c70a4 --- /dev/null +++ b/test/storybook-playwright/package.json @@ -0,0 +1,37 @@ +{ + "name": "@wordpress/storybook-playwright", + "version": "0.0.0", + "description": "Storybook Playwright tests for WordPress Gutenberg components.", + "private": true, + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress", + "gutenberg", + "storybook", + "playwright" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/test/storybook-playwright/README.md", + "repository": { + "type": "git", + "url": "git+https://github.com/WordPress/gutenberg.git", + "directory": "test/storybook-playwright" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "devDependencies": { + "@playwright/test": "^1.58.2", + "@storybook/react-vite": "^10.1.11", + "@wordpress/element": "file:../../packages/element", + "@wordpress/storybook": "file:../../storybook", + "storybook": "^10.1.11" + }, + "publishConfig": { + "access": "public" + }, + "scripts": { + "storybook:dev": "storybook dev -c ./storybook -p 50241", + "test:e2e": "playwright test --config playwright.config.ts" + } +} diff --git a/test/storybook-playwright/specs/font-size-picker.spec.ts b/test/storybook-playwright/specs/font-size-picker.spec.ts index c2f6fc35806812..f505aa674cc2de 100644 --- a/test/storybook-playwright/specs/font-size-picker.spec.ts +++ b/test/storybook-playwright/specs/font-size-picker.spec.ts @@ -1,14 +1,14 @@ /** * External dependencies */ -import { test, expect } from '@playwright/test'; +import { test, expect, type Page } from '@playwright/test'; /** * Internal dependencies */ import { gotoStoryId } from '../utils'; -const waitUntilButtonHighlightStable = async ( page ) => { +const waitUntilButtonHighlightStable = async ( page: Page ) => { const handle = await page.waitForSelector( '[aria-label="Font size"] > div[role=presentation]' ); diff --git a/test/storybook-playwright/storybook/main.ts b/test/storybook-playwright/storybook/main.ts index 2787f1a6b2950e..60918702746096 100644 --- a/test/storybook-playwright/storybook/main.ts +++ b/test/storybook-playwright/storybook/main.ts @@ -1,5 +1,5 @@ import type { StorybookConfig } from '@storybook/react-vite'; -import baseConfig from '../../../storybook/main.ts'; +import baseConfig from '@wordpress/storybook/main'; export default { ...baseConfig, diff --git a/test/storybook-playwright/storybook/preview.js b/test/storybook-playwright/storybook/preview.js index 5a176d59a82e2c..ef4407d9bfab14 100644 --- a/test/storybook-playwright/storybook/preview.js +++ b/test/storybook-playwright/storybook/preview.js @@ -2,7 +2,7 @@ * Internal dependencies */ -import * as basePreviewConfig from '../../../storybook/preview'; +import * as basePreviewConfig from '@wordpress/storybook/preview'; import { WithCustomControls } from './decorators/with-custom-controls'; export const globalTypes = { diff --git a/test/storybook-playwright/tsconfig.json b/test/storybook-playwright/tsconfig.json new file mode 100644 index 00000000000000..ceea191d34c6aa --- /dev/null +++ b/test/storybook-playwright/tsconfig.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig.json", + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "checkJs": false, + // Since the workspace import @wordpress/storybook which has noEmit set to true, + // we can't set composite to true here, otherwise it will cause an error when building the workspace. + // TODO: A better solution could be to extract the shared parts between storybook and storybook-playwright into a separate package, so that both packages can set composite to true. + "composite": false, + "declaration": false, + "declarationDir": null, + "declarationMap": false, + "emitDeclarationOnly": false, + "noEmit": true, + "rootDir": ".", + "types": [ "node" ] + }, + "include": [ "." ], + "exclude": [] +} diff --git a/tsconfig.json b/tsconfig.json index 7489ddc31c0bf7..9f4dce3ff440af 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -83,6 +83,7 @@ { "path": "packages/wp-build" }, { "path": "storybook" }, { "path": "test/e2e" }, + { "path": "test/storybook-playwright" }, { "path": "test/performance" } ], "files": []