Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#234 Disable upload button song and playlist if required fields not filled #271

Merged
merged 19 commits into from
Nov 8, 2024
Merged

#234 Disable upload button song and playlist if required fields not filled #271

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
157ee37
Disable upload button song and playlist if required fields not filled.
SaurabhGurde Sep 29, 2024
238cfbf
added label for mandatory field
SaurabhGurde Oct 5, 2024
f2ad0bc
corrected logic for the song form
SaurabhGurde Oct 6, 2024
e5c8575
fixed element alignment
SaurabhGurde Oct 28, 2024
5f32fa6
removed formDataPlaylist and formDataSong validation
SaurabhGurde Oct 28, 2024
37b9b14
picker/ genre row styles fix
SaurabhGurde Oct 30, 2024
e413617
test issue fix
SaurabhGurde Oct 30, 2024
2773d68
adding test cases for disabling input if required field are not filled
SaurabhGurde Oct 31, 2024
9783014
lint issue fix
SaurabhGurde Oct 31, 2024
e96e51e
added test case for "ddSongPlaylistAccordion disables the upload butt…
SaurabhGurde Oct 31, 2024
b6b5641
merge from origin/master
SaurabhGurde Nov 3, 2024
29b09c5
added test for playlist submit button
SaurabhGurde Nov 3, 2024
24199e2
added consistant style for button when disabled
SaurabhGurde Nov 6, 2024
e984822
added inline style for disabled button
SaurabhGurde Nov 6, 2024
b01d2fb
added style in css module
SaurabhGurde Nov 7, 2024
27cf7c8
Merge remote-tracking branch 'origin2/master' into feat/234-Disable-u…
SaurabhGurde Nov 7, 2024
6be606d
added btnSend in css to work disabled button
SaurabhGurde Nov 7, 2024
8927dec
Merge remote-tracking branch 'origin2/master' into feat/234-Disable-u…
SaurabhGurde Nov 8, 2024
dc1b673
style: format disabled button upload song and playlist | [#234]
AntonioMrtz Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions Electron/src/__tests__/components/Sidebar/AddSongPlayListAccordion.test.tsx
View file
Open in desktop
AntonioMrtz marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -434,3 +434,147 @@ test('AddSongPlaylistAccordion disables the upload button while song is uploadin
expect(uploadSongButton).toBeDisabled();
});
});

test('Upload song form button disabled and enabled depending on filled fields', 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);
});
// Find elements
const inputName = component.getByPlaceholderText('Nombre de la canción');
const dropdown = component.getByTestId('select-genre');
const fileInputElement = component.getByTestId(
'sidebar-file-input',
) as HTMLInputElement;

const validFile = new File([''], 'test.mp3', { type: 'audio/mpeg' });

const submitButton = component.getByTestId(
'sidebar-addsongplaylistaccordion-submit-song',
); // Submit button

// Initially, the submit button should be disabled
expect(submitButton).toBeDisabled();

// Fill in all required fields
await act(async () => {
fireEvent.change(inputName, { target: { value: 'Test Song' } });
fireEvent.change(dropdown, { target: { value: 'Rock' } });
fireEvent.change(fileInputElement, { target: { files: [validFile] } });
});

// Verify submit button is enabled after filling all required fields
await waitFor(() => {
expect(submitButton).toBeEnabled();
});
});

test('Add playlist form button disabled and enabled depending on filled fields', 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);
});
// Find elements
const inputName = component.getByPlaceholderText('Nombre de la playlist');

const submitButton = component.getByTestId(
'sidebar-addsongplaylistaccordion-submit-playlist',
); // Submit button

// Initially, the submit button should be disabled
expect(submitButton).toBeDisabled();

// Fill in all required fields
await act(async () => {
fireEvent.change(inputName, { target: { value: 'Test Song' } });
});

// Verify submit button is enabled after filling all required fields
await waitFor(() => {
expect(submitButton).toBeEnabled();
});
});
83 changes: 59 additions & 24 deletions Electron/src/components/Sidebar/ModalAddSongPlaylist/Accordion/AddSongPlayListAccordion.tsx
View file
Open in desktop
AntonioMrtz marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function AddSongPlayListAccordion({
setLoadingUploadSong(true);
setIsCloseAllowed(false);

if (!formDataSong || !songFile) {
if (!songFile) {
return;
}

AntonioMrtz marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -194,10 +194,6 @@ export default function AddSongPlayListAccordion({

event.preventDefault();

if (!formDataPlaylist) {
return;
}

try {
await PlaylistsService.createPlaylistPlaylistsPost(
formDataPlaylist.name,
Expand Down Expand Up @@ -254,9 +250,10 @@ export default function AddSongPlayListAccordion({
<form
className={`container-fluid d-flex flex-column p-0 ${styles.formAddSong}`}
>
<div className="container-fluid d-flex flex-column p-0">
<div className="container-fluid d-flex flex-column p-0 mb-3">
<div className="d-flex flex-row">
<div className="p-0 mb-3 me-3 container-fluid">
<div className="p-0 mb-3 me-3 container-fluid d-flex">
<p className="text-danger">*</p>
<input
type="text"
id="name"
Expand All @@ -279,7 +276,8 @@ export default function AddSongPlayListAccordion({
/>
</div>
</div>
<div className="container-fluid p-0">
<div className="container-fluid p-0 d-flex">
<p className="invisible">*</p>
<textarea
id="description"
name="description"
Expand All @@ -290,12 +288,27 @@ export default function AddSongPlayListAccordion({
/>
</div>
</div>
<div className="d-flex flex-row">
<p className="invisible">*</p>
<p className="text-danger">
Los campos marcados con * son obligatorios.
</p>
</div>

<button
type="button"
onClick={handleSubmitPlaylist}
className={`btn btn-lg ${styles.btnSend}`}
data-testid="sidebar-addsongplaylistaccordion-submit-playlist"
disabled={!formDataPlaylist.name}
style={{
AntonioMrtz marked this conversation as resolved.
Show resolved Hide resolved
borderColor: !formDataPlaylist.name
? 'var(--secondary-green)'
: undefined,
color: !formDataPlaylist.name
? 'var(--primary-white)'
: undefined,
}}
>
Subir
</button>
Expand Down Expand Up @@ -336,19 +349,20 @@ export default function AddSongPlayListAccordion({
<form
className={`container-fluid d-flex flex-column p-0 ${styles.formAddSong}`}
>
<div className="container-fluid d-flex flex-row p-0">
<div className="p-0 mb-3 w-100">
<input
type="text"
id="name"
name="name"
placeholder="Nombre de la canción"
onChange={handleChangeSong}
required
/>
</div>
<div className="container-fluid d-flex flex-row p-0 mb-3 w-100">
<p className="text-danger">*</p>
<input
type="text"
id="name"
name="name"
placeholder="Nombre de la canción"
className={` ${styles.input}`}
onChange={handleChangeSong}
required
/>
</div>
<div className="p-0 mb-3 w-1000">
<div className="p-0 mb-3 me-2 d-flex flex-row w-100 ">
<p className="invisible">*</p>
<input
type="text"
id="photo"
Expand All @@ -360,9 +374,10 @@ export default function AddSongPlayListAccordion({
</div>

<div
className={`d-flex flex-row overflow-hidden align-items-center ${styles.containerSelectAndFileSelector}`}
className={`d-flex flex-row overflow-hidden align-items-center justify-content-between ${styles.containerSelectAndFileSelector}`}
>
<div className="me-5">
<div className="me-5 d-flex">
<p className="text-danger me-2">*</p>
<select
className="form-select-sm mb-3"
aria-label="Default select example"
Expand Down Expand Up @@ -393,7 +408,8 @@ export default function AddSongPlayListAccordion({
})}
</select>
</div>
<div className="mb-3">
<div className="mb-3 d-flex">
<p className="text-danger me-1">*</p>
<input
type="file"
id="file"
Expand All @@ -405,13 +421,32 @@ export default function AddSongPlayListAccordion({
/>
</div>
</div>
<p className="text-danger mt-2">
Los campos marcados con * son obligatorios.
</p>

<button
type="button"
onClick={handleSubmitSong}
className={`btn btn-lg ${styles.btnSend} d-flex flex-row justify-content-center`}
data-testid="sidebar-addsongplaylistaccordion-submit-song"
disabled={loadingUploadSong}
disabled={
!formDataSong.name ||
!formDataSong.genre ||
!songFile ||
loadingUploadSong
}
style={
!formDataSong.name ||
!formDataSong.genre ||
!songFile ||
loadingUploadSong
? {
borderColor: 'var(--secondary-green)',
color: 'var(--primary-white)',
}
: undefined
}
>
Subir {loadingUploadSong && <LoadingCircleSmall />}
</button>
Expand Down