Make unit tests great again – Integrate Jasmine into Rails


Bookmark and Share

Jasmine is a framework to write tests for the Javascript code in the Behaviour Driven Development (BDD) style. In this article, you will learn how to integrate Jasmine into your existing rails application and how to write clean and beautiful unit tests. Let us make tests great again!

 

Install Jasmine

To make Jasmine available to your Rails app, you just have to place the jasmine-gem (link) in your Gemfile. That will do the magic. Just make sure you have it under Development and Test group in the Gemfile as follows:

Then run this to install the gem:

After all the gems are installed, run this code to generate necessary files for Jasmine to run:

This will create the jasmine helper file and the yml file where you configure how it should run the tests.

Run tests

You can use Jasmine right after it’s installed. It can be run in several ways, the most important ones being,

  • In your browser
  • Continuous Integration Mode (CI)
  • The CI mode is usually used when you have to integrate it into your build system.

    Browser Mode

    You have to start the Jasmine server to run it in a browser. This server runs all the tests and serves the results to a webpage. …

    Read More

    Taking screenshots of webpages using Ruby


    Bookmark and Share

    Recently we have been working on taking screenshots for web page while generating reports based on that website. During this endeavor, we came across some tools to achieve that. We are sharing the information we gathered here.

    The tools that we will discuss for screencapture, in  Ruby,  are:

    • PhantomJS
    • Screencap gem
    • Webshot gem

    Screencap and webshot are gems in Ruby that depends on a tool called PhantomJS. It is basically a web browser without a user interface, primarily used for testing websites. Such type of browsers are generally referred to as headless browsers,

    Screenshots with PhantomJS

    PhantomJS is quite easy to install and is multiplatform, available on major operating systems.

    To start, our script must require a reference to the webpage module then use it to create an instance:

    Use the instance.open() method and pass it the arguments, the url of the webpage that we want to capture screenshot.

    instance.render() method captures the screenshot and saves it to the file specified in the argument.
    Run the script as,

    Screenshot is saved in the  directory where we run the script.

    Now what we have above is all JavaScript, but to use the phantom JS in our rails application we have gems that provide us with an easy interface to acheive the …

    Read More
    Flux example Application with React JS

    Flux example Application with React JS


    Bookmark and Share

    Flux is an application architecture used to build scalable and powerful JavaScript web application with React JS. React JS is a popular view library and we have already covered React JS. Flux is not a framework like Angular JS, Backbone etc., there are a lot of differences between these frameworks with Flux. Flux only supports unidirectional data flow, where Angular and Backbone supports bi-directional data flow. Unidirectional data flow prevents unexpected data flows, so it is more predictable.

    Flux has three main parts.

  • Action
  • Dispatcher
  • Store
  • As their name indicates, Action is the result of some events, like JavaScript events, or callbacks for Ajax calls. Dispatcher, is a connector or link between Action and Store. The dispatcher is a central hub, from where everything passes through and we only need one dispatcher per application. Dispatcher handles all Actions and Stores.
    Store is very important in Flux architecture, we can write our business logics or Ajax calls to fetch data’s. I usually use it to store to get some initial data’s or to send or receive data via Ajax calls. The store uses event emitter similar to nodejs’s event emitter. We can define events in Store, and these events are …

    Read More
    React Example Application

    React Example Application


    Bookmark and Share

    This article is continuation of my React series, On the first article we went through react basics and some react syntax, now i want to demonstrate a sample application with es6 syntax. ES6 is the future of javascript, so we use ES6 in our projects. Complete code is available on github, you can use below links.

    Example Application

    React – Rails Store Example Application

     

    React Rails Tutorial

    React Rails Store Application

    Before we start, we must familiarize with gulp and some gulp tasks. Gulp is a frontend tool to automate our tasks like sass/scss to css, coffeescript to javascript, minimization etc.. In this project we use babelify, it help us to write code in ES6, In ES6 mode, we can use import statement, classes in javascript, and double arrow functions.

    We use ES6, so we can use class, import and =>

    Now we can start our code, It is actually a ruby on rails project. Our files are inside javascript/react folder, we use main.js file where we import all other javascript modules, which again convert …

    Read More

    3 Most useful Jquery Slider/Carousel plugins


    Bookmark and Share

    Why should we we use Javascript in our application?, HTML and CSS is enough to make websites. In this article i like to familiarize 3 jquery slider plugins. Why should i use Javascript, In my view Javascript is a beautiful client side language to manipulate DOM in different ways, which is merely impossible using our CSS. Lets assume i have 20 images in my website, I can either show this all 20 as thumbnails, but how can i show its in big resolution or i can show all images in its maximum resolution but this will increase page length. We can use jQuery sliders to solve this problem, We will have navigation buttons or thumbnails to see different images without consuming too much space.

    I have used many slider/carousel plugins, 3 of them are best for me, they are free and easy to use.

    1) Slick Slider

    Most popular and free  jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions.

    Slick Slider

    Slick Carousel – most used jquery …

    Read More
    React JS for modern web applications

    React JS for modern web applications


    Bookmark and Share

    React JS is a JavaScript Framework which indent to make large, single page scalable applications. It is not like Angular or backbone or other JavaScript framework. React JS is only deals with view and not with model and controller. React JS is also compatible with backbone, so we can use backbone, React JS combination to get full MVC framework. React is intended to help developers build large applications that use data that change over time. Its goal is to be simple, declarative and composable.

    Why React JS

    Before answering this question, I want to tell its history, this will give slight idea ‘Why React”, React JS is created by Facebook, it is an open source project maintained by Facebook and 100+ other contributors. React JS is used in Facebook and popular photo sharing website Instagram. React JS is a User Interface library.

    React use Virtual DOM instead of Real DOM, This help us to create more Fast and Scalable web applications. One of the main attractions is, React JS is reusable components, HTML elements are reusable components in React, and we can use same for other places. Another features are high speed Virtual DOM, Browser independent …

    Read More