refactor: existing DZ tests

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

@@ -143,17 +143,22 @@ const AddComponentButton = ({
 };
 
 AddComponentButton.defaultProps = {
+  hasError: false,
+  hasMaxError: false,
+  hasMinError: false,
+  isDisabled: false,
+  isOpen: false,
   label: '',
   missingComponentNumber: 0,
 };
 
 AddComponentButton.propTypes = {
   label: PropTypes.string,
-  hasError: PropTypes.bool.isRequired,
-  hasMaxError: PropTypes.bool.isRequired,
-  hasMinError: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isOpen: PropTypes.bool.isRequired,
+  hasError: PropTypes.bool,
+  hasMaxError: PropTypes.bool,
+  hasMinError: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isOpen: PropTypes.bool,
   missingComponentNumber: PropTypes.number,
   name: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,

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

@@ -69,6 +69,7 @@ DynamicZoneLabel.defaultProps = {
   intlDescription: undefined,
   label: '',
   labelAction: undefined,
+  numberOfComponents: 0,
   required: false,
 };
 
@@ -80,7 +81,7 @@ DynamicZoneLabel.propTypes = {
   label: PropTypes.string,
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
-  numberOfComponents: PropTypes.number.isRequired,
+  numberOfComponents: PropTypes.number,
   required: PropTypes.bool,
 };
 

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

@@ -1,76 +1,100 @@
-/**
- *
- * Tests for AddComponentButton
- *
- */
-
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { IntlProvider } from 'react-intl';
+
 import AddComponentButton from '../AddComponentButton';
 
 describe('<AddComponentButton />', () => {
-  it('renders and matches the snapshot', () => {
-    const { container } = render(
+  it('should render the label by default', () => {
+    render(
       <ThemeProvider theme={lightTheme}>
         <IntlProvider locale="en" messages={{}} defaultLocale="en">
-          <AddComponentButton
-            label="test"
-            isDisabled={false}
-            isOpen={false}
-            name="name"
-            onClick={jest.fn()}
-            hasError={false}
-            hasMaxError={false}
-            hasMinError={false}
-          />
+          <AddComponentButton label="test" name="name" onClick={jest.fn()} />
         </IntlProvider>
       </ThemeProvider>
     );
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByText(/test/)).toBeInTheDocument();
   });
 
-  it('renders and matches the snapshot when the isOpen prop is truthy', () => {
-    const { container } = render(
+  it('should render the close label if the isOpen prop is true', () => {
+    render(
       <ThemeProvider theme={lightTheme}>
         <IntlProvider locale="en" messages={{}} defaultLocale="en">
-          <AddComponentButton
-            label="test"
-            isOpen
-            isDisabled={false}
-            name="name"
-            onClick={jest.fn()}
-            hasError={false}
-            hasMaxError={false}
-            hasMinError={false}
-          />
+          <AddComponentButton label="test" isOpen name="name" onClick={jest.fn()} />
         </IntlProvider>
       </ThemeProvider>
     );
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByText(/Close/)).toBeInTheDocument();
   });
 
-  it('displays the name of the dz when the label is empty', () => {
-    const { container } = render(
+  it('should render the name of the field when the label is an empty string', () => {
+    render(
       <ThemeProvider theme={lightTheme}>
         <IntlProvider locale="en" messages={{}} defaultLocale="en">
-          <AddComponentButton
-            label=""
-            isOpen={false}
-            isDisabled={false}
-            name="name"
-            onClick={jest.fn()}
-            hasError={false}
-            hasMaxError={false}
-            hasMinError={false}
-          />
+          <AddComponentButton label="" name="name" onClick={jest.fn()} />
         </IntlProvider>
       </ThemeProvider>
     );
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByText(/name/)).toBeInTheDocument();
+  });
+
+  it('should render a too high error if there is hasMaxError is true and the component is not open', () => {
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <AddComponentButton hasMaxError label="test" name="name" onClick={jest.fn()} />
+        </IntlProvider>
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText(/The value is too high./)).toBeInTheDocument();
+  });
+
+  it('should render a label telling the user there are X missing components if hasMinError is true and the component is not open', () => {
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <AddComponentButton hasMinError label="test" name="name" onClick={jest.fn()} />
+        </IntlProvider>
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText(/missing components/)).toBeInTheDocument();
+  });
+
+  it('should call the onClick handler when the button is clicked', () => {
+    const onClick = jest.fn();
+
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <AddComponentButton label="test" name="name" onClick={onClick} />
+        </IntlProvider>
+      </ThemeProvider>
+    );
+
+    screen.getByText(/test/).click();
+
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not call the onClick handler when the button is disabled', () => {
+    const onClick = jest.fn();
+
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <IntlProvider locale="en" messages={{}} defaultLocale="en">
+          <AddComponentButton isDisabled label="test" name="name" onClick={onClick} />
+        </IntlProvider>
+      </ThemeProvider>
+    );
+
+    screen.getByText(/test/).click();
+
+    expect(onClick).not.toHaveBeenCalled();
   });
 });

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

@@ -1,15 +1,11 @@
-/**
- *
- * Tests for DzLabel
- *
- */
-
 import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider, lightTheme, Tooltip } from '@strapi/design-system';
-import Earth from '@strapi/icons/Earth';
 import { IntlProvider } from 'react-intl';
 import styled from 'styled-components';
+import { render, screen } from '@testing-library/react';
+
+import { ThemeProvider, lightTheme, Tooltip } from '@strapi/design-system';
+import Earth from '@strapi/icons/Earth';
+
 import DynamicZoneLabel from '../DynamicZoneLabel';
 
 const Button = styled.button`
@@ -37,44 +33,58 @@ const LabelAction = () => {
 };
 
 describe('DynamicZoneLabel', () => {
-  it('renders and matches the snapshot', () => {
-    const { container } = render(
-      <ThemeProvider theme={lightTheme}>
-        <IntlProvider locale="en" messages={{}} defaultLocale="en">
-          <DynamicZoneLabel label="dz" name="test" numberOfComponents={1} />
-        </IntlProvider>
-      </ThemeProvider>
-    );
+  const Component = (props) => (
+    <ThemeProvider theme={lightTheme}>
+      <IntlProvider locale="en" messages={{}} defaultLocale="en">
+        <DynamicZoneLabel label="dynamic zone" name="test" {...props} />
+      </IntlProvider>
+    </ThemeProvider>
+  );
 
-    expect(container).toMatchSnapshot();
+  const setup = (props) => render(<Component {...props} />);
+
+  it('should render the label by default', () => {
+    setup();
+
+    expect(screen.getByText(/dynamic zone/)).toBeInTheDocument();
   });
 
-  it('displays the name of the dz when the label is empty', () => {
-    const { container } = render(
-      <ThemeProvider theme={lightTheme}>
-        <IntlProvider locale="en" messages={{}} defaultLocale="en">
-          <DynamicZoneLabel name="test" numberOfComponents={1} />
-        </IntlProvider>
-      </ThemeProvider>
-    );
+  it('should render the name of the zone when there is no label', () => {
+    setup({ label: '' });
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByText(/test/)).toBeInTheDocument();
   });
 
-  it('displays the labelAction correctly', () => {
-    const { container } = render(
-      <ThemeProvider theme={lightTheme}>
-        <IntlProvider locale="en" messages={{}} defaultLocale="en">
-          <DynamicZoneLabel
-            label="dz"
-            name="test"
-            numberOfComponents={1}
-            labelAction={<LabelAction />}
-          />
-        </IntlProvider>
-      </ThemeProvider>
-    );
+  it('should always render the amount of components no matter the value', () => {
+    const { rerender } = setup({ numberOfComponents: 0 });
 
-    expect(container).toMatchSnapshot();
+    expect(screen.getByText(/0/)).toBeInTheDocument();
+
+    rerender(<Component numberOfComponents={2} />);
+
+    expect(screen.getByText(/2/)).toBeInTheDocument();
+  });
+
+  it('should render an asteriks when the required prop is true', () => {
+    setup({ required: true });
+
+    expect(screen.getByText(/\*/)).toBeInTheDocument();
+  });
+
+  it('should render the labelAction when it is provided', () => {
+    setup({ labelAction: <LabelAction /> });
+
+    expect(screen.getByLabelText(/i18n/)).toBeInTheDocument();
+  });
+
+  it('should render a description if passed as a prop', () => {
+    setup({
+      intlDescription: {
+        id: 'description',
+        defaultMessage: 'description',
+      },
+    });
+
+    expect(screen.getByText(/description/)).toBeInTheDocument();
   });
 });