/StabilyzrTwo

Test Case Management System

Primary LanguageJavaScriptMIT LicenseMIT

MERNolithic_sql

MySQL-Express-React-Node app with custom webpack config, docker, CI config, test suites, and JWT authentication stored as cookie

Getting started

  1. Update project name and urls for github in package.json

    • Name
    • repository: url
    • bugs: url
    • homepage: url

  2. Update app name/urls in:

    • ~/cypress.staging.json and ~/cypress.production.json
    • App title in ~/frontend/src/index.html

  3. Create .env file in project root with following properties (note: open mysql workbench and put in credentials for you local connection)

    MYSQL_USER=root
MYSQL_PASSWORD=12345678
MYSQL_HOST=localhost
AUTH_SECRET=your_auth_secret_key
ADMIN_USER_PWD=admin_password
USER_PWD=12345678
FORCE_SYNC=false
NODE_ENV=test
PORT=8080

  4. Run yarn install from the project root to install project dependencies

  5. cd backend and run yarn install to install backend server dependencies

  6. cd frontend and run yarn install to install frontend React dependencies

  7. Run initialize.sh command from the project root to automatically create staging and production Heroku remotes with MySql databases provisioned and deployed.

  8. You can run the application locally by running command yarn start-dev from the project root to start the server on localhost:8080, and then cd frontend in another terminal and run yarn start-dev to start the Webpack dev server for the React frontend which you can view at localhost:8081 this has hot reloading for easier development

  9. To setup circleci, first go to your dashboard on circleci.com. Click "Add Project" and choose the repo for your project. Then select "Build Now" to start building the project. Update the "working_directory" variable at the top of ~/.circleci/config.yml to match your repo name as well

  10. to rename your Heroku staging and production apps, use command heroku apps:rename --remote staging newname. Insert the desired name of the app instead of "newname" and you can select the "production" remote instead of staging to rename produciton as well. Be sure to update the database names in mysql ~/backend/config/config.js to match your app name too. copy and paste the new app names in readme.md

Deploying to Heroku

  • After running the initialize.sh script, you will have a Staging and a Production environment already deployed to Heroku.

  • To deploy whatever is on your git master branch again later, use command git push staging master or git push production master depending on which environment you want to deploy

With a few steps this deployment process can be automated. First, on your local machine, make sure you have the Heroku CLI installed. then run heroku authorizations:create to generate a longterm token. Go to the project settings in circle ci for this project and add environment variables HEROKU_EMAIL and enter your heroku account email, and HEROKU_TOKEN and paste the token you generated.

Make sure your default git branch for this project is called "development" instead of master******!!!!

Testing

You can easily run tests against your different environments with these commands. After the tests complete, your browser will automatically open with the test results report. If you ran in the local environment, it will also open a fullstack coverage report of your entire project.

Local *First make sure you run yarn build

yarn test:local:test-and-report

Staging *First to add stage database credentials to .env file or ~/backend/config/config.js

yarn test:staging:test-and-report

Production *First to add stage database credentials to .env file or ~/backend/config/config.js

yarn test:production:test-and-report

Results

  • Run tests and generate a test report using mochawesome. From the root, use command test:create-reports which will run all cypress/integration/*-spec.js files. Then you can open the cypress/reports/integration/public/report.html file to view the test report in the browser

Code Coverage

  • run tests using cypress.io. From the root, use command yarn dev:coverage which will open the test runner. Then select "run all specs" to run all the tests. Then you can open the coverage/lcov-report/index.html file to view the fullstack code coverage report in the browser
  • npx nyc report --reporter=text-summary will print out a coverage summary in the console

Helpful Links

Starting with React/Webpack/Babel from scratch - https://www.valentinog.com/blog/babel/ Using CSS Grids - https://css-tricks.com/snippets/css/complete-guide-grid/ Help with SQL associations and file seperation - sequelize/sequelize#4578