TDD - What, Why, How

|

This is a talk about Test Driven Development I gave at CloudFactory on a Lunch and Learn Sessoin, a very long time ago. I just happend to find those slides today and decided to include it in my blog here.

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?.

Rails Parallel Tests With Docker

|

Rails api backed with jwt

|

Stand-alone client side applications, REST, API, JSON Web Token is all over the web. Last week I sat with one of my friend (Front-End Developer) to hack an Javascript MVC app with Rails-Api.

An awesome api, in the minds have following characterstics:

  • Excellent docs with success and failure sample response
  • A standard authorization mechanism
  • Consistent response body and codes

However, being an api developer in addition to that, I would like to have an automated tool that would help me to make sure that docs are always upto date with the api and I would like to use the latest and adopted authentication mechanism.

I would like to share my story of api development with Rails-api, Rspec, Rspec-api-documentation and JSON Web Token(JWT).

This is not a long tutorial about getting started with rails-devise-jwt, there is already lots of articles about what and why JWT and using JWT with ruby and rails. This is a blueprint of an end-to-end solution I adopted for development of an api.

The sample app is available here at github.

The commit in the speaks itself for steps that were done.

Ember Cli and Rails And Beyond

|

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.

Emberjs and Highcharts

|

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' }}

Th 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'
        }
      }