test: [TERR-425] React Component Code Coverage and Error Validation

.eslintrc

@@ -1,3 +1,26 @@
 {
-  "extends": "./.config/.eslintrc"
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "./.config/.eslintrc",
+    "plugin:import/recommended",
+    "plugin:react/recommended",
+    "plugin:jest/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "react/prop-types": "off",
+    "no-underscore-dangle": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "always",
+        "jsx": "always"
+      }
+    ]
+  }
 }

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node.js environment for build
+      - name: Setup Node.js environment for build and testing
         uses: actions/setup-node@v2.1.2
         with:
           node-version: "18.x"
@@ -43,11 +43,6 @@ jobs:
       - name: Build and test frontend
         run: yarn build
 
-      - name: Setup Node.js environment for E2E testing
-        uses: actions/setup-node@v2.1.2
-        with:
-          node-version: "18.x"
-
       - name: Install E2E dependencies
         run: |
           npx playwright install --with-deps

.gitignore

@@ -42,6 +42,9 @@ e2e-results/
 .DS_store
 *.code-workspace
 
+# vscode
+*.code-workspace
+
 # Playwright
 playwright*
 test-results

Makefile

@@ -10,6 +10,7 @@ NETWORK_NAME=esnet-networkmap-e2e-net
 CONTAINER_ID=$(shell docker ps -f name=$(CONTAINER_NAME) -q)
 INSTANCES=$(shell docker ps --filter name=$(CONTAINER_NAME) --filter name=$(PROXY_NAME) -qa)
 NETWORKS=$(shell docker network ls --filter name=${NETWORK_NAME} -q)
+SPINUP_SLEEP_T=5
 
 .PHONY: prod
 prod:
@@ -43,22 +44,32 @@ compose:
 	docker inspect $(CONTAINER_NAME) > $(PROJECT_DIR)/e2e/grafana-docker.json
 .PHONY: test
 test: compose
+	@echo "Starting component tests..."
 	yarn test
-	sleep 2
+	yarn test:react
+	@echo "Waiting for container to spin up..."
+	@sleep $(SPINUP_SLEEP_T)
+	@echo "Starting E2E Tests..."
 	yarn e2e
 
 .PHONY: test\:component
 test\:component:
+	@echo "Starting component tests..."
 	yarn test
+	yarn test:react
 
 .PHONY: test\:e2e
 test\:e2e: compose
 	# run e2e tests
+	@echo "Waiting for container to spin up..."
+	@sleep $(SPINUP_SLEEP_T)
+	@echo "Starting E2E Tests..."
 	yarn run e2e
 
 .PHONY: test\:ui
 test\:ui: compose
 	# run e2e tests, but with ui
+	@echo "Starting E2E tests in Playwright UI..."
 	yarn run e2e:ui
 
 .PHONY: testignore

README.md

@@ -57,7 +57,7 @@ It also contains an example topology that will be used while setting up the Netw
 
 - Input your Google Sheets API key into the "API Key" input
 
-- Click [Test + Save] 
+- Click [Test + Save]
 
 ### 2. Setup a Test Dashboard
 
@@ -187,7 +187,7 @@ Leave this set to gray. It will help to show when we've correctly associated edg
 
 **Layer 1 Endpoint Identifier**
 
-This input specifies the attribute of "endpoint_identifiers" prop of each of the "edges" objects in your JSON topology. Each "endpoint_identifiers" entry in the JSON should have a key matching the value specified in this text box (although the assigned JSON value is an array of node names of length two, does not matter). The value for Grafana here should be left as the default "pops".
+This input specifies the attribute of "endpoint_identifiers" prop of each of the "edges" objects in your JSON topology. Each "endpoint_identifiers" entry in the JSON should have a key matching the value specified in this text box (although the assigned JSON value is an array of node names of length two, does not matter). The value for Grafana here should be left as the default "names".
 
 **Layer 1 Node Highlight Color**
 

demonstration/dashboard.json

@@ -97,10 +97,10 @@
             "dstField": "dst",
             "dstFieldLabel": "To:",
             "edgeWidth": 3,
-            "endpointId": "pops",
+            "endpointId": "names",
             "inboundValueField": "in_bits",
             "legend": true,
-            "mapjson": "{\"edges\":[{\"name\":\"A--B\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"A\",\"B\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[42.30619185993376,-92.30145333497663]],\"children\":[]},{\"name\":\"A--C\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"A\",\"C\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[34.5952660320894,-99.10139879776413]],\"children\":[]},{\"name\":\"B--C\",\"meta\":{\"endpoint_identifiers\":{\"pops\":[\"B\",\"C\"]}},\"coordinates\":[[42.30619185993376,-92.30145333497663],[34.5952660320894,-99.10139879776413]],\"children\":[]}],\"nodes\":[{\"name\":\"A\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-106.00734642032997]},{\"name\":\"B\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-92.30145333497663]},{\"name\":\"C\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[34.5952660320894,-99.10139879776413]}]}",
+            "mapjson": "{\"edges\":[{\"name\":\"A--B\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"A\",\"B\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[42.30619185993376,-92.30145333497663]],\"children\":[]},{\"name\":\"A--C\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"A\",\"C\"]}},\"coordinates\":[[42.30619185993376,-106.00734642032997],[34.5952660320894,-99.10139879776413]],\"children\":[]},{\"name\":\"B--C\",\"meta\":{\"endpoint_identifiers\":{\"names\":[\"B\",\"C\"]}},\"coordinates\":[[42.30619185993376,-92.30145333497663],[34.5952660320894,-99.10139879776413]],\"children\":[]}],\"nodes\":[{\"name\":\"A\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-106.00734642032997]},{\"name\":\"B\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[42.30619185993376,-92.30145333497663]},{\"name\":\"C\",\"meta\":{\"display_name\":\"\",\"svg\":\"\",\"template\":\"\"},\"coordinate\":[34.5952660320894,-99.10139879776413]}]}",
             "name": "Layer 1",
             "nodeHighlight": "dark-blue",
             "nodeNameMatchField": "Node",
@@ -123,7 +123,7 @@
             "dataFieldLabel": "Volume:",
             "dstFieldLabel": "To:",
             "edgeWidth": 1.5,
-            "endpointId": "pops",
+            "endpointId": "names",
             "legend": false,
             "mapjson": "{\"edges\":[],\"nodes\":[]}",
             "name": "Layer 2",
@@ -141,7 +141,7 @@
             "dataFieldLabel": "Volume:",
             "dstFieldLabel": "To:",
             "edgeWidth": 3,
-            "endpointId": "pops",
+            "endpointId": "names",
             "legend": false,
             "mapjson": "{\"edges\":[],\"nodes\":[]}",
             "name": "Layer 3",

docs/development.md

@@ -1,8 +1,7 @@
 
 ## Development Notes
 
-This project was built in Node 16.20.2 (LTS Gallium) and must built using Yarn (1.22.0 or higher).
-In order to successfully execute end-to-end (E2E) testing, 18.20.1 (LTS Hydrogen) or later is required.
+This project was built in Node 18.20.4 (LTS Hydrogen) and must be built using Yarn (1.22.22 or higher).
 
 ## Table of Contents
 
@@ -16,15 +15,20 @@ In order to successfully execute end-to-end (E2E) testing, 18.20.1 (LTS Hydrogen
 
 Pre-requisite: For local development, Grafana must be running locally as a service or as a Docker container.
 
-1. Ensure Grafana is running.
+1. Install Grafana
+    - Via Homebrew (Mac), `brew install grafana` should be sufficient for a locally running service.
+    - To install the containers in Docker, first install Docker (via `brew install docker` on Mac -or- download an
+    installer from https://www.docker.com/products/docker-desktop/), then setup the containers using `make compose`.
+
+2. Ensure Grafana is running.
     - On Homebrew (Mac), `brew services start grafana` should be sufficient.
     - Via Docker, you can start the container using `docker run -d -p 3000:3000  grafana-esnet-networkmap-panel-grafana`
     - On Windows, you may use Docker Desktop to run the container or enable it as a Windows service. (Hit Ctrl-R and enter
     `services.msc` to open the Services dialog, scroll to the Grafana entry, right-click and select Enable.)
 
-Project setup:
+Project setup (automatically done via Docker):
 
-Pre-requisites: Both Node v16.20.2 (LTS Gallium) or later, plus Yarn 1.22.0 or higher must be installed.
+Pre-requisites: Both Node v18.20.4 (LTS Hydrogen) or later, plus Yarn 1.22.22 or higher must be installed.
 Other versions may not build and when they do, stability issues, unexpected failures, or loss of functionality may occur.
 
 It is recommended to use [nvm](https://github.com/nvm-sh/nvm) to install and manage your Node versions.
@@ -33,8 +37,8 @@ It is recommended to use [nvm](https://github.com/nvm-sh/nvm) to install and man
 
 ```sh
 $ node --version        # check your current version, if the current node version is already v16.20.2, skip to yarn
-$ nvm install 16.20.2   # this only has to be done once if using nvm, skip to yarn after installation
-$ nvm use 16.20.2       # do this each time if your current node version differs
+$ nvm install 18.20.4   # this only has to be done once if using nvm, skip to yarn after installation
+$ nvm use 18.20.4       # do this each time if your current node version differs
 $ yarn install
 ```
 
@@ -51,7 +55,7 @@ plugins = /Users/myuser/grafana-plugins ;/var/lib/grafana/plugins
 When running it as a Docker container using docker-compose, the `docker-compose.yaml` file already maps the generated
 dist directory to the correct location.
 
-Mapping only needs to be done once. Restart Grafana or the container after mapping is complete.
+Mapping only needs to be done once. Restart Grafana after mapping is complete.
 
 4. Build the project once using `make dev`. This will create source maps permit setting of breakpoints in Chrome Debugger during development.
 
@@ -61,7 +65,7 @@ Also, only component testing will be run. Integration E2E tests must be run sepa
 5. Install Playwright browsers for testing (this only needs to be done once).
 
 ```sh
-$ npx playwright install      # only needs to be done once
+$ npx playwright install      # only needs to be done once -or- when an upgrade in browsers is desired/required
 ```
 
 6. Build the project using `make prod` (`prod` is not a typo). A failure during signing is expected for local development.
@@ -81,6 +85,10 @@ and already has its plugins directory mapped (see step 4), there is no need to r
 $ yarn run build_dts
 ```
 
+Note: All further steps may be automatically done by running `make test`; the test will create a dashboard and Network Map Panel
+instance for you, using Google Sheets URLs to create a data source for the panel's topology and sample traffic flows. Read the
+section [Test Execution and Reporting](#test-execution-and-reporting) prior to running `make test`.
+
 8. Open a browser and navigate to your Grafana instance.
 
 9. Login and create a new dashboard or navigate to the default one.
@@ -133,8 +141,8 @@ To run both component and integration tests:
 
 ```sh
 $ node --version        # check your node version
-$ nvm install 18.20.1   # if not installed, only needs to be done once, then skip to make
-$ nvm use 18.20.1       # if you have installed it but the current node is not matching 18.20.1, switch to it
+$ nvm install 18.20.4   # if not installed, only needs to be done once, then skip to make
+$ nvm use 18.20.4       # if you have installed it but the current node is not matching 18.20.1, switch to it
 $ make test
 ```