diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js index b4314cb5d0..653cda5278 100644 --- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js +++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js @@ -427,8 +427,8 @@ const ListItem = ({ data, index, style }) => { } style={{ ...style, - bottom: style.bottom + RELATION_GUTTER, - height: style.height - RELATION_GUTTER, + bottom: style.bottom ?? 0 + RELATION_GUTTER, + height: style.height ?? 0 - RELATION_GUTTER, }} > diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/RelationInput.test.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/RelationInput.test.js index 305e430b22..b4cc1c40ee 100644 --- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/RelationInput.test.js +++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/RelationInput.test.js @@ -151,6 +151,20 @@ describe('Content-Manager || RelationInput', () => { expect(spy).toHaveBeenCalled(); }); + test('should call onRelationReorder', () => { + const spy = jest.fn(); + setup({ onRelationReorder: spy }); + + const [draggedItem, dropZone] = screen.getAllByLabelText('Drag'); + + fireEvent.dragStart(draggedItem); + fireEvent.dragEnter(dropZone); + fireEvent.dragOver(dropZone); + fireEvent.drop(dropZone); + + expect(spy).toHaveBeenCalled(); + }); + // TODO: check if it is possible to fire scroll event here // test.only('should call onSearchNextPage', () => { // const spy = jest.fn(); diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js b/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js index c20c61a68c..52343e2b68 100644 --- a/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js +++ b/packages/core/admin/admin/src/content-manager/components/RelationInputDataManager/tests/RelationInputDataManger.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { IntlProvider } from 'react-intl'; -import { fireEvent, render, act } from '@testing-library/react'; +import { fireEvent, render, act, screen } from '@testing-library/react'; import { ThemeProvider, lightTheme } from '@strapi/design-system'; import { QueryClientProvider, QueryClient } from 'react-query'; import { MemoryRouter } from 'react-router-dom'; @@ -100,6 +100,7 @@ jest.mock('@strapi/helper-plugin', () => ({ loadRelation: jest.fn(), connectRelation: jest.fn(), disconnectRelation: jest.fn(), + reorderRelation: jest.fn(), }), })); @@ -388,6 +389,20 @@ describe('RelationInputDataManager', () => { ); }); + test('Reorder an entity', () => { + const { reorderRelation } = useCMEditViewDataManager(); + setup(); + + const [draggedItem, dropZone] = screen.getAllByLabelText('Drag'); + + fireEvent.dragStart(draggedItem); + fireEvent.dragEnter(dropZone); + fireEvent.dragOver(dropZone); + fireEvent.drop(dropZone); + + expect(reorderRelation).toBeCalledWith({ name: 'relation', newIndex: 0, oldIndex: 1 }); + }); + describe('Counting relations', () => { it('should not render a count value when there are no relations', () => { useCMEditViewDataManager.mockImplementation(() => ({