[grid] Adding a few unit tests (UI)

javascript/grid-ui/src/models/node-info.ts

@@ -18,9 +18,7 @@ interface NodeInfo {
   version: string;
   /** Grid Node OS information */
   osInfo: OsInfo;
-  /** Node stereotypes.
-   * Not an ideal type, but it simplifies the parsing.
-   * There is room for improvement here. */
+  /** Node stereotypes. */
   slotStereotypes: StereotypeInfo[];
 }
 

javascript/grid-ui/src/setupTests.tsx

@@ -1,3 +1 @@
-import { configure } from 'enzyme';
-import EnzymeAdapter from 'enzyme-adapter-react-16';
-configure({ adapter: new EnzymeAdapter() });
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import Error from "../../components/Error/Error";
+
+it('renders error message', function () {
+  const message = "Sample heading error message";
+  const errorMessage = "An error happening while rendering the app"
+  render(<Error message={message} errorMessage={errorMessage}/>);
+  expect(screen.getByText(message)).toBeInTheDocument();
+  expect(screen.getByText(errorMessage)).toBeInTheDocument();
+});

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import Loading from "../../components/Loading/Loading";
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Loading/>, div);
+});

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

@@ -1,12 +1,61 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
 import NavBar from '../../components/NavBar/NavBar';
+import {createMemoryHistory} from 'history';
+import {Router} from 'react-router-dom';
 
-test('NavBar', () => {
-  const navBar = shallow(<NavBar />)
+it('renders menu options names', () => {
+  const history = createMemoryHistory();
+  render(
+    <Router history={history}>
+      <NavBar/>
+    </Router>
+  );
+  expect(screen.getByText("Sessions")).toBeInTheDocument();
+  expect(screen.getByText("Overview")).toBeInTheDocument();
+  expect(screen.getByText("Help")).toBeInTheDocument();
+});
+
+it('overall concurrency is not rendered on root path with a single node', () => {
+  const history = createMemoryHistory();
+  history.push("/");
+  render(
+    <Router history={history}>
+      <NavBar open={true} maxSession={0} sessionCount={0} nodeCount={1}/>
+    </Router>
+  );
+  expect(screen.queryByTestId('overall-concurrency')).not.toBeInTheDocument();
+});
 
-  const linkProp = navBar.getElements()[0].props.children.props.children[0].props.children[0].props.children.props;
+it('overall concurrency is rendered on root path with more than one node', () => {
+  const history = createMemoryHistory();
+  history.push("/");
+  render(
+    <Router history={history}>
+      <NavBar open={true} maxSession={0} sessionCount={0} nodeCount={2}/>
+    </Router>
+  );
+  expect(screen.getByTestId('overall-concurrency')).toBeInTheDocument();
+});
+
+it('overall concurrency is rendered on root path with more than one node', () => {
+  const history = createMemoryHistory();
+  history.push("/");
+  render(
+    <Router history={history}>
+      <NavBar open={true} maxSession={0} sessionCount={0} nodeCount={2}/>
+    </Router>
+  );
+  expect(screen.getByTestId('overall-concurrency')).toBeInTheDocument();
+});
 
-  expect(linkProp.id).toEqual('logo');
-  expect(linkProp.to).toEqual('/home');
+it('overall concurrency is rendered on a path different than and one node', () => {
+  const history = createMemoryHistory();
+  history.push("/sessions");
+  render(
+    <Router history={history}>
+      <NavBar open={true} maxSession={0} sessionCount={0} nodeCount={1}/>
+    </Router>
+  );
+  expect(screen.getByTestId('overall-concurrency')).toBeInTheDocument();
 });

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import NoData from "../../components/NoData/NoData";
+
+it('renders sample message', function () {
+  const message = "Sample heading error message showing no data was found";
+  render(<NoData message={message}/>);
+  expect(screen.getByText(message)).toBeInTheDocument();
+});

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Node from "../../components/Node/Node";
+import NodeInfo from "../../models/node-info";
+import OsInfo from "../../models/os-info";
+import StereotypeInfo from "../../models/stereotype-info";
+import {render, screen} from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
+
+const osInfo: OsInfo = {
+  name: 'Mac OS X',
+  version: '10.16',
+  arch: 'x86_64',
+}
+
+const slotStereotype: StereotypeInfo = {
+  browserName: 'chrome',
+  browserVersion: 'v. 88',
+  slotCount: 12,
+  rawData: [],
+}
+
+const node: NodeInfo = {
+  uri: 'http://192.168.1.7:4444',
+  id: '9e92a45a-0de3-4424-824a-ff7b6aa57b16',
+  status: 'UP',
+  maxSession: 12,
+  slotCount: 50,
+  version: '4.0.0-beta-1',
+  osInfo: osInfo,
+  sessionCount: 2,
+  slotStereotypes: [slotStereotype],
+};
+
+it('renders basic node information', () => {
+  render(<Node node={node}/>);
+  expect(screen.getByText(node.uri)).toBeInTheDocument();
+  expect(screen.getByText(node.version)).toBeInTheDocument();
+  expect(screen.getByText(`Sessions: ${node.sessionCount}`)).toBeInTheDocument();
+  expect(screen.getByText(`Max. Concurrency: ${node.maxSession}`)).toBeInTheDocument();
+});
+
+it('renders detailed node information', () => {
+  render(<Node node={node}/>);
+  const leftClick = {button: 0};
+  userEvent.click(screen.getByRole('button'), leftClick)
+  expect(screen.getByText(`Node Id: ${node.id}`)).toBeInTheDocument();
+  expect(screen.getByText(`Total slots: ${node.slotCount}`)).toBeInTheDocument();
+  expect(screen.getByText(`OS Arch: ${node.osInfo.arch}`)).toBeInTheDocument();
+  expect(screen.getByText(`OS Name: ${node.osInfo.name}`)).toBeInTheDocument();
+  expect(screen.getByText(`OS Version: ${node.osInfo.version}`)).toBeInTheDocument();
+});