Add testing to react/dashboard

.travis.yml

@@ -2,21 +2,25 @@ language: scala
 
 jdk: openjdk8
 
-node_js:
-  - 14
-
 scala:
   - 2.13.2
 
 before_install:
+  - curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
+  - export NVM_DIR="$HOME/.nvm"
+  - nvm install node
+  - nvm use node
+  - nvm alias default node
   - npm install
 script:
   - sbt ++$TRAVIS_SCALA_VERSION clean coverage test coverageReport
+  - bash <(curl -s https://codecov.io/bash) -cF scala
+  - npm test -- --coverage --collectCoverageFrom=src/main/resources/dashboard/*.jsx
+  - bash <(curl -s https://codecov.io/bash) -cF javascript
   - sbt assembly
   - sbt docker:publishLocal
 
 after_success:
-  - bash <(curl -s https://codecov.io/bash)
   - docker build -t docker.pkg.github.com/amanjpro/greenish/greenish:$TRAVIS_TAG target/docker/stage
   - echo $GITHUB_RELEASES_TOKEN | docker login https://docker.pkg.github.com -u amanjpro --password-stdin
   - docker push docker.pkg.github.com/amanjpro/greenish/greenish:$TRAVIS_TAG

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: ["@babel/plugin-proposal-class-properties"]
+};

jest.config.js

@@ -0,0 +1,24 @@
+const {defaults} = require('jest-config');
+
+module.exports = {
+  verbose: true,
+  collectCoverage: true,
+  coverageReporters: ["json", "html"],
+  transform: {
+    "^.+\\.jsx?$": "babel-jest"
+  },
+  roots: [
+    "<rootDir>",
+     "<rootDir>src/main/resources/dashboard"
+  ],
+  moduleDirectories: [
+    "node_modules",
+  ],
+  "moduleNameMapper": {
+     "^./(.*)_container.js$": "<rootDir>src/main/resources/dashboard/$1_container.jsx",
+     "^./resources/(.*).js$": "<rootDir>/src/test/resources/json-samples/$1.js"
+  },
+  "setupFilesAfterEnv": [
+    "<rootDir>/jest.setup.js"
+  ]
+};

jest.setup.js

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

package.json

@@ -2,7 +2,18 @@
   "name": "greenish",
   "version": "1.4.0-SNAPSHOT",
   "devDependencies": {
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
     "babel-cli": "^6.0.0",
-    "babel-preset-react-app": "^3.0.0"
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-react-app": "^3.0.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "jest": "^26.1.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "scripts": {
+    "test": "jest"
   }
 }

src/main/resources/dashboard/group_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 class GroupContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -68,3 +70,5 @@ class GroupContainer extends React.Component {
     }
   }
 }
+
+export default VersionContainer;

src/main/resources/dashboard/job_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 class JobContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -71,3 +73,5 @@ class JobContainer extends React.Component {
     }
   }
 }
+
+export default VersionContainer;

src/main/resources/dashboard/main_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const e = React.createElement;
 
 class MainContainer extends React.Component {
@@ -81,3 +83,5 @@ class MainContainer extends React.Component {
 
 const domContainer = document.querySelector('#main_container');
 ReactDOM.render(e(MainContainer), domContainer);
+
+export default VersionContainer;

src/main/resources/dashboard/state_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 class StateContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -60,3 +62,5 @@ class StateContainer extends React.Component {
     }
   }
 }
+
+export default VersionContainer;

src/main/resources/dashboard/summary_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 class SummaryContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -105,3 +107,5 @@ class SummaryContainer extends React.Component {
     }
   }
 }
+
+export default VersionContainer;

src/main/resources/dashboard/time_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 class TimeContainer extends React.Component {
   intervalID
   constructor(props) {
@@ -30,3 +32,5 @@ class TimeContainer extends React.Component {
     )
   }
 }
+
+export default VersionContainer;

src/main/resources/dashboard/version_container.jsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 class VersionContainer extends React.Component {
   constructor(props) {
     super(props);
@@ -51,3 +53,5 @@ class VersionContainer extends React.Component {
     }
   }
 }
+
+export default VersionContainer;

src/test/js/version_container.test.js

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import VersionContainer from './version_container.js';
+
+import { testObject } from './resources/system.js';
+
+describe('VersionContainer', () => {
+  it('fetches version from server when server returns a successful response', done => {
+    const mockSuccessResponse = {};
+    const mockJsonPromise = Promise.resolve(testObject);
+    const mockFetchPromise = Promise.resolve({
+      json: () => mockJsonPromise,
+    });
+    global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+
+    const wrapper = shallow(<VersionContainer/>);
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('/system');
+
+    process.nextTick(() => {
+      expect(wrapper.state()).toEqual({
+        "error": null,
+        "isLoaded": true,
+        "version": "1.4.0-SNAPSHOT"
+      });
+
+      var rendered = wrapper.find('em').render();
+      expect(rendered.text()).toContain("1.4.0-SNAPSHOT")
+
+      global.fetch.mockClear();
+      delete global.fetch;
+      done();
+    });
+  });
+
+  it('shows error, when a bad json is returned from API', done => {
+    const mockSuccessResponse = {};
+    const mockJsonPromise = Promise.reject({"nah": "bad"});
+    const mockFetchPromise = Promise.resolve({
+      json: () => mockJsonPromise,
+    });
+    global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+
+    const wrapper = shallow(<VersionContainer/>);
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('/system');
+
+    process.nextTick(() => {
+      expect(wrapper.state()).toEqual({
+        "error": {"nah": "bad"},
+        "isLoaded": true,
+        "version": null,
+      });
+
+      var rendered = wrapper.find('em').render();
+      expect(rendered.text()).toContain("Error")
+
+
+      global.fetch.mockClear();
+      delete global.fetch;
+      done();
+    });
+  });
+
+  it('shows loading, before loading is done', done => {
+    const mockSuccessResponse = {};
+    const mockFetchPromise = new Promise(resolve => setTimeout(resolve, 1000))
+    global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+
+    const wrapper = shallow(<VersionContainer/>);
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(global.fetch).toHaveBeenCalledWith('/system');
+
+    process.nextTick(() => {
+      expect(wrapper.state()).toEqual({
+        "error": null,
+        "isLoaded": false,
+        "version": null,
+      });
+
+      var rendered = wrapper.find('em').render();
+      expect(rendered.text()).toContain("Loading")
+
+
+      global.fetch.mockClear();
+      delete global.fetch;
+      done();
+    });
+  });
+});