Merge pull request #272 from MoTrPAC/265_JZ_Homepage_Redesign_Jest_Test

Connects to #265. Jest test runner errors.

package.json

@@ -8,6 +8,7 @@
     "axios": "^0.27.2",
     "bootstrap": "4.6.1",
     "chart.js": "^2.9.3",
+    "crypto": "^1.0.1",
     "d3": "6.7.0",
     "dayjs": "1.11.7",
     "from-exponential": "^1.1.1",
@@ -20,21 +21,21 @@
     "popper.js": "^1.16.1",
     "prop-types": "15.8.1",
     "react": "17.0.1",
-    "react-bootstrap-typeahead": "^6.0.0",
+    "react-bootstrap-typeahead": "6.0.0",
     "react-chartjs-2": "^2.8.0",
     "react-dom": "17.0.1",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
-    "react-particles-js": "3.5.3",
     "react-redux": "8.0.5",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
     "react-table": "^7.7.0",
     "react-tooltip": "^5.11.2",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
-    "tsparticles": "1.36.0",
     "victory": "36.4.1",
+    "vis-data": "^7.1.7",
+    "vis-network": "^9.1.8",
     "vis-network-react": "^1.3.6"
   },
   "scripts": {
@@ -80,6 +81,7 @@
     "autoprefixer": "10.4.5"
   },
   "jest": {
+    "transform": {},
     "transformIgnorePatterns": [
       "/node_modules/(?!(vis-network|vis-data))"
     ]

src/Footer/footer.jsx

@@ -5,7 +5,7 @@ import React from 'react';
  *
  * @returns {object} JSX representation of the global footer.
  */
-export function Footer() {
+function Footer() {
   // Get current copyright year
   const getCopyrightYear = () => {
     const today = new Date();

src/LandingPage/components/backgroundVideo.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import VideoMoleculeNetwork from '../../assets/LandingPageGraphics/background_video_molecules_221511488.mp4';
+
+function BackgroundVideo() {
+  return (
+    <video className="fullscreen" autoPlay muted loop>
+      <source src={VideoMoleculeNetwork} type="video/mp4" />
+    </video>
+  );
+}
+
+export default BackgroundVideo;

src/LandingPage/landingPage.jsx

@@ -13,9 +13,9 @@ import IconSet from '../lib/iconSet';
 import LayerRunner from '../assets/LandingPageGraphics/Data_Layer_Runner.png';
 import RatFigurePaass1b from '../assets/LandingPageGraphics/rat-figure-pass1b.svg';
 import DifferentialAnalytesHeatmap from '../assets/LandingPageGraphics/figure1c-differential-analytes-grid.svg';
-import VideoMoleculeNetwork from '../assets/LandingPageGraphics/background_video_molecules_221511488.mp4';
 import TutorialVideoPreviewImage from '../assets/LandingPageGraphics/tutorial_video_preview_image.jpg';
 import LandscapePreprintAbstract from '../assets/LandingPageGraphics/landscape_preprint_abstract.jpg';
+import BackgroundVideo from './components/backgroundVideo';
 
 // import figure 4E visualization dataset
 const figure4eData = require('../data/landscape_figure_4e.json');
@@ -148,7 +148,9 @@ export function LandingPage({ isAuthenticated, profile }) {
   useEffect(() => {
     // set video height responsively
     const el = document.querySelector('#iframe-container');
-    setVideoHeight(((el.scrollWidth - 30) / 16) * 9 + 'px');
+    if (el) {
+      setVideoHeight(((el.scrollWidth - 30) / 16) * 9 + 'px');
+    }
   }, []);
 
   const handleAddNode = useCallback(() => {
@@ -184,9 +186,7 @@ export function LandingPage({ isAuthenticated, profile }) {
       </Helmet>
       <section className="first">
         <div className="w-100 h-100 d-flex align-items-center">
-          <video className="fullscreen" autoPlay muted loop>
-            <source src={VideoMoleculeNetwork} type="video/mp4" />
-          </video>
+          <BackgroundVideo />
           <div className="section-content-container container text-center">
             <h1 className="display-1">About MoTrPAC</h1>
             <p className="lead">

src/sass/_base.scss

@@ -45,7 +45,11 @@ body.homepage {
     padding-top: 4.30rem;
 
     &.authenticated {
-      padding-top: 4.50rem;
+      padding-top: 4.30rem;
+    }
+
+    &.homepage {
+      padding-top: 0;
     }
   }
 }

src/sass/_landingPage.scss

@@ -27,15 +27,15 @@
 
     .animated-down-arrow {
       position: absolute;
-      bottom: 4rem;
+      bottom: 0.5rem;
       text-align: center;
       z-index: 5;
 
       img {
-        width: 3.0rem;
-        height: 3.0rem;
+        width: 2.75rem;
+        height: 2.75rem;
         margin: 0 auto !important;
-        opacity: 0.65;
+        opacity: 0.55;
       }
     }
 
@@ -113,8 +113,8 @@
       background-image: url(./assets/LandingPageGraphics/background_molecule_network_horizontal_wave.jpg);
 
       .section-content-container {
-        height: 65vh;
-        margin-top: -5.0rem;
+        height: 60vh;
+        margin-top: -3.0rem;
         padding-top: 15px;
         padding-bottom: 15px;
 

src/setupTests.js

@@ -1,12 +1,28 @@
 import { configure } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
+const crypto = require('crypto');
+
 configure({ adapter: new Adapter() });
 
 require('jest-canvas-mock');
 
 jest.mock('react-chartjs-2', () => ({
   Bar: () => null,
   Pie: () => null,
-  Doughnut: () => null
+  Doughnut: () => null,
 }));
+
+// fix for 'crypto.getRandomValues() not supported' error
+Object.defineProperty(globalThis, 'crypto', {
+  value: {
+    getRandomValues: (arr) => crypto.randomBytes(arr.length),
+  },
+});
+
+// fix for 'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering' error
+// when <video> is used in a component
+// (https://github.com/testing-library/react-testing-library/issues/470#issuecomment-761821103)
+Object.defineProperty(HTMLMediaElement.prototype, 'muted', {
+  set: () => {},
+});