Merge pull request #6 from techswitch-learners/mm.007-create-a-footer

Mm.007 create a footer

src/App.test.tsx

@@ -5,6 +5,6 @@ import "@testing-library/jest-dom";
 // remove this test when real tests are added
 test('renders header', () => {
     render(<App />);
-    const header = screen.getByText(/MarsioKart/i);
-    expect(header).toBeInTheDocument();
+    const header = screen.getAllByText(/MarsioKart/i);
+    expect(header[0]).toBeInTheDocument();
   });

src/App.tsx

@@ -3,6 +3,7 @@ import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
 import { Quiz } from './Quiz/Quiz';
+import Footer from './Footer/Footer';
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
           <Route path='/quiz'
           element={<Quiz/>}/>
         </Routes>
+        <Footer/>
       </Router>
     </div>
   );

src/Footer/Footer.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import Footer from './Footer';
+import "@testing-library/jest-dom";
+
+test('renders footer', () => {
+    render(<Footer/>);
+    const footer = screen.getByText(/NASA/i);
+    expect(footer).toBeInTheDocument();
+  });

src/Footer/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+
+    return (
+        <footer>
+            MarsioKart &copy; 2024.
+            All images sourced from <a href="https://api.nasa.gov/">NASA</a>.
+        </footer>
+    )
+}