DEV Community

Cover image for JavaScript Tests for a Java Application
Jan Mewes
Jan Mewes

Posted on • Edited on

1

JavaScript Tests for a Java Application

K.S.C.H. Workflows is a prototype for a custom developed workflow management system for the Kirpal Sagar Charitable Hospital. It is a Java based web application which renders its HTML pages on the server-side with the help of Apache Wicket. However, the browser's language for user-convenience features is JavaScript. This blog post describes a Java developer's attempt to add reasonably well tested JavaScript code to the project.

Constructive feedback is welcome:

Feature description

The first non-trivial JavaScript code for this project will be to calculate the estimated date of birth, if only the patient's age can be provided during the registration. Also the age will be calculated and displayed automatically after the date of birth has been entered.

Frontend code structure

Wicket applies a component-oriented strategy for the creation of the HTML pages. For each HTML file there is a corresponding Java file with the same name. Spring Boot makes sure that everything which is in the directory src/main/resources/static is available for the application during runtime.

The first HTML component with its own JavaScript logic is PatientFormFields.html in the directory ksch/registration. Its JavaScript functions are defined in the file PatientFormFields.js which resides next to it in the same directory.

function calculateAge(dateOfBirth, today = new Date()) {
var lifeTimeInMillis = today.getTime() - dateOfBirth.getTime();
return Math.abs(new Date(lifeTimeInMillis).getUTCFullYear() - YEAR_EPOCH);
}
function getDateOfBirth() {
var dateOfBirthValue = document.getElementById(DATE_OF_BIRTH_ID).value
if (!new RegExp(DD_MM_YYYY).test(dateOfBirthValue)) {
console.log("[Warning] Cannot parse date from: " + dateOfBirthValue);
return null;
}
var dateOfBirthElements = dateOfBirthValue.split("-");
var day = dateOfBirthElements[0];
var month = dateOfBirthElements[1];
var year = dateOfBirthElements[2];
return new Date(year, month - 1, day);
}

QUnit and Grunt

The tests are implemented with the QUnit framework, in the file PatientFormFields.test.js which also resides in the directory ksch/registration. Further there is a file PatientFormFields.test.html which includes all the JavaScript code and defines the web elements to be used for the tests. When this page is opened in the browser, the tests are executed and evaluated.

QUnit.test( "Should calculate age from date of birth", function( assert ) {
assert.equal(calculateAge(new Date("2000-01-01"), new Date("2019-01-01")), 19);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PatientFormFields Test</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.2.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div style="display: none;">
<input id="dateOfBirth" type="text">
<input id="age" type="text">
</div>
<script src="https://code.jquery.com/qunit/qunit-2.9.2.js"></script>
<script src="PatientFormFields.js"></script>
<script src="PatientFormFields.test.js"></script>
</body>
</html>

In order to be able to call the JavaScript tests from the command-line and during the TravisCI build, the JavaScript Task Runner Grunt is being used, along with a QUnit plugin. The configuration of the test files to be executed is done in the Gruntfile.js file. When grunt qunit is invoked, a headless Chromium browser is started and executes all the JavaScript tests in the project.

module.exports = function(grunt) {
grunt.initConfig({
qunit: {
all: ['**/*.test.html']
}
});
grunt.loadNpmTasks('grunt-contrib-qunit');
};
view raw Gruntfile.js hosted with ❤ by GitHub
{
"main": "Gruntfile.js",
"devDependencies": {
"grunt-contrib-qunit": "latest",
"grunt": "latest"
}
}
view raw package.json hosted with ❤ by GitHub
os: linux
node_js: 9
before_install:
- npm install -g grunt-cli
script:
- cd user-interface/ && npm install --save-dev && grunt qunit
view raw .travis.yml hosted with ❤ by GitHub

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)