#133: Disable upload song button while processing request

Electron/src/__tests__/components/Sidebar/AddSongPlayListAccordion.test.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { BrowserRouter } from 'react-router-dom';
 import Global from 'global/global';
@@ -342,3 +342,95 @@ test('AddSongPlaylistAccordion rejects invalid song files', async () => {
 
   expect(component.queryByText('Canción Añadida')).not.toBeInTheDocument();
 });
+
+test('AddSongPlaylistAccordion disables the upload button while song is uploading', async () => {
+  const handleCloseMock = jest.fn();
+  const refreshSidebarDataMock = jest.fn();
+  const setIsCloseAllowed = jest.fn();
+
+  // Mocking the fetch API globally
+  global.fetch = jest.fn((url: string) => {
+    return new Promise((resolve) => {
+      if (url === `${Global.backendBaseUrl}/genres/`) {
+        resolve({
+          json: async () => ({ Rock: 'Rock', Pop: 'Pop' }),
+          status: 200,
+          ok: true,
+          headers: getMockHeaders(),
+        });
+      } else {
+        setTimeout(() => {
+          resolve({
+            json: async () => ({}),
+            status: 201,
+            ok: true,
+            headers: getMockHeaders(),
+          });
+        }, 1000);
+      }
+    });
+  }) as jest.Mock;
+
+  const component = await act(async () => {
+    return render(
+      <BrowserRouter>
+        <AddSongPlayListAccordion
+          handleClose={handleCloseMock}
+          refreshSidebarData={refreshSidebarDataMock}
+          setIsCloseAllowed={setIsCloseAllowed}
+        />
+      </BrowserRouter>,
+    );
+  });
+
+  const accordionExpandSong = component.getByTestId(
+    'accordion-expand-submit-song',
+  );
+
+  await act(async () => {
+    fireEvent.click(accordionExpandSong);
+  });
+
+  expect(component.getByText('Subir canción')).toBeInTheDocument();
+
+  const inputName = component.getByPlaceholderText('Nombre de la canción');
+  const inputPhoto = component.getByPlaceholderText(
+    'URL de la miniatura de la canción',
+  );
+  const selectGenreOption = component.getByText('❗ Elige un género');
+  const dropdown = component.getByTestId('select-genre');
+
+  const fileInputElement = component.getByTestId(
+    'sidebar-file-input',
+  ) as HTMLInputElement;
+
+  const validFile = new File([''], 'test.mp3', { type: 'audio/mpeg' });
+
+  await act(async () => {
+    fireEvent.change(inputName, { target: { value: 'Test Song' } });
+    fireEvent.change(inputPhoto, {
+      target: { value: 'http://example.com/image.jpg' },
+    });
+    fireEvent.change(selectGenreOption, { target: { value: 'Rock' } });
+    fireEvent.change(dropdown, { target: { value: 'Rock' } });
+    fireEvent.change(fileInputElement, { target: { files: [validFile] } });
+  });
+
+  const uploadSongButton = component.getByTestId(
+    'sidebar-addsongplaylistaccordion-submit-song',
+  );
+
+  // Verify that the upload button is enabled
+  await waitFor(() => {
+    expect(uploadSongButton).toBeEnabled();
+  });
+
+  await act(async () => {
+    fireEvent.click(uploadSongButton);
+  });
+
+  // Verify that the upload button is disabled while uploading
+  await waitFor(() => {
+    expect(uploadSongButton).toBeDisabled();
+  });
+});

Electron/src/components/Sidebar/ModalAddSongPlaylist/Accordion/AddSongPlayListAccordion.tsx

@@ -415,6 +415,7 @@ export default function AddSongPlayListAccordion({
                 onClick={handleSubmitSong}
                 className={`btn btn-lg ${styles.btnSend} d-flex flex-row justify-content-center`}
                 data-testid="sidebar-addsongplaylistaccordion-submit-song"
+                disabled={loadingUploadSong}
               >
                 Subir {loadingUploadSong && <LoadingCircleSmall />}
               </button>