RohitRox @ Tech

Making Test Driven Development work

05 Jan 2020

Here are the slides for the presentation on Test Driven Development I gave at CloudFactory on a Lunch and Learn Session.

The goal of this talk was to introduce TDD as a process rather then a paradigm. It explains how TDD can provide lower defect rates, higher productivity, modular design and a much more logical and fun technique for us to solve problems. It describes the cycle of writing a test first, and application code afterwards – followed by refactoring. It tries to describe how to approach TDD: Where do I begin to develop? What exactly should I test? How should tests be structured?.

Read More...

Ember Cli and Rails And Beyond

06 Dec 2014

Ember Cli and Rails Setup

Rails setup is pretty staright forward with rails new .. and new ember cli app with ember new .. but with following folder configuration

  | embercli-rails-app
  |-- rails
  |-- ember

Inside of main project folder we’ll have a folder which will contain the rails code and another folder which will contain ember code only.

We would like to have coffeescript.

For coffeescript

  npm install --save-dev ember-cli-coffeescript

and renaming .js files to .coffee and correcting the js syntax to coffee will do the trick.

Make sure that ember app is all well by using ember server and visiting http://localhost:4200.

Before proceeding, it would be nice to have some tests.

Lets create a new test at ‘ember/tests/integration/home-page-test.coffee’.

  `import Ember from 'ember'`
  `import startApp from 'cli-app/tests/helpers/start-app'`
  `import Ember from 'ember'`

  App = null

  module 'Integration - Home Page',
    setup: ->
      App = startApp()
    ,
    teardown: ->
      Ember.run(App, 'destroy')

  test 'Should have Welcome test', ->
    visit('/').then ->
      equal(find('h2#title').text(), 'Welcome to Ember.js');

Visit http://localhost:4200/tests to run the tests.

Read More...

Emberjs and Highcharts

16 Mar 2014

Let’s write a reusable ember view for rendering graphs and charts powered by highcharts.

  App.HighChartsView = Ember.View.extend
    tagName: 'div'
    classNames: [ 'highcharts' ]
    chartConfig = {}

    setConfig: (type)->
      config = {
        chart:
          type: type
        title:
          text: @title || 'Highcharts'
        xAxis:
          categories: @dataset.categories || []
        yAxis:
            title:
              text: @yAxisTitle
        series: @series()
      }
      # Merge highcharts config if it is present
      Ember.merge(config, @highChartConfig) if @highChartConfig
      @set('chartConfig', config)

    series: ->
      @dataset.data

    prepareConfig: ->
      # if custom config is present then directly set it to chartConfig
      if @customHighChartConfig
        @set('chartConfig', @customHighChartConfig)
      else
        type = @type || 'line'
        @setConfig(type)

    didInsertElement: ->
      @prepareConfig()
      @renderHighchart()

    renderHighchart: ->
      @$().highcharts(@chartConfig)

Usage:

  {{ view App.HighChartsView dataset=dataset title="Sample Analytics" type="line" yAxisTitle="Temperature C" }}

The dataset can be set at controller or may be at route.

  App.IndexController = Ember.ArrayController.extend
    dataset: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      data: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
      }

Usage with control over config

  {{ view App.HighChartsView dataset=dataset highChartConfig=highChartConfig title="Sample Analytics" type="line" }}

  App.IndexController = Ember.ArrayController.extend
    highChartConfig: {
      yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
      },
      tooltip: {
          valueSuffix: '°C'
        }
      }
Read More...

Hangman Game with EmberJs

20 Feb 2014

I built hangman game with emberjs, quick prevew. The game deals with more of view stuffs than other parts, I would like to share some thoughts and tricks I learned during the process.

hangman game with emberjs

I am not an ember expert so the way I have done may not be the optimal way of doing things in ember. Instead of walking through each steps, the code is well commented you can easily walk through, here I will describe striking stuffs.

Read More...

Javascript Array Tricks

05 Sep 2013

JavaScript, at its base, is a very simple language. Due to burst of Js framework usage, in which many new developers jumps right into, there are very useful basic JavaScript techniques and tricks which many people are unaware of.

Today I want share some tricks with Javascript Arrays, which many developers are not using.

Cloning Array

  var a = [1,2,3];
  var b = a;
  // bad
  // why

  a.pop();
  console.log(b);
  //=> [1,2]

  var b = a.slice(0);
  a.pop();
  console.log(b);
  //=> [1,2,4]
  // Good :-)
Read More...