Merge pull request #11 from CMSgov/jfuqian/BB2-941-Add-Tests-CI-Check-Sample-NodeJS-App

[BB2-941] Add Tests CI Check For Sample NodeJS App

Author: James Fuqian

.github/pull_request_template.md

@@ -0,0 +1,45 @@
+<!--
+You've got a Pull Request you want to submit? Awesome!
+This PR template is here to help ensure you're setup for success:
+  please fill it out to help ensure that your PR is complete and ready for approval.
+-->
+
+**JIRA Ticket:**
+[SOMEPROJECT-42](https://jira.cms.gov/browse/SOMEPROJECT-42)
+
+**User Story or Bug Summary:**
+
+<!-- Please copy-paste the brief user story or bug description that this PR is intended to address. -->
+
+### What Does This PR Do?
+
+<!--
+Add detailed description & discussion of changes here.
+The contents of this section should be used as your commit message (unless you merge the PR via a merge commit, of course).
+
+Please follow standard Git commit message guidelines:
+* First line should be a capitalized, short (50 chars or less) summary.
+* The rest of the message should be in standard Markdown format, wrapped to 72 characters.
+* Describe your changes in imperative mood, e.g. "make xyzzy do frotz" instead of "[This patch] makes xyzzy do frotz" or "[I] changed xyzzy to do frotz", as if you are giving orders to the codebase to change its behavior.
+* List all relevant Jira issue keys, one per line at the end of the message, per: <https://confluence.atlassian.com/jirasoftwarecloud/processing-issues-with-smart-commits-788960027.html>.
+
+Reference: <https://git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project>.
+-->
+
+### What Should Reviewers Watch For?
+
+<!--
+Add some items to the following list, or remove the entire section if it doesn't apply for some reason.
+
+Common items include:
+* Is this likely to address the goals expressed in the user story?
+* Are any additional documentation updates needed?
+* Are there any unhandled and/or untested edge cases you can think of?
+* Is user input properly sanitized & handled?
+* Does this make any backwards-incompatible changes that might break end user clients?
+* Can you find any bugs if you run the code locally and test it manually?
+-->
+
+If you're reviewing this PR, please check these things, in particular:
+
+- TODO

.github/workflows/ci.yaml

@@ -0,0 +1,32 @@
+name: CI for Node.js React Sample App
+on: [push]
+jobs:
+  build:
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v2
+        
+        - uses: actions/setup-node@v2
+          with:
+            node-version: 14
+
+        - name: Install server
+          run: yarn --cwd server install
+
+        - name: Install client
+          run: yarn --cwd client install
+
+        - name: Lint server source
+          run: yarn --cwd server lint
+
+        - name: Lint client source
+          run: yarn --cwd client lint
+
+        - name: Copy config
+          run: cp server/src/configs/sample.config.ts server/src/configs/config.ts
+
+        - name: Copy .env
+          run: cp server/src/pre-start/env/sandbox.sample.env server/src/pre-start/env/development.env
+
+        - name: Run server tests
+          run: yarn --cwd server test

.gitignore

@@ -17,6 +17,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+server/yarn.lock
+
 .vscode
 .idea
 

README.md

@@ -1,28 +1,26 @@
-Create a Blue Button Sandbox Account 
----------------
-Create an account at the link below, and register your test application, to get your Blue Button Sandbox Credentials which will allow you to 
-access the Blue Button synthetic data.  These credentials will be necessary to run this sample application as well as 
-utilize the Blue Button data within your own applcation.  See the section below 'Running the Back-end & Front-end'.
+## Create a Blue Button Sandbox Account
+
+Create an account at the link below, and register your test application, to get your Blue Button Sandbox Credentials which will allow you to
+access the Blue Button synthetic data. These credentials will be necessary to run this sample application as well as
+utilize the Blue Button data within your own applcation. See the section below 'Running the Back-end & Front-end'.
 
 https://sandbox.bluebutton.cms.gov/v1/accounts/create
 
-To ensure this sample application will work properly, make sure that when you register your application you add 
+To ensure this sample application will work properly, make sure that when you register your application you add
 the following url (see below) under the 'Callback URLS/Redirect Uris' section:
 
 http://localhost:3001/api/bluebutton/callback/
 
 When you are ready to run your own application, you can change this value to the url that you need.  
 Just log into your Blue Button Sandbox account and select 'View/Edit App->'.
 
-Setup Docker & Node-js
----------------
+## Setup Docker & Node-js
 
-Install and setup Docker.  Go to https://docs.docker.com/get-started/ and follow the directions.
+Install and setup Docker. Go to https://docs.docker.com/get-started/ and follow the directions.
 
-Download and install node.  Go to https://nodejs.org/en/download/ and follow the directions.
+Download and install node. Go to https://nodejs.org/en/download/ and follow the directions.
 
-Running the Back-end & Front-end
----------------
+## Running the Back-end & Front-end
 
 Once you have Docker and Node installed and setup then do the following:
 
@@ -31,12 +29,11 @@ Once you have Docker and Node installed and setup then do the following:
 Make sure to replace the clientId and clientSecret variables within the config file with
 the ones you were provided, for your application, when you created your Blue Button Sandbox account.
 
-
     copy server/src/pre-start/env/sandbox.sample.env -> server/src/pre-start/env/development.env
 
     docker-compose up -d
 
-This single command will create the docker container with all the necessary packages, configuration, and code to 
+This single command will create the docker container with all the necessary packages, configuration, and code to
 run both the front and back ends of this sample application.
 
 To see the application in action open your browser and enter the following URL:
@@ -45,20 +42,19 @@ http://localhost:3000
 
 To see the process of authenticating with Blue Button via Medicare.gov and retrieve EoB data just click on the 'Authorize' button.
 
-BB2 Sandbox User
------------
-To ensure data displays properly in the sample application please use a 
-Blue Button Sandbox user that has PDE (Part-D Events) EoBs (Explanation of Benefits).  An example of a user with this
-data would be:  BBUser29999 (PWD: PW29999!) or BBUser29998 (PWD: PW29998!)
+## BB2 Sandbox User
+
+To ensure data displays properly in the sample application please use a
+Blue Button Sandbox user that has PDE (Part-D Events) EoBs (Explanation of Benefits). An example of a user with this
+data would be: BBUser29999 (PWD: PW29999!) or BBUser29998 (PWD: PW29998!)
+
+## Development
 
-Development
------------
 Read the DEVELOPER NOTES found in the code to understand the application
-and where you will need to make adjustments/changes as well as some 
+and where you will need to make adjustments/changes as well as some
 suggestions for best practices.
 
-Usage Examples
------------
+## Usage Examples
 
 To start the sample in Docker :
 
@@ -70,7 +66,7 @@ To start the sample in native OS (e.g. Linux) with server and client components
 1. go to the base directory of the repo
 2. run below to start the server:
    1. yarn --cwd server install
-   2. yarn --cwd server start:dev 
+   2. yarn --cwd server start:dev
 3. run below to start the client:
    1. yarn --cwd client install
    2. yarn --cwd client start-native
@@ -81,6 +77,15 @@ Both ways of starting the sample are running the sample in foreground, logging a
 
 For client and server started separately in their command window, type Ctrl C respectively
 
-Error Responses and handling:
------------------------------
+## Run tests
+
+Go to local repo base directory:
+
+copy server/src/configs/sample.config.ts -> server/src/configs/config.ts
+
+yarn --cwd server install
+yarn --cwd server test
+
+## Error Responses and handling:
+
 [See ErrorResponses.md](./ErrorResponses.md)

client/.eslintignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+client/yarn.lock

client/.gitignore

@@ -0,0 +1,25 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+    }
+}

client/eslintrc.json

@@ -5,10 +5,6 @@
   "proxy": "http://localhost:3001",
   "dependencies": {
     "@cmsgov/design-system": "^2.7.3",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -25,6 +21,7 @@
   "scripts": {
     "start": "REACT_APP_CTX=docker react-scripts start",
     "start-native": "REACT_APP_CTX=native react-scripts start",
+    "lint": "eslint --ext .ts --ext .js --ext .tsx .",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -48,6 +45,14 @@
     ]
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.7"
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.0",
+    "@types/react-router-dom": "^5.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-plugin-react": "^7.28.0"
   }
 }

client/package.json

@@ -1,3 +1,4 @@
+import React from 'react';
 import Header from './components/header';
 import Patient from './components/patient';
 import PatientData from './components/patientData';

client/src/App.tsx

@@ -1,5 +1,6 @@
 import { Badge } from '@cmsgov/design-system';
 import { Link as RouterLink } from 'react-router-dom';
+import React from 'react'
 
 export default function Header() {
     return (
@@ -16,4 +17,4 @@ export default function Header() {
             </div>
         </header>
     );
-};
+}