Install Composer + Twig for Windows 8

I use Wamp server and I had a problem with installing Composer. I have found this solution:
You should enable php_openssl in the Wamp menu. After this you could open the php.ini and set ON the allow_url_fopen. So. After this restart the Wamp Server and open the command line:

 php -r "eval('?>'.file_get_contents('http://getcomposer.org/installer'));"  

Then you should enable php_phar extension in the Wamp Server menu.

After the Wamp restart you should create a composer.json file:

 {  
   "require": {  
     "twig/twig": "1.*"  
   }  
 }  

…and install the Twig:

 php composer.phar install  

I hope it will work… 🙂

Posted in Uncategorized | Tagged , , | 2 Comments

Qunit —-> testing Ajax functions

If you need to test Ajax request you should do in this way. First you ought to create a HTML file It will be the test datafile therefore it contain only simple JSON

data.data/test_ajax_data.html

 {"data":"refreshed","val":"1"}  

Then you can write your test:

 var JSON_obj_val_integer = 0;  
 remoteGetInteger = function ( completedHandler) {  
           var post = $.ajax({  
                url: 'data/test_ajax_data.html',  
                type: "post",  
                dataType: "json",  
                data: { refresh: "1" },  
                success: function(JSON_obj) {  
                     $.each(JSON_obj,function() {  
                               JSON_obj_val_integer = JSON_obj.val;  
                      });  
                 }  
            });  
           post.done(function (result) {  
                completedHandler(JSON_obj_val_integer);  
           });  
           post.fail(function () {  
                completedHandler('error');  
           });  
 };  
 test( 'JSON_obj_val_String value = refreshed', function() {       
      var result = '';  
      stop(800);  
      remoteGetString( function (r) {  
           result = r;  
           equal(result, 'refreshed', "check Ajax String");  
           start();  
      });  
 });  

Thats it.

Posted in Uncategorized | Tagged , | Leave a comment

Client-side JavaScript unit testing with qunit

I think the client-side JavaScript unit testing is as important as server-side unit testing. There are lot of programmers whom don’t think the the client-side unit testing is important. I don’t understand the reason…because client-side software developing and server-side developing are the same in this respect. The unit testing as well as the TDD is not our enemy… 🙂 I guess  we need to do unit testing server and client side, too.
Let me introduce the qunit because it is easy to use but I use several client-side unit testing tool:

jsUnit
Test Runner for JavaScript: Karma
BusterJs (client and server-side (Node.js) unit testing tool)

So. I did one simple example. I did a JavaScript class. I used the qunit, jQuery, jQuery UI.

Step 1.

index.html

 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <title>Main Page</title>  
  <link rel="stylesheet" href="qunit-1.11.0.css">  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  
 </head>  
 <body>  
  <input id="btnShowBigNumber" type="button" value="Show big number"/>  
  <input id="btnShowAjaxResponse" type="button" value="Show Ajax response"/>  
  <input id="btnShowDialog" type="button" value="Show dialog"/>  

  <script src="jquery-1.9.1.min.js"></script>  
  <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>  
  <script src="MAIN_TEST_APP.mainMonsterClass.js"></script>  
  <script src="main.js"></script>  
 </html>  

Step 2.

MAIN_TEST_APP.mainMonsterClass.js:

The class name is a little bit strange: “Monster” 🙂 and it has simple namespace because I think using namespaces is cool and useful. So, the code:

 /**   
  * Test Namespace, Test Class  
  * @author Mr. John Nobody  
  * @namespace Namespace for MAIN_TEST_APP classes and functions.   
  **/  
 var MAIN_TEST_APP = MAIN_TEST_APP || {};  

 MAIN_TEST_APP.mainMonsterClass = {  
   mainMethodInteger: function() {  
     var bigSum = (1 + 5 * (0));  
     return bigSum;  
   },  
   mainMethodJSONAjax: function() {  
     var ajax_result;  

     $.ajax({  
       url: "main.php",  
       type: "POST",  
       dataType: "json",  
       async: false,  
       success: function(response) {  
         $.each(response, function(key, item) {  
           if (key === 'value' && item === "ok")  
             ajax_result = item;  
         });  
       },  
       error: function(error) {  
         console.log("Error:");  
         console.log(error);  
       }  
     });  
     return ajax_result;  
   },  
   mainMethodJQUIDialog: function() {  
     var tag = $("<div></div>");  
     var dialog_content = "<p>Hello World Dialog</p>";  
     tag.html(dialog_content).dialog({modal: true}).dialog('open');  
   }  
 };  

Step 3.
main.php

The server-side PHP code is very complicated. :–)

 <?php  
 echo json_encode( array("value"=>"ok") );  
 exit;  

Ok. Let’s get to the testing.

Step 1.

test.html

 <!DOCTYPE html>  
 <html>  
 <head>  
  <meta charset="utf-8">  
  <title>Main Page Unit tests</title>  
  <link rel="stylesheet" href="qunit-1.11.0.css">  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  
 </head>  
 <body>  
  <div id="qunit"></div>  
  <div id="qunit-fixture"></div>  
  <script src="jquery-1.9.1.min.js"></script>  
  <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>  
  <script src="MAIN_TEST_APP.mainMonsterClass.js"></script>  
  <script src="qunit-1.11.0.js"></script>  
  <script src="test1.js"></script>  
 </body>  
 </html>  

Step 2.

test.js:

The qunit is very simple. It has few assertions but that’s enough.

 /**  
  * Test: MAIN_TEST_APP.mainMonsterClass.mainMethodInteger  
  * @returns {}  
  */  
 test( "MAIN_TEST_APP_mainMonsterClass_mainMethodInteger test", function() {  
   var expected_value = 1;  
   equal(  
       MAIN_TEST_APP.mainMonsterClass.mainMethodInteger(),   
       expected_value,  
       "MAIN_TEST_APP.mainMonsterClass.mainMethodInteger; equal succeeds" );  
 });  

 test( "MAIN_TEST_APP_mainMonsterClass_mainMethodJSONAjax test", function() {  
   var expected_value = "ok";  
   equal(  
       MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax(),   
       expected_value,  
       "MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax; equal succeeds" );       
 });  

 test( "Strict_MAIN_TEST_APP_mainMonsterClass_mainMethodJSONAjax test", function() {  
   var expected_value = "ok";        
   strictEqual(  
       MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax(),   
       expected_value,  
       "MAIN_TEST_APP.mainMonsterClass.mainMethodJSONAjax; equal succeeds" );        

 });  

 test( "Strict_MAIN_TEST_APP_mainMonsterClass_mainMethodJQUIDialog test", function() {  
     var tag = $("<div></div>");  
     var dialog_content = "<p>Hello World Dialog</p>";  
     tag.html(dialog_content).dialog({modal: true}).dialog('destroy');  
     ok(true, "dialog was");  
 });      

It is easy but very useful. You should make your code testable and you will be able to fix the bad dependencies.

Posted in Uncategorized | Tagged , | Leave a comment