migrate container block e2e tests to playwright

playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt

@@ -0,0 +1 @@
+<!-- wp:wp-bootstrap-blocks/container /-->

playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt

@@ -0,0 +1 @@
+<!-- wp:wp-bootstrap-blocks/container {"isFluid":true} /-->

playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt

@@ -0,0 +1 @@
+<!-- wp:wp-bootstrap-blocks/container {"isFluid":true,"fluidBreakpoint":"lg"} /-->

playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt

@@ -0,0 +1 @@
+<!-- wp:wp-bootstrap-blocks/container /-->

playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt

@@ -0,0 +1 @@
+<!-- wp:wp-bootstrap-blocks/container {"marginAfter":"mb-8"} /-->

playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt

@@ -0,0 +1 @@
+<!-- wp:wp-bootstrap-blocks/container {"isFluid":true,"fluidBreakpoint":"xxl"} /-->

playwright/e2e/container/container-block.spec.ts

@@ -0,0 +1,96 @@
+import { editorSettingsSelectOption } from '../../commands/editor-settings-select-option';
+import { openSidebarPanelWithTitle } from '../../commands/open-sidebar-panel-with-title';
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Container Block', () => {
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/container',
+		} );
+	} );
+
+	test( 'Container block gets initialized with default attributes', async ( {
+		editor,
+		page,
+	} ) => {
+		// Fluid option should not be checked
+		expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Fluid', { exact: true } )
+				.isChecked()
+		).toBeFalsy();
+
+		// Fluid Breakpoint select field should be disabled
+		await expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Fluid Breakpoint', { exact: true } )
+		).toBeDisabled();
+
+		// Margin After should be set
+		expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Margin After' )
+				.inputValue()
+		).toBe( 'mb-2' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'container-block-gets-initialized-with-default-attributes.txt'
+		);
+	} );
+
+	test( 'Enable fluid option', async ( { editor, page } ) => {
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Fluid', { exact: true } )
+			.check();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'enable-fluid-option-1.txt'
+		);
+
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Fluid breakpoint' )
+			.selectOption( 'lg' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'enable-fluid-option-2.txt'
+		);
+	} );
+
+	// Bootstrap 5 specific options
+	test( 'Xxl breakpoint is available', async ( { editor, page } ) => {
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Fluid', { exact: true } )
+			.check();
+
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Fluid breakpoint' )
+			.selectOption( 'xxl' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'xxl-breakpoint-is-available.txt'
+		);
+	} );
+} );

playwright/e2e/container/container-filters.spec.ts

@@ -0,0 +1,81 @@
+import { editorSettingsSelectOption } from '../../commands/editor-settings-select-option';
+import { openSidebarPanelWithTitle } from '../../commands/open-sidebar-panel-with-title';
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Container Filters', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'wp-bootstrap-blocks-test-container-filters'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'wp-bootstrap-blocks-test-container-filters'
+		);
+	} );
+
+	test.beforeEach( async ( { admin, editor } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/container',
+		} );
+	} );
+
+	test( 'wpBootstrapBlocks.container.marginAfterOptions adds margin option', async ( {
+		editor,
+		page,
+	} ) => {
+		// Additional padding option should be available
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Margin After' )
+			.selectOption( 'mb-8' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'wpBootstrapBlocks.container.marginAfterOptions-adds-margin-option.txt'
+		);
+	} );
+
+	test( 'wp_bootstrap_blocks_container_default_attributes override default attributes', async ( {
+		editor,
+		page,
+	} ) => {
+		// Fluid options should be enabled
+		expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Fluid', { exact: true } )
+				.isChecked()
+		).toBeTruthy();
+
+		// Fluid Breakpoint should be selected
+		expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Fluid Breakpoint' )
+				.inputValue()
+		).toBe( 'md' );
+
+		// Margin should be selected
+		expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Margin After' )
+				.inputValue()
+		).toBe( 'mb-3' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'wp_bootstrap_blocks_container_default_attributes-override-default-attributes.txt'
+		);
+	} );
+} );