cleanup yarn scripts (#8)

* Clarify package.json scripts

The backend `test` and `lint` commands now only test/lint a single
componenet. This should help clarify how to run tests or the linter
only the frontend or backend. Add readme for the frontend.

* Unit test result files go to the correct dir

* Remove unneeded env variables from compose file

* Remove the audit command

* Add cross-env as a dev package

This package allows cross platform setting of environment variables

* Update readme

Add section instructing to not switch between docker and host yarn
commands without installing proper dependencies. Add section that offers
help running docker on windows

* Remove build files, add to gitignore

* Clarify and update .env. Rename test

 * .env handling updated. .env is now .gitignored and the old .env
renamed to .env.example. Should make understanding it's purpose a little
easier. Added more to the comment explaining the .env files purpose
 * Test name now easier to understand for non-tech people

* Format lint:CI to console and file

Co-authored-by: Sarah-Jaine Szekeresh <[email protected]>

Author: jasalisbury

.env

@@ -0,0 +1,6 @@
+# Copy this file to `.env` and replace "1000:1000" with
+# your user id/group id. `.env` is used by docker-compose
+# making files created in the docker container owned by
+# your host user (instead of root).
+# Linux/OSX run `id -u` and `id -g`
+CURRENT_USER=1000:1000

.env.example

@@ -3,4 +3,6 @@ reports
 node_modules
 coverage
 .DS_Store
-.env.dev
+.env
+junit.xml
+frontend/build

.gitignore

@@ -9,14 +9,24 @@ Getting Started
 
 Make sure Docker is installed. To check run `docker ps`
 
-Run `yarn docker:deps`. This builds the frontend and backend docker containers and install dependencies. You only need to run this step the first time you fire up the app and when dependencies are added/updated/removed. Running `yarn docker:start` starts the backend and frontend, browse to `http://localhost:3000` to hit the frontend and `http://localhost:3000/api` to hit the backend. Copying `.env` to `.env.dev`, substituting in your user id and group id will cause any files created in docker containers to be owned by your user on your host.
+Run `yarn docker:deps`. This builds the frontend and backend docker containers and install dependencies. You only need to run this step the first time you fire up the app and when dependencies are added/updated/removed. Running `yarn docker:start` starts the backend and frontend, browse to `http://localhost:3000` to hit the frontend and `http://localhost:3000/api` to hit the backend. Copying `.env.example` to `.env`, substituting in your user id and group id will cause any files created in docker containers to be owned by your user on your host.
+
+You can also run build commands directly on your host (without docker). Make sure you install dependencies when changing execution method. You could see some odd errors if you install dependencies for docker and then run yarn commands directly on the host, especially if you are developing on windows. If you want to use the host yarn commands be sure to run `yarn deps` before any other yarn commands. Likewise if you want to use docker make sure you run `yarn docker:deps`.
 
 The frontend [proxies requests](https://create-react-app.dev/docs/proxying-api-requests-in-development/) to paths it doesn't recognize to the backend.
 
 Running Tests
 -------------
 
-Run `yarn docker:deps` to install dependencies. Run `yarn docker:test` to run all tests
+Run `yarn docker:deps` to install dependencies. Run `yarn docker:test` to run all tests for the frontend and backend.
+
+Docker on Windows
+-----------------
+
+You may run into some issues running the docker commands on Windows:
+
+ * If you run into `Permission Denied` errors see [this issue](https://github.com/docker/for-win/issues/3385#issuecomment-501931980)
+ * You can try to speed up execution time on windows with solutions posted to [this issue](https://github.com/docker/for-win/issues/1936)
 
 Other Commands
 --------------
@@ -28,15 +38,16 @@ Other Commands
 | `yarn docker:stop` | Stops the backend and frontend docker containers |
 | `yarn docker:test` | Runs tests for the frontend and backend in docker containers |
 | `yarn docker:lint` | Runs the linter for the frontend and backend in docker containers |
-| `yarn docker:audit` | Runs `yarn audit` against frontend and backend dependencies |
 | `yarn deps` | Install dependencies for the frontend and backend |
 | `yarn start` | Starts the backend and frontend |
 | `yarn server` | Starts the backend |
 | `yarn client` | Start the frontend |
-| `yarn test` | Run tests for the backend and frontend |
-| `yarn eslint` | Run the linter for the backend and frontend |
-| `yarn lint:ci` | Run the linter in outputting results to the `reports` directory |
-| `yarn test:ci` | Run backend tests outputting results to the `reports` directory |
+| `yarn test` | Run tests for only the backend |
+| `yarn test:ci` | Run tests for the backend with coverage and output results to xml files|
+| `yarn test:all` | Run `yarn test:ci` for both the frontend and backend |
+| `yarn lint` | Run the linter only for the backend |
+| `yarn lint:ci` | Run the linter for the the backend with results output to xml files |
+| `yarn lint:all` | Run `yarn lint:ci` for both the frontend and backend |
 
 Deployment
 ----------

README.md

@@ -6,8 +6,6 @@ services:
       dockerfile: Dockerfile.dev
     command: yarn server
     user: ${CURRENT_USER:-root}
-    env_file:
-      - .env
     ports:
       - "3001:3001"
     volumes:
@@ -18,15 +16,11 @@ services:
       dockerfile: Dockerfile.dev
     command: yarn start
     user: ${CURRENT_USER:-root}
-    env_file:
-      - .env
     stdin_open: true
     ports:
       - "3000:3000"
     volumes:
       - "./frontend:/app:rw"
       - "./scripts:/app/scripts"
     environment:
-      - JEST_JUNIT_OUTPUT_DIR=reports
-      - JEST_JUNIT_OUTPUT_NAME=unit.xml
       - BACKEND_PROXY=http://backend:3001

docker-compose.yml

@@ -0,0 +1,52 @@
+# TTADP Frontend
+
+A React frontend initialized with Create React App
+
+## Getting Started
+
+There are yarn commands for starting/testing/linting the frontend defined a directory up. `yarn start` or `yarn docker:start` a directory up will start both the backend and frontend. `yarn docker:test` or `yarn test:all` will test the frontend and the backend. However if you want to just run the frontend tests/linter you can run yarn commands in this directory. Install dependencies with `yarn install`. `yarn start` will fire up the development server. Use `yarn test` and `yarn lint` for running tests and the linter.
+
+### Yarn Commands
+
+| Yarn Command | Description |
+|-|-|
+| `yarn start` | Start the frontend development server |
+| `yarn build` | Build a production bundle |
+| `yarn test` | Start the test watcher |
+| `yarn test:ci` | Run unit tests a single time outputting results to xml files |
+| `yarn lint` | Run the linter |
+| `yarn lint:ci` | Run the linter outputting results to xml files |
+
+## Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

frontend/README.md

@@ -14,9 +14,11 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "test:ci": "CI=true yarn test --coverage --reporters=default --reporters=jest-junit"
+    "test": "react-scripts test",
+    "test:ci": "cross-env JEST_JUNIT_OUTPUT_DIR=reports JEST_JUNIT_OUTPUT_NAME=unit.xml CI=true yarn test --coverage --reporters=default --reporters=jest-junit",
+    "lint": "eslint src",
+    "lint:ci": "eslint -f eslint-formatter-multiple src"
   },
   "eslintConfig": {
     "root": true,
@@ -37,13 +39,27 @@
             ".jsx"
           ]
         }
-      ]
+      ],
+      "linebreak-style": 0
     },
     "env": {
       "jest/globals": true,
       "browser": true
     }
   },
+  "eslint-formatter-multiple": {
+    "formatters": [
+      {
+        "name": "stylish",
+        "output": "console"
+      },
+      {
+        "name": "junit",
+        "output": "file",
+        "path": "reports/lint.xml"
+      }
+    ]
+  },
   "babel": {
     "presets": [
       "@babel/preset-react"
@@ -65,8 +81,10 @@
     "@testing-library/dom": "^7.21.7",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.2.0",
+    "eslint-formatter-multiple": "^1.0.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",

frontend/build/favicon.ico

@@ -3405,6 +3405,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-env@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
+  integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
 [email protected]:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
@@ -3425,6 +3432,15 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -4261,6 +4277,11 @@ eslint-config-react-app@^5.2.1:
   dependencies:
     confusing-browser-globals "^1.0.9"
 
+eslint-formatter-multiple@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-formatter-multiple/-/eslint-formatter-multiple-1.0.0.tgz#223db63a682038b001763c5d36d32975be4bdbb3"
+  integrity sha512-0Jv8gn7LmXj9c20E9BNAI1Wn3Lxw2v3nCvYRpk30kBLhc3wBees6DIXkJgaY2hoeOjvSq8n4peQ6KJstk5gmKQ==
+
 eslint-import-resolver-node@^0.3.2, eslint-import-resolver-node@^0.3.3:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"

frontend/build/logo192.png

@@ -8,20 +8,20 @@
     "start": "concurrently \"yarn server\" \"yarn client\"",
     "server": "nodemon src/index.js --ignore './frontend/' --exec babel-node",
     "client": "yarn --cwd frontend start",
-    "test": "jest src && yarn --cwd frontend test --watchAll=false",
-    "eslint": "eslint src",
-    "lint:ci": "eslint src -f junit -o reports/lint.xml src",
-    "test:ci": "jest src --coverage --reporters=default --reporters=jest-junit",
+    "test": "jest src",
+    "test:ci": "cross-env JEST_JUNIT_OUTPUT_DIR=reports JEST_JUNIT_OUTPUT_NAME=unit.xml CI=true jest src --coverage --reporters=default --reporters=jest-junit",
+    "test:all": "yarn test:ci && yarn --cwd frontend test:ci",
+    "lint": "eslint src",
+    "lint:ci": "eslint -f eslint-formatter-multiple src",
+    "lint:all": "yarn lint:ci && yarn --cwd frontend lint:ci",
     "clean": "rm -rf coverage reports frontend/coverage frontend/reports frontend/build",
-
-    "docker:shell:frontend": "docker-compose run --rm frontend /bin/bash",
-    "docker:shell:backend": "docker-compose run --rm backend /bin/bash",
     "docker:deps": "docker-compose run --rm backend yarn install && docker-compose run --rm frontend yarn install",
     "docker:start": "docker-compose up -d",
     "docker:stop": "docker-compose down",
     "docker:test": "docker-compose run --rm backend yarn test:ci && docker-compose run --rm frontend yarn test:ci",
-    "docker:lint": "docker-compose run --rm backend yarn lint:ci",
-    "docker:audit": "docker-compose run --rm backend ./scripts/audit.sh && docker-compose run --rm frontend ./scripts/audit.sh"
+    "docker:lint": "docker-compose run --rm backend yarn lint:ci && docker-compose run --rm frontend yarn lint:ci",
+    "docker:shell:frontend": "docker-compose run --rm frontend /bin/bash",
+    "docker:shell:backend": "docker-compose run --rm backend /bin/bash"
   },
   "repository": {
     "type": "git",
@@ -34,6 +34,22 @@
     ],
     "ignorePatterns": [
       "node_modules/*"
+    ],
+    "rules": {
+      "linebreak-style": 0
+    }
+  },
+  "eslint-formatter-multiple": {
+    "formatters": [
+      {
+        "name": "stylish",
+        "output": "console"
+      },
+      {
+        "name": "junit",
+        "output": "file",
+        "path": "reports/lint.xml"
+      }
     ]
   },
   "jest": {
@@ -54,8 +70,10 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",
     "concurrently": "^5.3.0",
+    "cross-env": "^7.0.2",
     "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-formatter-multiple": "^1.0.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",

frontend/build/logo512.png

@@ -2,7 +2,7 @@ import request from 'supertest';
 import app from './app';
 
 describe('Root', () => {
-  test('Returns a 200', async () => {
+  test('Successfully returns the page', async () => {
     const response = await request(app).get('/');
     expect(response.status).toBe(200);
   });