synergy.spec.js

/* global beforeEach describe it */

import { assert } from 'chai'
import m from 'mithril'
import mq from 'mithril-query'
import stream from 'mithril/stream'
import { compute, connect, scope, combine } from '../src/index.js'

function SimpleComponent ({ update }) {
  return {
    view (vnode) {
      const { model } = vnode.attrs
      return m('div', model.user)
    }
  }
}
function ControlState ({ update }) {
  const state = (model) => {
    model.with = {
      decorations: model.user
    }
    return model
  }
  return {
    view (vnode) {
      const model = state(vnode.attrs.model)
      return m('div', model.with.decorations)
    }
  }
}

function ComputedView ({ update }) {
  const state = model => {
    model.with = {
      decorations: model.user
    }
    return model
  }
  return compute(state, {
    oninit (vnode) {
      this.foo = 'bar'
    },
    view (vnode) {
      const { model } = vnode.attrs
      return [
        m('div', model.with.decorations),
        m('span.lifecycle', this.foo)
      ]
    }
  })
}

function ScopedActions ({ update }) {
  // ramda helper operations

  // usage
  let deepNested = scope(['deep', 'nested']) // produces a reusable scope for functions to be bound with
  const items = deepNested(createItemsActions) // scoped actions
  const rooted = scope([], createRootActions) // root actions
  const actions = combine(items, rooted)({ update }) // => { appendItem, concatUserName }

  // actions implementations (for testing)
  // these scoped actions read/write to a node having `items`
  function createItemsActions ({ update }) {
    return {
      appendItem (item) {
        update(m => {
          m.items.push(item)
        })
      }
    }
  }
  // these actions read/write to entire tree
  function createRootActions ({ update }) {
    return {
      concatUserName (name, item) {
        return update(m => {
          m.deep.nested.items.push(item)
          m.user = `${name} ${m.deep.nested.items.join('*')}`
        })
      }
    }
  }
  return {
    actions,
    view (vnode) {
      return null
    }
  }
}

describe('components', () => {
  describe('simple', () => {
    let model
    let component
    let output
    let update
    beforeEach(() => {
      model = {
        user: null
      }
      update = stream()
      output = stream()
      component = SimpleComponent({ update })
      connect(update, model)
        .map(model => mq(component, { model }))
        .map(output)
    })
    it('should render', () => {
      update(m => { m.user = 'me' })
      output().should.have('div')
      output().should.contain('me')
    })
  })
  describe('controlstate simple', () => {
    let model
    let component
    let output
    let update
    beforeEach(() => {
      model = {
        user: null
      }
      update = stream()
      output = stream()
      component = ControlState({ update })
      connect(update, model)
        .map(model => mq(component, { model }))
        .map(output)
    })
    it('should render', () => {
      update(m => { m.user = 'me' })
      output().should.have('div')
      output().should.contain('me')
    })
  })
  describe('#compute', () => {
    let model
    let component
    let output
    let update
    beforeEach(() => {
      model = {
        user: null
      }
      update = stream()
      output = stream()
      component = ComputedView({ update })
      connect(update, model)
        .map(model => mq(component, { model }))
        .map(output)
    })
    it('should render', () => {
      update(m => { m.user = 'me' })
      output().should.have('div')
      output().should.contain('me')
      assert.equal(output().first('.lifecycle').text, 'bar')
    })
    it('should support lifecycle methods', () => {
      update(m => { m.user = 'me' })
      assert.equal(output().first('.lifecycle').text, 'bar')
    })
  })
  describe('scopedactions', () => {
    let model
    let component
    let output
    let update
    beforeEach(() => {
      model = {
        user: null,
        deep: {
          nested: {
            items: []
          }
        }
      }
      update = stream()
      output = stream()
      component = ScopedActions({ update })
      connect(update, model)
        .map(model => mq(component, { model }))
        .map(output)
    })
    it('should support root actions', () => {
      model.deep.nested.items.push('a')
      component.actions.concatUserName('willie', 'b')
      assert.equal(model.user, 'willie a*b')
    })
    it('should support scoped actions', () => {
      component.actions.appendItem('a')
      assert.equal(model.deep.nested.items.length, 1)
      assert.equal(model.deep.nested.items[0], 'a')
    })
  })
})