Testing Framework

Blooming Leaf Testing Environment Overview

BloomingLeaf is a project that is built upon previous work in GrowingLeaf : https://github.com/amgrubb/GrowingLeaf and there was not extensive testing framework built on the project. Since Version 1.0 of BloomingLeaf, we have included testing environment to include extensive tests for BloomingLeaf features. Our testing environment is built on top of Mocha Testing Framework : https://mochajs.org/ , to run functional and module tests. See Figure 1.

Our testing environment runs on html page with visualization that describes each test and the status of each test runs.

Figure 1

As we can see, the example test page runs two examples of Cycle Detection feature, one with a loop detected and another one with no loop detected. Our testing code will test to check if the returned value of cycle detection function returns correct value.

Detail specification of our testing environment

Our testing code resides in /leaf-ui/test directory and each Javascript file in this directory is referenced by testRunner.html file under /leaf-ui. In our test, we will load json file that represents different modelling scheme and for each model representation, we test each of our main features to verify the behaviour of our features are running correctly.

BloomingLeaf Environment

We first layout overview of BloomingLeaf environment structure. Our BloomingLeaf environment is mainly divided by front-end and backend codes. Front-end codes are in \leaf-ui directory and backend codes are in \leaf-analysis directory. Following is the overall file structure diagram of BloomingLeaf Project. All the testing codes are under \leaf-ui directory, therefore we will focus the file hierarchy for \leaf-ui directory.

BloomingLeaf
│   README.md
│     
│
└───leaf-ui
│   │   analysis.html
│   │   index.html
│   │   testRunner.html
|   |   package.json
|   |   
│   └─── node_modules
│   |
│   |    
│   └─── js   
│   |    backendComm.js
|   |    jquery.min.js
|   |    |    
|   |    |
|   |    └─── object
|   |
|   └─── scripts
|   |    analysis.js
|   |    main.js
|   |    objects.js
|   |
|   └─── rappid-extensions
|   |
|   |
|   └─── blooming_test
|   |    testScript.js
|   |
|   |
└───leaf-analysis

index.html is our main front-end html file for BloomingLeaf and most of Goal Modelling manipulations are performed by main.js. The testing framework has its own front-end html file that looks like Figure 1 and all the testing scripts are under \blooming_test directory.

Steps to set-up Testing Environment

1. Install NodeJS under \leaf-ui directory:

   a. Install npm: https://docs.npmjs.com/getting-started/installing-node (include Homebrew https://docs.brew.sh/Installation.html#2).

   b. In terminal run npm init.

2. Once NodeJS is installed in the directory, install Mocha JS testing framework under \leaf-ui directory, by running npm install mocha in terminal. For detailed steps to install Mocha JS, see https://mochajs.org/.

3. Once Mocha JS is installed, install chai framework under \leaf-ui directory by running npm install chai in terminal. For detailed steps to install chai framework, see http://chaijs.com/guide/installation/.

4. Once Mocha JS and Chai are installed, everything is set to go and to add more test-cases, it needs to be added in testScript.js.

For ease of testing, if one wants to test if one of the feature is behaving correctly, they should do so by first exporting Goal Modelling as json format from BloomingLeaf(Figure 2)

Figure 2 : Click on Save button to export the Goal Modelling in json

5. Once the json file for Goal Model has been exported, save the file under \blooming_test. To access json file(call it cycle_loop1.json), first one must load the json file asynchronously. To do so, one should first load json file by self-invoking functions i.e.

var source = (function() {
  var sourceData;

  function getData(done) {
    if(sourceData){
      done(sourceData);
    } else {
      $.getJSON("./blooming_test/cycle_loop1.json", function(data) {
        sourceData = data;
        done(data);
      });
    }
  }
  return {
    getData: getData
  };
})();

Following example of code will first load the json file before executing other codes. Once json file is loaded, one can write a test case. For the sake of the example, we are going to expect that cycle_loop1.json test Cycle Detection feature and want to ensure that Goal Model contains cycle. Following is snippet of how the code looks like :

describe('Cycle Check 1', function() {
  it('Loop 1', function () {
   var isCycle = cycleCheck(links,nodes);
   .
   .
   .
   expect.(isCycle).(true);
})

describe in Mocha JS is way for describing what the test is about and it identifies each individual sub-tests. There are different flavours of assertion, for more information please refer to here : http://chaijs.com/guide/styles/#differences

Running the Testing Environment

1. Open Terminal and navigate to the leaf-ui folder (e.g., BloomingLeaf/leaf-ui).
2. Run php -S localhost:8080. Leave terminal window running.
3. Open Chrome and enter http://localhost:8080/testRunner.html in address bar.
4. See test results.
5. `Press Ctrl-C' in terminal to stop local host.