Unit test and documentation

.codeclimate.yml

@@ -1,41 +1,42 @@
 ---
 engines:
-  shellcheck:
-    enabled: true
-  checkstyle:
-    enabled: true
-    channel: "beta"
-  csslint:
-    enabled: true
-  duplication:
-    enabled: true
-    config:
-      languages:
-      - typescript
-      - javascript
-      - python
-      - php
-  eslint:
-    enabled: true
-    config:
-      config: .eslintrc
-  fixme:
-    enabled: true
+    shellcheck:
+        enabled: true
+    checkstyle:
+        enabled: true
+        channel: "beta"
+    csslint:
+        enabled: true
+    duplication:
+        enabled: true
+        config:
+            languages:
+                - typescript
+                - javascript
+                - python
+                - php
+    eslint:
+        enabled: true
+        config:
+            config: .eslintrc
+    fixme:
+        enabled: true
 ratings:
-  paths:
-  - "**.css"
-  - "**.inc"
-  - "**.ts"
-  - "**.js"
-  - "**.jsx"
-  - "**.tsx"
-  - "**.module"
-  - "**.sh"
-  - "**.bash"
+    paths:
+        - "**.css"
+        - "**.inc"
+        - "**.ts"
+        - "**.js"
+        - "**.jsx"
+        - "**.tsx"
+        - "**.module"
+        - "**.sh"
+        - "**.bash"
 exclude_paths:
-- "**.md"
-- "**.txt"
-- "**.json"
-- "**.lock"
-- docs/
-- deploy/
+    - "**.md"
+    - "**.txt"
+    - "**.json"
+    - "**.lock"
+    - client/test/
+    - docs/
+    - deploy/

README.md

@@ -14,7 +14,9 @@ bash script/install.bash
 
 ## For Client app (serves React Website)
 
-See these [instructions](client/README.md)
+[README.md](client/README.md) for client GUI is found in `./client`
+
+---
 
 ## Infrastructure Components
 
@@ -49,4 +51,4 @@ yarn clean      #clean the directory of temporary files
 
 ## License
 
-This software is owned by [The INTO-CPS Association](https://into-cps.org/) and is licensed under the terms of the INTO-CPS Association.
+This software is owned by [The INTO-CPS Association](https://into-cps.org/) and is licensed under the terms of the INTO-CPS Association.

client/.eslintrc

@@ -28,9 +28,10 @@
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "parser": "@babel/eslint-parser",
     "requireConfigFile": false,
     "ecmaFeatures": {
+      "emacVersion": 6,
+      "sourceType": "module",
       "jsx": true
     },
     "ecmaVersion": 2018,

client/README.md

@@ -13,7 +13,7 @@ yarn syntax     #perform linting and static analysis
 yarn build      #build the react app into build/ directory
 
 #specify the environment; specify only one
-yarn configapp #prod | dev | test
+yarn configapp #prod | dev
 
 yarn start      #start the application
 yarn test       #UI testing of the application
@@ -29,7 +29,7 @@ To customize the configuration of endpoints to your preference, it is recommende
 Once the configuration file has been updated, please rerun the configuration bash to apply the changes.
 
 ```bash
-yarn configapp #prod | dev | test
+yarn configapp #prod | dev
 ```
 
 ---

client/jest.config.json

@@ -1,21 +1,15 @@
 {
   "preset": "ts-jest",
+  "testEnvironment": "jsdom",
   "transform": {
-    "^.+\\.jsx?$": "babel-jest",
     "^.+\\.tsx?$": "ts-jest"
   },
   "transformIgnorePatterns": ["/node_modules/(?![d3-shape|recharts]).+\\.js$"],
   "collectCoverage": true,
-  "coverageReporters": [
-        "text",
-        "cobertura",
-        "clover",
-        "lcov",
-        "json"
-      ],
-  "collectCoverageFrom": ["src/**/*.[jt]sx?"],
+  "coverageReporters": ["text", "cobertura", "clover", "lcov", "json"],
+  "collectCoverageFrom": ["src/**/*.tsx"],
   "coveragePathIgnorePatterns": ["node_modules", "build"],
-  "modulePathIgnorePatterns": ["test/e2e"],
+  "modulePathIgnorePatterns": ["test/e2e","mocks","config"],
   "coverageDirectory": "<rootDir>/coverage/",
   "coverageThreshold": {
     "global": {
@@ -30,7 +24,10 @@
     "window.ENV.SERVER_PORT": 3500
   },
   "verbose": true,
-  "testRegex": "/test/.*\\.[jt]sx?$",
+  "testRegex": "/test/.*\\.test.tsx?$",
   "modulePaths": ["<rootDir>/src/"],
-  "setupFilesAfterEnv": ["<rootDir>/config/test.js"]
+  "setupFilesAfterEnv": [
+    "<rootDir>/config/test.js",
+    "<rootDir>/test/config/importJestDom.ts"
+  ]
 }

client/package.json

@@ -14,7 +14,8 @@
     "build": "script/build.bash",
     "configapp": "script/config.bash",
     "start": "script/start.bash",
-    "clean": "script/clean.bash"
+    "clean": "script/clean.bash",
+    "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\""
   },
   "eslintConfig": {
     "extends": [
@@ -37,37 +38,34 @@
     "recharts": "^2.1.13",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.0.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.5"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "@babel/eslint-parser": "^7.18.9",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "@jest/globals": "^28.1.3",
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
     "@playwright/test": "^1.25.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.7",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.34.0",
     "@typescript-eslint/parser": "^5.34.0",
-    "babel-jest": "^28.1.3",
     "eslint": "^8.22.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.8.2",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.30.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "husky": "^8.0.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "playwright": "^1.25.0",
     "prettier": "^2.7.1",
     "react-scripts": "^5.0.1",
-    "react-test-renderer": "^18.2.0",
-    "ts-jest": "^28.0.8"
+    "ts-jest": "^29.0.5"
   },
   "browserslist": {
     "production": [

client/playwright.config.ts

@@ -10,10 +10,10 @@ const config = {
   testDir: './test/e2e',
   testMatch: /.*\.test\.ts/,
   reporter: [
-    ['html', { outputFile: 'playwright-report/index.html' }], 
-    ['list'], 
+    ['html', { outputFile: 'playwright-report/index.html' }],
+    ['list'],
     ['junit', { outputFile: 'playwright-report/results.xml' }],
-    ['json', { outputFile: 'playwright-report/results.json' }]
+    ['json', { outputFile: 'playwright-report/results.json' }],
   ],
   use: {
     baseURL: 'http://localhost:4000',

client/public/static/css/MaterialIcon.css

@@ -4,12 +4,10 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src:  local('Material Icons'),
-        local('MaterialIcons-Regular'),
-        url(/static/font/MaterialIcons-Regular.woff2) format('woff2'),
-        url(/static/font/MaterialIcons-Regular.woff) format('woff'),
-        url(/static/font/MaterialIcons-Regular.ttf) format('truetype');
-
+  src: local('Material Icons'), local('MaterialIcons-Regular'),
+    url(/static/font/MaterialIcons-Regular.woff2) format('woff2'),
+    url(/static/font/MaterialIcons-Regular.woff) format('woff'),
+    url(/static/font/MaterialIcons-Regular.ttf) format('truetype');
 }
 
 .material-icons {
@@ -25,7 +23,6 @@
   word-wrap: normal;
   direction: ltr;
 
-
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
@@ -36,9 +33,8 @@
 
   /* Support for IE. */
   font-feature-settings: 'liga';
-
 }
 
 body {
-  font-family: "Roboto", sans-serif;
-}
+  font-family: 'Roboto', sans-serif;
+}

client/src/AppProvider.tsx

@@ -0,0 +1,20 @@
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider, createTheme, Theme } from '@mui/material/styles';
+import React from 'react';
+
+const mdTheme: Theme = createTheme({
+  palette: {
+    mode: 'light',
+  },
+});
+
+export function AppProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={mdTheme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}
+
+export default AppProvider;