diff --git a/packages/block-editor-utils/src/components/EditorForm.tsx b/packages/block-editor-utils/src/components/EditorForm.tsx index 28e9c0e7d..cf4ebecf9 100644 --- a/packages/block-editor-utils/src/components/EditorForm.tsx +++ b/packages/block-editor-utils/src/components/EditorForm.tsx @@ -8,15 +8,15 @@ const styles = { form: { padding: '0 10px', margin: '20px 0', - }, + } as React.CSSProperties, icon: { - 'margin-right': '10px', - }, + marginRight: '10px', + } as React.CSSProperties, heading: { margin: '10px 0', display: 'flex', - 'align-items': 'center', - }, + alignItems: 'center', + } as React.CSSProperties, }; interface EditorFormProps> { @@ -34,7 +34,10 @@ function EditorForm>({ [key: string]: Control; }; return ( -
+

{blockJson.title} diff --git a/packages/block-editor-utils/tests/components/Edit.test.tsx b/packages/block-editor-utils/tests/components/Edit.test.tsx index ba509ad9a..479d04bb8 100644 --- a/packages/block-editor-utils/tests/components/Edit.test.tsx +++ b/packages/block-editor-utils/tests/components/Edit.test.tsx @@ -90,9 +90,19 @@ describe('', () => { wp={null} />, ); - expect(screen.getByText('Edit mode')).toMatchInlineSnapshot(` -
- Edit mode + expect(screen.getByLabelText('Faust block editor form')) + .toMatchInlineSnapshot(` +
+

+ SimpleBlock +

`); }); diff --git a/packages/block-editor-utils/tests/components/EditorForm.test.tsx b/packages/block-editor-utils/tests/components/EditorForm.test.tsx new file mode 100644 index 000000000..f3eea01bf --- /dev/null +++ b/packages/block-editor-utils/tests/components/EditorForm.test.tsx @@ -0,0 +1,96 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import EditorForm from '../../src/components/EditorForm.js'; +import { actions, filters, addFilter } from '@wordpress/hooks'; +import { Control, Field } from '../../src/types/index.js'; + +afterEach(() => { + jest.clearAllMocks(); +}); + +beforeEach(() => { + [actions, filters].forEach((hooks) => { + for (const k in hooks) { + if ('__current' === k) { + continue; + } + + delete hooks[k]; + } + delete hooks.all; + }); +}); + +function filterA(controls: { [key: string]: Control }) { + // eslint-disable-next-line no-param-reassign + controls.color = () =>
Another Color
; + return controls; +} + +const blockProps = { + clientId: '1', + setAttributes: () => null, + context: {}, + attributes: { + message: 'Hello', + }, + isSelected: false, + className: 'SimpleBlock', +}; + +const blockJson = { + title: 'SimpleBlock', + icon: 'star', + category: 'text', + attributes: {}, +}; + +describe('', () => { + it('renders an empty EditorForm if no fields are provided', () => { + const fields: Field[] = []; + addFilter('faustBlockEditorUtils.controls', 'my_callback', filterA); + render( + , + ); + expect(screen.getByLabelText('Faust block editor form')) + .toMatchInlineSnapshot(` +
+

+ + SimpleBlock +

+
+ `); + }); + it('renders EditorForm if matching fields are provided', () => { + const fields: Field[] = [ + { + type: 'string', + control: 'color', + name: 'myColor', + location: 'editor', + }, + { + type: 'string', + control: 'text', + name: 'myText', + location: 'inspector', + }, + ]; + addFilter('faustBlockEditorUtils.controls', 'my_callback', filterA); + render( + , + ); + expect(screen.getAllByText('Another Color')).toHaveLength(1); + }); +}); diff --git a/packages/block-editor-utils/tests/components/InspectorFields.test.tsx b/packages/block-editor-utils/tests/components/InspectorFields.test.tsx index a45c783d1..eb97c15a4 100644 --- a/packages/block-editor-utils/tests/components/InspectorFields.test.tsx +++ b/packages/block-editor-utils/tests/components/InspectorFields.test.tsx @@ -86,12 +86,6 @@ describe('', () => { ]; addFilter('faustBlockEditorUtils.controls', 'my_callback', filterA); render(); - expect(screen.getAllByText('Another Color')).toMatchInlineSnapshot(` - [ -
- Another Color -
, - ] - `); + expect(screen.getAllByText('Another Color')).toHaveLength(1); }); });