Add detal comonent

src/actions/action.test.js

@@ -1,7 +1,6 @@
 // action.test.js
 
-// Import the action to be tested
-import { selectSong } from './index'; // Adjust the path accordingly
+import { selectSong } from './index'; // Adjust the import path accordingly
 
 describe('selectSong action creator', () => {
   it('should create an action to select a song', () => {

src/components/App.js

@@ -1,5 +1,6 @@
 import React from "react";
-import SongList from "./SongList";
+import SongList from "./SongList.js";
+import SongDetail from "./SongDetail.js";
 const App = () => {
   return (
     <div className="ui container grid ">
@@ -8,6 +9,9 @@ const App = () => {
         <div className="column eight wide">
           <SongList />
         </div>
+        <div className="column eight wide">
+          <SongDetail />
+        </div>
       </div>
     </div>
   );

src/components/App.test.js

@@ -1,31 +1,29 @@
 // App.test.js
 
 import React from 'react';
-import { render } from '@testing-library/react'; // Import render method from React Testing Library
-import { Provider } from 'react-redux'; // Import Provider to wrap the app
-import { configureStore } from '@reduxjs/toolkit'; // Import configureStore
-import App from './App'; // Import your main App component
-import reducer from '../reducers'; // Import your rootReducer
-import '@testing-library/jest-dom/extend-expect'; // Import jest-dom for additional matchers
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import App from './App.js';
+import reducer from '../reducers/index.js';
+import '@testing-library/jest-dom/extend-expect';
 
-// Create a function to set up the Redux store for testing
 const setUpStore = (initialState) => {
   return configureStore({
     reducer,
-    preloadedState: initialState, // Optional: set initial state if needed
+    preloadedState: initialState,
   });
 };
 
 describe('App Component', () => {
   it('renders without crashing and includes SongList', () => {
-    const store = setUpStore(); // Create a store instance
+    const store = setUpStore();
     const { getByText } = render(
-      <Provider store={store}> {/* Wrap your app with Provider */}
+      <Provider store={store}>
         <App />
       </Provider>
     );
 
-    // Check if the App component renders and includes the SongList component
-    expect(getByText(/song list/i)).toBeInTheDocument(); // Adjust this text to match the actual text in your SongList component
+    expect(getByText(/song list/i)).toBeInTheDocument();
   });
 });

src/components/SongDetail.js

@@ -1,8 +1,30 @@
 import React from "react";
 import { connect } from "react-redux";
 
-const SongDetail = () => {
-  return <div>SongDetail</div>;
+const SongDetail = ({ song }) => {
+  // Log the song prop to see its structure
+  console.log(song);
+
+  // Check if a song is selected
+  if (!song) {
+    return <div>Select a song to see the details</div>;
+  }
+
+  // Render song details
+  return (
+    <div>
+      <h2>Song Details</h2>
+      <p><strong>Title:</strong> {song.title}</p>
+      <p><strong>Duration:</strong> {song.duration}</p>
+      {/* Add more song details as needed */}
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  return {
+    song: state.selectedSong, // Assuming selectedSong is an object with song details
+  };
 };
 
-export default SongDetail;
+export default connect(mapStateToProps)(SongDetail);

src/components/SongDetail.test.js

@@ -0,0 +1,44 @@
+// SongDetail.test.js
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import SongDetail from './SongDetail.js';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockReducer = (state = { selectedSong: null }, action) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+
+const renderWithRedux = (component, { initialState, store = createStore(mockReducer, initialState) } = {}) => {
+  return {
+    ...render(<Provider store={store}>{component}</Provider>),
+    store,
+  };
+};
+
+describe('SongDetail Component', () => {
+  test('renders message when no song is selected', () => {
+    const { getByText } = renderWithRedux(<SongDetail />);
+    expect(getByText(/select a song to see the details/i)).toBeInTheDocument();
+  });
+
+  test('renders song details when a song is selected', () => {
+    const initialState = {
+      selectedSong: {
+        title: 'Shape of You',
+        duration: '3:53',
+      },
+    };
+
+    const { getByText } = renderWithRedux(<SongDetail />, { initialState });
+
+    expect(getByText(/song details/i)).toBeInTheDocument();
+    expect(getByText(/title:/i)).toHaveTextContent('Shape of You');
+    expect(getByText(/duration:/i)).toHaveTextContent('3:53');
+  });
+});

src/components/SongList.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { connect } from "react-redux"; //reducer
-import { selectSong } from "../actions"; //action
+import { selectSong } from "../actions/index.js"; //action
 
 class SongList extends Component {
   // Directly return the list of songs from render()

src/index.js

@@ -12,10 +12,10 @@
  */
 import React from "react";
 import ReactDOM from "react-dom/client"; // For React 18
-import App from "./components/App"; // Your main App component
+import App from "./components/App.js"; // Updated import // Your main App component
 import { configureStore } from "@reduxjs/toolkit"; // Redux Toolkit's configureStore method
 import { Provider } from "react-redux"; // To connect Redux store to React
-import reducer from "./reducers"; // Assuming you have a rootReducer defined here
+import reducer from "./reducers/index.js"; // Assuming you have a rootReducer defined here
 
 // Create the Redux store using configureStore
 const store = configureStore({

src/reducers/songsReducer.test.js

@@ -0,0 +1,64 @@
+// songsReducer.test.js
+
+import { combineReducers } from "redux";
+import songsReducer, { selectedSongReducer } from "./index"; // Adjust the import path
+
+describe("Reducers", () => {
+  describe("songsReducer", () => {
+    it("should return the initial state and a list of songs", () => {
+      const expectedState = [
+        { id: 1, title: "No Scrubs", duration: "4:05" },
+        { id: 2, title: "Macarena", duration: "2:30" },
+        { id: 3, title: "All Star", duration: "3:15" },
+        { id: 4, title: "I Want it that Way", duration: "4:45" },
+        { id: 5, title: "Mohammed Abdo", duration: "5:05" },
+      ];
+
+      const state = songsReducer(undefined, {});
+      expect(state).toEqual(expectedState );
+    });
+  });
+
+  describe("selectedSongReducer", () => {
+    it("should return the selected song when action type is SONG_SELECTED", () => {
+      const action = {
+        type: "SONG_SELECTED",
+        payload: { id: 1, title: "No Scrubs", duration: "4:05" },
+      };
+
+      const state = selectedSongReducer(null, action);
+      expect(state).toEqual(action.payload);
+    });
+
+    it("should return the previous state when action type is not SONG_SELECTED", () => {
+      const action = {
+        type: "OTHER_ACTION",
+      };
+
+      const previousState = { id: 1, title: "No Scrubs", duration: "4:05" };
+      const state = selectedSongReducer(previousState, action);
+      expect(state).toEqual(previousState);
+    });
+  });
+
+  describe("combined reducers", () => {
+    it("should return the initial state for combined reducers", () => {
+      const combinedReducer = combineReducers({
+        songs: songsReducer,
+        selectedSong: selectedSongReducer,
+      });
+
+      const state = combinedReducer(undefined, {});
+      expect(state).toEqual({
+        songs: [
+          { id: 1, title: "No Scrubs", duration: "4:05" },
+          { id: 2, title: "Macarena", duration: "2:30" },
+          { id: 3, title: "All Star", duration: "3:15" },
+          { id: 4, title: "I Want it that Way", duration: "4:45" },
+          { id: 5, title: "Mohammed Abdo", duration: "5:05" },
+        ],
+        selectedSong: null,
+      });
+    });
+  });
+});