migrate row block css grid e2e tests to playwright

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

@@ -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 -->

playwright/e2e/row/row-bootstrap-v4.spec.ts

@@ -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/row-css-grid.spec.ts

@@ -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();
+ } );
+} );