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