migrate row block css grid e2e tests to playwright

Author: tschortsch

cypress/e2e/row/row-bootstrap-v4.cy.js

@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"cssGridGutters":"2rem"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->

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

@@ -0,0 +1,35 @@
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Row Block - Bootstrap 4', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'wp-bootstrap-blocks-test-bootstrap-v4'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'wp-bootstrap-blocks-test-bootstrap-v4'
+		);
+	} );
+
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/row',
+		} );
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'Bootstrap 5 options are not displayed if run with Bootstrap 4', async ( {
+		page,
+	} ) => {
+		// Horizontal Gutters options should not exist
+		await expect(
+			page.getByLabel( 'Horizontal Gutters' )
+		).not.toBeVisible();
+
+		// Vertical Gutters options should not exist
+		await expect( page.getByLabel( 'Vertical Gutters' ) ).not.toBeVisible();
+	} );
+} );

playwright/e2e/row/__snapshots__/change-gutter-size-chromium.txt

@@ -0,0 +1,59 @@
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Row Block - CSS Grid', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'wp-bootstrap-blocks-test-css-grid'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'wp-bootstrap-blocks-test-css-grid'
+		);
+	} );
+
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/row',
+		} );
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'CSS Grid options are shown', async ( { page } ) => {
+		// Gutters options should exist
+		await expect(
+			page.getByLabel( 'Gutters', { exact: true } )
+		).toBeVisible();
+	} );
+
+	test( 'Change gutter size', async ( { page, editor } ) => {
+		// Change gutters
+		await page
+			.getByLabel( 'Gutters', { exact: true } )
+			.selectOption( '2rem' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'change-gutter-size.txt'
+		);
+	} );
+
+	test( 'Hide gutter options when no gutters is checked', async ( {
+		page,
+		editor,
+	} ) => {
+		// Enable no gutters option
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'No Gutters' )
+			.click();
+
+		// Gutters options should exist
+		await expect(
+			page.getByLabel( 'Gutters', { exact: true } )
+		).not.toBeVisible();
+	} );
+} );