Functionality test

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+

README.md

@@ -27,8 +27,10 @@
 
 | Desktop View Representation|
 |---------------------------------------|
-|<div align="center"><img src="./src/assets/project-image.jpg" alt="screenshot" width="auto" height="auto"/></div>|
-|<div align="center"><img src="./src/assets/project-image.jpg" alt="screenshot" width="auto" height="auto"/></div>|
+|<div align="center"><img src="./src/assets/project-image1.PNG" alt="screenshot" width="auto" height="auto"/></div>|
+|<div align="center"><img src="./src/assets/project-image2.PNG" alt="screenshot" width="auto" height="auto"/></div>|
+|<div align="center"><img src="./src/assets/mobile-shot1.PNG" alt="screenshot" width="auto" height="400"/>
+ <img src="./src/assets/mobile-shot2.PNG" alt="screenshot" width="auto" height="400"/></div>|
 
 <!-- TABLE OF CONTENTS -->
 
@@ -115,8 +117,7 @@ Clone this repository to your desired folder:
 ### Install
 - Install this project with:
 
-       npx create-react-app my-app
-       cd my-app
+       npx create-react-app .
        npm start
 
 
@@ -168,8 +169,9 @@ Clone this repository to your desired folder:
 
 ## 🔭 Future Features <a name="future-features"></a>
 
-- [ ] **[Add About page]**
-- [ ] **[Add Contact page]**
+- [ ] **[Giving funtionality to search input]**
+- [ ] **[Using Charts and graph to disply the currencies data]**
+- [ ] **[Using Creating Professional sidebar panel]**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -191,8 +193,7 @@ Feel free to check the [issues page](https://github.com/ab-noori/Cryptopanel/iss
 
 ## 🙏 Acknowledgments <a name="acknowledgements"></a>
 
-  I would like to thank Microverse and my coding partners. Also, I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson)
-YouTub Channel, its [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpful.
+  First, I would like to thank Microverse and my coding partners. Second, I want to give credit to [`Nerd's lesson`](https://www.youtube.com/@Nerdslesson) YouTub Channel, its [`react tutorial`](https://www.youtube.com/watch?v=cd3P3yXyx30) is really helpful, and third, I should give credit to Nelson Sakwa, I got some inspirations from his design on Behance.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

package.json

@@ -8,10 +8,15 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "classnames": "^2.3.2",
     "gh-pages": "^5.0.0",
+    "millify": "^6.1.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
+    "react-router": "^6.14.0",
     "react-router-dom": "^6.14.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",

src/App.jsx

@@ -1,11 +1,25 @@
+import { Routes, Route } from 'react-router';
 import './App.scss';
+import Show from './pages/Show';
+import Home from './pages/Home';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1>Crypto Panel</h1>
+        <Navbar />
       </header>
+      <main>
+        <Routes>
+          <Route path="/Cryptopanel/" element={<Home />} />
+          <Route path="/Cryptopanel/:id" element={<Show />} />
+        </Routes>
+      </main>
+      <footer>
+        <Footer />
+      </footer>
     </div>
   );
 }

src/App.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Satisfy&display=swap');
+
 .App {
-  text-align: center;
+  font-family: 'Lato', sans-serif;
 }

src/__tests__/CurrencyList.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import CurrencyList from '../components/CurrencyList';
+
+test('renders CurrencyList component correctly', () => {
+  const currencies = [
+    {
+      id: 1,
+      rank: 1,
+      name: 'Bitcoin',
+      image: 'bitcoin.png',
+      symbol: 'BTC',
+      currentPrice: 50000,
+      oneHourPriceChange: 0.5,
+      oneDayPriceChange: 1.2,
+      oneWeekPriceChange: -0.8,
+      totalVolume: 1000000,
+      marketCap: 1000000000,
+    },
+    // Add more sample data as needed
+  ];
+
+  const { container } = render(
+    <Router>
+      <CurrencyList
+        currencies={currencies}
+        query=""
+        handleQuery={() => {}}
+        handleKeyDown={() => {}}
+      />
+    </Router>,
+  );
+
+  expect(container).toMatchSnapshot();
+});

src/__tests__/DetailsView.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DetailsView from '../components/DetailsView';
+
+test('renders DetailsView correctly', () => {
+  const props = {
+    marketCapRank: 1,
+    currentPrice: 1000,
+    marketCap: 1000000,
+    marketCapChange24h: 5000,
+    high24h: 1500,
+    low24h: 800,
+    priceChange24h: 200,
+    priceChangePercentage24h: 0.2,
+    marketCapChangePercentage24: 0.5,
+    ath: 2000,
+    athChangePercentage: 0.4,
+    atl: 500,
+    atlChangePercentage: 0.1,
+    fullyDilutedValuation: 2000000,
+    totalVolume: 50000,
+    totalSupply: 1000000,
+    circulatingSupply: 800000,
+    maxSupply: 2000000,
+    publicInterestScore: 0.8,
+  };
+
+  /* eslint-disable react/jsx-props-no-spreading */
+  const { container } = render(<DetailsView {...props} />);
+
+  expect(container).toMatchSnapshot();
+});

src/__tests__/Footer.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Footer from '../components/Footer';
+
+describe('Footer component', () => {
+  test('renders correctly', () => {
+    const { asFragment } = render(<Footer />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/__tests__/Navbar.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import Navbar from '../components/Navbar';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+describe('Navbar component', () => {
+  beforeEach(() => {
+    useSelector.mockClear();
+  });
+
+  test('renders correctly when on Cryptopanel page', () => {
+    useSelector.mockReturnValue({
+      CurrencyDetails: {
+        name: 'Bitcoin',
+        symbol: 'BTC',
+      },
+    });
+
+    const { container } = render(
+      <Router>
+        <Navbar />
+      </Router>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('renders correctly when not on Cryptopanel page', () => {
+    useSelector.mockReturnValue({
+      CurrencyDetails: {
+        name: 'Ethereum',
+        symbol: 'ETH',
+      },
+    });
+
+    const { container } = render(
+      <Router>
+        <Navbar />
+      </Router>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

src/__tests__/SearchBar.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SearchBar from '../components/SearchBar';
+
+test('SearchBar component matches snapshot', () => {
+  const { container } = render(
+    <SearchBar
+      value="test value"
+      onChange={() => {}}
+      onKeyDown={() => {}}
+    />,
+  );
+
+  expect(container.firstChild).toMatchSnapshot();
+});