HazardVis

This is HazardVis.

Setup

Clone the repository, then run the following commands from the root directory to build and run HazardVis in development mode.
Make sure that you have Node JS version 16.17.0 or higher and NPM version 8.15.0 or higher.

IMPORTANT: You need to create an .env file in the root of the project and ensure it is never pushed to the github repo

Use the file sample.env as a guide for including your NASA API KEY. Don't put spaces or quotes around the NASA API KEY.

npm install 
npm run startDev 

Then open http://localhost:8080 to view the built application.

Commands

npm run lint - runs ESlint on the front and backend directories
npm run e2e - runs END TO END testing files on the current client build using a backend production server
npm run test - run the UNIT testing files using Jest
npm run coverage - runs ALL testing files and creates a coverage report
npm run removeCoverage - removes the directory created by the "npm run coverage" command
npm run removeDist - removes the webpack built 'dist' folder (and the most recent build)
npm run removeNodeModules - removes the node_modules directory (you will need to redownload the packages to build the project)
npm run buildDev - creates a development build of your client src code and unit tests into the 'dist' folder
npm run buildProd - creates a production build of your client src code and unit tests into the 'dist' folder
npm run startDev - rebuilds the client in development mode and runs the express server in development mode
npm run startProd - rebuilds the client in production mode and runs the express server in production mode

Project Structure

This project follows the client server model. It is composed of a client (frontend) and a server (backend).

All source code is within the src directory. All unit tests are within the test directory. Webpack configuration files are in the webpack directory.

Client

The client is a website that uses HTML, CSS, JS, and the Cesium library. It is built using webpack. The backend then serves the build that webpack created.

When built in development mode, the client has hot module reloading enabled. This means that changes made to the client source code will be rebuilt by webpack automatically while the backend server is running. Note that unit tests and backend changes are not tracked by hot module reloading.

Adding A New HTML Page

To add a new html page to your application, do the following:

• Modify webpack.common.js and add the html page name to the array of page names at the top of the document
• Create a js file with the same name as the page name you added to the array (ex 'viewer' -> viewer.js) within the src/frontend folder
• Optionally enable hot module reloading by adding if (module.hot) { module.hot.accept(); } to the js file you created
• Create a html file with the same name as the page name you added to the array within the src/frontend/html folder
• Add a route to your express server that will send the new html page to the client

Backend

The backend is a NODE JS express server. It can be run in development or production mode. By default the server runs in production mode.

Running in development mode enables hot module reloading (which is outlined above).

Currently the server.js file holds all setup and implementation of the express server, and the router.js file holds the express routes that are used. View those files for more information about how they work. multiply.js is used to demonstrate how backend unit testing should be done.

NASA EONET Connection

Create a .env file in the base directory of this project and setup a NASA_API_KEY following the sample.env template. Create a NASA_API_KEY for yourself on their website.

MONGO DB Database Connection

Within the .env file you created for NASA EONET API Connection and setup the ATLUS_URI following the sample.env template (REMEMBER TO REMOVE THE <> chars on the outside of the username and password). We will create a username and password for you to access the shared MONGO DB database in person.

ESLint Configuration

This project uses ESLint with babel parser to help maintain good coding practices.
ESlint has different configuration options for the front and backend directories, as well as the unit testing files.
All configuration options are located within the .eslintrc.json file. Each set of linting options (the backend, frontend, and tests) are stored as a separate override within this file. To modify only one of those edit the specific override. To edit all simultaniously add attributes outside the override.
There is also an eslint configuration unique to the end to end test file.

Jest Unit Testing Configuration

This project uses Jest with babel parser to unit test JavaScript code.
Jest has different configurations for the front and backend of this project.
Jest unit tests are stored in the tests/* directory. They are broken up into frontend and backend tests and I provided a sample for each.
The configuration options are located within the jest.config.js file.

IMPORTANT: UNIT TESTS ARE NO LONGER GENERATED FOR THE CLIENT BUNDLES!

View this information for getting started with jest. https://jestjs.io/docs/getting-started

Adding new unit tests

Create a new file in the appropriate directory with a name following the *.test.js name convention.
Import the functions you wish to test from the src directory. Then add your JEST unit tests in this file.
Then use npm run test or npm run coverage to run the test.

Jest & Puppeteer Unit Testing Configuration

This project uses Jest and Puppeteer to run end to end testing. This allows us to test UI interactions and functionality within a browser.

Running the end to end tests requires having a build of the client!

The end to end tests are held within the ./test/end_to_end.test.js file. It uses jest hooks to start and stop the express server at the appropriate times, and puppeteer to control and manage the browser and browser simulated interactions.

View this information for getting started with puppeteer. https://developer.chrome.com/docs/puppeteer/get-started/

Adding new End To End tests

Review the information on how to write a unit test with jest / puppeteer before attempting to write end to end tests.
Also note that much of the puppeteer setup (such as launching puppeteer and making a new webpage for each test) is done for you.
View the current tests in the ./test/end_to_end.test.js file for some example tests.