Sunday, August 10, 2014

Using Dojo DOH

D.O.H.: Dojo Objective Harness

DOH is...

  • used to unit test JavaScript functions and custom widgets
  • Runs in many environments from browsers to JS runtime environments such as Rhino, node.js

Where is DOH located?

  • Download Dojo source code (you get dojo, dijit, dojox, util packages)
  • DOH is located in util package.

Give an example of running a doh test from browser?

  • Write a unit test file (mysampletest.js)
define(["doh", "../date"], function(doh, date){ //I am trying to test the functionality of date module
    doh.register("tests.date.util", [ //tests.date.util is the name of the test group
        function test_date_getDaysInMonth(t){//test_date_getDaysInMonth - name of the test
            // months other than February
            t.is(31, date.getDaysInMonth(new Date(2006,0,1))); // returns true

            // Februarys
            t.is(28, date.getDaysInMonth(new Date(2006,1,1))); // returns true

        }
    ]);
});
  • Save this file under dojo/tests (if you are testing some modules in a package, save the unit test file in that package under tests folder - in this example, I am trying to test the date module in dojo package, so I am going to save it under dojo/tests folder)
  • Run it from your local browser
http://localhost:8080/js/dojo-src/util/doh/runner.html?test=dojo/tests/mysampletest


Suppose if I have more than one unit test file (for example mysampletest.js & mysampletest2.js) how can I provide those files to doh?

  • Save both the files under dojo/tests
  • mysampletest.js
define(["doh", "../date"], function(doh, date){ //I am trying to test the functionality of date module
    doh.register("tests.date.util", [ //tests.date.util is the name of the test group
        function test_date_getDaysInMonth(t){ //test_date_getDaysInMonth is the name of the test
            // months other than February
            t.is(31, date.getDaysInMonth(new Date(2006,0,1))); // returns true

            // Februarys
            t.is(28, date.getDaysInMonth(new Date(2006,1,1))); // returns true

        }
    ]);
});
  • mysampletest2.js
define(["doh", "dojo/_base/array"], function(doh, array){ //I am trying to test the functionality of array module

    doh.register("tests._base.array", [//this is the name of my test group
        function testIndexOf(t){ //name of my test
            var foo = [128, 256, 512];
            t.assertEqual(1, array.indexOf([45, 56, 85], 56));
            t.assertTrue(
                array.some(foo, function(elt, idx, array){
                    t.assertEqual(3, array.length);
                    return true;
                })
            );
        }
    ]);
});
  • Create a module file, mysampletests.js as below and save it under dojo/tests
define([ //Module that helps loading of unit test files
    "dojo/tests/mysampletest",
    "dojo/tests/mysampletest2"
], 1);
  • Run the unit tests by providing the module to the doh:
http://localhost:8080/js/dojo-src/util/doh/runner.html?test=dojo/tests/mysampletests

Best references to understand more about D.O.H:

By the way, what is the meaning of assert?

as·sert
əˈsərt/
verb
  1. state a fact or belief confidently and forcefully.
    "the company asserts that the cuts will not affect development"
    • cause others to recognize (one's authority or a right) by confident and forceful behavior.
      "the good librarian is able to assert authority when required"
      synonyms:insist on, stand up for, upholddefendcontendestablish, press for,push for, stress More
    • behave or speak in a confident and forceful manner.
      "it was time to assert himself"
      synonyms:behave confidently, speak confidently, be assertive, put oneself forward,take a stand, make one's presence felt;



Thursday, August 7, 2014

A Sample program accessing Dojo CDN

<!DOCTYPE HTML>
<html>
<head>
<title>Sample Dojo Page</title>
<meta charset="utf-8">

<!-- Get the Dojo styles Google's CDN -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">


<script>dojoConfig = {async: true, parseOnLoad: true}</script>

<!-- Bootstrap Dojo From Google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>

<script>
    require(["dojo/parser", "dijit/form/ValidationTextBox"]);
</script>
</head>
<body class="claro">
    <label for="phone">Phone number, no spaces:</label>
    <input type="text" name="phone" id="phone" placeholder="someTestString" required="true"
        data-dojo-type="dijit/form/ValidationTextBox"
        data-dojo-props="regExp:'[\\w]+', invalidMessage:'Invalid Non-Space Text.'" />
</body>
</html>

Sunday, July 6, 2014

7/6/14

Playing with HTML5 Canvas

So for this week, I want to explore the HTML5 Canvas a little bit. But where to start? I was searching on google and found the following link:

The links provided in that page are good and I started with one link http://code.tutsplus.com/series/canvas-from-scratch--net-19650. I just completed the first tutorial in that and felt very comfortable with the explanation. I am going heads on into the second tutorial :)

Sunday, June 1, 2014

6/1/14

Git & GitHub

Simple instructions for a beginner to set his code on GIT repo:
https://kbroman.org/github_tutorial/pages/init.html

Couple of good sites that I come across this week that have excellent explanation on Git and GitHub:
http://git-scm.com/book/en/Getting-Started-Git-Basics
http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1#awesm=~oFT1fA8SbuXSlO

What is Git?
As per http://git-scm.com/  , Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. That's a cool one line explanation about Git.

Looking for a still simpler explanation?
Git is a version control application.

So what is GitHub?
GitHub makes Git easier to use by providing the visual interface and provides social network kind of environment for your projects on the web.




Monday, May 26, 2014

5/25/14

An HTML page with equal height columns

It's almost 2 months since I stopped adding content to my blog. Did I learn anything but haven't mentioned here? I don't think so. So the most I post to this blog, the better my learning curve would be!

Building equal height columns using simple CSS is a challenging task. I came across this page http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks where it was explained in an artistic way. Also found the other web sites on the same topic:


Sunday, March 23, 2014

3/22/14

Learning about Angular JS

Well, today I wanted to know about Angular JS and as usual, I know almost nothing about Angular JS other than things like Angular JS is supported by Google and there are plenty of job opportunities for an Angular JS developer. I started looking for a good tutorial that gives the basic idea about Angular JS and at the same time won't scare me away from it.

I came across this tutorial (http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/) that sure helped me to take my baby steps in learning Angular JS.

And also now I know where I can find the Angular JS API: http://docs.angularjs.org/api

I am all excited to know more about Angular JS now!!

More references:

http://dotnetlearners.com/tutorial/angularjs/17/angularjs-tutorial-introuduction-to-angularjs

https://docs.angularjs.org/guide/introduction

http://viralpatel.net/blogs/angularjs-controller-tutorial/

https://www.youtube.com/watch?v=i9MHigUZKEM

http://theprofessionalspoint.blogspot.com/2014/02/basic-angularjs-interview-questions-and.html


Saturday, March 1, 2014

3/1/2014

Building your own web server with nodejs in 5 minutes

Well, it took me almost a week to get back to my blog :)

Couple of things I want to add to my blog before I forget! I mentioned about NPM, the node package manager that helps you to get the new modules. So how do I request for a new module using npm?

Psst! I stumbled upon this blog http://blog.modulus.io/absolute-beginners-guide-to-nodejs which got cool things that you can do with node.js. And I am installing express module (of course, using npm) to build my own web server.

I have my web project 'npj' created under: C:\Development. So basically 'npj' is a folder under C:\Development that has all my JavaScript, CSS, images folders and files.

Now request for the module you are looking for:

C:\Development>npm install express

npm is going to install the express module in there, that's it!

Now, let's go ahead and create a web site and browse it using your own web server that you can build with node. Create a file nodeWebServer.js under C:\Development.

           var express = require('express');

           var app = express();

           app.use(express.static(__dirname + '/npj'));

           app.listen(8080);

Four lines of code and my server is ready! Run my server as below:

C:\Development>node nodeWebServer.js

Note: Now you are using node.js to run your newly created web server. So node.js is busy running it so you CAN NOT access it from command prompt any more unless you stop your web server.