From f4de1095a0e8305b1313d342db6981c1ee287d67 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 22 Mar 2019 16:29:10 +0000 Subject: [PATCH] Add: Generic end 2 end test to the block transforms. (#12336) ## Description This is a second try on PR https://github.com/WordPress/gutenberg/pull/10536, after a recommendation by @gziolo to try to make the PR smaller so it becomes easier to review. In order to make the PR smaller, I temporarily created a list of test fixtures that intersects with the set of all fixtures so most fixtures are ignored. Another PR will follow that corrects the fixtures (mainly media ones) so they are reliable and can be used in this tests (e.g: don't trigger 404 requests). All the mechanisms are present in this PR the only change that will happen in the other PR is the removal of the intersection and its list, the update of some media fixtures and the creation of new snapshots. This is a high-level test that is going to Guarantee that every possible transform on Gutenberg is tested and works as expected (the result matches the save snapshot). ## How has this been tested? Verify all test cases pass. --- packages/e2e-test-utils/README.md | 83 ++++---- .../e2e-test-utils/src/get-block-setting.js | 13 ++ packages/e2e-test-utils/src/index.js | 1 + .../e2e-tests/fixtures/block-transforms.js | 178 +++++++++++++++++ .../block-transforms.test.js.snap | 183 +++++++++++++++++ .../e2e-tests/specs/block-transforms.test.js | 188 ++++++++++++++++++ 6 files changed, 612 insertions(+), 34 deletions(-) create mode 100644 packages/e2e-test-utils/src/get-block-setting.js create mode 100644 packages/e2e-tests/fixtures/block-transforms.js create mode 100644 packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap create mode 100644 packages/e2e-tests/specs/block-transforms.test.js diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 039bd766b19639..3f08ca78766cff 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -88,7 +88,7 @@ Clicks on More Menu item, searches for the button with the text provided and cli ### createEmbeddingMatcher -[src/index.js#L51-L51](src/index.js#L51-L51) +[src/index.js#L52-L52](src/index.js#L52-L52) Creates a function to determine if a request is embedding a certain URL. @@ -102,7 +102,7 @@ Creates a function to determine if a request is embedding a certain URL. ### createJSONResponse -[src/index.js#L51-L51](src/index.js#L51-L51) +[src/index.js#L52-L52](src/index.js#L52-L52) Respond to a request with a JSON response. @@ -141,7 +141,7 @@ Creates new URL by parsing base URL, WPPath and query string. ### createURLMatcher -[src/index.js#L51-L51](src/index.js#L51-L51) +[src/index.js#L52-L52](src/index.js#L52-L52) Creates a function to determine if a request is calling a URL with the substring present. @@ -251,10 +251,25 @@ that the current selected block can be transformed into. `Promise`: Promise resolving with an array containing all possible block transforms -### getEditedPostContent +### getBlockSetting [src/index.js#L21-L21](src/index.js#L21-L21) +Returns a string containing the block title associated with the provided block name. + +**Parameters** + +- **blockName** `string`: Block name. +- **setting** `string`: Block setting e.g: title, attributes.... + +**Returns** + +`Promise`: Promise resolving with a string containing the block title. + +### getEditedPostContent + +[src/index.js#L22-L22](src/index.js#L22-L22) + Returns a promise which resolves with the edited post content (HTML string). **Returns** @@ -263,7 +278,7 @@ Returns a promise which resolves with the edited post content (HTML string). ### hasBlockSwitcher -[src/index.js#L22-L22](src/index.js#L22-L22) +[src/index.js#L23-L23](src/index.js#L23-L23) Returns a boolean indicating if the current selected block has a block switcher or not. @@ -273,7 +288,7 @@ Returns a boolean indicating if the current selected block has a block switcher ### insertBlock -[src/index.js#L23-L23](src/index.js#L23-L23) +[src/index.js#L24-L24](src/index.js#L24-L24) Opens the inserter, searches for the given term, then selects the first result that appears. @@ -285,7 +300,7 @@ result that appears. ### installPlugin -[src/index.js#L24-L24](src/index.js#L24-L24) +[src/index.js#L25-L25](src/index.js#L25-L25) Installs a plugin from the WP.org repository. @@ -296,7 +311,7 @@ Installs a plugin from the WP.org repository. ### isCurrentURL -[src/index.js#L25-L25](src/index.js#L25-L25) +[src/index.js#L26-L26](src/index.js#L26-L26) Checks if current URL is a WordPress path. @@ -311,7 +326,7 @@ Checks if current URL is a WordPress path. ### isInDefaultBlock -[src/index.js#L26-L26](src/index.js#L26-L26) +[src/index.js#L27-L27](src/index.js#L27-L27) Checks if the block that is focused is the default block. @@ -321,7 +336,7 @@ Checks if the block that is focused is the default block. ### loginUser -[src/index.js#L27-L27](src/index.js#L27-L27) +[src/index.js#L28-L28](src/index.js#L28-L28) Performs log in with specified username and password. @@ -332,7 +347,7 @@ Performs log in with specified username and password. ### mockOrTransform -[src/index.js#L51-L51](src/index.js#L51-L51) +[src/index.js#L52-L52](src/index.js#L52-L52) Mocks a request with the supplied mock object, or allows it to run with an optional transform, based on the deserialised JSON response for the request. @@ -349,38 +364,38 @@ deserialised JSON response for the request. ### observeFocusLoss -[src/index.js#L28-L28](src/index.js#L28-L28) +[src/index.js#L29-L29](src/index.js#L29-L29) Binds to the document on page load which throws an error if a `focusout` event occurs without a related target (i.e. focus loss). ### openAllBlockInserterCategories -[src/index.js#L29-L29](src/index.js#L29-L29) +[src/index.js#L30-L30](src/index.js#L30-L30) Opens all block inserter categories. ### openDocumentSettingsSidebar -[src/index.js#L30-L30](src/index.js#L30-L30) +[src/index.js#L31-L31](src/index.js#L31-L31) Clicks on the button in the header which opens Document Settings sidebar when it is closed. ### openGlobalBlockInserter -[src/index.js#L31-L31](src/index.js#L31-L31) +[src/index.js#L32-L32](src/index.js#L32-L32) Opens the global block inserter. ### openPublishPanel -[src/index.js#L32-L32](src/index.js#L32-L32) +[src/index.js#L33-L33](src/index.js#L33-L33) Opens the publish panel. ### pressKeyTimes -[src/index.js#L33-L33](src/index.js#L33-L33) +[src/index.js#L34-L34](src/index.js#L34-L34) Presses the given keyboard key a number of times in sequence. @@ -395,7 +410,7 @@ Presses the given keyboard key a number of times in sequence. ### pressKeyWithModifier -[src/index.js#L34-L34](src/index.js#L34-L34) +[src/index.js#L35-L35](src/index.js#L35-L35) Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier is normalized to platform-specific modifier. @@ -407,7 +422,7 @@ is normalized to platform-specific modifier. ### publishPost -[src/index.js#L35-L35](src/index.js#L35-L35) +[src/index.js#L36-L36](src/index.js#L36-L36) Publishes the post, resolving once the request is complete (once a notice is displayed). @@ -418,7 +433,7 @@ is displayed). ### publishPostWithPrePublishChecksDisabled -[src/index.js#L36-L36](src/index.js#L36-L36) +[src/index.js#L37-L37](src/index.js#L37-L37) Publishes the post without the pre-publish checks, resolving once the request is complete (once a notice is displayed). @@ -429,7 +444,7 @@ resolving once the request is complete (once a notice is displayed). ### saveDraft -[src/index.js#L37-L37](src/index.js#L37-L37) +[src/index.js#L38-L38](src/index.js#L38-L38) Saves the post as a draft, resolving once the request is complete (once the "Saved" indicator is displayed). @@ -440,7 +455,7 @@ Saves the post as a draft, resolving once the request is complete (once the ### searchForBlock -[src/index.js#L38-L38](src/index.js#L38-L38) +[src/index.js#L39-L39](src/index.js#L39-L39) Search for block in the global inserter @@ -450,7 +465,7 @@ Search for block in the global inserter ### selectBlockByClientId -[src/index.js#L39-L39](src/index.js#L39-L39) +[src/index.js#L40-L40](src/index.js#L40-L40) Given the clientId of a block, selects the block on the editor. @@ -460,7 +475,7 @@ Given the clientId of a block, selects the block on the editor. ### setBrowserViewport -[src/index.js#L40-L40](src/index.js#L40-L40) +[src/index.js#L41-L41](src/index.js#L41-L41) Sets browser viewport to specified type. @@ -470,7 +485,7 @@ Sets browser viewport to specified type. ### setPostContent -[src/index.js#L41-L41](src/index.js#L41-L41) +[src/index.js#L42-L42](src/index.js#L42-L42) Sets code editor content @@ -484,7 +499,7 @@ Sets code editor content ### setUpResponseMocking -[src/index.js#L51-L51](src/index.js#L51-L51) +[src/index.js#L52-L52](src/index.js#L52-L52) Sets up mock checks and responses. Accepts a list of mock settings with the following properties: @@ -515,7 +530,7 @@ If none of the mock settings match the request, the request is allowed to contin ### switchEditorModeTo -[src/index.js#L42-L42](src/index.js#L42-L42) +[src/index.js#L43-L43](src/index.js#L43-L43) Switches editor mode. @@ -525,21 +540,21 @@ Switches editor mode. ### switchUserToAdmin -[src/index.js#L43-L43](src/index.js#L43-L43) +[src/index.js#L44-L44](src/index.js#L44-L44) Switches the current user to the admin user (if the user running the test is not already the admin user). ### switchUserToTest -[src/index.js#L44-L44](src/index.js#L44-L44) +[src/index.js#L45-L45](src/index.js#L45-L45) Switches the current user to whichever user we should be running the tests as (if we're not already that user). ### toggleScreenOption -[src/index.js#L45-L45](src/index.js#L45-L45) +[src/index.js#L46-L46](src/index.js#L46-L46) Toggles the screen option with the given label. @@ -550,7 +565,7 @@ Toggles the screen option with the given label. ### transformBlockTo -[src/index.js#L46-L46](src/index.js#L46-L46) +[src/index.js#L47-L47](src/index.js#L47-L47) Converts editor's block type. @@ -560,7 +575,7 @@ Converts editor's block type. ### uninstallPlugin -[src/index.js#L47-L47](src/index.js#L47-L47) +[src/index.js#L48-L48](src/index.js#L48-L48) Uninstalls a plugin. @@ -570,7 +585,7 @@ Uninstalls a plugin. ### visitAdminPage -[src/index.js#L48-L48](src/index.js#L48-L48) +[src/index.js#L49-L49](src/index.js#L49-L49) Visits admin page; if user is not logged in then it logging in it first, then visits admin page. @@ -581,7 +596,7 @@ Visits admin page; if user is not logged in then it logging in it first, then vi ### waitForWindowDimensions -[src/index.js#L49-L49](src/index.js#L49-L49) +[src/index.js#L50-L50](src/index.js#L50-L50) Function that waits until the page viewport has the required dimensions. It is being used to address a problem where after using setViewport the execution may continue, diff --git a/packages/e2e-test-utils/src/get-block-setting.js b/packages/e2e-test-utils/src/get-block-setting.js new file mode 100644 index 00000000000000..0b4bff9dd7e14a --- /dev/null +++ b/packages/e2e-test-utils/src/get-block-setting.js @@ -0,0 +1,13 @@ +/** + * Returns a string containing the block title associated with the provided block name. + * @param {string} blockName Block name. + * @param {string} setting Block setting e.g: title, attributes.... + * + * @return {Promise} Promise resolving with a string containing the block title. + */ +export async function getBlockSetting( blockName, setting ) { + return page.evaluate( ( _blockName, _setting ) => { + const blockType = wp.data.select( 'core/blocks' ).getBlockType( _blockName ); + return blockType && blockType[ _setting ]; + }, blockName, setting ); +} diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 3543abbbb36094..e984658a99f6df 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -18,6 +18,7 @@ export { findSidebarPanelWithTitle } from './find-sidebar-panel-with-title'; export { getAllBlockInserterItemTitles } from './get-all-block-inserter-item-titles'; export { getAllBlocks } from './get-all-blocks'; export { getAvailableBlockTransforms } from './get-available-block-transforms'; +export { getBlockSetting } from './get-block-setting'; export { getEditedPostContent } from './get-edited-post-content'; export { hasBlockSwitcher } from './has-block-switcher'; export { insertBlock } from './insert-block'; diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js new file mode 100644 index 00000000000000..bf1e218958c41a --- /dev/null +++ b/packages/e2e-tests/fixtures/block-transforms.js @@ -0,0 +1,178 @@ +export const EXPECTED_TRANSFORMS = { + core__archives: { + originalBlock: 'Archives', + availableTransforms: [], + }, + core__archives__showPostCounts: { + originalBlock: 'Archives', + availableTransforms: [], + }, + core__button__center: { + originalBlock: 'Button', + availableTransforms: [], + }, + core__calendar: { + originalBlock: 'Calendar', + availableTransforms: [], + }, + core__categories: { + originalBlock: 'Categories', + availableTransforms: [], + }, + core__code: { + originalBlock: 'Code', + availableTransforms: [ + 'Preformatted', + ], + }, + core__columns: { + originalBlock: 'Columns', + availableTransforms: [], + }, + core__embed: { + originalBlock: 'Embed', + availableTransforms: [], + }, + 'core__heading__h2-em': { + originalBlock: 'Heading', + availableTransforms: [ + 'Quote', + 'Paragraph', + ], + }, + core__heading__h2: { + originalBlock: 'Heading', + availableTransforms: [ + 'Quote', + 'Paragraph', + ], + }, + core__html: { + originalBlock: 'Custom HTML', + availableTransforms: [], + }, + 'core__latest-comments': { + originalBlock: 'Latest Comments', + availableTransforms: [], + }, + 'core__latest-posts': { + originalBlock: 'Latest Posts', + availableTransforms: [], + }, + 'core__latest-posts__displayPostDate': { + originalBlock: 'Latest Posts', + availableTransforms: [], + }, + 'core__legacy-widget': { + originalBlock: 'Legacy Widget (Experimental)', + availableTransforms: [], + }, + core__list__ul: { + originalBlock: 'List', + availableTransforms: [ + 'Paragraph', + 'Quote', + ], + }, + core__more: { + originalBlock: 'More', + availableTransforms: [], + }, + 'core__more__custom-text-teaser': { + originalBlock: 'More', + availableTransforms: [], + }, + core__nextpage: { + originalBlock: 'Page Break', + availableTransforms: [], + }, + 'core__paragraph__align-right': { + originalBlock: 'Paragraph', + availableTransforms: [ + 'Heading', + 'List', + 'Quote', + 'Preformatted', + 'Verse', + ], + }, + core__preformatted: { + originalBlock: 'Preformatted', + availableTransforms: [ + 'Paragraph', + ], + }, + core__pullquote: { + originalBlock: 'Pullquote', + availableTransforms: [ + 'Quote', + ], + }, + 'core__pullquote__multi-paragraph': { + originalBlock: 'Pullquote', + availableTransforms: [ + 'Quote', + ], + }, + 'core__quote__style-1': { + originalBlock: 'Quote', + availableTransforms: [ + 'List', + 'Paragraph', + 'Heading', + 'Pullquote', + ], + }, + 'core__quote__style-2': { + originalBlock: 'Quote', + availableTransforms: [ + 'List', + 'Paragraph', + 'Heading', + 'Pullquote', + ], + }, + core__rss: { + originalBlock: 'RSS', + availableTransforms: [], + }, + core__search: { + originalBlock: 'Search', + availableTransforms: [], + }, + 'core__search__custom-text': { + originalBlock: 'Search', + availableTransforms: [], + }, + core__separator: { + originalBlock: 'Separator', + availableTransforms: [], + }, + core__shortcode: { + originalBlock: 'Shortcode', + availableTransforms: [], + }, + core__spacer: { + originalBlock: 'Spacer', + availableTransforms: [], + }, + core__table: { + originalBlock: 'Table', + availableTransforms: [], + }, + 'core__tag-cloud': { + originalBlock: 'Tag Cloud', + availableTransforms: [], + }, + 'core__tag-cloud__showTagCounts': { + originalBlock: 'Tag Cloud', + availableTransforms: [ + ], + }, + core__verse: { + originalBlock: 'Verse', + availableTransforms: [ + 'Paragraph', + ], + }, +}; diff --git a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap new file mode 100644 index 00000000000000..677a85dc97bdac --- /dev/null +++ b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap @@ -0,0 +1,183 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Block transforms correctly transform block Code in fixture core__code into the Preformatted block 1`] = ` +" +
export default function MyButton() {
+	return ;
+}
+" +`; + +exports[`Block transforms correctly transform block Heading in fixture core__heading__h2 into the Paragraph block 1`] = ` +" +

A picture is worth a thousand words, or so the saying goes

+" +`; + +exports[`Block transforms correctly transform block Heading in fixture core__heading__h2 into the Quote block 1`] = ` +" +

A picture is worth a thousand words, or so the saying goes

+" +`; + +exports[`Block transforms correctly transform block Heading in fixture core__heading__h2-em into the Paragraph block 1`] = ` +" +

The Inserter Tool

+" +`; + +exports[`Block transforms correctly transform block Heading in fixture core__heading__h2-em into the Quote block 1`] = ` +" +

The Inserter Tool

+" +`; + +exports[`Block transforms correctly transform block List in fixture core__list__ul into the Paragraph block 1`] = ` +" +

Text & Headings

+ + + +

Images & Videos

+ + + +

Galleries

+ + + +

Embeds, like YouTube, Tweets, or other WordPress posts.

+ + + +

Layout blocks, like Buttons, Hero Images, Separators, etc.

+ + + +

And Lists like this one of course :)

+" +`; + +exports[`Block transforms correctly transform block List in fixture core__list__ul into the Quote block 1`] = ` +" +

Text & Headings

Images & Videos

Galleries

Embeds, like YouTube, Tweets, or other WordPress posts.

Layout blocks, like Buttons, Hero Images, Separators, etc.

And Lists like this one of course :)

+" +`; + +exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the Heading block 1`] = ` +" +

... like this one, which is separate from the above and right aligned.

+" +`; + +exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the List block 1`] = ` +" + +" +`; + +exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the Preformatted block 1`] = ` +" +
... like this one, which is separate from the above and right aligned.
+" +`; + +exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the Quote block 1`] = ` +" +

... like this one, which is separate from the above and right aligned.

+" +`; + +exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the Verse block 1`] = ` +" +
... like this one, which is separate from the above and right aligned.
+" +`; + +exports[`Block transforms correctly transform block Preformatted in fixture core__preformatted into the Paragraph block 1`] = ` +" +

Some preformatted text...
And more!

+" +`; + +exports[`Block transforms correctly transform block Pullquote in fixture core__pullquote into the Quote block 1`] = ` +" +

Testing pullquote block...

...with a caption
+" +`; + +exports[`Block transforms correctly transform block Pullquote in fixture core__pullquote__multi-paragraph into the Quote block 1`] = ` +" +

Paragraph one

Paragraph two

by whomever
+" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-1 into the Heading block 1`] = ` +" +

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

+ + + +

Matt Mullenweg, 2017
+" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-1 into the List block 1`] = ` +" + +" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-1 into the Paragraph block 1`] = ` +" +

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

+ + + +

Matt Mullenweg, 2017

+" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-1 into the Pullquote block 1`] = ` +" +

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017
+" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-2 into the Heading block 1`] = ` +" +

There is no greater agony than bearing an untold story inside you.

+ + + +

Maya Angelou
+" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-2 into the List block 1`] = ` +" + +" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-2 into the Paragraph block 1`] = ` +" +

There is no greater agony than bearing an untold story inside you.

+ + + +

Maya Angelou

+" +`; + +exports[`Block transforms correctly transform block Quote in fixture core__quote__style-2 into the Pullquote block 1`] = ` +" +

There is no greater agony than bearing an untold story inside you.

Maya Angelou
+" +`; + +exports[`Block transforms correctly transform block Verse in fixture core__verse into the Paragraph block 1`] = ` +" +

A verse
And more!

+" +`; diff --git a/packages/e2e-tests/specs/block-transforms.test.js b/packages/e2e-tests/specs/block-transforms.test.js new file mode 100644 index 00000000000000..7eae4155ab22fb --- /dev/null +++ b/packages/e2e-tests/specs/block-transforms.test.js @@ -0,0 +1,188 @@ +/** + * External dependencies + */ +import { + filter, + flatMap, + map, + mapValues, + pickBy, + some, +} from 'lodash'; + +/** + * WordPress dependencies + */ +import { + getAllBlocks, + getAvailableBlockTransforms, + getBlockSetting, + getEditedPostContent, + hasBlockSwitcher, + createNewPost, + setPostContent, + selectBlockByClientId, + transformBlockTo, +} from '@wordpress/e2e-test-utils'; + +/** + * Internal dependencies + */ +import { + getAvailableBlockFixturesBasenames, + getBlockFixtureHTML, + getBlockFixtureParsedJSON, +} from '../fixtures/'; +import { EXPECTED_TRANSFORMS } from '../fixtures/block-transforms.js'; + +/* +* Returns true if the fileBase refers to a fixture of a block +* that should not be handled e.g: because of being deprecated, +* or because of being a block that tests an error state. +*/ +const isAnExpectedUnhandledBlock = ( fileBase ) => { + if ( fileBase.includes( 'deprecated' ) ) { + return true; + } + const { file: fixture } = getBlockFixtureParsedJSON( fileBase ); + const parsedBlockObject = JSON.parse( + fixture + )[ 0 ]; + return some( + [ + null, + 'core/block', + 'core/column', + 'core/freeform', + 'core/text-columns', + 'core/subhead', + 'core/text', + 'unregistered/example', + ], + ( blockName ) => parsedBlockObject.blockName === blockName + ); +}; + +const setPostContentAndSelectBlock = async ( content ) => { + await setPostContent( content ); + const blocks = await getAllBlocks(); + const clientId = blocks[ 0 ].clientId; + await page.click( '.editor-post-title .editor-post-title__block' ); + await selectBlockByClientId( clientId ); +}; + +const getTransformStructureFromFile = async ( fileBase ) => { + if ( isAnExpectedUnhandledBlock( fileBase ) ) { + return null; + } + const { file: content } = getBlockFixtureHTML( fileBase ); + await setPostContentAndSelectBlock( content ); + const block = ( await getAllBlocks() )[ 0 ]; + const availableTransforms = await getAvailableBlockTransforms(); + const originalBlock = await getBlockSetting( block.name, 'title' ); + + return { + availableTransforms, + originalBlock, + content, + }; +}; + +const getTransformResult = async ( blockContent, transformName ) => { + await setPostContentAndSelectBlock( blockContent ); + expect( await hasBlockSwitcher() ).toBe( true ); + await transformBlockTo( transformName ); + return getEditedPostContent(); +}; + +describe( 'Block transforms', () => { + // Todo: Remove the filter as soon as all fixtures are corrected, + // and its direct usage on the editor does not trigger errors. + // Currently some fixtures trigger errors (mainly media related) + // because when loaded in the editor, + // some requests are triggered that have a 404 response. + const fileBasenames = filter( + getAvailableBlockFixturesBasenames(), + ( basename ) => ( + ! some( + [ + 'core__image', + 'core__gallery', + 'core__video', + 'core__file', + 'core__media-text', + 'core__audio', + 'core__cover', + ], + ( exclude ) => basename.startsWith( exclude ) + ) + ) + ); + + const transformStructure = {}; + beforeAll( async () => { + await createNewPost(); + + for ( const fileBase of fileBasenames ) { + const structure = await getTransformStructureFromFile( + fileBase + ); + if ( ! structure ) { + continue; + } + transformStructure[ fileBase ] = structure; + await setPostContent( '' ); + await page.click( '.editor-post-title .editor-post-title__block' ); + } + } ); + + it( 'should contain the expected transforms', async () => { + const transforms = mapValues( + pickBy( + transformStructure, + ( { availableTransforms } ) => availableTransforms, + ), + ( { availableTransforms, originalBlock } ) => { + return { originalBlock, availableTransforms }; + } + ); + expect( + transforms + ).toEqual( EXPECTED_TRANSFORMS ); + } ); + + describe( 'correctly transform', () => { + beforeAll( async () => { + await createNewPost(); + } ); + + beforeEach( async () => { + await setPostContent( '' ); + await page.click( '.editor-post-title .editor-post-title__block' ); + } ); + + const testTable = flatMap( + EXPECTED_TRANSFORMS, + ( { originalBlock, availableTransforms }, fixture ) => ( + map( + availableTransforms, + ( distinationBlock ) => ( [ + originalBlock, + fixture, + distinationBlock, + ] ) + ) + ) + ); + + it.each( testTable )( + 'block %s in fixture %s into the %s block', + async ( originalBlock, fixture, distinationBlock ) => { + const { content } = transformStructure[ fixture ]; + expect( + await getTransformResult( content, distinationBlock ) + ).toMatchSnapshot(); + } + ); + } ); +} );