ImageSwapping TDD session

imageswap_test.coffee

class Swapper

  constructor: (root) ->
    @root = $(root)

  swapTo: (data_suffix) ->
    self = @
    @each ->
      self.swap(this, data_suffix)

  each: (callback) ->
    throw new Error('Implement me!')

  swap: (element, data_suffix) ->
    throw new Error('Implement me!')
    

class ImageSwapper extends Swapper

  each: (callback) ->
    @root.find('img').each(callback)

  swap: (element, data_suffix) ->
    if newres = element.getAttribute("data-#{data_suffix}")
      element.src = newres
    

describe "Imageswapper swapping", ->

  root = null

  beforeEach ->
    root = document.createElement 'div'

  it "should swap by given data attribute", ->
    image = $('
      <img src="NORMALRES" 
        data-medium="MEDRES" 
        data-large="LARGERES" />
    ')
    $(root).append(image)
    swapper = new ImageSwapper(root)

    swapper.swapTo 'medium'
    eq image.attr('src'), 'MEDRES'

    swapper.swapTo 'large'
    eq image.attr('src'), 'LARGERES'


  it "should not swap image to another resolution when correspoding data attribute is not there", ->
    image = $('<img src="NORMAL" />')
    $(root).append(image)
    swapper = new ImageSwapper(root)
    swapper.swapTo 'low'
    eq image.attr('src'), 'NORMAL'