test: Add unit tests for View, Edit, EditBlockWrapper - refs #253277

src/components/manage/Blocks/Group/Edit.test.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Edit from './Edit';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import thunk from 'redux-thunk';
+import renderer from 'react-test-renderer';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore([thunk]);
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('Edit', () => {
+  const onChangeBlock = jest.fn();
+  const onChangeField = jest.fn();
+  const mockBlockNode = { current: {} };
+  const props = {
+    block: 'testBlock',
+    data: {
+      data: {
+        blocks: {
+          block1: {
+            type: 'test',
+            data: {
+              value: 'Test',
+            },
+          },
+        },
+        blocks_layout: {
+          items: ['block1'],
+        },
+      },
+    },
+    onChangeBlock,
+    onChangeField,
+    pathname: '/',
+    selected: true,
+    manage: true,
+  };
+
+  it('should render without crashing', () => {
+    const component = renderer.create(
+      <Provider store={store}>
+        <Edit {...props} />
+      </Provider>,
+    );
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders without crashing', () => {
+    const { getByRole } = render(
+      <Provider store={store}>
+        <Edit {...props} />
+      </Provider>,
+    );
+    expect(getByRole('presentation')).toBeInTheDocument();
+  });
+
+  it('should call ArrowUp keydown', () => {
+    const mockOnFocusPreviousBlock = jest.fn();
+    const { getByRole } = render(
+      <Provider store={store}>
+        <Edit
+          {...props}
+          onFocusPreviousBlock={mockOnFocusPreviousBlock}
+          blockNode={mockBlockNode}
+        />
+      </Provider>,
+    );
+    fireEvent.keyDown(getByRole('presentation'), { key: 'ArrowUp', code: 38 });
+  });
+});

src/components/manage/Blocks/Group/EditBlockWrapper.test.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { Provider } from 'react-intl-redux';
+import EditBlockWrapper from './EditBlockWrapper';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockDragInfo = {
+  innerRef: {
+    current: {
+      childMethod: jest.fn(),
+    },
+  },
+  draggableProps: {},
+  dragHandleProps: {},
+};
+
+const mockStore = configureStore();
+const store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+});
+
+describe('EditBlockWrapper', () => {
+  const mockBlockProps = {
+    allowedBlocks: [],
+    block: 'mockBlock',
+    data: {},
+    onSelectBlock: jest.fn(),
+    onDeleteBlock: jest.fn(),
+    onMutateBlock: jest.fn(),
+    onInsertBlock: jest.fn(),
+    selected: true,
+  };
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <EditBlockWrapper blockProps={mockBlockProps} draginfo={mockDragInfo}>
+          <div>Test child</div>
+        </EditBlockWrapper>
+      </Provider>,
+    );
+    expect(getByText('Test child')).toBeInTheDocument();
+  });
+
+  it('calls onDeleteBlock when delete button is clicked', () => {
+    const { getByTitle } = render(
+      <Provider store={store}>
+        <EditBlockWrapper blockProps={mockBlockProps} draginfo={mockDragInfo} />
+      </Provider>,
+    );
+    fireEvent.click(getByTitle('Remove block'));
+    expect(mockBlockProps.onDeleteBlock).toHaveBeenCalledWith('mockBlock');
+  });
+});

src/components/manage/Blocks/Group/View.test.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import View from './View';
+import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
+import { RenderBlocks } from '@plone/volto/components';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('@plone/volto/components', () => ({
+  RenderBlocks: jest.fn(() => <div>RenderBlocks</div>),
+}));
+
+describe('View', () => {
+  it('should render without crashing', () => {
+    const props = {
+      data: {},
+      metadata: {},
+      properties: {},
+    };
+    const component = renderer.create(<View {...props} />);
+
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with default tag and without crashing', () => {
+    const props = {
+      data: {},
+      metadata: {},
+      properties: {},
+    };
+    const { container } = render(<View {...props} />);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  it('renders with a custom tag and custom id', () => {
+    const props = {
+      data: {
+        as: 'section',
+        title: 'Test Title',
+        data: { key: 'value' },
+      },
+      properties: {},
+    };
+    const { container } = render(<View {...props} />);
+    expect(container.querySelector('section')).toBeInTheDocument();
+    expect(container.querySelector('#test-title')).toBeInTheDocument();
+  });
+
+  it('renders RenderBlocks with correct props', () => {
+    const props = {
+      data: {
+        as: 'section',
+        title: 'Test Title',
+        data: { key: 'value' },
+      },
+      metadata: { meta: 'data' },
+      properties: { prop: 'erty' },
+    };
+    render(<View {...props} />);
+    expect(RenderBlocks).toHaveBeenCalledWith(
+      expect.objectContaining({
+        metadata: props.metadata,
+        content: props.data.data,
+      }),
+      {},
+    );
+  });
+});

src/components/manage/Blocks/Group/__snapshots__/Edit.test.jsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Edit should render without crashing 1`] = `
+<fieldset
+  className="section-block"
+  onKeyDown={[Function]}
+  role="presentation"
+  tabIndex={-1}
+>
+  <legend
+    aria-hidden="true"
+    onClick={[Function]}
+  >
+    Section
+  </legend>
+  
+  <div
+    className="blocks-form"
+  >
+    <fieldset
+      className="invisible"
+      disabled={false}
+    />
+  </div>
+</fieldset>
+`;

src/components/manage/Blocks/Group/__snapshots__/View.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View should render without crashing 1`] = `
+<div>
+  <div>
+    RenderBlocks
+  </div>
+</div>
+`;