From 78e382c90b8ae6a380bda52b7f6929e75f51c3c5 Mon Sep 17 00:00:00 2001 From: Juerg Hunziker Date: Sun, 19 Nov 2023 20:33:29 +0100 Subject: [PATCH] migrate row filters css grid e2e tests to playwright --- cypress/e2e/row/row-filters-css-grid.cy.js | 52 ------------ ...ault-attributes-with-CSS-grid-chromium.txt | 5 ++ ...rsOptions-adds-gutters-option-chromium.txt | 5 ++ .../e2e/row/row-filters-css-grid.spec.ts | 81 +++++++++++++++++++ 4 files changed, 91 insertions(+), 52 deletions(-) delete mode 100644 cypress/e2e/row/row-filters-css-grid.cy.js create mode 100644 playwright/e2e/row/__snapshots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-with-CSS-grid-chromium.txt create mode 100644 playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-cssGridGuttersOptions-adds-gutters-option-chromium.txt create mode 100644 playwright/e2e/row/row-filters-css-grid.spec.ts diff --git a/cypress/e2e/row/row-filters-css-grid.cy.js b/cypress/e2e/row/row-filters-css-grid.cy.js deleted file mode 100644 index 7948e0445..000000000 --- a/cypress/e2e/row/row-filters-css-grid.cy.js +++ /dev/null @@ -1,52 +0,0 @@ -/// - -describe( 'Row Block Filters CSS grid', () => { - before( () => { - cy.loginUser(); - cy.activatePlugin( 'wp-bootstrap-blocks-test-css-grid' ); - cy.activatePlugin( 'wp-bootstrap-blocks-test-row-filters' ); - } ); - - after( () => { - cy.loginUser(); - cy.deactivatePlugin( 'wp-bootstrap-blocks-test-css-grid' ); - cy.deactivatePlugin( 'wp-bootstrap-blocks-test-row-filters' ); - } ); - - beforeEach( () => { - cy.loginUser(); - cy.createNewPost(); - } ); - - it( 'wpBootstrapBlocks.row.cssGridGuttersOptions should add gutters option', () => { - cy.insertRowBlock(); - cy.selectRowBlock(); - cy.ensureSidebarOpened(); - - // Disable No Gutters option to make Gutter options visible - cy.clickElementByText( 'label', 'No Gutters' ); - - // Additional gutters option should be available - cy.selectOptionIsAvailable( 'Gutters', '10rem' ); - - // Gutters option should be applied - cy.getSelectByLabel( 'Gutters' ).select( '10rem' ); - - cy.postContentMatchesSnapshot(); - } ); - - it( 'wp_bootstrap_blocks_row_default_attributes should override default attributes with CSS grid', () => { - cy.insertRowBlock(); - cy.selectRowBlock(); - cy.ensureSidebarOpened(); - - // Disable No Gutters option to make Gutter options visible - cy.clickElementByText( 'label', 'No Gutters' ); - - // Horizontal Gutters should be selected - cy.getSelectByLabel( 'Gutters' ).should( 'have.value', '1rem' ); - - // Check if attributes are set correctly - cy.postContentMatchesSnapshot(); - } ); -} ); diff --git a/playwright/e2e/row/__snapshots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-with-CSS-grid-chromium.txt b/playwright/e2e/row/__snapshots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-with-CSS-grid-chromium.txt new file mode 100644 index 000000000..cb85ec328 --- /dev/null +++ b/playwright/e2e/row/__snapshots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-with-CSS-grid-chromium.txt @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-cssGridGuttersOptions-adds-gutters-option-chromium.txt b/playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-cssGridGuttersOptions-adds-gutters-option-chromium.txt new file mode 100644 index 000000000..12819e9f2 --- /dev/null +++ b/playwright/e2e/row/__snapshots__/wpBootstrapBlocks-row-cssGridGuttersOptions-adds-gutters-option-chromium.txt @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/playwright/e2e/row/row-filters-css-grid.spec.ts b/playwright/e2e/row/row-filters-css-grid.spec.ts new file mode 100644 index 000000000..f8d0c7a88 --- /dev/null +++ b/playwright/e2e/row/row-filters-css-grid.spec.ts @@ -0,0 +1,81 @@ +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); + +test.describe( 'Row Block Filters - CSS Grid', () => { + test.beforeAll( async ( { requestUtils } ) => { + await requestUtils.activatePlugin( + 'wp-bootstrap-blocks-test-css-grid' + ); + await requestUtils.activatePlugin( + 'wp-bootstrap-blocks-test-row-filters' + ); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await requestUtils.deactivatePlugin( + 'wp-bootstrap-blocks-test-css-grid' + ); + await requestUtils.deactivatePlugin( + 'wp-bootstrap-blocks-test-row-filters' + ); + } ); + + test.beforeEach( async ( { admin, editor, page } ) => { + await admin.createNewPost(); + await editor.insertBlock( { + name: 'wp-bootstrap-blocks/row', + } ); + await editor.openDocumentSettingsSidebar(); + } ); + + test( 'wpBootstrapBlocks.row.cssGridGuttersOptions adds gutters option', async ( { + page, + editor, + } ) => { + // Disable No Gutters option to make Gutter options visible + await page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByLabel( 'No Gutters' ) + .click(); + + // Custom gutters option should be applied + await page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByLabel( 'Gutters', { exact: true } ) + .selectOption( '10rem' ); + + expect( await editor.getEditedPostContent() ).toMatchSnapshot( + 'wpBootstrapBlocks.row.cssGridGuttersOptions-adds-gutters-option.txt' + ); + } ); + + test( 'wp_bootstrap_blocks_row_default_attributes override default attributes with CSS grid', async ( { + page, + editor, + } ) => { + // Disable No Gutters option to make Gutter options visible + await page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByLabel( 'No Gutters' ) + .click(); + + await expect( + await page + .getByRole( 'region', { + name: 'Editor settings', + } ) + .getByLabel( 'Gutters', { exact: true } ) + .inputValue() + ).toBe( '1rem' ); + + // Check if attributes are set correctly + expect( await editor.getEditedPostContent() ).toMatchSnapshot( + 'wp_bootstrap_blocks_row_default_attributes-override-default-attributes-with-CSS-grid.txt' + ); + } ); +} );