#267: Create Context for song and playlist currently being played

[SaurabhGurde]

Description

Created a global context for changing song from any component without prop drilling

Commit type

• feat: indicates the addition of a new feature or functionality to the project.

Issue

#267

Solution

created song change context in useSongChangeContextApi.tsx file a custom hook which can used anywhere in any component to change global current song.

Proposed Changes

• added context provider in app level

Potential Impact

Screenshots

Additional Tasks

Assigned

@AntonioMrtz

[SaurabhGurde]

@AntonioMrtz created a context not yet used anywhere

[AntonioMrtz]

Replace changeSongName passed as parameter (prop drilling) with the use of the context. Also add tests for the new functionality.

Run npm run lint because I saw some issues with linting.

[SaurabhGurde]

@AntonioMrtz fixed lint issue and remove prop drilling and used custom hook in every component which is using changSongName

[AntonioMrtz]

Add useMemo + review failing tests + add tests for the new functionality

[SaurabhGurde]

@AntonioMrtz all changes are done as you said. and tested functionality which is working well.

[AntonioMrtz]

@AntonioMrtz all changes are done as you said. and tested functionality which is working well.

Not only manually test the functionality, but also add unit tests to the code about the implemented functionality :)

The looks code looks good, but we should check failing tests with npm run test and add new ones that validate the new functionality

[SaurabhGurde]

@AntonioMrtz All new test are added and unit test are done by my side and they are passing plz check

[AntonioMrtz]

Hi @SaurabhGurde , code looks code. Yeah, unit tests are fixed but I'm missing a new unit test that validates whether the playing song's state is being correctly modified. Once the new test is being added to the codebase I will do a last in-depth review of the code and merge if everything is correct

[SaurabhGurde]

Hi @SaurabhGurde , code looks code. Yeah, unit tests are fixed but I'm missing a new unit test that validates whether the playing song's state is being correctly modified. Once the new test is being added to the codebase I will do a last in-depth review of the code and merge if everything is correct

I did not understand plz explain more

[AntonioMrtz]

Hi @SaurabhGurde , code looks code. Yeah, unit tests are fixed but I'm missing a new unit test that validates whether the playing song's state is being correctly modified. Once the new test is being added to the codebase I will do a last in-depth review of the code and merge if everything is correct

I did not understand plz explain more

Code looks good hehe, it was a typo, my bad. I was saying that the following is required:

• Write Unit test that validates changing song actually works with the new context. I would use the file PlaylistUser.test.tsx and add a test that simulates the user clicking the song. The expected result is the context changing the current song name. Then simulate changing to another song and expect the new songname

After that, I will review the code for a last time and merge the code :)

[SaurabhGurde]

@AntonioMrtz added a test but i feel that it may be wrong or missing something plz check

[AntonioMrtz]

New test is failing, did you check the result before pushing it?

[SaurabhGurde]

New test is failing, did you check the result before pushing it?

Yes I use command npm run lint everytime before pushing. But nom run test fails because we are using dummy data for api testing due to which it gives error "cannot read property map of undefined" because api don't send anything so it tries to apply map on undefined variable

[AntonioMrtz]

New test is failing, did you check the result before pushing it?

Yes I use command npm run lint everytime before pushing. But nom run test fails because we are using dummy data for api testing due to which it gives error "cannot read property map of undefined" because api don't send anything so it tries to apply map on undefined variable

Thats the point, mocking the data, if the data is empty ofc is going to fail. Whats the purpose of the test if it fails or only works with the app launched?

[AntonioMrtz]

I will do the tests this time, but I'm not accepting any PR without working tests :)

[SaurabhGurde]

I will do the tests this time, but I'm not accepting any PR without working tests :)

const artistMockFetch = {
name: userName,
photo: 'photo',
register_date: 'date',
password: 'hashpassword',
playback_history: [songName],
playlists: [playlistName],
saved_playlists: [playlistName],
uploaded_songs: [songName],
};

we are using "artistMockFetch.name" this dummy data for to call API to get song list for testing and "songMockFetch.name" to check whether current song being playing is present in footer or not. but its fake data so api dont give any data and test will fail. we have to use real song name data of currently logged in user. Thats what i wanted to ask how to get real data of logged in user to add it in test.tsx file and test api.