Testing: Add unit tests.

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<T extends Record<string, any>> {
@@ -34,7 +34,10 @@ function EditorForm<T extends Record<string, any>>({
     [key: string]: Control;
   };
   return (
-    <div className="faust-editor-form" style={styles.form}>
+    <div
+      className="faust-editor-form"
+      aria-label="Faust block editor form"
+      style={styles.form}>
       <h3 className="faust-editor-form__heading" style={styles.heading}>
         <Icon size={24} icon={blockJson.icon} style={styles.icon} />
         {blockJson.title}

packages/block-editor-utils/tests/components/Edit.test.tsx

@@ -90,9 +90,19 @@ describe('<Edit />', () => {
         wp={null}
       />,
     );
-    expect(screen.getByText('Edit mode')).toMatchInlineSnapshot(`
-      <div>
-        Edit mode
+    expect(screen.getByLabelText('Faust block editor form'))
+      .toMatchInlineSnapshot(`
+      <div
+        aria-label="Faust block editor form"
+        class="faust-editor-form"
+        style="padding: 0px 10px; margin: 20px 0px;"
+      >
+        <h3
+          class="faust-editor-form__heading"
+          style="margin: 10px 0px; display: flex; align-items: center;"
+        >
+          SimpleBlock
+        </h3>
       </div>
     `);
   });

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 = () => <div>Another Color</div>;
+  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('<EditorForm />', () => {
+  it('renders an empty EditorForm if no fields are provided', () => {
+    const fields: Field[] = [];
+    addFilter('faustBlockEditorUtils.controls', 'my_callback', filterA);
+    render(
+      <EditorForm fields={fields} props={blockProps} blockJson={blockJson} />,
+    );
+    expect(screen.getByLabelText('Faust block editor form'))
+      .toMatchInlineSnapshot(`
+      <div
+        aria-label="Faust block editor form"
+        class="faust-editor-form"
+        style="padding: 0px 10px; margin: 20px 0px;"
+      >
+        <h3
+          class="faust-editor-form__heading"
+          style="margin: 10px 0px; display: flex; align-items: center;"
+        >
+          <span
+            class="dashicon dashicons dashicons-star"
+            style="font-size: 24px; width: 24px; height: 24px; margin-right: 10px;"
+          />
+          SimpleBlock
+        </h3>
+      </div>
+    `);
+  });
+  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(
+      <EditorForm fields={fields} props={blockProps} blockJson={blockJson} />,
+    );
+    expect(screen.getAllByText('Another Color')).toHaveLength(1);
+  });
+});

packages/block-editor-utils/tests/components/InspectorFields.test.tsx

@@ -86,12 +86,6 @@ describe('<InspectorFields />', () => {
     ];
     addFilter('faustBlockEditorUtils.controls', 'my_callback', filterA);
     render(<InspectorFields fields={fields} props={blockProps} />);
-    expect(screen.getAllByText('Another Color')).toMatchInlineSnapshot(`
-      [
-        <div>
-          Another Color
-        </div>,
-      ]
-    `);
+    expect(screen.getAllByText('Another Color')).toHaveLength(1);
   });
 });