Add optional setWidth option and write tests

tabswap/index.es6

@@ -8,21 +8,27 @@ const labels = options => {
   options = R.merge({
     names: []
   , active$: flyd.stream(0)
+  , setWidth: false
   }, options)
+
+
+  const width = options.setWidth ? 100 / options.names.length + '%' : false
+
   return h('div', {
     attrs: {
       'data-ff-tabswap': 'active:' + options.active$()
     , 'data-ff-tabswap-labels': true
     , 'data-ff-tabswap-labels-count': options.names.length
     }
   },
-    map(labelSingle(options.active$), options.names)
+    map(labelSingle(options.active$, width), options.names)
   )
 }
 
-const labelSingle = active$ => (name, idx) =>
+const labelSingle = (active$, width) => (name, idx) =>
   h('div', {
     attrs: {'data-ff-tabswap-label-wrapper': true}
+  , style: {width: width ?  width : ''}
   }, [
     h("a", {
       on: {click: [active$, idx]}

tabswap/test/index.js

@@ -5,15 +5,15 @@ const h = require('snabbdom/h')
 const tabswap = require('../index.es6')
 const render = require('flimflam-render')
 
-function init() {
+function init(labelOptions) {
   const state = {
     active$: flyd.stream(1)
   }
   const view = state => h('div', [
-    tabswap.labels({
+    tabswap.labels(R.merge({
       names: ['a', 'b']
     , active$: state.active$
-    })
+    }, labelOptions))
   , tabswap.content({
       sections: ['content a', 'content b']
     , active$: state.active$
@@ -30,7 +30,6 @@ test('it renders the labels', t=> {
   t.plan(1)
   const streams = init()
   const labels = streams.container.querySelectorAll('[data-ff-tabswap-label]')
-  document.body.appendChild(streams.container)
   t.strictEqual(labels.length, 2)
 })
 
@@ -51,7 +50,6 @@ test('it renders the text content', t=> {
 test('on click of a label, it swaps data states of labels', t=> {
   t.plan(1)
   const streams = init()
-  const content = streams.container.textContent
   streams.container.querySelectorAll('[data-ff-tabswap-label]')[1].click()
   const states = R.map(
     node => node.getAttribute('data-ff-tabswap-label')
@@ -71,3 +69,18 @@ test('on click of a label, it swaps data states of content', t=> {
   )
   t.deepEqual(states, ['inactive', 'active'])
 })
+
+test('it sets the width of the label wrappers when setWidth option is true', t=> {
+  t.plan(1)
+  const streams = init({setWidth: true})
+  const label = streams.container.querySelector('[data-ff-tabswap-label-wrapper]')
+  t.strictEqual(label.style.width, '50%')
+})
+
+test('it does not set the width of the label wrappers when setWidth option is false', t=> {
+  t.plan(1)
+  const streams = init()
+  const label = streams.container.querySelector('[data-ff-tabswap-label-wrapper]')
+  t.strictEqual(label.style.width, '')
+})
+