Grid UI Unit Tests (SeleniumHQ#8865)

Co-authored-by: David Burns <david.burns@theautomatedtester.co.uk>

javascript/grid-ui/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true 

javascript/grid-ui/BUILD.bazel

@@ -1,6 +1,7 @@
 load("@bazel_skylib//rules:write_file.bzl", "write_file")
 load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
 load("@npm//react-scripts:index.bzl", "react_scripts")
+load("@npm//jest-cli:index.bzl", "jest_test")
 load("//common:defs.bzl", "zip_file")
 
 _RUNTIME_DEPS = [
@@ -78,3 +79,20 @@ zip_file(
         "//java/server/src/org/openqa/selenium/grid:__pkg__",
     ],
 )
+
+jest_test(
+    name = "test",
+    size = "small",
+    args = [
+        "--no-cache",
+        "--no-watchman",
+        "--ci",
+        "--colors",
+        "--config",
+        "$(location  jest.config.js)"
+    ],
+    data = [
+        ":build",
+        "jest.config.js"
+    ]
+)

javascript/grid-ui/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  roots: [
+    "<rootDir>/../../../../src"
+  ],
+  testMatch: [
+    "<rootDir>/../../../../src/tests/**/*.test.tsx"
+  ],
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest"
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  setupFilesAfterEnv: ["<rootDir>/../../../../src/setupTests.tsx"],
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    ".+\\.(svg|png|jpg|css)$": "identity-obj-proxy"
+  }
+}

javascript/grid-ui/package.json

@@ -1,65 +1,65 @@
 {
-	"name": "grid_ui",
-	"version": "0.1.0",
-	"private": true,
-	"type": "module",
-	"dependencies": {
-		"@apollo/react-hooks": "^3.1.5",
-		"@babel/preset-react": "^7.10.4",
-		"@emotion/core": "^10.0.28",
-		"@material-ui/core": "^4.10.2",
-		"@material-ui/icons": "^4.9.1",
-		"@testing-library/jest-dom": "^4.2.4",
-		"@testing-library/react": "^9.5.0",
-		"@testing-library/user-event": "^7.2.1",
-		"@types/react-modal": "^3.10.6",
-		"@types/react-router-dom": "^5.1.5",
-		"@tippyjs/react": "^4.1.0",
-		"@types/jest": "^26.0.0",
-		"@types/keyboardjs": "^2.5.0",
-		"@types/react": "^16.9.38",
-		"@types/react-dom": "^16.9.8",
-		"@types/react-router": "^5.1.8",
-		"apollo-boost": "^0.4.9",
-		"findandreplacedomtext": "^0.4.6",
-		"graphql": "^15.1.0",
-		"graphql.macro": "^1.4.2",
-		"historyjs": "^1.8.0-b2",
-		"keyboardjs": "^2.6.3",
-		"materialize-css": "^1.0.0-rc.2",
-		"progressbar.js": "^1.1.0",
-		"rc-pagination": "^2.4.1",
-		"react": "^16.13.1",
-		"react-apollo": "^3.1.5",
-		"react-dom": "^16.13.1",
-		"react-json-view": "^1.19.1",
-		"react-modal": "^3.11.2",
-		"react-router-dom": "^5.2.0",
-		"react-scripts": "3.4.3",
-		"source-map-explorer": "^2.4.2",
-		"typescript": "^3.9.5"
-	},
-	"scripts": {
-		"start": "node node_modules/react-scripts/bin/react-scripts start",
-		"build": "node node_modules/react-scripts/bin/react-scripts build && python scripts/rmSourcemaps.py",
-		"analyze": "source-map-explorer 'build/static/js/*.js'",
-		"test": "node node_modules/react-scripts/bin/react-scripts test",
-		"eject": "node node_modules/react-scripts/bin/react-scripts eject"
-	},
-	"eslintConfig": {
-		"extends": "react-app"
-	},
+  "name": "grid_ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@apollo/react-hooks": "^3.1.5",
+    "@babel/preset-react": "^7.10.4",
+    "@emotion/core": "^10.0.28",
+    "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@tippyjs/react": "^4.1.0",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/keyboardjs": "^2.5.0",
+    "@types/react": "^16.9.38",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-modal": "^3.10.6",
+    "@types/react-router": "^5.1.8",
+    "@types/react-router-dom": "^5.1.5",
+    "apollo-boost": "^0.4.9",
+    "findandreplacedomtext": "^0.4.6",
+    "graphql": "^15.1.0",
+    "graphql.macro": "^1.4.2",
+    "historyjs": "^1.8.0-b2",
+    "keyboardjs": "^2.6.3",
+    "materialize-css": "^1.0.0-rc.2",
+    "node-fetch": "^2.6.1",
+    "progressbar.js": "^1.1.0",
+    "rc-pagination": "^2.4.1",
+    "react": "^16.13.1",
+    "react-apollo": "^3.1.5",
+    "react-dom": "^16.13.1",
+    "react-json-view": "^1.19.1",
+    "react-modal": "^3.11.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3",
+    "source-map-explorer": "^2.4.2"
+  },
+  "scripts": {
+    "start": "node node_modules/react-scripts/bin/react-scripts start",
+    "build": "node node_modules/react-scripts/bin/react-scripts build && python scripts/rmSourcemaps.py",
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "test": "node node_modules/react-scripts/bin/react-scripts test --watchAll=false",
+    "eject": "node node_modules/react-scripts/bin/react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
   "homepage": "/ui",
-	"browserslist": {
-		"production": [
-			">0.2%",
-			"not dead",
-			"not op_mini all"
-		],
-		"development": [
-			"last 1 chrome version",
-			"last 1 firefox version",
-			"last 1 safari version"
-		]
-	}
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

javascript/grid-ui/src/App.tsx

@@ -5,6 +5,7 @@ import { HttpLink } from "apollo-link-http";
 import ReactModal from "react-modal";
 import { ApolloProvider } from "react-apollo";
 import { HashRouter as Router, Route, Switch } from "react-router-dom";
+import fetch from 'node-fetch';
 
 // css import order is important
 /* 1 */ import "./css/theme.css";
@@ -21,6 +22,7 @@ import NodeType from "./models/node";
 const cache = new InMemoryCache();
 const link = new HttpLink({
 	uri: GridConfig.serverUri,
+  fetch: fetch
 });
 
 export const client = new ApolloClient({
@@ -38,7 +40,7 @@ declare global {
 	}
 }
 
-ReactModal.setAppElement("#root");
+if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement("#root");
 
 function App() {
 	return (

javascript/grid-ui/src/setupTests.tsx

@@ -0,0 +1,3 @@
+import { configure } from 'enzyme';
+import EnzymeAdapter from 'enzyme-adapter-react-16';
+configure({ adapter: new EnzymeAdapter() });

javascript/grid-ui/src/tests/components/ColorInfo.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import ColorInfo from '../../components/RingSystem/ColorInfo/ColorInfo';
+
+test('ColorInfo with no progress', () => {
+  const colorInfo = shallow(
+      <ColorInfo 
+        color={"#00000"}
+        text={"Random text"}
+        id={"1"}
+        progress={0}
+      />
+    )
+
+  expect(colorInfo.getElements()[0].props.children.props).toEqual({});
+});
+
+test('ColorInfo with progress', () => {
+  const colorInfo = shallow(
+      <ColorInfo 
+        color={"#00000"}
+        text={"Random text"}
+        id={"1"}
+        progress={10}
+      />
+    )
+
+  const items = colorInfo.getElements()[0].props.children.props.children;
+
+  expect(items[0].props.content).toEqual('10%');
+  expect(items[1].props.children).toEqual('Random text')
+});

javascript/grid-ui/src/tests/components/NavBar.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import NavBar from '../../components/NavBar/NavBar';
+
+test('NavBar', () => {
+  const navBar = shallow(<NavBar />)
+
+  const linkProp = navBar.getElements()[0].props.children.props.children[0].props.children[0].props.children.props;
+
+  expect(linkProp.id).toEqual('logo');
+  expect(linkProp.to).toEqual('/home');
+});

javascript/grid-ui/src/tests/components/NodeRow.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import NodeRow  from '../../components/Node/NodeRow';
+import NodeType from '../../models/node';
+
+test('NodeRow', () => {
+  let setFunc = function(state) {
+    console.log(state);
+  }
+
+  const nodes = [
+    {
+      id: '2',
+      capabilities: [],
+      uri: 'https://foo.bar',
+      status: 'UP',
+      maxSession: 2,
+    }
+  ]
+
+  nodes.map((node, i) => {
+    const nodeRow = shallow(<NodeRow node={node} key={node.id} index={1} dispatch={setFunc} />)
+
+    expect(nodeRow.getElements()[0].props.children[1].props.children[1]).toEqual(parseInt(nodes[0].id));
+    expect(nodeRow.getElements()[0].props.children[2].props.children.props.to).toEqual('/node/' + parseInt(nodes[0].id));
+    expect(nodeRow.getElements()[0].props.children[3].props.children.props.status).toEqual(nodes[0].status);
+  });
+});

javascript/grid-ui/src/tests/components/Ring.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Ring from '../../components/RingSystem/Ring/Ring';
+
+test('Ring component', () => {
+  let parentFunc = function() {
+    console.log('Dummy parent func');
+  }
+
+  const ring = shallow(<Ring 
+      radius={2}
+      stroke={1}
+      id={'2'}
+      color={'#00000'}
+      progress={10}
+      offset={1}
+      parentCB={parentFunc}
+      label={'random label'}
+    />)
+
+  const props = ring.getElements()[0].props.children.props.children.props;
+  const circle = props.children[0].props;
+
+  expect(parseInt(props.id)).toEqual(2);
+  expect(parseInt(props.height)).toEqual(4);
+  expect(parseInt(props.width)).toEqual(4);
+});

javascript/grid-ui/src/tests/components/Status.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Status } from '../../components/Status';
+
+test('Status component for UP', () => {
+  const statusComp = shallow(<Status status={'UP'} selected={0}/>);
+
+  expect((statusComp.find('i').getElements()[0]).props.children[1]).toEqual('UP')
+  expect((statusComp.find('div').getElements()[0]).props.children.props.children.props.css.styles.trim().indexOf('#3BEC70')).toBeGreaterThan(0)
+});
+
+test('Status component for UNAVAILABLE', () => {
+  const statusComp = shallow(<Status status={'UNAVAILABLE'} selected={1}/>);
+
+  expect((statusComp.find('i').getElements()[0]).props.children[1]).toEqual('UNAVAILABLE')
+  expect((statusComp.find('div').getElements()[0]).props.children.props.children.props.css.styles.trim().indexOf('#8b8b8b')).toBeGreaterThan(0)
+});
+
+test('Status component for DRAINING', () => {
+  const statusComp = shallow(<Status status={'DRAINING'} selected={2}/>);
+
+  expect((statusComp.find('i').getElements()[0]).props.children[1]).toEqual('DRAINING')
+  expect((statusComp.find('div').getElements()[0]).props.children.props.children.props.css.styles.trim().indexOf('#E40000')).toBeGreaterThan(0)
+});
+
+test('Status component for IDLE', () => {
+  const statusComp = shallow(<Status status={'IDLE'} selected={3}/>);
+
+  expect((statusComp.find('i').getElements()[0]).props.children[1]).toEqual('IDLE')
+  expect((statusComp.find('div').getElements()[0]).props.children.props.children.props.css.styles.trim().indexOf('#E4D400')).toBeGreaterThan(0)
+});