migrate row filters css grid e2e tests to playwright

Author: tschortsch

cypress/e2e/row/row-filters-css-grid.cy.js

@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"noGutters":false} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->

playwright/e2e/row/__snapshots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-with-CSS-grid-chromium.txt

@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"noGutters":false,"cssGridGutters":"10rem"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->

playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-cssGridGuttersOptions-adds-gutters-option-chromium.txt

@@ -0,0 +1,81 @@
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Row Block Filters - CSS Grid', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'wp-bootstrap-blocks-test-css-grid'
+		);
+		await requestUtils.activatePlugin(
+			'wp-bootstrap-blocks-test-row-filters'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'wp-bootstrap-blocks-test-css-grid'
+		);
+		await requestUtils.deactivatePlugin(
+			'wp-bootstrap-blocks-test-row-filters'
+		);
+	} );
+
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/row',
+		} );
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'wpBootstrapBlocks.row.cssGridGuttersOptions adds gutters option', async ( {
+		page,
+		editor,
+	} ) => {
+		// Disable No Gutters option to make Gutter options visible
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'No Gutters' )
+			.click();
+
+		// Custom gutters option should be applied
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Gutters', { exact: true } )
+			.selectOption( '10rem' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'wpBootstrapBlocks.row.cssGridGuttersOptions-adds-gutters-option.txt'
+		);
+	} );
+
+	test( 'wp_bootstrap_blocks_row_default_attributes override default attributes with CSS grid', async ( {
+		page,
+		editor,
+	} ) => {
+		// Disable No Gutters option to make Gutter options visible
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'No Gutters' )
+			.click();
+
+		await expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Gutters', { exact: true } )
+				.inputValue()
+		).toBe( '1rem' );
+
+		// Check if attributes are set correctly
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'wp_bootstrap_blocks_row_default_attributes-override-default-attributes-with-CSS-grid.txt'
+		);
+	} );
+} );