migrate row filters e2e tests to playwright

liip · Nov 19, 2023 · 8db92c1 · 8db92c1
1 parent 78e382c
commit 8db92c1
Show file tree

Hide file tree

Showing 6 changed files with 221 additions and 143 deletions.
diff --git a/cypress/e2e/row/row-filters.cy.js b/cypress/e2e/row/row-filters.cy.js
diff --git a/...ots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-chromium.txt b/...ots__/wp-bootstrap-blocks-row-default-attributes-override-default-attributes-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"noGutters":false} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
diff --git a/...pBootstrapBlocks-row-horizontalGuttersOptions-adds-horizontal-gutters-option-chromium.txt b/...pBootstrapBlocks-row-horizontalGuttersOptions-adds-horizontal-gutters-option-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"noGutters":false,"horizontalGutters":"gx-10"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
diff --git a/...e/row/__snapshots__/wpBootstrapBlocks-row-templates-adds-additional-template-chromium.txt b/...e/row/__snapshots__/wpBootstrapBlocks-row-templates-adds-additional-template-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"1-66percent"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
diff --git a/...__/wpBootstrapBlocks-row-verticalGuttersOptions-adds-vertical-gutters-option-chromium.txt b/...__/wpBootstrapBlocks-row-verticalGuttersOptions-adds-vertical-gutters-option-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"noGutters":false,"verticalGutters":"gy-10"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
diff --git a/playwright/e2e/row/row-filters.spec.ts b/playwright/e2e/row/row-filters.spec.ts
@@ -0,0 +1,203 @@
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Row Block Filters', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activatePlugin(
+ 'wp-bootstrap-blocks-test-row-filters'
+ );
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ 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.templates adds additional template', async ( {
+ page,
+ editor,
+ } ) => {
+ // Additional template should be available
+ await expect(
+ await page.$$( '.wp-bootstrap-blocks-template-selector-button' )
+ ).toHaveLength( 5 ); // 4 default templates + 1 additional template (custom template disabled)
+ await expect(
+ await page.locator(
+ '.wp-bootstrap-blocks-template-selector-button > button[aria-label="1 Column (2/3 width)"]'
+ )
+ ).toBeVisible();
+ await expect(
+ await page.locator(
+ '.wp-bootstrap-blocks-template-selector-button > button[aria-label="1 Column (2/3 width)"] > span.dashicons-yes'
+ )
+ ).toBeVisible();
+
+ // Template should be applied
+ await page
+ .locator(
+ '.wp-bootstrap-blocks-template-selector-button > button[aria-label="1 Column (2/3 width)"]'
+ )
+ .click();
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'wpBootstrapBlocks.row.templates-adds-additional-template.txt'
+ );
+ } );
+
+ test( 'wpBootstrapBlocks.row.enableCustomTemplate disables custom template', async ( {
+ page,
+ editor,
+ } ) => {
+ // Additional template should be available
+ await expect(
+ await page.$$( '.wp-bootstrap-blocks-template-selector-button' )
+ ).toHaveLength( 5 ); // 4 default templates + 1 additional template (custom template disabled)
+ await expect(
+ await page.locator(
+ '.wp-bootstrap-blocks-template-selector-button > button[aria-label="Custom"]'
+ )
+ ).not.toBeVisible();
+ } );
+
+ test( 'wp_bootstrap_blocks_row_default_attributes override default attributes', async ( {
+ page,
+ editor,
+ } ) => {
+ // 1:2 template should be selected
+ await expect(
+ await page.locator(
+ '.wp-bootstrap-blocks-template-selector-button > button[aria-label="2 Columns (1:2)"].is-active'
+ )
+ ).toBeVisible();
+
+ // No Gutters option should be checked
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'No Gutters', { exact: true } )
+ .isChecked()
+ ).toBeTruthy();
+
+ // Editor stack columns option should be checked
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Editor: Display columns stacked' )
+ .isChecked()
+ ).toBeTruthy();
+
+ // Align columns right should be selected
+ await editor.clickBlockToolbarButton(
+ 'Change horizontal alignment of columns'
+ );
+ await expect(
+ await page.locator( 'button.is-active:text("Align columns right")' )
+ ).toBeVisible();
+
+ // Align columns bottom should be selected
+ await editor.clickBlockToolbarButton(
+ 'Change vertical alignment of columns'
+ );
+ await expect(
+ await page.locator(
+ 'button.is-active:text("Align columns bottom")'
+ )
+ ).toBeVisible();
+
+ // Disable No Gutters option to make Gutter options visible
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'No Gutters', { exact: true } )
+ .click();
+
+ // Horizontal Gutters should be selected
+ await expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Horizontal Gutters' )
+ .inputValue()
+ ).toBe( 'gx-5' );
+
+ // Vertical Gutters should be selected
+ await expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Vertical Gutters' )
+ .inputValue()
+ ).toBe( 'gy-3' );
+
+ // Check if attributes are set correctly
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'wp_bootstrap_blocks_row_default_attributes-override-default-attributes.txt'
+ );
+ } );
+
+ // Bootstrap 5 specific filters
+ test( 'wpBootstrapBlocks.row.horizontalGuttersOptions adds horizontal gutters option', async ( {
+ page,
+ editor,
+ } ) => {
+ // Disable No Gutters option to make Gutter options visible
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'No Gutters', { exact: true } )
+ .click();
+
+ // Custom horizontal gutters option should be applied
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Horizontal Gutters' )
+ .selectOption( 'gx-10' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'wpBootstrapBlocks.row.horizontalGuttersOptions-adds-horizontal-gutters-option.txt'
+ );
+ } );
+
+ test( 'wpBootstrapBlocks.row.verticalGuttersOptions should add vertical gutters option', async ( {
+ page,
+ editor,
+ } ) => {
+ // Disable No Gutters option to make Gutter options visible
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'No Gutters', { exact: true } )
+ .click();
+
+ // Custom vertical gutters option should be applied
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Vertical Gutters' )
+ .selectOption( 'gy-10' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'wpBootstrapBlocks.row.verticalGuttersOptions-adds-vertical-gutters-option.txt'
+ );
+ } );
+} );