Deku Test

component.js

import { render, element } from 'deku';

let Button = {

  propTypes: {
    liked: { type: 'boolean' }
  },

  initialState (props) {
    return {
      liked: props.liked || false
    };
  },

  render (component) {
    let {props, state} = component;

    function update (event, component, updateState) {
      let {props, state} = component;
      updateState({
        liked: !state.liked
      });
    }

    return element('button', {
      class: 'button',
      onClick: update
    },
    [state.liked ? 'like' : 'unlike' ]);
  }
};

export default Button;

helpers.js

// https://github.com/dekujs/deku/blob/master/test/helpers.js

import { dom, render } from 'deku';
import assert from 'assert';

exports.mount = function(app, fn, errorHandler) {
  var el = document.createElement('div');

  try {
    var renderer = render(app, el, { batching: false });
    if (fn) fn(el, renderer);
  }
  catch(e) {
    if (errorHandler) {
      errorHandler(e);
    } else {
      throw e;
    }
  }
  finally {
    if (renderer) renderer.remove();
    assert.equal(el.innerHTML, '');
    if (el.parentNode) el.parentNode.removeChild(el);
  }
  return renderer;
};


exports.div = function(){
  var el = document.createElement('div');
  document.body.appendChild(el);
  return el;
};

test.js

import { deku, render, element } from 'deku';
import raf from 'component-raf';
import trigger from 'trigger-event';
import assert from'assert';
import { mount, div } from '../helpers.js';
import Button from '../../lib/like-button';

let container;
let renderer;
let app = deku();

describe('like button', function(){

  beforeEach(function(){
    app.mount(element(Button));
    container = div();
    renderer = render(app, container);
  });

  afterEach(function(){
    renderer.remove();
  });

  it('should have initial props', function(){
    assert.equal(container.innerHTML, '<button class="button">unlike</button>');
  });

  it('should update on change of props', function() {
    assert.equal(container.innerHTML, '<button class="button">unlike</button>');

    app.mount(element(Button, { liked: true }));

    raf(function(){
      assert.equal(container.innerHTML, '<button class="button">like</button>');
    });
  });

  it('should update based on click event', function() {
    assert.equal(container.innerHTML, '<button class="button">unlike</button>');

    mount(app, function(el){
      trigger(el.querySelector('button'), 'click');
    });

    raf(function(){
      assert.equal(container.innerHTML, '<button class="button">like</button>');
    });
  });
});