From 2bb04f9ac9d092c6e82aaaac9b74ad30566f4f22 Mon Sep 17 00:00:00 2001 From: rrigato Date: Thu, 23 Nov 2023 13:20:52 -0600 Subject: [PATCH 1/4] About page component --- static/js/About.jsx | 24 ++++++++++++++++++++++++ static/tests/About.test.js | 20 ++++++++++++++++++++ 2 files changed, 44 insertions(+) create mode 100644 static/js/About.jsx create mode 100644 static/tests/About.test.js diff --git a/static/js/About.jsx b/static/js/About.jsx new file mode 100644 index 0000000..655dd99 --- /dev/null +++ b/static/js/About.jsx @@ -0,0 +1,24 @@ +import React, { useState } from 'react'; +import '../css/homepageSection.css'; + + +/**Details about the website + * + * @returns react jsx + */ +export function About(){ + return( +
+

What do I need to know about this website?

+
+
    +
  • Anytime I look back at an application I built more than a year I am embarrased by the quality of the architecture. This is the trademark of a good engineer because it means they are always improving their kraft.
    • +
  • This webiste went from a Java EE2 web app hosted in google app engine all the way to serverless web app deployed to AWS...with many migration tears in between!
    • +
  • The world's largest tuned mass damper is in the + Taipei 101 tower +
    • +
+
+
+ ); +} \ No newline at end of file diff --git a/static/tests/About.test.js b/static/tests/About.test.js new file mode 100644 index 0000000..c2a48f1 --- /dev/null +++ b/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(); + + + const numProjectHeaders = getAllByRole( + 'heading' + ); + }); +}); \ No newline at end of file From a4d3175a6092c25adf4f2dd71aed70308105cbcd Mon Sep 17 00:00:00 2001 From: rrigato Date: Thu, 23 Nov 2023 13:25:58 -0600 Subject: [PATCH 2/4] user-event for testing a click --- static/js/About.jsx | 4 ++-- static/package-lock.json | 14 ++++++++++++++ static/package.json | 1 + static/tests/HomePageToggle.test.js | 21 +++++++++++++++++++++ 4 files changed, 38 insertions(+), 2 deletions(-) diff --git a/static/js/About.jsx b/static/js/About.jsx index 655dd99..e8d5439 100644 --- a/static/js/About.jsx +++ b/static/js/About.jsx @@ -14,8 +14,8 @@ export function About(){
  • Anytime I look back at an application I built more than a year I am embarrased by the quality of the architecture. This is the trademark of a good engineer because it means they are always improving their kraft.
  • This webiste went from a Java EE2 web app hosted in google app engine all the way to serverless web app deployed to AWS...with many migration tears in between!
    • -
  • The world's largest tuned mass damper is in the - Taipei 101 tower +
  • The world's largest tuned mass damper is at the + Taipei 101
diff --git a/static/package-lock.json b/static/package-lock.json index d61c31a..7e00e08 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -12,6 +12,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", @@ -2698,6 +2699,19 @@ "react-dom": "^18.0.0" } }, + "node_modules/@testing-library/user-event": { + "version": "14.5.1", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz", + "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==", + "dev": true, + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", diff --git a/static/package.json b/static/package.json index 760eed8..569f78a 100644 --- a/static/package.json +++ b/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", diff --git a/static/tests/HomePageToggle.test.js b/static/tests/HomePageToggle.test.js index edf6ca8..1240dc1 100644 --- a/static/tests/HomePageToggle.test.js +++ b/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', () => { @@ -29,4 +32,22 @@ describe('Central Content for site', () => { expect(Projects).toHaveBeenCalled() }); + + test('About component default render', async () => { + const userStep = userEvent.setup(); + Projects.mockReturnValue(
mock-projects
); + About.mockReturnValue(
mock-about
); + + + + const {findByRole} = render(); + + + const aboutButton = await findByRole( + 'button', {name: 'About'} + ); + + await userStep.click(aboutButton); + + }); }); \ No newline at end of file From aaa2ad45080a4a4b689c05be81b574fca97ec304 Mon Sep 17 00:00:00 2001 From: rrigato Date: Thu, 23 Nov 2023 13:31:24 -0600 Subject: [PATCH 3/4] About section called from Homepage --- static/js/About.jsx | 2 +- static/js/HomePageToggle.jsx | 13 ++++++------- static/tests/HomePageToggle.test.js | 1 + 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/static/js/About.jsx b/static/js/About.jsx index e8d5439..d056c6f 100644 --- a/static/js/About.jsx +++ b/static/js/About.jsx @@ -9,9 +9,9 @@ import '../css/homepageSection.css'; export function About(){ return(
-

What do I need to know about this website?

    +

    What do I need to know about this website?

  • Anytime I look back at an application I built more than a year I am embarrased by the quality of the architecture. This is the trademark of a good engineer because it means they are always improving their kraft.
  • This webiste went from a Java EE2 web app hosted in google app engine all the way to serverless web app deployed to AWS...with many migration tears in between!
  • The world's largest tuned mass damper is at the diff --git a/static/js/HomePageToggle.jsx b/static/js/HomePageToggle.jsx index b47005a..ce94a83 100644 --- a/static/js/HomePageToggle.jsx +++ b/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 ? : } -