Commit 4111162ec5 for woocommerce
commit 4111162ec5dee8371248c606d6888edbe2d8eb55
Author: Luigi Teschio <gigitux@gmail.com>
Date: Thu Apr 24 10:42:42 2025 +0200
Blocks: fix integration test framework (#57458)
* feat: add block setting to control spec visibility
* chore: changelog
* chore: phpcs
* test: verify toggle behaviors
* Update plugins/woocommerce/changelog/wooplug-3844-add-conditional-options-for-displaying-weight-dimensions-and
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
* chore: remove redundant fontSize attribute
* Blocks - integration tests: ensure that Woo blocks aren't unregistered
* improve integration test framework
* improve unit test
* Add changefile(s) from automation for the following project(s): woocommerce
* fix conflict
* lint code
---------
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
diff --git a/plugins/woocommerce/changelog/57458-fix-integration-test-framework b/plugins/woocommerce/changelog/57458-fix-integration-test-framework
new file mode 100644
index 0000000000..ac3122de12
--- /dev/null
+++ b/plugins/woocommerce/changelog/57458-fix-integration-test-framework
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Blocks: fix integration test framework.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/test/block.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/test/block.ts
index 4fda9e4064..7ef3179210 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/test/block.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-specifications/test/block.ts
@@ -39,12 +39,11 @@ describe( 'Product Specifications block', () => {
}
} );
- test( 'should handle section visibility toggles correctly', () => {
+ test( 'should show all sections by default', () => {
const block = within(
screen.getByLabelText( /Block: Product Specifications/i )
);
- // Test initial state - all sections should be visible by default
expect( block.getByText( /Weight/i ) ).toBeInTheDocument();
expect( block.getByText( /Dimensions/i ) ).toBeInTheDocument();
expect( block.getByText( /Test Attribute/i ) ).toBeInTheDocument();
@@ -63,57 +62,86 @@ describe( 'Product Specifications block', () => {
name: /Show Attributes/i,
} )
).toBeChecked();
+ } );
+
+ test( 'should hide weight section when toggled off', () => {
+ const block = within(
+ screen.getByLabelText( /Block: Product Specifications/i )
+ );
- // Test hiding weight section
fireEvent.click(
screen.getByRole( 'checkbox', { name: /Show Weight/i } )
);
+
expect( block.queryByText( /Weight/i ) ).not.toBeInTheDocument();
expect( block.getByText( /Dimensions/i ) ).toBeInTheDocument();
expect( block.getByText( /Test Attribute/i ) ).toBeInTheDocument();
+ } );
+
+ test( 'should hide dimensions section when toggled off', () => {
+ const block = within(
+ screen.getByLabelText( /Block: Product Specifications/i )
+ );
- // Test hiding dimensions section
fireEvent.click(
screen.getByRole( 'checkbox', {
name: /Show Dimensions/i,
} )
);
- expect( block.queryByText( /Weight/i ) ).not.toBeInTheDocument();
+
+ expect( block.getByText( /Weight/i ) ).toBeInTheDocument();
+
expect(
block.queryByText( /Dimensions/i )
).not.toBeInTheDocument();
expect( block.getByText( /Test Attribute/i ) ).toBeInTheDocument();
+ } );
+
+ test( 'should hide attributes section when toggled off', () => {
+ const block = within(
+ screen.getByLabelText( /Block: Product Specifications/i )
+ );
- // Test hiding attributes section
fireEvent.click(
screen.getByRole( 'checkbox', {
name: /Show Attributes/i,
} )
);
- expect( block.queryByText( /Weight/i ) ).not.toBeInTheDocument();
- expect(
- block.queryByText( /Dimensions/i )
- ).not.toBeInTheDocument();
+
+ expect( block.getByText( /Weight/i ) ).toBeInTheDocument();
+ expect( block.getByText( /Dimensions/i ) ).toBeInTheDocument();
expect(
block.queryByText( /Test Attribute/i )
).not.toBeInTheDocument();
+ } );
+
+ test( 'should restore visibility when sections are toggled back on', () => {
+ const block = within(
+ screen.getByLabelText( /Block: Product Specifications/i )
+ );
- // Test restoring visibility by toggling all sections back on
+ // First hide all sections
fireEvent.click(
screen.getByRole( 'checkbox', { name: /Show Weight/i } )
);
fireEvent.click(
- screen.getByRole( 'checkbox', {
- name: /Show Dimensions/i,
- } )
+ screen.getByRole( 'checkbox', { name: /Show Dimensions/i } )
);
fireEvent.click(
- screen.getByRole( 'checkbox', {
- name: /Show Attributes/i,
- } )
+ screen.getByRole( 'checkbox', { name: /Show Attributes/i } )
+ );
+
+ // Then show them all again
+ fireEvent.click(
+ screen.getByRole( 'checkbox', { name: /Show Weight/i } )
+ );
+ fireEvent.click(
+ screen.getByRole( 'checkbox', { name: /Show Dimensions/i } )
+ );
+ fireEvent.click(
+ screen.getByRole( 'checkbox', { name: /Show Attributes/i } )
);
- // Verify all sections are visible again
expect( block.getByText( /Weight/i ) ).toBeInTheDocument();
expect( block.getByText( /Dimensions/i ) ).toBeInTheDocument();
expect( block.getByText( /Test Attribute/i ) ).toBeInTheDocument();
diff --git a/plugins/woocommerce/client/blocks/tests/integration/helpers/integration-test-editor.tsx b/plugins/woocommerce/client/blocks/tests/integration/helpers/integration-test-editor.tsx
index 2d909beade..c54f5caf51 100644
--- a/plugins/woocommerce/client/blocks/tests/integration/helpers/integration-test-editor.tsx
+++ b/plugins/woocommerce/client/blocks/tests/integration/helpers/integration-test-editor.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { registerCoreBlocks } from '@wordpress/block-library';
@@ -9,15 +9,8 @@ import {
type BlockAttributes,
type BlockInstance,
createBlock,
- getBlockTypes,
- unregisterBlockType,
} from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
import '@wordpress/format-library';
-import {
- store as richTextStore,
- unregisterFormatType,
-} from '@wordpress/rich-text';
import {
type EditorSettings,
type EditorBlockListSettings,
@@ -55,18 +48,6 @@ export function Editor( {
settings?: Partial< EditorSettings & EditorBlockListSettings >;
} ) {
const [ currentBlocks, updateBlocks ] = useState( testBlocks );
- const { getFormatTypes } = useSelect( richTextStore, [] );
-
- useEffect( () => {
- return () => {
- getBlockTypes().forEach( ( { name } ) =>
- unregisterBlockType( name )
- );
- getFormatTypes().forEach( ( { name } ) =>
- unregisterFormatType( name )
- );
- };
- }, [ getFormatTypes ] );
return (
<BlockEditorProvider
@@ -81,21 +62,23 @@ export function Editor( {
);
}
+let areCoreBlocksRegistered = false;
+
/**
* Registers the core block, creates the test block instances, and then instantiates the Editor.
*
- * @param testBlocks Block or array of block settings for blocks to be tested.
- * @param useCoreBlocks Defaults to true. If false, core blocks will not be registered.
- * @param settings Any additional editor settings to be passed to the editor.
+ * @param testBlocks Block or array of block settings for blocks to be tested.
+ * @param settings Any additional editor settings to be passed to the editor.
*/
export async function initializeEditor(
testBlocks: BlockAttributes | BlockAttributes[],
- useCoreBlocks = true,
settings: Partial< EditorSettings & EditorBlockListSettings > = {}
) {
- if ( useCoreBlocks ) {
+ if ( ! areCoreBlocksRegistered ) {
registerCoreBlocks();
+ areCoreBlocksRegistered = true;
}
+
const blocks: BlockAttributes[] = Array.isArray( testBlocks )
? testBlocks
: [ testBlocks ];