Merge pull request #15 from rrigato/dev

Extract Projects component
rrigato · Nov 19, 2023 · 1c4e369 · 1c4e369
2 parents de01c01 + 617d4b1
commit 1c4e369
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 37 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -3,14 +3,18 @@ body, html {
     color: white;
     height: 100%;
 }
-
+li{
+    margin-right: 20px;
+}
 .full-height{
     height: 100%;
 }
 
 .homepage-content{
     background-color: silver;
+    border-radius: 5%;
     color:black;
+
 }
 
 .toggle-button{
@@ -42,7 +46,6 @@ body, html {
     align-items: center;
     display: flex;
     flex-direction: column;
-    height: 80%;
     justify-content: center;
 }
 

diff --git a/static/js/HomePageToggle.jsx b/static/js/HomePageToggle.jsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import '../css/main.css';
+import { Projects } from './Projects.jsx';
 
 
 /**Toggle button for different sections of homepage
  * 
  * @returns react jsx 
  */
 export function HomePageToggle(){
-    /**
+    /**Section of the webpage the user wants to view
      * @type {[Number, Function]}
      */
     const [selectedSection, setSelectedSelection] = useState(0);
@@ -70,38 +71,10 @@ export function HomePageToggle(){
                         </button>
                     </div>
                 </div>
-                <div 
-                    id='toggle-0' 
-
-                    hidden= {
-                        selectedSection !== 0
-                    }>
-                    <div className='homepage-content'>
-                        <ul>
-                            <h3>Amazon Alexa Skill To retrieve Television Ratings</h3>
-                            <li>Provides television ratings for the Adult Swim Saturday night Toonami television block.</li>
-                            <li><a href='https://www.amazon.com/dp/B0B5596H7C/'>Application link</a></li>
-                            <li><a href='https://github.com/rrigato/tvratings'>Source Code</a></li>
-
-                            <h3>Amazon Alexa Air Quality Burning Restriction Skill</h3>
-                            <li>Amazon Alexa skill to determine if a zip code has any fuel burning restrictions for heating your home in the winter.</li>
-                            <li><a href='https://www.amazon.com/dp/B09PVD9VSC/'>Application link</a></li>
-                            <li><a href='https://github.com/rrigato/burnday'>Source Code</a></li>
-
-                            <h3>Web scrap television network ratings</h3>
-                            <li>Only location on the internet that has an archive of Adult Swim Toonami Ratings in a programmable format.</li>
-                            <li>Reach out to me on github if you would like access.</li>
-                            <li><sup><sup>First rule of building a sustainable web scraping application is to never build a web scrapping application.</sup></sup></li>
-                            <li><a href='https://github.com/rrigato/ratings'>Source Code</a></li>
-
-                            <h3>Github 3d commit history webpage</h3>
-                            <li>Automates creation of 3D commit history to populate web application artifacts</li>
-                            <li><a href='https://github.com/rrigato/rrigato/blob/master/README.md'>Application link</a></li>
-                            <li><a href='https://github.com/rrigato/rrigato/'>Source Code</a></li>
-                        </ul>
-
-                    </div>
-                </div>
+                {
+                    selectedSection === 0 ? <Projects/> :
+                    <div hidden={true}></div>
+                }
                 <div 
                     id='toggle-1' 
 

diff --git a/static/js/Projects.jsx b/static/js/Projects.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import '../css/main.css';
+
+
+/**homepage project details and links
+ * 
+ * @returns react jsx 
+ */
+export function Projects(){
+    return(
+        <div className='homepage-content'>
+            <ul>
+                <h3>Amazon Alexa Skill To retrieve Television Ratings</h3>
+                <li>Provides television ratings for the Adult Swim Saturday night Toonami television block.</li>
+                <li><a href='https://www.amazon.com/dp/B0B5596H7C/'>Application link</a></li>
+                <li><a href='https://github.com/rrigato/tvratings'>Source Code</a></li>
+
+                <h3>Amazon Alexa Air Quality Caused Fuel Burning Restriction Skill</h3>
+                <li>Amazon Alexa skill to determine if a zip code has any fuel burning restrictions for heating your home in the winter.</li>
+                <li><a href='https://www.amazon.com/dp/B09PVD9VSC/'>Application link</a></li>
+                <li><a href='https://github.com/rrigato/burnday'>Source Code</a></li>
+
+                <h3>Web scrapper television network ratings</h3>
+                <li>Only location on the internet that has an archive of Adult Swim Toonami Ratings in a programmable format.</li>
+                <li>Reach out to me on github if you would like access.</li>
+                <li><sup><sup>First rule of building a sustainable web scraping application is to never build a web scrapping application.</sup></sup></li>
+                <li><a href='https://github.com/rrigato/ratings'>Source Code</a></li>
+
+                <h3>Github 3d commit history webpage</h3>
+                <li>Automates creation of 3D commit history to populate web application artifacts.</li>
+                <li><a href='https://github.com/rrigato/rrigato/blob/master/README.md'>Application link</a></li>
+                <li><a href='https://github.com/rrigato/rrigato/'>Source Code</a></li>
+
+                <h3>Markdown to html converter</h3>
+                <li>Used to reduce documentation redundancy when hosting markdown documentation</li>
+                <li><a href='https://github.com/rrigato/devdocs'>Source Code</a></li>
+            </ul>
+
+        </div>
+    );
+}
diff --git a/static/tests/HomePageToggle.test.js b/static/tests/HomePageToggle.test.js
@@ -1,20 +1,33 @@
 import { render } from '@testing-library/react';
 import { HomePageToggle } from '../js/HomePageToggle.jsx';
+import { Projects } from '../js/Projects.jsx';
+
+jest.mock('../js/Projects.jsx');
 
 describe('Central Content for site', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
     test('HomePageToggle default render', async () => {
+        Projects.mockReturnValue(<div>mock-projects</div>);
+
 
 
         const {getByRole} = render(<HomePageToggle/>);
 
 
-        const aboutButton = await getByRole(
+        getByRole(
             'button', {name: 'About'}
         );
-        const projectButton = await getByRole(
+        getByRole(
             'button', {name: 'Projects'}
         );
+        getByRole(
+            'button', {name: 'Book Recommendations'}
+        );
 
+        expect(Projects).toHaveBeenCalled()
 
     });
 });
diff --git a/static/tests/Projects.test.js b/static/tests/Projects.test.js
@@ -0,0 +1,23 @@
+import {  render } from '@testing-library/react';
+import { Projects } from '../js/Projects.jsx';
+
+
+describe('Projects displayed on screen', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    test('Number of project sections', async () => {        
+
+        const {getAllByRole} = render(<Projects/>);
+
+
+        const numProjectHeaders = getAllByRole(
+            'heading'
+        );
+
+
+        expect(numProjectHeaders.length).toBe(5);
+
+    });
+});