@wordpress/e2e-tests 7.18.1 → 7.19.1-next.79a6196f.0

package/specs/editor/various/editor-modes.test.js

@@ -1,160 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	clickMenuItem,
-	createNewPost,
-	getCurrentPostContent,
-	switchEditorModeTo,
-	pressKeyTimes,
-	pressKeyWithModifier,
-	openTypographyToolsPanelMenu,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Editing modes (visual/HTML)', () => {
-	beforeEach( async () => {
-		await createNewPost();
-		await clickBlockAppender();
-		await page.keyboard.type( 'Hello world!' );
-	} );
-
-	it( 'should switch between visual and HTML modes', async () => {
-		// This block should be in "visual" mode by default.
-		let visualBlock = await canvas().$$( '[data-block].rich-text' );
-		expect( visualBlock ).toHaveLength( 1 );
-
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Wait for the block to be converted to HTML editing mode.
-		const htmlBlock = await canvas().$$(
-			'[data-block] .block-editor-block-list__block-html-textarea'
-		);
-		expect( htmlBlock ).toHaveLength( 1 );
-
-		// Change editing mode from "HTML" back to "Visual".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit visually' );
-
-		// This block should be in "visual" mode by default.
-		visualBlock = await canvas().$$( '[data-block].rich-text' );
-		expect( visualBlock ).toHaveLength( 1 );
-	} );
-
-	it( 'should display sidebar in HTML mode', async () => {
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// The `drop cap` toggle for the paragraph block should appear, even in
-		// HTML editing mode.
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const dropCapToggle = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-
-		expect( dropCapToggle ).toHaveLength( 1 );
-	} );
-
-	it( 'should update HTML in HTML mode when sidebar is used', async () => {
-		// Change editing mode from "Visual" to "HTML".
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Make sure the paragraph content is rendered as expected.
-		let htmlBlockContent = await canvas().$eval(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );
-
-		// Change the `drop cap` using the sidebar.
-		await openTypographyToolsPanelMenu();
-		await page.click( 'button[aria-label="Show Drop cap"]' );
-
-		const [ dropCapToggle ] = await page.$x(
-			"//label[contains(text(), 'Drop cap')]"
-		);
-		await dropCapToggle.click();
-
-		// Make sure the HTML content updated.
-		htmlBlockContent = await canvas().$eval(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual(
-			'<p class="has-drop-cap">Hello world!</p>'
-		);
-	} );
-
-	it( 'the code editor should unselect blocks and disable the inserter', async () => {
-		// The paragraph block should be selected.
-		const title = await page.$eval(
-			'.block-editor-block-card__title',
-			( element ) => element.innerText
-		);
-		expect( title ).toBe( 'Paragraph' );
-
-		// The Block inspector should be active.
-		let blockInspectorTab = await page.$(
-			'.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
-		);
-		expect( blockInspectorTab ).not.toBeNull();
-
-		await switchEditorModeTo( 'Code' );
-
-		// The Block inspector should not be active anymore.
-		blockInspectorTab = await page.$(
-			'.edit-post-sidebar__panel-tab.is-active[data-label="Block"]'
-		);
-		expect( blockInspectorTab ).toBeNull();
-
-		// No block is selected.
-		await page.click( '.edit-post-sidebar__panel-tab[data-label="Block"]' );
-		const noBlocksElement = await page.$(
-			'.block-editor-block-inspector__no-blocks'
-		);
-		expect( noBlocksElement ).not.toBeNull();
-
-		// The inserter is disabled.
-		const disabledInserter = await page.$(
-			'.edit-post-header-toolbar__inserter-toggle:disabled, .edit-post-header-toolbar__inserter-toggle[aria-disabled="true"]'
-		);
-		expect( disabledInserter ).not.toBeNull();
-	} );
-
-	// Test for regressions of https://github.com/WordPress/gutenberg/issues/24054.
-	it( 'saves content when using the shortcut in the Code Editor', async () => {
-		await switchEditorModeTo( 'Code' );
-
-		const textContent = await page.evaluate(
-			() => document.querySelector( '.editor-post-text-editor' ).value
-		);
-		const editPosition = textContent.indexOf( 'Hello' );
-
-		// Replace the word 'Hello' with 'Hi'.
-		await canvas().click( '.editor-post-title__input' );
-		await page.keyboard.press( 'Tab' );
-		await pressKeyTimes( 'ArrowRight', editPosition );
-		await pressKeyTimes( 'Delete', 5 );
-		await page.keyboard.type( 'Hi' );
-
-		// Save the post using the shortcut.
-		await pressKeyWithModifier( 'primary', 's' );
-		await page.waitForSelector( '.editor-post-saved-state.is-saved' );
-
-		await switchEditorModeTo( 'Visual' );
-
-		expect( await getCurrentPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:paragraph -->
-		<p>Hi world!</p>
-		<!-- /wp:paragraph -->"
-	` );
-	} );
-} );

package/specs/editor/various/invalid-block.test.js

@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickMenuItem,
-	createNewPost,
-	clickBlockAppender,
-	clickBlockToolbarButton,
-	setPostContent,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'invalid blocks', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should show an invalid block message with clickable options', async () => {
-		// Create an empty paragraph with the focus in the block.
-		await clickBlockAppender();
-		await page.keyboard.type( 'hello' );
-
-		await clickBlockToolbarButton( 'Options' );
-
-		// Change to HTML mode and close the options.
-		await clickMenuItem( 'Edit as HTML' );
-
-		// Focus on the textarea and enter an invalid paragraph
-		await canvas().click(
-			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
-		);
-		await page.keyboard.type( '<p>invalid paragraph' );
-
-		// Takes the focus away from the block so the invalid warning is triggered
-		await page.click( '.editor-post-save-draft' );
-
-		// Click on the 'three-dots' menu toggle.
-		await canvas().click(
-			'.block-editor-warning__actions button[aria-label="More options"]'
-		);
-
-		await clickMenuItem( 'Resolve' );
-
-		// Check we get the resolve modal with the appropriate contents.
-		const htmlBlockContent = await page.$eval(
-			'.block-editor-block-compare__html',
-			( node ) => node.textContent
-		);
-		expect( htmlBlockContent ).toEqual(
-			'<p>hello</p><p>invalid paragraph'
-		);
-	} );
-
-	it( 'should strip potentially malicious on* attributes', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		// The paragraph block contains invalid HTML, which causes it to be an
-		// invalid block.
-		await setPostContent(
-			`
-			<!-- wp:paragraph -->
-			<p>aaaa <img src onerror=alert(1)></x dde></x>1
-			<!-- /wp:paragraph -->
-			`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( console ).toHaveWarned();
-		expect( console ).toHaveErrored();
-		expect( hasAlert ).toBe( false );
-	} );
-
-	it( 'should not trigger malicious script tags when using a shortcode block', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		// The shortcode block contains invalid HTML, which causes it to be an
-		// invalid block.
-		await setPostContent(
-			`
-			<!-- wp:shortcode -->
-			<animate onbegin=alert(1) attributeName=x dur=1s><script>alert("EVIL");</script><style>@keyframes x{}</style><a style="animation-name:x" onanimationstart="alert(2)"></a>
-			<!-- /wp:shortcode -->
-			`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-		expect( hasAlert ).toBe( false );
-	} );
-} );

package/specs/editor/various/nux.test.js

@@ -1,158 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickOnMoreMenuItem,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'New User Experience (NUX)', () => {
-	it( 'should show the guide to first-time users', async () => {
-		let welcomeGuideText, welcomeGuide;
-
-		// Create a new post as a first-time user.
-		await createNewPost( { showWelcomeGuide: true } );
-
-		// Guide should be on page 1 of 4
-		welcomeGuideText = await page.$eval(
-			'.edit-post-welcome-guide',
-			( element ) => element.innerText
-		);
-		expect( welcomeGuideText ).toContain( 'Welcome to the block editor' );
-
-		// Click on the 'Next' button.
-		const [ nextButton ] = await page.$x(
-			'//button[contains(text(), "Next")]'
-		);
-		await nextButton.click();
-
-		// Guide should be on page 2 of 4
-		welcomeGuideText = await page.$eval(
-			'.edit-post-welcome-guide',
-			( element ) => element.innerText
-		);
-		expect( welcomeGuideText ).toContain( 'Make each block your own' );
-
-		// Click on the 'Previous' button.
-		const [ previousButton ] = await page.$x(
-			'//button[contains(text(), "Previous")]'
-		);
-		await previousButton.click();
-
-		// Guide should be on page 1 of 4
-		welcomeGuideText = await page.$eval(
-			'.edit-post-welcome-guide',
-			( element ) => element.innerText
-		);
-		expect( welcomeGuideText ).toContain( 'Welcome to the block editor' );
-
-		// Press the button for Page 2.
-		await page.click( 'button[aria-label="Page 2 of 4"]' );
-		await page.waitForXPath(
-			'//h1[contains(text(), "Make each block your own")]'
-		);
-		// This shouldn't be necessary
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 500 );
-
-		// Press the right arrow key for Page 3.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.waitForXPath(
-			'//h1[contains(text(), "Get to know the block library")]'
-		);
-
-		// Press the right arrow key for Page 4.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.waitForXPath(
-			'//h1[contains(text(), "Learn how to use the block editor")]'
-		);
-
-		// Click on the *visible* 'Get started' button. There are two in the DOM
-		// but only one is shown depending on viewport size.
-		let getStartedButton;
-		for ( const buttonHandle of await page.$x(
-			'//button[contains(text(), "Get started")]'
-		) ) {
-			if (
-				await page.evaluate(
-					( button ) => button.style.display !== 'none',
-					buttonHandle
-				)
-			) {
-				getStartedButton = buttonHandle;
-			}
-		}
-		await getStartedButton.click();
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-
-		// Reload the editor.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-	} );
-
-	it( 'should not show the welcome guide again if it is dismissed', async () => {
-		let welcomeGuide;
-
-		// Create a new post as a first-time user.
-		await createNewPost( { showWelcomeGuide: true } );
-
-		// Guide should be open
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).not.toBeNull();
-
-		// Close the guide
-		await page.click( '[role="dialog"] button[aria-label="Close"]' );
-
-		// Reload the editor.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-	} );
-
-	it( 'should focus post title field after welcome guide is dismissed and post is empty', async () => {
-		// Create a new post as a first-time user.
-		await createNewPost( { showWelcomeGuide: true } );
-
-		// Guide should be open.
-		const welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).not.toBeNull();
-
-		// Close the guide.
-		await page.click( '[role="dialog"] button[aria-label="Close"]' );
-
-		// Focus should be in post title field.
-		const postTitle = await canvas().waitForSelector(
-			'h1[aria-label="Add title"'
-		);
-		await expect( postTitle ).toHaveFocus();
-	} );
-
-	it( 'should show the welcome guide if it is manually opened', async () => {
-		let welcomeGuide;
-
-		// Create a new post as a returning user.
-		await createNewPost();
-
-		// Guide should be closed
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).toBeNull();
-
-		// Manually open the guide
-		await clickOnMoreMenuItem( 'Welcome Guide' );
-
-		// Guide should be open
-		welcomeGuide = await page.$( '.edit-post-welcome-guide' );
-		expect( welcomeGuide ).not.toBeNull();
-	} );
-} );

package/specs/editor/various/preferences.test.js

@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost } from '@wordpress/e2e-test-utils';
-
-describe( 'preferences', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Returns a promise which resolves to the text content of the active
-	 * editor sidebar tab, or null if there is no active sidebar tab (closed).
-	 *
-	 * @return {Promise} Promise resolving to active tab.
-	 */
-	async function getActiveSidebarTabText() {
-		try {
-			return await page.$eval(
-				'.edit-post-sidebar__panel-tab.is-active',
-				( node ) => node.textContent
-			);
-		} catch ( error ) {
-			// page.$eval throws when it does not find the selector, which we
-			// can intentionally intercept and consider as there being no
-			// active sidebar tab (no sidebar).
-			return null;
-		}
-	}
-
-	it( 'remembers sidebar dismissal between sessions', async () => {
-		// Open by default.
-		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
-
-		// Change to "Block" tab.
-		await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block"]' );
-		expect( await getActiveSidebarTabText() ).toBe( 'Block' );
-
-		// Regression test: Reload resets to document tab.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/6377
-		// See: https://github.com/WordPress/gutenberg/pull/8995
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
-
-		// Dismiss.
-		await page.click(
-			'.edit-post-sidebar__panel-tabs [aria-label="Close Settings"]'
-		);
-		expect( await getActiveSidebarTabText() ).toBe( null );
-
-		// Remember after reload.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		expect( await getActiveSidebarTabText() ).toBe( null );
-	} );
-} );

package/specs/editor/various/publish-panel.test.js

@@ -1,82 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	arePrePublishChecksEnabled,
-	disablePrePublishChecks,
-	enablePrePublishChecks,
-	createNewPost,
-	openPublishPanel,
-	pressKeyWithModifier,
-	publishPost,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'PostPublishPanel', () => {
-	let werePrePublishChecksEnabled;
-	beforeEach( async () => {
-		await createNewPost();
-		werePrePublishChecksEnabled = await arePrePublishChecksEnabled();
-		if ( ! werePrePublishChecksEnabled ) {
-			await enablePrePublishChecks();
-		}
-	} );
-
-	afterEach( async () => {
-		if ( ! werePrePublishChecksEnabled ) {
-			await disablePrePublishChecks();
-		}
-	} );
-
-	it( 'PrePublish: publish button should have the focus', async () => {
-		await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
-		await openPublishPanel();
-
-		const focusedElementClassList = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return Object.values( focusedElement.classList );
-			}
-		);
-		expect( focusedElementClassList ).toContain(
-			'editor-post-publish-button'
-		);
-	} );
-
-	it( 'PostPublish: post link should have the focus', async () => {
-		const postTitle = 'E2E Test Post';
-		await canvas().type( '.editor-post-title__input', postTitle );
-		await publishPost();
-
-		const focusedElementTag = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return focusedElement.tagName.toLowerCase();
-			}
-		);
-		const focusedElementText = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return focusedElement.text;
-			}
-		);
-		expect( focusedElementTag ).toBe( 'a' );
-		expect( focusedElementText ).toBe( postTitle );
-	} );
-
-	it( 'should retain focus within the panel', async () => {
-		await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
-		await openPublishPanel();
-		await pressKeyWithModifier( 'shift', 'Tab' );
-
-		const focusedElementClassList = await page.$eval(
-			':focus',
-			( focusedElement ) => {
-				return Object.values( focusedElement.classList );
-			}
-		);
-		expect( focusedElementClassList ).toContain(
-			'components-checkbox-control__input'
-		);
-	} );
-} );