What are the use of the plugins which are present in the developer page from where we open the instance QUnit Testing layer .do pages , QUnit - Javascript unit testing ,QUnit Elements Test and QUnit Test plugin

[suprakash]

What are the use of the plugins which are present in the developer page from where we open the instance   under the action we get ACTIVATE PLUGIN under that       QUnit Testing layer .do pages , QUnit - Javascript unit testing   ,QUnit Elements Test and   QUnit Test plugin

[sergiu_panaite]

What is Qunit?

QUnit is a JavaScript Unit Testing framework. It is capable of testing any generic JavaScript code and is also used by jQuery UI projects.

What is Glide QUnit plugin?

This plugin provides all necessary libraries and utility methods that are needed for creating and running the test cases. The plugin loads the target page(that is being tested) in an iframe and runs the tests against it.

When to write QUnit Tests

Use

        - Use when writing unit tests for client-side JavaScript code

        - Use to test functionality that lives in the lifecycle of one page

        - Use for functionality that resides on the page

QUnit site: https://qunitjs.com/

[suprakash]

Thanks Sergiu ,

I cannot understand how to use them. Like ATF in Istanbul after we activate the plugin we can see the module where we write test case and run the test.

But after activating this plugins i am not getting any thing.

Can you please help me

[sergiu_panaite · Accepted solution]

1. Create a qunit test scripts as a UI Scripts in our platform i.e under "System UI > UI Scripts":

Sample qunit test UI Script "sample_qunit"

test('Test new incident state field', function() {
   expect(1);

   //incident state is new
   var expected_value = 1; 

   //read incident state value from incident form
   var incident_state = QUIWindow.$("incident.state").value;

   equal(incident_state, expected_value, "Incident state is new" );
});


asyncTest('Test incident form save and verify opened date', function() {
   expect(1);
   //clear open date
   QUIWindow.$("incident.opened_at").value = "";

   var today = new Date();

   var date = today.getDate() - 1;
   var date = (date < 10) ? "0" + date :   date; //convert date to two digits value 

   var month = today.getMonth() + 1;
   month = (month < 10 ) ? "0" + month : month; //convert month to two digits value 

   var expected_date_str = today.getFullYear() + "-" + month + "-" + date +" 12:00:00";

   //open datepicker
   QUIWindow.$("incident.opened_at.ui_policy_sensitive").click();

   //select yesterday date and set time to 12:00:00
   QUIWindow.$$(".calCurrentDate")[0].previousSibling.children[0].click();
   QUIWindow.$$("#GwtDateTimePicker_hh")[0].value = "12";
   QUIWindow.$$("#GwtDateTimePicker_mm")[0].value = "00";
   QUIWindow.$$("#GwtDateTimePicker_ss")[0].value = "00";
   QUIWindow.$$("#GwtDateTimePicker_ok")[0].click()

   //save incident and verify date after form save in callback function 
   formSaveandAssert(function() {
   start(); 
               var date_after_save = QUIWindow.$("incident.opened_at").value;
               equal(date_after_save, expected_date_str, "Incident opened date changed to yesterday.");
   });

});


asyncTest('Test auto complete', function() {

   //init
   var element = QUIWindow.gel("sys_display.incident.caller_id");
   jQuery(element).val("");//clear the field value 

   //Step 1:
   //override AJAXCompleter.showDropDown function to fire 
   //ajax_completer_drop_down_visible custom event when auto complete dropdown visible
   var showDropDown = QUIWindow.AJAXCompleter.prototype.showDropDown;
   QUIWindow.AJAXCompleter.prototype.showDropDown = function () {
   showDropDown.call(this);
   QUIWindow.CustomEvent.fireTop("ajax_completer_drop_down_visible", this);
   }

   //Step 2:
   //event listener for auto complete drop-down visible
   CustomEvent.observe("ajax_completer_drop_down_visible", function(completer) {
   CustomEvent.unAll('ajax_completer_drop_down_visible');//for safer remove event watching
   start();
   var dropdown = QUIWindow.gel("AC.incident.caller_id1");

   var rows = jQuery(dropdown).find("span");


   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );
   jQuery(element).simulate("focus").simulate( "keydown", { keyCode: 40 } );

   jQuery(element).simulate("focus").simulate( "keypress", { keyCode: 13 } );

   equal(jQuery(element).val(), "Bertie Luby","Bertie Luby selected from dropdown");
   });


   //search for "b"
   setTimeout(function() {
   jQuery(element).val("b");
   jQuery(element).simulate("keypress");
   }, 100);

});

2.   Qunit tests can be run directly on the browser by accessing a URL.

Here's a sample URL: http://<yourinstance>.service-now.com/test.qui?sysparm_qui_url=/incident.do&sysparm_qui_uiscript=sample_qunit

Note the following about the URI:

- should end with qui

Takes 2 parameters:

- sysparm_qui_url: URI of the test page, in this example it is new incident form

- sysparm_qui_uiscript: Name of the UI Script that contains the test code, in this example sample_qunit

3. What happens when a Qunit test is executed:

- UI Script "sample_qunit" (sysparm_qui_uiscript) is included to test.qui

- /incident.do (sysparm_qui_url) is loaded in the iframe within the Glide QUnit plugin page(test.qui)

- Reference to the iframe window is assigned to global JS variable called QUIWindow which is available for use in the test code for reading and setting form elements.

- Test results will be displayed at top of the page

4. Refer to "QUnit Elements Test" (com.glide.ui.qui.elements) for more examples