test: DocumentFilterField test tweaks

folio-org · Nov 19, 2024 · 7a416f9 · 7a416f9
1 parent fa69638
commit 7a416f9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 23 deletions.
diff --git a/lib/DocumentFilter/DocumentFilterField.js b/lib/DocumentFilter/DocumentFilterField.js
@@ -60,6 +60,7 @@ const DocumentFilterField = ({
       </FieldArray>
       <Button
         data-test-add-rule-btn
+        id={`add-rule-button-${name}`}
         onClick={() => push(`${name}.rules`)}
       >
         <FormattedMessage id="stripes-erm-components.documentFilter.addRule" />

diff --git a/lib/DocumentFilter/DocumentFilterField.test.js b/lib/DocumentFilter/DocumentFilterField.test.js
@@ -1,10 +1,12 @@
 import { MemoryRouter } from 'react-router-dom';
 import { FieldArray } from 'react-final-form-arrays';
-import { waitFor } from '@folio/jest-config-stripes/testing-library/react';
+
+import { screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
 import { renderWithIntl, TestForm, Button } from '@folio/stripes-erm-testing';
 
 import { translationsProperties } from '../../test/jest/helpers';
 import { categoryValues } from '../../test/jest/resources';
+
 import DocumentFilterField from './DocumentFilterField';
 import { documentFilterParsing } from './testResources';
 
@@ -15,31 +17,31 @@ let renderComponent;
 describe('DocumentFilterField', () => {
   describe.each([
     {
-      initalFilters: [],
+      initialFilters: [],
       expectedFields: 0,
       expectedRules: 0,
     },
     {
-      initalFilters: documentFilterParsing.find((dfp) => dfp.name === 'simple')
+      initialFilters: documentFilterParsing.find((dfp) => dfp.name === 'simple')
         .parsed,
       expectedFields: 1,
       expectedRules: 1,
     },
     {
-      initalFilters: documentFilterParsing.find((dfp) => dfp.name === 'complex')
+      initialFilters: documentFilterParsing.find((dfp) => dfp.name === 'complex')
         .parsed,
       expectedFields: 2,
       expectedRules: 3,
     },
   ])(
-    'Render DocumentFilterField with $expectedFields in the array',
-    ({ initalFilters, expectedFields, expectedRules }) => {
+    'Render $expectedFields DocumentFilterField component(s)',
+    ({ initialFilters, expectedFields, expectedRules }) => {
       beforeEach(() => {
         renderComponent = renderWithIntl(
           <MemoryRouter>
             <TestForm
               initialValues={{
-                filters: initalFilters,
+                filters: initialFilters,
               }}
               onSubmit={onSubmit}
             >
@@ -77,26 +79,34 @@ describe('DocumentFilterField', () => {
         expect(queryAllByText('Value')).toHaveLength(expectedFields);
       });
 
-      if (expectedFields > 0) {
-        test('renders the add rule button', async () => {
-          await Button('Add rule').exists();
+      describe('DocumentFilterRule interactions', () => {
+        it(`renders ${expectedRules} DocumentFilterRule component${expectedRules !== 1 ? 's' : ''}`, () => {
+          const { queryAllByText } = renderComponent;
+          expect(queryAllByText('DocumentFilterRule')).toHaveLength(expectedRules);
         });
-      }
 
-      it('renders the DocumentFilterRule component', () => {
-        const { queryAllByText } = renderComponent;
-        expect(queryAllByText('DocumentFilterRule')).toHaveLength(expectedRules);
-      });
+        if (expectedFields === 0) {
+          it('does not render the add rule button', async () => {
+            await Button('Add rule').absent();
+          });
+        } else {
+          describe('clicking add rule button', () => {
+            beforeEach(async () => {
+              await waitFor(async () => {
+                // There will be multiple add rules for multiple DocumentFilterFields
+                await Button({ id: 'add-rule-button-filters[0]' }).click();
+              });
+            });
 
-      if (expectedRules === 1) {
-        test('cdlicking add rule button adds a rule', async () => {
-          await waitFor(async () => {
-            await Button('Add rule').click();
+            test('a rule has been added', async () => {
+              const { queryAllByText } = renderComponent;
+              await waitFor(() => {
+                expect(queryAllByText('DocumentFilterRule')).toHaveLength(expectedRules + 1);
+              });
+            });
           });
-          const { queryAllByText } = renderComponent;
-          expect(queryAllByText('DocumentFilterRule')).toHaveLength(expectedRules + 1);
-        });
-      }
+        }
+      });
     }
   );
 });