Merge pull request #5815 from wordpress-mobile/add/more-visual-tests

Visual tests - Adds testing nesting multiple Columns blocks

__device-tests__/gutenberg-editor-sanity-test-1-visual.test.js

@@ -10,6 +10,7 @@ const {
 	toggleDarkMode,
 	isEditorVisible,
 } = e2eUtils;
+import { NESTED_COLUMNS_3_LEVELS } from './test-editor-data';
 
 describe( 'Gutenberg Editor - Test Suite 1', () => {
 	describe( 'Columns block', () => {
@@ -296,5 +297,26 @@ describe( 'Gutenberg Editor - Test Suite 1', () => {
 			await editorPage.dismissBottomSheet();
 			await editorPage.removeBlock();
 		} );
+
+		it( 'allows deep nesting to at least 3 levels', async () => {
+			await editorPage.setHtmlContent( NESTED_COLUMNS_3_LEVELS );
+
+			// Wait for the block to be rendered
+			await editorPage.driver.sleep( 3000 );
+
+			// Visual test check
+			const screenshot = await takeScreenshot();
+			expect( screenshot ).toMatchImageSnapshot();
+
+			// Remove block
+			const columnsBlock = await editorPage.getBlockAtPosition(
+				blockNames.columns
+			);
+			await columnsBlock.click();
+
+			await editorPage.moveBlockSelectionUp( { toRoot: true } );
+
+			await editorPage.removeBlock();
+		} );
 	} );
 } );

__device-tests__/test-editor-data.js

@@ -721,3 +721,37 @@ export const NESTED_COLUMNS_CASE_2 = `<!-- wp:separator -->
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover --></div></div>
 <!-- /wp:cover -->`;
+
+export const NESTED_COLUMNS_3_LEVELS = `<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"width":"50%"} -->
+<div class="wp-block-column" style="flex-basis:50%"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->`;