test: DocumentFilterFieldArray test tweaks

folio-org · Nov 19, 2024 · ea68612 · ea68612
1 parent bcf593a
commit ea68612
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 30 deletions.
diff --git a/lib/DocumentFilter/DocumentFilterFieldArray.js b/lib/DocumentFilter/DocumentFilterFieldArray.js
@@ -29,9 +29,8 @@ const DocumentFilterFieldArray = ({
     <>
       <FieldArray name="filters">
         {({ fields }) => fields.map((name, index) => {
-          console.log(fields)
           return (
-            <>
+            <div key={`document-filter-field-array-${name}`}>
               <Card
                 key={`document-filter-card[${index}]`}
                 data-testid={`document-filter-field[${index}]`}
@@ -81,7 +80,7 @@ const DocumentFilterFieldArray = ({
                   <FormattedMessage id="stripes-erm-components.OR" />
                 </Layout>
               )}
-            </>
+            </div>
           );
         })
         }

diff --git a/lib/DocumentFilter/DocumentFilterFieldArray.test.js b/lib/DocumentFilter/DocumentFilterFieldArray.test.js
@@ -1,10 +1,11 @@
 import { MemoryRouter } from 'react-router-dom';
+
 import { waitFor } from '@folio/jest-config-stripes/testing-library/react';
-import { FieldArray } from 'react-final-form-arrays';
 import { renderWithIntl, Button, TestForm } from '@folio/stripes-erm-testing';
 
 import { translationsProperties } from '../../test/jest/helpers';
 import { categoryValues } from '../../test/jest/resources';
+
 import DocumentFilterFieldArray from './DocumentFilterFieldArray';
 
 const onSubmit = jest.fn();
@@ -16,10 +17,9 @@ describe('DocumentFilterFieldArray', () => {
     renderComponent = renderWithIntl(
       <MemoryRouter>
         <TestForm onSubmit={onSubmit}>
-          <FieldArray
+          <DocumentFilterFieldArray
             categoryValues={categoryValues}
-            component={DocumentFilterFieldArray}
-            name="docs"
+            filterName="docs"
           />
         </TestForm>,
       </MemoryRouter>,
@@ -31,39 +31,60 @@ describe('DocumentFilterFieldArray', () => {
     await Button('Add filter').exists();
   });
 
-  it('should display Document filter 1 when Add filter is clicked', async () => {
-    const { getByText } = renderComponent;
-    await waitFor(async () => {
-      await Button('Add filter').click();
+  describe('clicking \'Add filter\' button', () => {
+    beforeEach(async () => {
+      await waitFor(async () => {
+        await Button('Add filter').click();
+      });
     });
-    expect(getByText('Document filter 1')).toBeInTheDocument();
-  });
 
-  test('clicking the "Add filter" button should render the document filter field component', async () => {
-    const { getByText } = renderComponent;
-    await waitFor(async () => {
-      await Button('Add filter').click();
+    it('should display Document filter 1', async () => {
+      const { getByText } = renderComponent;
+      expect(getByText('Document filter 1')).toBeInTheDocument();
     });
-    await waitFor(async () => {
-      expect(getByText('DocumentFilterField')).toBeInTheDocument();
-    });
-  });
 
-  describe('adding multiple filters', () => {
-    it('should add multiple filters when the "Add filter" button is clicked again', async () => {
-      const { getByRole, getByText } = renderComponent;
+    it('should not render a \'Delete filter 1\' button', async () => {
+      const { queryByRole } = renderComponent;
+
       await waitFor(async () => {
-        await Button('Add filter').click();
-        await Button('Add filter').click();
+        // IconButton calls not working right now
+        // await IconButton('Delete filter 1').absent();
+        expect(queryByRole('button', { name: 'Delete filter 1' })).not.toBeInTheDocument();
       });
+    });
+
+    it('should not display Document filter 2', async () => {
+      const { queryByText } = renderComponent;
+      expect(queryByText('Document filter 2')).not.toBeInTheDocument();
+    });
+
+    it('should render the document filter field component', async () => {
+      const { getByText } = renderComponent;
       await waitFor(async () => {
+        expect(getByText('DocumentFilterField')).toBeInTheDocument();
+      });
+    });
+
+    describe('clicking \'Add filter\' button again', () => {
+      beforeEach(async () => {
+        await waitFor(async () => {
+          await Button('Add filter').click();
+        });
+      });
+
+      it('should display Document filter 2', async () => {
+        const { getByText } = renderComponent;
         expect(getByText('Document filter 2')).toBeInTheDocument();
       });
 
-      await waitFor(async () => {
-        // IconButton calls not working right now
-        // await IconButton('Delete filter 2').exists();
-        expect(getByRole('button', { name: 'Delete filter 2' })).toBeInTheDocument();
+      it('should render a \'Delete filter 2\' button', async () => {
+        const { queryByRole } = renderComponent;
+
+        await waitFor(async () => {
+          // IconButton calls not working right now
+          // await IconButton('Delete filter 2').exists();
+          expect(queryByRole('button', { name: 'Delete filter 2' })).toBeInTheDocument();
+        });
       });
     });
   });