diff --git a/packages/e2e-tests/specs/editor/various/list-view.test.js b/packages/e2e-tests/specs/editor/various/list-view.test.js index aef74c82a20921..21b512dd8c94f4 100644 --- a/packages/e2e-tests/specs/editor/various/list-view.test.js +++ b/packages/e2e-tests/specs/editor/various/list-view.test.js @@ -5,6 +5,7 @@ import { createNewPost, insertBlock, getEditedPostContent, + openListView, pressKeyWithModifier, pressKeyTimes, } from '@wordpress/e2e-test-utils'; @@ -20,6 +21,10 @@ async function dragAndDrop( draggableElement, targetElement, offsetY ) { return await page.mouse.dragAndDrop( draggablePoint, targetPoint ); } +async function getBlockListLeafNodes() { + return await page.$$( '.block-editor-list-view-leaf' ); +} + describe( 'List view', () => { beforeAll( async () => { await page.setDragInterception( true ); @@ -97,4 +102,46 @@ describe( 'List view', () => { // https://github.com/WordPress/gutenberg/issues/38763. expect( console ).not.toHaveErrored(); } ); + + it( 'should expand nested list items', async () => { + // Insert some blocks of different types. + await insertBlock( 'Cover' ); + + // Click first color option from the block placeholder's color picker to make the inner blocks appear. + const colorPickerButton = await page.waitForSelector( + '.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button' + ); + await colorPickerButton.click(); + + // Open list view. + await openListView(); + + // Things start off expanded. + expect( await getBlockListLeafNodes() ).toHaveLength( 2 ); + + const blockListExpanders = await page.$$( + '.block-editor-list-view__expander' + ); + + // Collapse the first block + await blockListExpanders[ 0 ].click(); + + // Check that we're collapsed + expect( await getBlockListLeafNodes() ).toHaveLength( 1 ); + + // Click the cover title placeholder. + const coverTitle = await page.waitForSelector( + '.wp-block-cover .wp-block-paragraph' + ); + + await coverTitle.click(); + + // The block list should contain two leafs and the second should be selected (and be a paragraph). + const selectedElementText = await page.$eval( + '.block-editor-list-view-leaf:nth-child(2).is-selected a', + ( element ) => element.innerText + ); + + expect( selectedElementText ).toContain( 'Paragraph' ); + } ); } );