chore(content-manager): prop types and fix existing tests

This commit is contained in:
Jamie Howard 2022-12-23 11:11:05 +00:00
parent 470c1c9645
commit 0d2b5c7dd6
8 changed files with 73 additions and 33 deletions

View File

@ -230,7 +230,6 @@ DynamicZoneComponent.defaultProps = {
};
DynamicZoneComponent.propTypes = {
sourceComponentId: PropTypes.number.isRequired,
componentUid: PropTypes.string.isRequired,
formErrors: PropTypes.object,
index: PropTypes.number,
@ -241,6 +240,7 @@ DynamicZoneComponent.propTypes = {
onCancel: PropTypes.func,
onMoveComponent: PropTypes.func.isRequired,
onRemoveComponentClick: PropTypes.func.isRequired,
sourceComponentId: PropTypes.number.isRequired,
};
export default DynamicZoneComponent;

View File

@ -105,9 +105,9 @@ const FieldComponent = ({
{!isRepeatable && isInitialized && (
<NonRepeatableComponent
componentUid={componentUid}
source={source}
isNested={isNested}
name={name}
source={source}
/>
)}
{isRepeatable && (

View File

@ -89,10 +89,6 @@ const NonRepeatableComponent = ({ componentUid, isNested, name, source }) => {
NonRepeatableComponent.defaultProps = {
isNested: false,
source: {
type: '',
componentId: 0,
},
};
NonRepeatableComponent.propTypes = {
@ -102,7 +98,7 @@ NonRepeatableComponent.propTypes = {
source: PropTypes.shape({
type: PropTypes.string,
componentId: PropTypes.number,
}),
}).isRequired,
};
export default NonRepeatableComponent;

View File

@ -473,7 +473,7 @@ const ListItem = ({ data, index, style }) => {
ariaDescribedBy={ariaDescribedBy}
canDrag={canDrag}
disabled={disabled}
displayValue={mainField ?? id}
displayValue={String(mainField ?? id)}
iconButtonAriaLabel={iconButtonAriaLabel}
id={id}
index={index}

View File

@ -367,10 +367,6 @@ RelationInputDataManager.defaultProps = {
isFieldAllowed: true,
placeholder: null,
required: false,
source: {
type: '',
componentId: 0,
},
};
RelationInputDataManager.propTypes = {
@ -417,7 +413,7 @@ RelationInputDataManager.propTypes = {
source: PropTypes.shape({
type: PropTypes.string,
componentId: PropTypes.number,
}),
}).isRequired,
};
const Memoized = memo(RelationInputDataManager);

View File

@ -11,6 +11,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
import { useRelation } from '../../../hooks/useRelation';
import { RelationInputDataManager } from '..';
import { ItemTypes } from '../../../utils';
const queryClient = new QueryClient({
defaultOptions: {
@ -30,7 +31,6 @@ jest.mock('../../../hooks/useRelation', () => ({
isSuccess: true,
status: 'success',
},
search: {
data: {
pages: [
@ -134,6 +134,10 @@ const RelationInputDataManagerComponent = (props) => (
queryInfos={{
shouldDisplayRelationLink: true,
}}
source={{
type: ItemTypes.DYNAMIC_ZONE,
componentId: 0,
}}
{...props}
/>
</IntlProvider>
@ -400,7 +404,7 @@ describe('RelationInputDataManager', () => {
fireEvent.dragOver(dropZone);
fireEvent.drop(dropZone);
expect(relationReorder).toBeCalledWith({ name: 'relation', newIndex: 0, oldIndex: 1 });
expect(relationReorder).toBeCalledWith({ name: 'relation', newIndex: 1, oldIndex: 0 });
});
describe('Accessibility', () => {
@ -564,7 +568,7 @@ describe('RelationInputDataManager', () => {
expect(queryByText(/\(8\)/)).toBeInTheDocument();
});
it.only('should not crash, if the field is not set in modifiedData (e.g. in components)', () => {
it('should not crash, if the field is not set in modifiedData (e.g. in components)', () => {
useCMEditViewDataManager.mockImplementation(() => ({
isCreatingEntry: false,
createActionAllowedFields: ['relation'],

View File

@ -15,8 +15,8 @@ jest.mock('@strapi/helper-plugin', () => ({
useCMEditViewDataManager: jest.fn().mockImplementation(() => ({
modifiedData: {
test: {
test: 'repetable-component',
drag: 'repetable-component2',
test: 'repeatable-component',
drag: 'repeatable-component2',
},
},
})),
@ -30,6 +30,7 @@ describe('RepeatableComponent | Component', () => {
const defaultProps = {
componentFieldName: 'test',
index: 0,
sourceComponentId: 0,
mainField: 'test',
moveComponentField: jest.fn(),
onClickToggle: jest.fn(),
@ -52,7 +53,7 @@ describe('RepeatableComponent | Component', () => {
it('should render my accordion by default', () => {
const { getByRole, queryByText } = setup();
expect(getByRole('button', { name: 'repetable-component' })).toBeInTheDocument();
expect(getByRole('button', { name: 'repeatable-component' })).toBeInTheDocument();
expect(queryByText("I'm a field component")).not.toBeInTheDocument();
expect(queryByText("I'm inputs")).not.toBeInTheDocument();
});

View File

@ -102,7 +102,10 @@ describe('RepeatableComponents', () => {
const user = userEvent.setup();
const { getAllByText, getByRole } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -119,7 +122,10 @@ describe('RepeatableComponents', () => {
it('should render a passed error message', () => {
const { queryByText, getAllByRole, getByText } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
name: 'error-field',
});
@ -131,7 +137,10 @@ describe('RepeatableComponents', () => {
it('should render a specific min error when error message contains the word min', () => {
const { queryByText, getAllByRole, getByText } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
min: 4,
name: 'error-min',
@ -165,7 +174,10 @@ describe('RepeatableComponents', () => {
});
const { getByRole } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -185,7 +197,10 @@ describe('RepeatableComponents', () => {
useNotification.mockReturnValueOnce(toggleNotification);
const { getByRole } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
max: 2,
});
@ -217,7 +232,10 @@ describe('RepeatableComponents', () => {
});
const { getAllByRole } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -257,7 +275,10 @@ describe('RepeatableComponents', () => {
});
const { getAllByRole } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -298,7 +319,10 @@ describe('RepeatableComponents', () => {
}));
const { getByRole, rerender } = setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -310,7 +334,11 @@ describe('RepeatableComponents', () => {
rerender(
<TestComponent
componentValueLength={3}
componentValue={[{ __temp_key__: 1 }, { __temp_key__: 2 }, { __temp_key__: 3 }]}
componentValue={[
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
{ id: 3, __temp_key__: 3 },
]}
/>
);
@ -323,7 +351,10 @@ describe('RepeatableComponents', () => {
describe('Accessibility', () => {
it('should have have description text', () => {
setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -332,7 +363,10 @@ describe('RepeatableComponents', () => {
it('should update the live text when an item has been grabbed', async () => {
setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -349,7 +383,10 @@ describe('RepeatableComponents', () => {
it('should change the live text when an item has been moved', () => {
setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -363,7 +400,10 @@ describe('RepeatableComponents', () => {
it('should change the live text when an item has been dropped', () => {
setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});
@ -378,7 +418,10 @@ describe('RepeatableComponents', () => {
it('should change the live text after the reordering interaction has been cancelled', () => {
setup({
componentValue: [{ __temp_key__: 1 }, { __temp_key__: 2 }],
componentValue: [
{ id: 1, __temp_key__: 1 },
{ id: 2, __temp_key__: 2 },
],
componentValueLength: 2,
});