Merge pull request #17 from rrigato/dev

About section component

.github/workflows/homepage_update.yml

@@ -5,7 +5,29 @@ on:
       - master
 
 jobs:
+  deploy-website-source-files:
+    runs-on: ubuntu-latest
+    name: web source files to s3
+    defaults:
+      run:
+        working-directory: ./static
+    steps:
+      - name: checkout-current-branch
+        uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - run: npm install
+
+      - run: npm run test
+
+      - run: npm run build
+
+
   publish-commit-artifact:
+    needs: deploy-website-source-files
     runs-on: ubuntu-latest
     name: favicon to s3 bucket
     env: 
@@ -29,23 +51,3 @@ jobs:
         run: ${{env.ORCHESTRATION_SCRIPT}}
 
 
-  deploy-website-source-files:
-    runs-on: ubuntu-latest
-    name: web source files to s3
-    defaults:
-      run:
-        working-directory: ./static
-    steps:
-      - name: checkout-current-branch
-        uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - run: npm install
-
-      - run: npm run test
-
-      - run: npm run build
-

static/css/homepageSection.css

@@ -15,7 +15,9 @@ a:active, a:hover {
     color: white;
 }
 
-
+code{
+    background-color: #8e8786;
+}
 ul{
     margin-right: 10px;
 }

static/js/About.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import '../css/homepageSection.css';
+
+
+/**Details about the website
+ * 
+ * @returns react jsx 
+ */
+export function About(){
+    return(
+        <div className='homepage-content'>
+            <div>
+                <ul>
+                    <h3>What do I need to know about this website?</h3>
+                    <li>
+                        <a href='https://github.com/rrigato/homepage'>source code </a>
+                    </li>
+                    <li>I strive to be embarrassed by the quality of the architecture of any application I have built that is more than a year old. </li>
+                    <li>Strive to constantly be improving your craft.</li>
+                    <li>How do you practice your skills in the same way a musician practices cords?</li>
+
+                    <li>This webiste went from a Java EE2 web app hosted in google app engine 
+                        all the way to serverless web app deployed to AWS</li>
+                    <li>Run a <code>git log --before="2018-01-01"</code> on the source code for a stroll down memory lane!</li>
+
+                    <li>The world's largest tuned mass damper is at the 
+                        <a href='https://en.wikipedia.org/wiki/Tuned_mass_damper'>Taipei 101</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}

static/js/HomePageToggle.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import '../css/main.css';
 import { Projects } from './Projects.jsx';
+import { About } from './About.jsx';
 
 
 /**Toggle button for different sections of homepage
@@ -75,13 +76,11 @@ export function HomePageToggle(){
                     selectedSection === 0 ? <Projects/> :
                     <div hidden={true}></div>
                 }
-                <div 
-                    id='toggle-1' 
-
-                    hidden= {
-                        selectedSection !== 1
-                    }>
-                    About me
+                <div>
+                {
+                    selectedSection === 1 ? <About/> :
+                    <div hidden={true}></div>
+                }
                 </div>
                 <div 
                     id='toggle-2' 

static/package.json

@@ -9,6 +9,7 @@
         "@babel/preset-env": "^7.23.2",
         "@babel/preset-react": "^7.22.15",
         "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.5.1",
         "babel-loader": "^9.1.3",
         "css-loader": "^6.8.1",
         "html-loader": "^4.2.0",

static/tests/About.test.js

@@ -0,0 +1,20 @@
+import {  render } from '@testing-library/react';
+import { About } from '../js/About.jsx';
+
+
+describe('About displayed on screen', () => {
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    test('About section', async () => {        
+
+
+        const {getAllByRole} = render(<About/>);
+
+
+        const numProjectHeaders = getAllByRole(
+            'heading'
+        );
+    });
+});

static/tests/HomePageToggle.test.js

@@ -1,7 +1,10 @@
 import { render } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { About } from '../js/About.jsx';
 import { HomePageToggle } from '../js/HomePageToggle.jsx';
 import { Projects } from '../js/Projects.jsx';
 
+jest.mock('../js/About.jsx');
 jest.mock('../js/Projects.jsx');
 
 describe('Central Content for site', () => {
@@ -10,8 +13,8 @@ describe('Central Content for site', () => {
     });
 
     test('HomePageToggle default render', async () => {
-        Projects.mockReturnValue(<div>mock-projects</div>);
-
+        Projects.mockReturnValue(<div>mock-projects-component</div>);
+        About.mockReturnValue(<div>mock-about-component</div>);
 
 
         const {findByRole} = render(<HomePageToggle/>);
@@ -29,4 +32,21 @@ describe('Central Content for site', () => {
         expect(Projects).toHaveBeenCalled()
 
     });
+
+    test('About component called when clicked', async () => {
+        const userStep = userEvent.setup();
+        Projects.mockReturnValue(<div>mock-projects-component</div>);
+        About.mockReturnValue(<div>mock-about-component</div>);
+
+
+        const {findByRole} = render(<HomePageToggle/>);
+
+
+        const aboutButton = await findByRole(
+            'button', {name: 'About'}
+        );
+        await userStep.click(aboutButton);
+        expect(About).toHaveBeenCalled()
+
+    });
 });