Added smart node selector (#87)

* Refactoring: converted to TypeScript.

Adjusted the JS/TS linting environment.
Also added validation of JavaScript/Typescript code to GitHub workflow.

* Added new component: SmartNodeSelector

Also added new component to App.js in order to preview and test.

Set up Jest testing framework

Refactored folder structure and added debug config for tests in VS Code.

Implemented fast and smart code to allow for large data sets
- Fast data searching algorithm
- Smart rendering

.Rbuildignore

@@ -20,7 +20,7 @@ demo/.*\.js
 demo/.*\.html
 demo/.*\.css
 
-# ignore python files/folders
+# ignore Python files/folders
 setup.py
 usage.py
 setup.py

.babelrc

@@ -8,9 +8,17 @@
         }
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties"
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "transform-es2015-modules-commonjs"
+      ]
+    }
+  }
 }

.github/workflows/webviz-core-components.yml

@@ -60,12 +60,13 @@ jobs:
       - name: 🕵️ Check code style & linting
         run: |
           npm run validate
-          black --check webviz_core_components tests setup.py
+          black --check webviz_core_components tests setup.py usage.py
           bandit -r -c ./bandit.yml webviz_core_components tests setup.py
 
       - name: 🤖 Run tests
         run: |
-          pytest ./tests --headless
+          npm run test
+          pytest ./tests/py --headless
         
       - name: 🚢 Build and deploy Python package
         if: github.event_name == 'release' && matrix.python-version == '3.6'

.vscode/launch.json

@@ -13,6 +13,19 @@
             "request": "launch",
             "name": "Launch Webpack",
             "program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js"
+        },
+        {
+            "name": "Debug Jest Tests",
+            "type": "node",
+            "request": "launch",
+            "runtimeArgs": [
+                "--inspect-brk",
+                "${workspaceRoot}/node_modules/.bin/jest",
+                "--runInBand"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen",
+            "port": 9229
         }
     ]
 }

CHANGELOG.md

@@ -7,3 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [UNRELEASED] - YYYY-MM-DD
 ### Changed
 - [#86](https://github.com/equinor/webviz-core-components/pull/86) - Refactored and converted code to TypeScript (main component files to JSX), adjusted build environment accordingly and added validation of JS/TS to GitHub workflow
+
+### Added
+- [#87](https://github.com/equinor/webviz-core-components/pull/87) - Added new SmartNodeSelector component and Jest testing framework

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    transform: { ".*": "<rootDir>/node_modules/babel-jest" },
+    rootDir: ".",
+    testMatch: ["**/tests/js/**/*.test.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+    modulePaths: ["/shared/vendor/modules"],
+    moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
+    moduleDirectories: [
+        'node_modules',
+        'tests/js/',
+    ],
+    moduleNameMapper: {
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+            "<rootDir>/__mocks__/fileMock.js",
+        "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    },
+    transformIgnorePatterns: ["/node_modules/"],
+    unmockedModulePathPatterns: [
+        "<rootDir>/node_modules/react",
+        "<rootDir>/node_modules/react-dom",
+        "<rootDir>/node_modules/react-addons-test-utils",
+        "<rootDir>/EmptyModule.js"
+    ]
+}