Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Visual tests - Adds testing nesting multiple Columns blocks #5815

Merged
merged 3 commits into from
May 30, 2023
Merged

Visual tests - Adds testing nesting multiple Columns blocks #5815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0bf1189
Adds Columns test - It allows deep nesting
May 30, 2023
d197487
Update Gutenberg ref
May 30, 2023
cc1d539
Update Gutenberg ref
May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions __device-tests__/gutenberg-editor-sanity-test-1-visual.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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();
} );
} );
} );
Binary file added ...st-suite-1-columns-block-allows-deep-nesting-to-at-least-3-levels-1-android.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...r-test-suite-1-columns-block-allows-deep-nesting-to-at-least-3-levels-1-ios.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions __device-tests__/test-editor-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->`;
2 changes: 1 addition & 1 deletion gutenberg
Open in desktop
Submodule gutenberg updated 166 files