Implementing Unit Tests with QUnit

1. Log into your SAP Business Application Studio.

   1. Perform this step as shown in a previous exercise.

2. Create a new SAP Fiori Freestyle project using the following information:

   SAP Fiori Freestyle Project Information

   Field	Value
   Template	SAP Fiori Application
   Template Type	SAP Fiori
   Template	Basic
   Data source	None
   View name	Main
   Module name	ux402_qunit
   Application title	Unit Tests
   Application namespace	student##.com.sap.training.ux402.qunit
   Description	A Unit-test Application.
   Project folder path	/home/user/projects

   Leave other fields and radio buttons on default value.

   1. Perform this step as shown in a previous exercise.

You want to create a function to display dates in a pretty format.

1. Add a file with the name Formatter.js into the webapp/model folder and implement the Formatter.js file, as shown in the following figure. Then save your work.

   

   Note

   if you prefer, you can upload the Formatter.js file located under Templates folder in the files you got from Github.

   1. Create or upload the formatter.js file as shown in previous exercises.

   2. Write or Explore the code. You can use the following:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011121314151617181920212223242526272829
      
      sap.ui.define([], function() {
       "use strict";
      
       return {
       prettyDate : function (now, time) {
       var date = new Date(time || ""),
       diff = (((new Date(now)).getTime() - date.getTime()) / 1000),
       dayDiff = Math.floor(diff / 86400);
      
       if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 3) {
       return;
       }
      
       var oResult = dayDiff === 0 && (
       diff < 60 && "just now" ||
       diff < 120 && "1 minute ago" ||
       diff < 3600 && Math.floor(diff / 600) + " minutes ago" ||
       diff < 7200 && "1 hour ago" ||
       diff < 86400 && Math.floor(diff / 3600) + "hours ago") ||
       dayDiff === 1 && "Yesterday" ||
       dayDiff < 7 && dayDiff + " days ago" ||
       dayDiff < 31 && Math.ceil(dayDiff / 7) + "weeks ago";
      
       return oResult;
       }
       }
      });
      

1. Add a folder with the name model to the webapp/test/unit folder.

   1. Perform this step as shown in a previous exercise.

2. Add a file with the name Formatter.js to the webapp/test/unit/model folder.

   1. Perform this step as shown in a previous exercise.

3. Define a SAPUI5 module and add the dependency to the Formatter that you created in step 6.

   1. Add the following lines of code:

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      
      sap.ui.define([
       "student##/com/sap/training/ux402/qunit/ux402_qunit/model/Formatter"
      ], function(Formatter) {
       "use strict";
      });

4. Add a QUnit module to the newly created SAPUI5 module. Use the QUnit.module function. As the module description, use Formatter and use the beforeEach hook to create a _formatter member variable with reference to the Formatter.

   1. Add the following lines of code after "use strict"; statement:

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      
      QUnit.module("Formatter", {
       beforeEach: function () {
       this._formatter = Formatter;
       }
      });

5. In the Formatter.js file, which is located in the webapp/test/unit/model folder, define a test case with the QUnit.test function. Use Test the pretty date implementation as the test case description. In the assigned function, create a variable with the name now. Assign the value 2008/01/28 22:25:00 to the now variable. Use the equal function of the assertion object to check if the date in the now variable is equal to the expected values in the following table. Print out the mentioned assertion messages.

   Hint

   You will use the prettyDate function of the Formatter as first argument of the equal function and the listed assertion messages as the second argument of the equal function.

   Expected Values and Corresponding Assertion Messages

   Expected Value	Assertion Message
   2008/01/28 22:25:00	just now
   2008/01/28 22:24:00	1 minute ago
   2008/01/28 22:22:00	3 minute ago
   2008/01/28 21:25:00	1 hour ago
   2008/01/27 22:25:00	Yesterday
   2008/01/26 22:25:00	2 days ago
   2007/01/26 22:25:00	undefined

   1. Add the following lines of code after the QUnit.module function call:

      Code Snippet

      Copy codeSwitch to dark mode

      12345678910111213
      
      QUnit.test("Test the pretty date implementation", function(assert) {
      
       var now= "2008/01/28 22:25:00";
       assert.equal(this._formatter.prettyDate(now,"2008/01/28 22:25:00" ), "just now");
       assert.equal(this._formatter.prettyDate(now,"2008/01/28 22:24:00" ), "1 minute ago");
       assert.equal(this._formatter.prettyDate(now,"2008/01/28 22:22:00" ), "3 minutes ago");
       assert.equal(this._formatter.prettyDate(now,"2008/01/28 21:25:00" ), "1 hour ago");
       assert.equal(this._formatter.prettyDate(now,"2008/01/27 22:25:00" ), "Yesterday");
       assert.equal(this._formatter.prettyDate(now,"2008/01/26 22:25:00" ), "2 days ago");
       assert.equal(this._formatter.prettyDate(now,"2007/01/26 22:25:00" ), undefined); 
      
      });

   2. Save your work. Your Formatter.js file should now look like the following:

      

1. Open the AllTests.js file and replace the given namespace with student##/com/sap/training/ux402/qunit/ux402_qunit/test/unit/controller/Main.controller and student##/com/sap/training/ux402/qunit/ux402_qunit/test/unit/model/Formatter.

   1. Open the AllTests.js file located in the unit folder of your project.

   2. Replace the given code with the following lines of code:

      Code Snippet

      Copy codeSwitch to dark mode

      12345678
      
      sap.ui.define([
       "student##/com/sap/training/ux402/qunit/ux402_qunit/test/unit/controller/Main.controller",
       "student##/com/sap/training/ux402/qunit/ux402_qunit/test/unit/model/Formatter"
      ], function () {
       "use strict";
      });
      

2. Open the webapp/test/unit/controller/Main.controller.js file and adjust the namespaces. Replace the given namespace with student##/com/sap/training/ux402/qunit/ux402_qunit/controller/Main.controller.

3. Open the webapp/test/unit/unitTests.qunit.js file and adjust the actual namespace. Replace the given namespace with student##/com/sap/training/ux402/qunit/ux402_qunit/test/unit/AllTests.

4. Open the webapp/test/unit/unitTests.qunit.html file and adjust the resource roots configuration.

   1. Locate the data-sap-ui-resourceroots value allocation (probably at around line 9 – 15). Replace the value allocation with following:'{"student##.com.sap.training.ux402.qunit/ux402_qunit": "../../"}'

1. Run your unit-tests and check the result.

   1. Open the context menu on your project folder ux402_qunit.

   2. Select Preview Application.

   3. Choose the option unit-tests fiori run –open text/unit/unitTests.qunit.html.