test: add tests for DynamicComponent

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DynamicComponent.js

@@ -108,7 +108,7 @@ const DynamicZoneComponent = ({
                   <IconButtonCustom
                     noBorder
                     label={formatMessage({
-                      id: getTrad('components.DynamicZone.move-up-label'),
+                      id: getTrad('components.DynamicZone.move-down-label'),
                       defaultMessage: 'Move component down',
                     })}
                     onClick={onMoveComponentDownClick}
@@ -119,8 +119,8 @@ const DynamicZoneComponent = ({
                   <IconButtonCustom
                     noBorder
                     label={formatMessage({
-                      id: getTrad('components.DynamicZone.move-down-label'),
-                      defaultMessage: 'Move component down',
+                      id: getTrad('components.DynamicZone.move-up-label'),
+                      defaultMessage: 'Move component up',
                     })}
                     onClick={onMoveComponentUpClick}
                     icon={<ArrowUp />}
@@ -161,17 +161,25 @@ const DynamicZoneComponent = ({
   );
 };
 
+DynamicZoneComponent.defaultProps = {
+  formErrors: {},
+  index: 0,
+  isFieldAllowed: true,
+  showDownIcon: true,
+  showUpIcon: true,
+};
+
 DynamicZoneComponent.propTypes = {
   componentUid: PropTypes.string.isRequired,
-  formErrors: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired,
-  isFieldAllowed: PropTypes.bool.isRequired,
+  formErrors: PropTypes.object,
+  index: PropTypes.number,
+  isFieldAllowed: PropTypes.bool,
+  name: PropTypes.string.isRequired,
   onMoveComponentDownClick: PropTypes.func.isRequired,
   onMoveComponentUpClick: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
   onRemoveComponentClick: PropTypes.func.isRequired,
-  showDownIcon: PropTypes.bool.isRequired,
-  showUpIcon: PropTypes.bool.isRequired,
+  showDownIcon: PropTypes.bool,
+  showUpIcon: PropTypes.bool,
 };
 
 export default DynamicZoneComponent;

packages/core/admin/admin/src/content-manager/components/DynamicZone/components/tests/DynamicComponent.test.js

@@ -22,24 +22,25 @@ jest.mock('../../../../hooks', () => ({
  * harnessing then is necessary and it's not worth it for these
  * tests when really we're focussing on dynamic zone behaviour.
  */
-jest.mock('../../../FieldComponent', () => () => null);
+jest.mock('../../../FieldComponent', () => () => "I'm a field component");
 
 describe('DynamicComponent', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
 
+  const defaultProps = {
+    componentUid: 'component1',
+    name: 'dynamiczone',
+    onMoveComponentDownClick: jest.fn(),
+    onMoveComponentUpClick: jest.fn(),
+    onRemoveComponentClick: jest.fn(),
+  };
+
   const TestComponent = (props) => (
     <ThemeProvider theme={lightTheme}>
       <IntlProvider locale="en" messages={{}} defaultLocale="en">
-        <DynamicComponent
-          componentUid="component1"
-          name="dynamiczone"
-          onMoveComponentDownClick={jest.fn()}
-          onMoveComponentUpClick={jest.fn()}
-          onRemoveComponentClick={jest.fn()}
-          {...props}
-        />
+        <DynamicComponent {...defaultProps} {...props} />
       </IntlProvider>
     </ThemeProvider>
   );
@@ -66,4 +67,56 @@ describe('DynamicComponent', () => {
 
     expect(screen.queryByRole('button', { name: 'Delete component1' })).not.toBeInTheDocument();
   });
+
+  it('should hide the field component when you close the accordion', () => {
+    setup();
+
+    expect(screen.queryByText("I'm a field component")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'component1' }));
+
+    expect(screen.queryByText("I'm a field component")).not.toBeInTheDocument();
+  });
+
+  it('should show the up & down icons in a variety of boolean combinations', () => {
+    const { rerender } = setup({ showUpIcon: true, showDownIcon: true });
+
+    expect(screen.queryByRole('button', { name: 'Move component up' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Move component down' })).toBeInTheDocument();
+
+    rerender(<TestComponent {...defaultProps} showUpIcon={false} showDownIcon />);
+
+    expect(screen.queryByRole('button', { name: 'Move component up' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Move component down' })).toBeInTheDocument();
+
+    rerender(<TestComponent {...defaultProps} showUpIcon showDownIcon={false} />);
+
+    expect(screen.queryByRole('button', { name: 'Move component up' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Move component down' })).not.toBeInTheDocument();
+
+    rerender(<TestComponent {...defaultProps} showUpIcon={false} showDownIcon={false} />);
+
+    expect(screen.queryByRole('button', { name: 'Move component up' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Move component down' })).not.toBeInTheDocument();
+  });
+
+  it('should fire the onMoveComponentUpClick callback when the up icon is clicked', () => {
+    const onMoveComponentUpClick = jest.fn();
+    setup({ onMoveComponentUpClick, showUpIcon: true });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Move component up' }));
+
+    expect(onMoveComponentUpClick).toHaveBeenCalled();
+  });
+
+  it('should fire the onMoveComponentDownClick callback when the down icon is clicked', () => {
+    const onMoveComponentDownClick = jest.fn();
+    setup({ onMoveComponentDownClick, showDownIcon: true });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Move component down' }));
+
+    expect(onMoveComponentDownClick).toHaveBeenCalled();
+  });
+
+  it.todo('should handle errors in the fields');
 });

packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js

@@ -11,7 +11,7 @@ import { getTrad } from '../../utils';
 import connect from './utils/connect';
 import select from './utils/select';
 
-import DynamicZoneComponent from './components/Component';
+import DynamicZoneComponent from './components/DynamicComponent';
 import AddComponentButton from './components/AddComponentButton';
 import DynamicZoneLabel from './components/DynamicZoneLabel';
 import ComponentPicker from './components/ComponentPicker';