refactor: Code improvements in file uploader

Altinn · Oct 11, 2024 · 069fb7c · 069fb7c
1 parent 5b272f3
commit 069fb7c
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 225 deletions.
diff --git a/.../app-development/features/dataModelling/SchemaEditorWithToolbar/LandingPagePanel.test.tsx b/.../app-development/features/dataModelling/SchemaEditorWithToolbar/LandingPagePanel.test.tsx
@@ -3,7 +3,6 @@ import { screen } from '@testing-library/react';
 import type { LandingPagePanelProps } from './LandingPagePanel';
 import { LandingPagePanel } from './LandingPagePanel';
 import userEvent from '@testing-library/user-event';
-import { fileSelectorInputId } from '@studio/testing/testids';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { renderWithProviders } from '../../../test/mocks';
 
@@ -23,7 +22,9 @@ describe('LandingPagePanel', () => {
     expect(
       screen.getByText(textMock('app_data_modelling.landing_dialog_paragraph')),
     ).toBeInTheDocument();
-    expect(screen.getByTestId(fileSelectorInputId)).toBeInTheDocument();
+    expect(
+      screen.getByLabelText(textMock('app_data_modelling.landing_dialog_upload')),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole('button', { name: textMock('app_data_modelling.landing_dialog_upload') }),
     ).toBeInTheDocument();

diff --git a/...-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/XSDUpload.test.tsx b/...-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/XSDUpload.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import type { QueryClient } from '@tanstack/react-query';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
-import { app, fileSelectorInputId, org } from '@studio/testing/testids';
+import { app, org } from '@studio/testing/testids';
 import { renderWithProviders } from '../../../../test/mocks';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import { createApiErrorMock } from 'app-shared/mocks/apiErrorMock';
@@ -56,7 +56,7 @@ describe('XSDUpload', () => {
     const button = screen.getByRole('button', { name: uploadButtonTextMock });
     expect(button).toBeInTheDocument();
 
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
     expect(fileInput).toBeInTheDocument();
   });
 
@@ -74,7 +74,7 @@ describe('XSDUpload', () => {
 
     await clickUploadButton();
 
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
 
     await user.upload(fileInput, file);
 
@@ -95,7 +95,7 @@ describe('XSDUpload', () => {
 
     await clickUploadButton();
 
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
 
     await user.upload(fileInput, file);
 
@@ -114,7 +114,7 @@ describe('XSDUpload', () => {
 
     await clickUploadButton();
 
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
 
     await user.upload(fileInput, file);
 
@@ -134,7 +134,7 @@ describe('XSDUpload', () => {
       queryClient: queryClient,
     });
     await clickUploadButton();
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
     await user.upload(fileInput, file);
     expect(window.confirm).toHaveBeenCalled();
   });
@@ -150,7 +150,7 @@ describe('XSDUpload', () => {
       queryClient: queryClient,
     });
     await clickUploadButton();
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
     await user.upload(fileInput, file);
 
     const formDataMock = new FormData();
@@ -165,7 +165,7 @@ describe('XSDUpload', () => {
 
     await clickUploadButton();
 
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
 
     await user.upload(fileInput, file);
 
@@ -188,7 +188,7 @@ describe('XSDUpload', () => {
 
     await clickUploadButton();
 
-    const fileInput = screen.getByTestId(fileSelectorInputId);
+    const fileInput = getFileInputElement();
 
     await user.upload(fileInput, file);
 
@@ -197,3 +197,7 @@ describe('XSDUpload', () => {
     );
   });
 });
+
+function getFileInputElement(): HTMLInputElement {
+  return screen.getByLabelText(uploadButtonTextMock);
+}
diff --git a/...d/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/XSDUpload.tsx b/...d/app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/XSDUpload.tsx
@@ -7,7 +7,6 @@ import type { AxiosError } from 'axios';
 import type { ApiError } from 'app-shared/types/api/ApiError';
 import { toast } from 'react-toastify';
 import type { MetadataOption } from '../../../../types/MetadataOption';
-import { fileSelectorInputId } from '@studio/testing/testids';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppMetadataQuery } from 'app-shared/hooks/queries';
 import { useValidateFileName } from './useValidateFileName';
@@ -40,7 +39,6 @@ export const XSDUpload = ({
   } = useValidateFileName(appMetadata);
 
   const uploadButton = React.useRef(null);
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
 
   const handleUpload = (formData: FormData) => {
     uploadDataModel(formData, {
@@ -78,13 +76,11 @@ export const XSDUpload = ({
           onUploadFile={handleUpload}
           accept='.xsd'
           variant={uploaderButtonVariant}
-          ref={fileInputRef}
           uploaderButtonText={uploadButtonText}
           customFileValidation={{
             validateFileName: validateFileName,
             onInvalidFileName: handleInvalidFileName,
           }}
-          dataTestId={fileSelectorInputId}
         />
       )}
     </span>