Tuesday, October 27, 2015

Unit Testing with Karma and Mocha


JavaScript becomes a big hero in these days. If you think about the few years back developers use it only for the client side scripting. But now the time has changed the game. Nowadays JavaScript is really powerful and can use for developing server side functions too. Because of this growth in development in JavaScript, it opens up many paths to thinks to the developer when to do the development. Unit testing is one of the major component of the development process with the rise of the TDD approach. The as much as you do unit testing you can make an assurance about the small pieces of the business logic works as according to expectation. 
As I said in earlier with the growth of the capabilities in the  JavaScript, arise a requirement of the applying TDD approach for the client – side as well. To achieve this TDD approach in client – side developer have to work with a set of tools. In this post aim is to start to write a first unit test in JavaScript. The set of tools going to use for this mention in below.
1). Test Runner – Karma
2). Test Framework – Mocha
3). Test Assertion Tool – Chai
My Folder structure in project,
project/
src/
test/
node_modules/
Inside src folder contain all business logic JavaScript files and test folder contains the unit test JavaScript files. Nodejs module contain in node_modules folder. Using npm init command create package.json file.
Following command line installs karma, mocha, chai assertion library, mocha and chai adapter for the karma at once.
npm install karma mocha chai karma-mocha karma-chai --save-dev

In here we installed karma locally. Benefit of it use we can use different karma version in different projects. But when we start to work with karma, we have to go to bin folder of the karma local installation. So this is bring additional effort to the developer. Run following command to avoid this situation. Before do this needs to uninstall the globally install karma version.

npm install –g karma-cli

Now run below command and create karma configurations.

karma init

After you provide successful answers to the questions ask by the karma configuration process you get the file as in below.
// Karma configuration

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],


    // list of files / patterns to load in the browser
    files: [
      'src/**/*.js',
      'test/**/*.spec.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR ||   
    // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultanous
    concurrency: Infinity
  })
}

In here we installed karma locally. The benefit of it is we can use different karma version in different projects. But when we start to work with karma, we have to go to the bin folder of the karma local installation. So this brings additional effort to the developer. Run the following command to avoid this situation. Before do this needs to uninstall the global install karma version.

Now im going to write my first unit test in “test.spec.js” file as in below.
describe("A test suite", function() {
    
    var num1 = 0;
    
   beforeEach(function() { 
         num1 += 10  
   });
   
   afterEach(function() { 
           
   });
   
   it('should fail', function() {
        expect(num1).to.equal(11);
         });
});

In this test, I created a variable call “num1” and adding the 10 for it each time before test gets to run. The “beforeEach” function runs before all the unit test and “afterEach” function get run after each unit test. In here I use mocha as test framework and chai for assertions for the write unit test. The expect style assertion give the capability to write unit tests in BDD way.

Now start to run unit tests by enter following command as “karma start”. Then you see chrome browser and unit test start to run. Following images shows the result of the unit test run.





Now you have written your first unit test and run it. Until the next post, Happy Coding Winking smile

Wednesday, October 21, 2015

Nodejs with Visual Studio

 

Nodejs is a mostly use platform among the web developers in nowadays. When im looking into nodejs I wanted a good tool to write the application. First I started it with using VS Code. But when I was using it I didn’t get that rich user experience like in Visual Studio. Yeah.. I know VS Code still growing and its not a substitution for the Visual Studio. So I start look into the way to develop the Nodejs web application with Visual Studio. Yeah I found it. There is Nodejs tools for visual studio. So I downloaded it from here. This tool is still growing. After you download it and  install go to new project creation in visual studio. Then you can see like below.

image

So I created blank nodejs project using visual studio. It shows like in below.

image

You can see node project created with all the basic dependencies and basic functions. Press F5 and see how it works.

image

It open up browser and shows the respond return from express. Visual Studio provide complete debugging support to develop nodejs applications.

image

And also VS give you intellisense support and Interactive window to code and see the immediate result, NPM package manager support to manage packages in application, source control integration, cloud integration and typescript support.

image

So this is just a start and introduction of creating a nodejs application with Visual Studio using its rich set of features. So in next post ill talk about developing simple nodejs application.  Until then have fun with this tool.

Tuesday, July 28, 2015

TDD with Uncle Bob

 

Recently I was start to looking into TDD approach in software development. It’s a pretty cool process to follow and make sure you didn’t break any business rule while you do development of the application. I believe TDD must be a one of most essential component in the development. Because if you can write more of unit test it solve the issue of defects related business logic. More of your unit test get corrected it give a help to improve your integration testing too. Finally amount of time needs to spend for manual testing and regression testing can reduce in this way. So I found the three rules of TDD from uncle Bob blog. I'm going to mention those rules in below,

  1. You are not allowed to write any production code unless it is to make a failing unit test pass.
  2. You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.
  3. You are not allowed to write any more production code than is sufficient to pass the one failing unit test.

These 3 rules clearly explain what is TDD and why we need to use it. So whenever you follow TDD approach try to keep in these 3 rules in mind. Im going to put the link of the uncle Bob video here to watch you. His explain the TDD as more simpler way to get understand anyone. So watch following link and get to know about the TDD. I’ll write another article about unit testing with NUnit.

Watch this video : Red Green Refactor by Uncle Bob

Sunday, May 10, 2015

Google Tag Manager with ASP.NET MVC – Tracking Page views

 

Google tag manager makes life so easier for use Google analytic. Because of GTM, marketers can handle the Google analytics without the help of web developer. In this post describe how to use Google tag manager with ASP.NET MVC to track page views of a web application. Setting up the GTM is simple and needs to create the container and put that JavaScript code in your base HTML page. When you use GTM, you have to deal with tags, rules and macros. Every tag must contain a rule to fire. Rule require a certain condition to trigger.

Let's go down with following steps to setup GTM with MVC applications.

1. Login into the Google tag manager and create the container. Enter account name and container name as below.

1

2

2. After create GTM container looks like as in below image. Container id shown with red color boxes.

3

3. Go to your “_Layout.cshtml” page of the MVC application. Copy and paste container content as shown in below, just right after opening tag of “<body>”. In this image shows red color box highlighting the GTM container id. This is a unique id and GTM and application use this id for communication.

4

4. Now you have to publish your application. I used my azure account to publish the application. After you successfully publish you will get your application URL. Using that URL sign up with Google analytic account. After successfully setup the analytic account, you can get your tracking id for the web application. Use the tracking ID to create GTM tags.

6

5. Create a tag as shown in below using analytic tracking ID. Select Tag type as “Universal Analytics” and track type as “Page View”

7

6. Add a rule for this tag as below. this rule will execute when relevant tag fire.

8

7. After all above steps publish your GTM. After you can see the results in your Google analytics dashboard.

Sunday, May 3, 2015

Code snippet plugin for Live Writer on Blogger


I started to use windows live writer as my blogging tool. When I'm starting to use it, I had to face one problem which was how I'm going to publish the articles with code snippets. I’m using Blogger as my blog engine. So plugin I'm looking for must work with blogger too. After few search in the Google, I found few plugins to use code snippets with blog articles. One thing I noticed from all of those tools was none of them not updated very recently. In the end, I selected one tool to use with my live writer for blogging. You can check it from the below link.

https://sourcecodeplugin.codeplex.com/

This tool uses SyntaxHighlighter version 3. That was one of the main reason to select this tool. Because most of other tools not updated with SyntaxHighlighter version 3. When you are going to use this plugin for the first time with the live writer it pops up an error message saying “Can't load configuration from 'C:\Users\username\AppData\Roaming\Windows Live Writer\WindowsLiveWriter.SourceCode.config file”. What you have to do is ignore that error and move forward. And it won't appear in the after the first time. This is something known issue and writer of this plugin discuss this in the discussion section in CodePlex site.

Earlier when I want to put code snippet to the blog post I had to keep the code with SyntaxHighlighter tags. Now I don’t need to worry about that. this new plugin does it for me. Now blogging become easier than previous.

Saturday, May 2, 2015

Windows live writer on Blogger

 

After a long time back I tried to use windows live writer as my blogging tool. I used it early days and suddenly I missed it. So after I install windows live writer 2012 (latest version) I tried connect with my blog. My blog engine is a blogger. I entered correct URL, username and password. I checked that with the browser as well to verify details are correct or not. I tried 2 or 3 times but no luck. I search in the Google and I couldn’t find the good solution for this matter. because of that I thought to write about this then this might be helpful to someone else. The below image shows the error message.

dd

After all the attempts, I found the solution. In my Google account, I activated the 2-way verification system to my Google account for unknown applications and devices. When I'm logging through unknown device’s browser I get the security code and I enter it can use the particular Google service.  But with live writer there is no any method to use it that way. Because of that I need to go to below link and add live writer. Then I get generated password by Google. I have to use it for the sign in with live writer and blogger.

https://security.google.com/settings/security/apppasswords

After complete above steps, I logged in successfully with my live writer and the blogger. So here after all blog post will come through the live writer.

Happy blogging. Ohhh yeahh Winking smile

Tuesday, March 17, 2015

Angular Style Guide by John Papa

 

AngularJs is a MVC framework use by front-end. This is getting popular among developers for front-end developers because of it rich set of capabilities. Normally when we do the development in back-end development almost every time we are trying to use the best practices and gaudiness as a discipline of the developers. So I thought about the same way about the angular. I looked around the web for that kind of guidelines and best practices for AngularJs. That time I found the set of guidelines given by john papa. I don’t say we should follow of them. Based on the scenario, application and our requirement we can use it for front-end development. So im going to share that link with you guys.

Here we go : https://github.com/johnpapa/angular-styleguide#naming

Happy Coding Folks.