From 5fabe985d5304c6d8cd29a13e30ef379b054d093 Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Wed, 19 Jun 2024 16:50:31 +0300 Subject: [PATCH 1/3] fix: button group font settings --- inc/css/blocks/class-button-group-css.php | 4 +- .../blocks/button-group/group/inspector.js | 16 +++---- .../test/e2e/blocks/button-group.spec.js | 44 +++++++++++++++++++ 3 files changed, 54 insertions(+), 10 deletions(-) create mode 100644 src/blocks/test/e2e/blocks/button-group.spec.js diff --git a/inc/css/blocks/class-button-group-css.php b/inc/css/blocks/class-button-group-css.php index cffa52818..d5db87571 100644 --- a/inc/css/blocks/class-button-group-css.php +++ b/inc/css/blocks/class-button-group-css.php @@ -157,7 +157,7 @@ public function render_css( $block ) { 'property' => 'line-height', 'value' => 'lineHeight', 'format' => function( $value, $attrs ) { - return is_numeric( $value ) ? $value . 'px' : $value; + return ! is_string( $value ) && is_numeric( $value ) ? $value . 'px' : $value; }, 'hasSync' => 'gr-btn-font-height', ), @@ -188,7 +188,7 @@ public function render_css( $block ) { /** * Generate Button Group Global CSS - * + * * @return string|void * @since 2.2.3 * @access public diff --git a/src/blocks/blocks/button-group/group/inspector.js b/src/blocks/blocks/button-group/group/inspector.js index 926d0636d..222b37fc8 100644 --- a/src/blocks/blocks/button-group/group/inspector.js +++ b/src/blocks/blocks/button-group/group/inspector.js @@ -412,11 +412,11 @@ const Inspector = ({ }, { label: __( 'Appearance', 'otter-blocks' ), - value: 'fontVariant' + value: 'fontStyle' }, { label: __( 'Letter Case', 'otter-blocks' ), - value: 'fontStyle' + value: 'textTransform' }, { label: __( 'Line Height', 'otter-blocks' ), @@ -438,8 +438,8 @@ const Inspector = ({ fontSize: attributes.fontSize, fontFamily: attributes.fontFamily, lineHeight: attributes.lineHeight, - appearance: attributes.fontVariant, - letterCase: attributes.fontStyle + appearance: attributes.fontStyle, + letterCase: attributes.textTransform }} onChange={ values => { @@ -447,17 +447,17 @@ const Inspector = ({ fontSize: values.fontSize, fontFamily: values.fontFamily, lineHeight: values.lineHeight, - fontVariant: values.appearance, - fontStyle: values.letterCase + fontStyle: values.appearance, + textTransform: values.letterCase }); } } showAsDisable={{ fontSize: attributes.isSynced?.includes( 'fontSize' ), fontFamily: attributes.isSynced?.includes( 'fontFamily' ), - appearance: attributes.isSynced?.includes( 'fontVariant' ), + appearance: attributes.isSynced?.includes( 'fontStyle' ), lineHeight: attributes.isSynced?.includes( 'lineHeight' ), - letterCase: attributes.isSynced?.includes( 'fontStyle' ) + letterCase: attributes.isSynced?.includes( 'textTransform' ) }} /> diff --git a/src/blocks/test/e2e/blocks/button-group.spec.js b/src/blocks/test/e2e/blocks/button-group.spec.js new file mode 100644 index 000000000..27a118337 --- /dev/null +++ b/src/blocks/test/e2e/blocks/button-group.spec.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { test, expect } from '@wordpress/e2e-test-utils-playwright'; + +test.describe( 'Button Group', () => { + test.beforeEach( async({ admin }) => { + await admin.createNewPost(); + }); + + test( 'check font settings', async({ editor, page }) => { + const attributes = { + fontSize: '28px', + fontFamily: 'Abel', + textTransform: 'lowercase', + fontStyle: 'italic', + lineHeight: '2.5' + }; + + await editor.insertBlock({ + name: 'themeisle-blocks/button-group', + attributes, + innerBlocks: [ + { + name: 'themeisle-blocks/button', + attributes: { + text: 'Button 1' + } + } + ] + }); + + const postId = await editor.publishPost(); + await page.goto( `/?p=${postId}` ); + + // Check CSS font properties + const btn = page.locator( 'a' ).filter({ hasText: 'Button 1' }); + await expect( btn ).toHaveCSS( 'font-size', attributes.fontSize ); + await expect( btn ).toHaveCSS( 'font-family', attributes.fontFamily ); + await expect( btn ).toHaveCSS( 'text-transform', attributes.textTransform ); + await expect( btn ).toHaveCSS( 'font-style', attributes.fontStyle ); + await expect( btn ).toHaveCSS( 'line-height', `${parseInt( attributes.fontSize ) * parseFloat( attributes.lineHeight )}px` ); // Playwright use computed line-height based on font-size. + }); +}); From 7a21f6c24bea2188d7b09d3e1589e9695da8913a Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Thu, 20 Jun 2024 11:36:25 +0300 Subject: [PATCH 2/3] fix: E2E auth state --- .../test/e2e/blocks/block-conditions.spec.js | 16 +++++++++------- src/blocks/test/e2e/blocks/button-group.spec.js | 2 +- src/blocks/test/e2e/utils.js | 15 ++++++++++----- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/blocks/test/e2e/blocks/block-conditions.spec.js b/src/blocks/test/e2e/blocks/block-conditions.spec.js index 00709ad0e..57826676b 100644 --- a/src/blocks/test/e2e/blocks/block-conditions.spec.js +++ b/src/blocks/test/e2e/blocks/block-conditions.spec.js @@ -5,20 +5,21 @@ import { test, expect } from '@wordpress/e2e-test-utils-playwright'; import { tryLoginIn } from '../utils'; test.describe( 'Block Conditions', () => { - test.beforeEach( async({ admin, requestUtils, page }) => { - await tryLoginIn( page, 'admin', 'password' ); + test.beforeEach( async({ admin, page }) => { + await tryLoginIn( page ); await admin.createNewPost(); }); test.afterEach( async({ page }) => { /** - * Because some conditions require an user to be logged in, we need to log in the user after each test so that we do not break the next test. + * Because some conditions require a user to be logged in, + * we need to log in the user after each test so that we do not break the next test. */ - await tryLoginIn( page, 'admin', 'password' ); + await tryLoginIn( page ); }); - test( 'check logged out users', async({ editor, page, admin, requestUtils }) => { + test( 'check logged out users', async({ editor, page }) => { await editor.insertBlock({ name: 'core/image', attributes: { @@ -35,14 +36,15 @@ test.describe( 'Block Conditions', () => { const postId = await editor.publishPost(); - // Check the block for logged in users. + // Check the block for logged-in users. await page.goto( `/?p=${postId}` ); await expect( page.locator( '#wp--skip-link--target img' ) ).toBeVisible(); - // Check the block for logged out users. + // // Check the block for logged out users. await page.getByRole( 'menuitem', { name: 'Howdy, admin' }).hover(); await page.waitForTimeout( 200 ); await page.getByRole( 'menuitem', { name: 'Log Out' }).click(); + await page.goto( `/?p=${postId}` ); await expect( page.locator( '#wp--skip-link--target img' ) ).toBeHidden(); }); diff --git a/src/blocks/test/e2e/blocks/button-group.spec.js b/src/blocks/test/e2e/blocks/button-group.spec.js index 27a118337..f2b35d0c2 100644 --- a/src/blocks/test/e2e/blocks/button-group.spec.js +++ b/src/blocks/test/e2e/blocks/button-group.spec.js @@ -4,7 +4,7 @@ import { test, expect } from '@wordpress/e2e-test-utils-playwright'; test.describe( 'Button Group', () => { - test.beforeEach( async({ admin }) => { + test.beforeEach( async({ admin, page }) => { await admin.createNewPost(); }); diff --git a/src/blocks/test/e2e/utils.js b/src/blocks/test/e2e/utils.js index a45223741..369141d9b 100644 --- a/src/blocks/test/e2e/utils.js +++ b/src/blocks/test/e2e/utils.js @@ -69,9 +69,14 @@ export function deleteFile( filePath ) { } } -export async function tryLoginIn( page, username, password ) { - await page.goto( '/wp-login.php' ); - await page.fill( 'input[name="log"]', username ); - await page.fill( 'input[name="pwd"]', password ); - await page.click( 'input[name="wp-submit"]' ); +export async function tryLoginIn( page, username = 'admin', password = 'password' ) { + await page.goto('/wp-login.php'); + await page.fill('input[name="log"]', username); + await page.fill('input[name="pwd"]', password); + await page.check('input[name="rememberme"]'); + await page.click('input[name="wp-submit"]'); + + // Save the context since tests are isolated. + // So we need to save the auth state to keep the user logged in so that they can be used in the next test. + await page.context().storageState({ path: 'artifacts/storage-states/admin.json' }); } From 46a2891f357595e71bb2f65c288514fecb57639e Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Thu, 20 Jun 2024 11:48:45 +0300 Subject: [PATCH 3/3] chore: js format --- src/blocks/test/e2e/utils.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/blocks/test/e2e/utils.js b/src/blocks/test/e2e/utils.js index 369141d9b..40d1c951f 100644 --- a/src/blocks/test/e2e/utils.js +++ b/src/blocks/test/e2e/utils.js @@ -70,11 +70,11 @@ export function deleteFile( filePath ) { } export async function tryLoginIn( page, username = 'admin', password = 'password' ) { - await page.goto('/wp-login.php'); - await page.fill('input[name="log"]', username); - await page.fill('input[name="pwd"]', password); - await page.check('input[name="rememberme"]'); - await page.click('input[name="wp-submit"]'); + await page.goto( '/wp-login.php' ); + await page.fill( 'input[name="log"]', username ); + await page.fill( 'input[name="pwd"]', password ); + await page.check( 'input[name="rememberme"]' ); + await page.click( 'input[name="wp-submit"]' ); // Save the context since tests are isolated. // So we need to save the auth state to keep the user logged in so that they can be used in the next test.