Using Jasmine Unit Testing with front-end JavaScript applications, you can write tests that can interact with the DOM to set up the input, run the test, and verify the results by querying the relevant HTML elements.
For example, the following code snippet will setup the needed DOM elements, call the function that will update the DOM using updateResult() function, then verify the results by reading the content of the inner text:
function updateResult(result) {
let element = document.getElementById('result');
if (element) {
element.innerText = result;
}
}
describe('updateResult()', function () {
beforeAll(function () {
const element = document.createElement('div');
element.setAttribute('id', 'result');
document.body.appendChild(element);
this.element = element;
});
afterAll(function () {
document.body.removeChild(this.element);
});
it('add result to the dom element', function () {
updateResult('5'); //
expect(this.element.innerText).toBe('5');
});
});
note: the above is a sample based on "leelanarasimha" simple-calculator tutorial.
Now consider a more complex scenario where you need to perform a similar test, however, the test requires complex objects to be available and a relatively large number of nested forms to be visible and filled. In a typical situation, the test is a small one, but in order to reach the point in time to run the test, you need to execute about 5 to 7 steps with complex operations which are outside the scope of the intended function, but that function depends on executing several steps so that you have all needed objects and data structures which are a dependency for the function to be tested.
I am finding it hard to wrap my head around how to use Jasmine Unit testing to write and execute tests for such a complex scenario.
Following is a simple scenario load the Jasmine Spec Runner HTML with the simple JavaScript to run the test engine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v4.4.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine.css">
<script src="lib/jasmine.js"></script>
<script src="lib/jasmine-html.js"></script>
<script src="lib/boot0.js"></script>
<!-- optional: include a file here that configures the Jasmine env -->
<script src="lib/boot1.js"></script>
<!-- include source files here... -->
<script src="src/calculator.js"></script>
<!-- include spec files here... -->
<script src="spec/calculator.spec.js"></script>
</head>
<body>
</body>
</html>
// calculator.js
let add = (a,b)=>a+b;
//calculator.spec.js
/// <reference path="../src/calculator.js" />
describe("calculator.js", ()=>{
it("should add two numbers", ()=>{
expect(add(1,3)).toBe(4)
})
});
In a typical workflow platform similar to Activity or Camunda, you develop complex forms and attach JavaScipt to add logic to control the Data Entry and perform the needed calculations and processing.
The main problem is that there is a large number of huge javascript programs that were not written with unit testing in mind. In a given scenario, there are 2 or 3 JavaScript functions that will interact with the HTML Form while inputting values, as a result, some REST APIs are invoked on the input event, and data is updated. Then, when clicking a button, another JavaSript function will run to perform the data summarization logic by reading the form data. The form fields are bound to variables that can be accessed using the supplied JavaScript functions to read form data (bound variables). The UI may have multiple nested subforms with repeating instances (data grid). I am thinking it is near impossibility to write JavaScript code to prepare the needed input so that the test will run. So, I am thinking of some alternatives.
Alternatives to implement the setup for the tests:
Method A:
- Write the tests assuming all the needed objects and DOM elements are available.
- Go through the steps in the application to reach the point in time where the test can be executed.
- Load or activate the Jasmine Unit testing spec runner which with the relevant unit tests
Method B:
- Go through the steps in the application to reach the point in time where the test can be executed.
- Extract the needed HTML with the forms and save them using static HTML
- Extract the bound data of the forms (it is just a JSON value)
- Write the test in such a way as to use the saved HTML and JSON to prepare the setup to run the test.
Method C:
...
...
What I am looking for is the following:
-
How to activate or load Jasmine from the console to kick off the test when it is ready to do so?
-
Is it possible to save the HTML Forms (the UI in general) and reload it back during the test and how? I can save the form data model in a JSON file and load it during the test.
-
Any other feedback on the above will be appreciated.
from Using Jasmine Unit Testing within a complex workflow based platform similar to Camunda or activiti
No comments:
Post a Comment