diff --git a/cypress/e2e/container/container-block.cy.js b/cypress/e2e/container/container-block.cy.js deleted file mode 100644 index eab06150f..000000000 --- a/cypress/e2e/container/container-block.cy.js +++ /dev/null @@ -1,66 +0,0 @@ -/// - -describe( 'Container Block', () => { - beforeEach( () => { - cy.loginUser(); - cy.createNewPost(); - } ); - - it( 'Container block should be initialized with default attributes', () => { - cy.insertContainerBlock(); - cy.selectContainerBlock(); - cy.ensureSidebarOpened(); - - // Fluid option should not be checked - cy.getCheckboxByLabel( 'Fluid' ).should( 'not.be.checked' ); - - // Fluid Breakpoint select field should be disabled - cy.xpath( - '//select[@disabled]/parent::div/preceding-sibling::div/label[contains(text(),"Fluid Breakpoint")]' - ).should( 'exist' ); - - // Margin After should be set - cy.getSelectByLabel( 'Margin After' ).should( 'have.value', 'mb-2' ); - - // Editor content should match snapshot - cy.postContentMatchesSnapshot(); - } ); - - it( 'Should be possible to enable fluid option', () => { - cy.insertContainerBlock(); - cy.selectContainerBlock(); - cy.ensureSidebarOpened(); - - // Change column size attributes - cy.clickElementByText( 'label', 'Fluid', true ); - - // Fluid checkbox should be selected - cy.getCheckboxByLabel( 'Fluid' ).should( 'be.checked' ); - - // Editor content should match snapshot - cy.postContentMatchesSnapshot(); - - // Fluid breakpoint option should be applied - cy.getSelectByLabel( 'Fluid Breakpoint' ).select( 'lg' ); - - // Editor content should match snapshot - cy.postContentMatchesSnapshot(); - } ); - - // Bootstrap 5 specific options - - it( 'Should display xxl breakpoint', () => { - cy.insertContainerBlock(); - cy.selectContainerBlock(); - cy.ensureSidebarOpened(); - - cy.xpath( - `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option` - ).should( 'have.length', 6 ); - - // xxl option should exist - cy.xpath( - `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option[@value='xxl']` - ).should( 'have.length', 1 ); - } ); -} ); diff --git a/cypress/e2e/container/container-bootstrap-v4.cy.js b/cypress/e2e/container/container-bootstrap-v4.cy.js deleted file mode 100644 index 04fff9c5d..000000000 --- a/cypress/e2e/container/container-bootstrap-v4.cy.js +++ /dev/null @@ -1,33 +0,0 @@ -/// - -describe( 'Container Block Bootstrap 4', () => { - before( () => { - cy.loginUser(); - cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' ); - } ); - - after( () => { - cy.loginUser(); - cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' ); - } ); - - beforeEach( () => { - cy.loginUser(); - cy.createNewPost(); - } ); - - it( 'Should not display xxl breakpoint options if run with Bootstrap 4', () => { - cy.insertContainerBlock(); - cy.selectContainerBlock(); - cy.ensureSidebarOpened(); - - cy.xpath( - `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option` - ).should( 'have.length', 5 ); - - // xxl option should not exist - cy.xpath( - `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option[@value='xxl']` - ).should( 'not.exist' ); - } ); -} ); diff --git a/cypress/e2e/container/container-filters.cy.js b/cypress/e2e/container/container-filters.cy.js deleted file mode 100644 index 049a1d1ef..000000000 --- a/cypress/e2e/container/container-filters.cy.js +++ /dev/null @@ -1,51 +0,0 @@ -/// - -describe( 'Container Block Filters', () => { - before( () => { - cy.loginUser(); - cy.activatePlugin( 'wp-bootstrap-blocks-test-container-filters' ); - } ); - - after( () => { - cy.loginUser(); - cy.deactivatePlugin( 'wp-bootstrap-blocks-test-container-filters' ); - } ); - - beforeEach( () => { - cy.loginUser(); - cy.createNewPost(); - } ); - - it( 'wpBootstrapBlocks.container.marginAfterOptions should add margin option', () => { - cy.insertContainerBlock(); - cy.selectContainerBlock(); - cy.ensureSidebarOpened(); - - // Additional padding option should be available - cy.selectOptionIsAvailable( 'Margin After', 'mb-8' ); - - // Margin option should be applied - cy.getSelectByLabel( 'Margin After' ).select( 'mb-8' ); - - // Editor content should match snapshot - cy.postContentMatchesSnapshot(); - } ); - - it( 'wp_bootstrap_blocks_container_default_attributes should override default attributes', () => { - cy.insertContainerBlock(); - cy.selectContainerBlock(); - cy.ensureSidebarOpened(); - - // Fluid options should be enabled - cy.getCheckboxByLabel( 'Fluid' ).should( 'be.checked' ); - - // Fluid Breakpoint should be selected - cy.getSelectByLabel( 'Fluid Breakpoint' ).should( 'have.value', 'md' ); - - // Margin should be selected - cy.getSelectByLabel( 'Margin After' ).should( 'have.value', 'mb-3' ); - - // Check if attributes are set correctly - cy.postContentMatchesSnapshot(); - } ); -} ); diff --git a/playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt b/playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt new file mode 100644 index 000000000..5dbd284d4 --- /dev/null +++ b/playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt b/playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt new file mode 100644 index 000000000..3dd59b4d2 --- /dev/null +++ b/playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt b/playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt new file mode 100644 index 000000000..ddcedc166 --- /dev/null +++ b/playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt b/playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt new file mode 100644 index 000000000..5dbd284d4 --- /dev/null +++ b/playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt b/playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt new file mode 100644 index 000000000..774cfc7c6 --- /dev/null +++ b/playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt b/playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt new file mode 100644 index 000000000..84e2fda67 --- /dev/null +++ b/playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playwright/e2e/container/container-block.spec.ts b/playwright/e2e/container/container-block.spec.ts new file mode 100644 index 000000000..48560d6fa --- /dev/null +++ b/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' + ); + } ); +} ); diff --git a/playwright/e2e/container/container-filters.spec.ts b/playwright/e2e/container/container-filters.spec.ts new file mode 100644 index 000000000..adf0ee774 --- /dev/null +++ b/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' + ); + } ); +} );