Add ability to use Dev Containers locally (#3744)

* Add ability to use Dev Container

* wdio container setup

* Add docker-compose-wdio for local selenium grid docker spin-up

* Add documentation to use devcontainers in Readme

* Add Docs on vscode devcontainers

* Readme update

* Readme updates to include docker prune commands

* Update readme

* Add docker scripts for WDIO tests

---------

Co-authored-by: ns065186 <ns065186@cerner.net>

.devcontainer/Dockerfile

@@ -0,0 +1 @@
+FROM docker.cernerrepos.net/ion/ion-node:5

.devcontainer/devcontainer.json

@@ -0,0 +1,25 @@
+{
+    "name": "TerraCore",
+    "dockerComposeFile": "docker-compose.yml",
+    "service": "vscode",
+    "shutdownAction": "stopCompose",
+    "workspaceFolder": "/workspace",
+    "postCreateCommand": "",
+    "runServices": [
+        "vscode"
+    ],
+    "customizations": {
+      "vscode": {
+        "extensions": [
+          "dbaeumer.vscode-eslint",
+          "james-yu.latex-workshop",
+          "eamodio.gitlens",
+          "shardulm94.trailing-spaces",
+          "stkb.rewrap",
+          "vscode-icons-team.vscode-icons",
+          "streetsidesoftware.code-spell-checker"
+        ]
+      }
+    },
+    "forwardPorts": [8080]
+}

.devcontainer/docker-compose-wdio.yml

@@ -0,0 +1,43 @@
+version: "3"
+
+services:
+  selenium-hub:
+    image: selenium/hub:3.141.59-zirconium
+    container_name: selenium-hub
+    ports:
+      - "4444:4444"
+    healthcheck:
+      test: ["CMD", "/opt/bin/check-grid.sh"]
+      interval: 15s
+      timeout: 30s
+      retries: 5
+
+  chrome:
+    image: selenium/node-chrome:3.141.59-zirconium
+    # Volume mounting is necessary to ensure the browser does not crash inside the docker container.
+    # For more details see:
+    #  https://github.com/SeleniumHQ/docker-selenium#running-the-images
+    #  https://bugs.chromium.org/p/chromium/issues/detail?id=519952
+    #  https://bugzilla.mozilla.org/show_bug.cgi?id=1338771#c10
+    volumes:
+      - /dev/shm:/dev/shm
+    depends_on:
+      - selenium-hub
+    environment:
+      - HUB_HOST=selenium-hub
+      - HUB_PORT=4444
+
+  firefox:
+    image: selenium/node-firefox:3.141.59-zirconium
+    # Volume mounting is necessary to ensure the browser does not crash inside the docker container.
+    # For more details see:
+    #  https://github.com/SeleniumHQ/docker-selenium#running-the-images
+    #  https://bugs.chromium.org/p/chromium/issues/detail?id=519952
+    #  https://bugzilla.mozilla.org/show_bug.cgi?id=1338771#c10
+    volumes:
+      - /dev/shm:/dev/shm
+    depends_on:
+      - selenium-hub
+    environment:
+      - HUB_HOST=selenium-hub
+      - HUB_PORT=4444

.devcontainer/docker-compose.yml

@@ -0,0 +1,13 @@
+version: "3"
+
+services:
+  vscode:
+    network_mode: host
+    build: .
+    volumes:
+      - ../:/workspace
+      # Docker socket to access Docker server
+      - /var/run/docker.sock:/var/run/docker.sock
+      # Git config
+      - ~/.gitconfig:/root/.gitconfig
+    entrypoint: /bin/sh -c "while sleep 1000; do :; done"

README.md

@@ -23,6 +23,7 @@
   - [Packages Requiring I18n](#packages-requiring-i18n)
 - [Contributing](#contributing)
 - [Local Development](#local-development)
+- [Local Development using Docker (Dev Containers)](#docker-local-development)
 - [LICENSE](#license)
 
 <h2 id="packages">
@@ -175,6 +176,33 @@ npm install
 npm run test
 ```
 
+<h2 id="docker-local-development">
+  Local Development using Docker (Dev Containers)
+</h2>
+
+1. Install [Docker](https://www.docker.com/).
+2. Install [Microsoft VS Code](https://code.visualstudio.com/Download)
+3. Clone this repo.
+4. Open this repo in VS Code.
+5. Install the Dev Container extension.
+    - Navigate to View -> Extension  -> Search for and install _Dev Containers_ (or "ms-vscode-remote.remote-containers")
+    - More information on [Dev Containers](https://code.visualstudio.com/docs/devcontainers/containers)
+6. Build the dev container.
+    - Make sure you are connected to the Cerner VPN when building this container the first time.
+    - Navigate to View -> Command Palette -> Open Workspace In Container or Reopen In Container.
+7. You're now running in a dev container.  Use the terminal of the dev container to issue any npm commands.
+8. Before running any WDIO tests, make sure to perform the following steps:
+    - Open a new terminal (outside the dev container) and navigate to  ".devcontainer/" path in your repository.
+    - Execute the command `"docker compose -f docker-compose-wdio.yml up"`. Selenium hub should spin up. Leave this running in the background. If you see errors saying "container name already exists", run `"docker container prune"` command followed by pressing "y" to clear up any unused containers and try running the previous command again.
+    - You can now run `npm run test:docker` or `npm run wdio:docker` commands to run WDIO tests from inside the Dev Container.
+    - NOTE: Optionally, if you want to run other WDIO commands in the dev container, you can also edit the root package.json file WDIO scripts to include `--disableSeleniumService=true` flag. This will disable the selenium service from spinning up again.
+      For example:
+       ```sh
+       "scripts": {
+        "wdio-lowlight": "terra wdio --disableSeleniumService=true --themes clinical-lowlight-theme"
+        }
+       ```
+
 <h2 id="license">
   LICENSE
 </h2>

package.json

@@ -70,10 +70,12 @@
     "start-static": "npm run compile:prod && terra express-server --site ./build",
     "start-heroku": "terra express-server --port $PORT --site './build' ",
     "test": "npm run lint && npm run jest && npm run wdio",
+    "test:docker": "npm run lint && npm run jest && npm run wdio:docker",
     "wdio-default": "terra wdio",
     "wdio-lowlight": "terra wdio --themes clinical-lowlight-theme",
     "wdio-fusion": "terra wdio --themes orion-fusion-theme",
-    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme"
+    "wdio": "terra wdio --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme",
+    "wdio:docker": "terra wdio --disableSeleniumService=true --themes terra-default-theme clinical-lowlight-theme orion-fusion-theme"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.0",