UIFC-451-useEditCard-from-leipzig-components fix package.json, adapt tests and translation

Author: elsenhans

package.json

@@ -34,10 +34,10 @@
     "react-router-dom": "^5.2.0"
   },
   "dependencies": {
+    "@folio/stripes-leipzig-components": "^1.0.0",
     "file-saver": "^2.0.0",
     "final-form": "^4.18.7",
     "final-form-arrays": "^3.0.2",
-    "@folio/stripes-leipzig-components": "^1.0.0",
     "lodash": "^4.17.4",
     "moment": "^2.24.0",
     "prop-types": "^15.6.0",
@@ -73,6 +73,9 @@
       "finc-select-ezb-credentials": "1.0",
       "organizations-storage.organizations": "3.0"
     },
+    "stripesDeps": [
+      "@folio/stripes-leipzig-components"
+    ],
     "permissionSets": [
       {
         "permissionName": "module.finc-select.enabled",

src/components/Filters/FilterFile/FilterFileForm.test.js

@@ -1,53 +1,37 @@
 import { MemoryRouter } from 'react-router-dom';
 import { Form } from 'react-final-form';
-import { FieldArray } from 'react-final-form-arrays';
+import arrayMutators from 'final-form-arrays';
 
-import { fireEvent, screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
+import { screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { StripesContext, useStripes } from '@folio/stripes/core';
 
 import renderWithIntlConfiguration from '../../../../test/jest/helpers/renderWithIntlConfiguration';
-import FilterForm from '../FilterForm';
 import FilterFileForm from './FilterFileForm';
-import FILTER from '../../../../test/fixtures/filter';
 
 const onToggle = jest.fn();
-const onDelete = jest.fn();
-const onClose = jest.fn();
-const handleSubmit = jest.fn();
 const onSubmit = jest.fn();
-const onUploadFile = jest.fn();
-const onDownloadFile = jest.fn();
 
 const file = new File(['foo'], 'file.json', { type: 'text/plain' });
 
-const renderFilterFileForm = (stripes, initialValues = FILTER) => {
+const mockPost = jest.fn(() => Promise.resolve({
+  ok: true,
+  json: () => Promise.resolve({ file }),
+}));
+
+const renderFilterFileForm = (stripes) => {
   return renderWithIntlConfiguration(
     <StripesContext.Provider value={stripes}>
       <MemoryRouter>
         <Form
           onSubmit={onSubmit}
+          mutators={arrayMutators}
           render={() => (
-            <FilterForm
-              initialValues={initialValues}
-              handlers={{ onClose, onDelete }}
-              handleSubmit={handleSubmit}
-              onSubmit={onSubmit}
-              onDelete={onDelete}
-            >
-              <FilterFileForm
-                accordionId="accordionId"
-                expanded
-                onToggle={onToggle}
-                stripes={stripes}
-              >
-                <FieldArray
-                  name="filterFiles"
-                  onDownloadFile={onDownloadFile}
-                  onUploadFile={onUploadFile}
-                />
-              </FilterFileForm>
-            </FilterForm>
+            <FilterFileForm
+              accordionId="accordionId"
+              expanded
+              onToggle={onToggle}
+            />
           )}
         />
       </MemoryRouter>
@@ -58,43 +42,52 @@ const renderFilterFileForm = (stripes, initialValues = FILTER) => {
 jest.unmock('react-intl');
 
 describe('FilterFileForm', () => {
-  let stripes;
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.fetch = mockPost;
+  });
 
   describe('render FilterFileForm', () => {
     beforeEach(() => {
-      stripes = useStripes();
+      const stripes = useStripes();
       renderFilterFileForm(stripes);
     });
 
+    afterEach(() => {
+      delete global.fetch;
+    });
+
     test('Add file button is rendered', () => {
-      const selectFile = screen.getByRole('button', {
-        name: 'Add file to filter',
-      });
+      const selectFile = screen.getByRole('button', { name: 'Add file to filter' });
       expect(selectFile).toBeInTheDocument();
     });
 
     describe('Click add file button', () => {
       beforeEach(async () => {
-        const selectFile = screen.getByRole('button', {
-          name: 'Add file to filter',
-        });
+        const selectFile = screen.getByRole('button', { name: 'Add file to filter' });
         await userEvent.click(selectFile);
       });
 
-      test('should render filter file upload button', () => {
-        expect(document.querySelector('#filter-file-label-1')).toBeInTheDocument();
+      it('should render filter file upload card', () => {
+        expect(document.querySelector('#filter-file-label-0')).toBeInTheDocument();
         expect(document.querySelector('#filter-file-upload-button')).toBeInTheDocument();
       });
 
-      test('should render filter file upload button', async () => {
-        const filenameInput = document.querySelector('#filter-file-label-1');
+      test('upload file should call fetch', async () => {
+        const filenameInput = document.querySelector('#filter-file-label-0');
         const uploadFileInput = document.querySelector('#filter-file-input');
-        const saveButton = screen.getByRole('button', { name: 'Save & close' });
 
         await userEvent.type(filenameInput, 'my filename');
-        fireEvent.change(uploadFileInput, { target: { filterFiles: [file] } });
+        await userEvent.upload(uploadFileInput, file);
+
         await waitFor(() => {
-          expect(saveButton).toBeEnabled();
+          expect(mockPost).toHaveBeenCalledWith(
+            expect.stringContaining('/finc-select/files'),
+            expect.objectContaining({
+              method: 'POST',
+              body: file,
+            })
+          );
         });
       });
     });

src/components/Filters/FilterFile/UploadFile/DocumentsFieldArray.js

@@ -56,8 +56,14 @@ const DocumentsFieldArray = ({
   const renderFields = () => {
     return fields.map((field, index) => (
       <EditCard
-        deleteButtonTooltipText={`${intl.formatMessage({ id: 'ui-finc-select.filter.file.label.delete' })} #${index + 1}`}
-        header={`${intl.formatMessage({ id: 'ui-finc-select.filter.file.label' })} #${index + 1}`}
+        deleteButtonTooltipText={intl.formatMessage(
+          { id: 'ui-finc-select.filter.file.label.delete.number' },
+          { number: index + 1 },
+        )}
+        header={intl.formatMessage(
+          { id: 'ui-finc-select.filter.file.label.number' },
+          { number: index + 1 },
+        )}
         key={field}
         onDelete={() => fields.remove(index)}
       >

src/components/Filters/FilterFile/UploadFile/DocumentsFieldArray.test.js

@@ -2,7 +2,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { Form } from 'react-final-form';
 import arrayMutators from 'final-form-arrays';
 
-import { act, screen } from '@folio/jest-config-stripes/testing-library/react';
+import { screen } from '@folio/jest-config-stripes/testing-library/react';
 import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
 import { StripesContext, useStripes } from '@folio/stripes/core';
 
@@ -43,25 +43,23 @@ describe('DocumentsFieldArray', () => {
 
     const addFileToFilterButton = screen.getByRole('button', { name: 'Add file to filter' });
     expect(addFileToFilterButton).toBeInTheDocument();
-    await act(async () => {
-      await userEvent.click(addFileToFilterButton);
-    });
+
+    await userEvent.click(addFileToFilterButton);
 
     expect(await screen.findByRole('textbox', { name: 'File' })).toBeInTheDocument();
     expect(await screen.findByRole('textbox', { name: 'Criteria' })).toBeInTheDocument();
 
     const deleteButton = screen.getByRole('button', { name: /delete/i });
     expect(deleteButton).toBeInTheDocument();
-    await act(async () => {
-      await userEvent.click(deleteButton);
-    });
+
+    await userEvent.click(deleteButton);
+
     expect(screen.queryByRole('textbox', { name: 'File' })).not.toBeInTheDocument();
     expect(screen.queryByRole('textbox', { name: 'Criteria' })).not.toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.click(addFileToFilterButton);
-      await userEvent.click(addFileToFilterButton);
-    });
+    await userEvent.click(addFileToFilterButton);
+    await userEvent.click(addFileToFilterButton);
+
     expect(await screen.findAllByRole('textbox', { name: 'File' })).toHaveLength(2);
     expect(await screen.findAllByRole('textbox', { name: 'Criteria' })).toHaveLength(2);
   });

test/jest/helpers/renderWithIntlConfiguration.js

@@ -1,8 +1,8 @@
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 
 import { render } from '@folio/jest-config-stripes/testing-library/react';
 import stripesComponentsTranslations from '@folio/stripes-components/translations/stripes-components/en';
+import stripesLeipzigComponentsTranslations from '@folio/stripes-leipzig-components/translations/stripes-leipzig-components/en';
 import stripesSmartComponentsTranslations from '@folio/stripes-smart-components/translations/stripes-smart-components/en';
 
 import localTranslations from '../../../translations/ui-finc-select/en';
@@ -20,6 +20,10 @@ const translationSets = [
     prefix: 'stripes-smart-components',
     translations: stripesSmartComponentsTranslations,
   },
+  {
+    prefix: 'stripes-leipzig-components',
+    translations: stripesLeipzigComponentsTranslations,
+  },
 ];
 
 

translations/ui-finc-select/en.json

@@ -89,7 +89,8 @@
   "filter.type": "Type",
 
   "filter.file.label": "File",
-  "filter.file.label.delete": "Delete file",
+  "filter.file.label.number": "File #{number}",
+  "filter.file.label.delete.number": "Delete file #{number}",
   "filter.file.criteria": "Criteria",
   "filter.file.download": "Download",
   "filter.file.name": "Name",