ko-component-tester

!WTFPL

_TDD Helpers for Knockout components and bindings_

#### Sample tests for a Knockout binding

``javascript
'use strict'

const { renderHtml } = require('ko-component-tester')
const { expect } = require('chai')

describe ('Hello World text-binding', () => {
let $el
beforeEach(() => {
$el = renderHtml({
template:

,
viewModel: { greeting: 'Hello World'}
})
})
it('renders', () => {
expect($el).to.exist
})
it('renders correct text', () => {
expect($el.html()).equals('Hello World')
})
})
`

#### Sample tests for a Knockout component

`javascript
'use strict'

const { renderComponent } = require('ko-component-tester')
const { expect } = require('chai')

describe('Hello World Component' , () => {
let $el
beforeEach(() => {
$el = renderComponent({
template: ,
viewModel: function() { this.greeting = 'Hello World' }
})
})
afterEach(() => {
$el.dispose()
})
it('renders', () => {
expect($el).to.exist
})
it('renders correct content', () => {
expect($el.html()).contains('Hello World')
})
})
`

#### Sample Login test

`javascript
'use strict'

const ko = require('knockout')
const { expect } = require('chai')
const sinon = require('sinon')
const { renderComponent } = require('../src')

class LoginComponent {
constructor() {
this.username = ko.observable()
this.password = ko.observable()
}
submit() {}
}

describe('sample login component' , () => {
let $el

before(() => {
$el = renderComponent({
viewModel: LoginComponent,
template:

})
})

after(() => {
$el.dispose()
})

it('renders correctly', () => {
expect($el).to.exist
expect($el.find('form'), 'contains a form').to.exist
expect($el.find('input[name="user"]', 'contains a username field')).to.exist
expect($el.find('input[name="pass"]', 'contains a password field')).to.exist
expect($el.find('input[type="submit"]', 'contains a submit button')).to.exist
})

it('updates the viewmodel when a value is changed', () => {
$el.find('input[name=user]').simulate('change', 'john')
expect($el.$data().username()).equals('john')
})

it('can submit the form', () => {
const submitSpy = sinon.spy($el.$data().submit)
$el.find('input[name=user]').simulate('change', 'john')
$el.find('input[name=pass]').simulate('change', 'p455w0rd')
$el.find('input[type="submit"]').simulate('click')

expect(submitSpy).to.be.called
})
})

`

#### renderHtml(options)

returns a jQuery element containing the rendered html output

- options.template - a string of html to be rendered
- options.viewModel - an object, function, or class

Example with viewModel function:

`javascript
const options = {
template:

,
viewModel: function() { this.greeting = 'Hello Text Binding' }
}
const $el = renderHtml(options)
`

Example with viewModel class:

`javascript
const options = {
template:

,
viewModel: class ViewModel {
constructor() {
this.greeting = 'Hello Text Binding'
}
}
}
const $el = renderHtml(options)
`

Example with viewModel object:

`javascript
const options = {
template:

,
viewModel: { greeting: 'Hello Text Binding' }
}
const $el = renderHtml(options)
`
See spec for more examples of renderHtml().

#### renderComponent(component, params, bindingContext)

returns a jQuery element containing the rendered html output

- component.template - a string of html to be rendered
- component.viewModel - a function, class, or instance
- params - optional params to be passed into the viewModel's constructor
- bindingContext - optional bindingContext to inject (useful for stubbing $parent or $index)

Example with viewModel function:

`javascript
const component = {
template:

,
viewModel: function() { this.greeting = 'Hello Text Binding' }
}
const $el = renderComponent(component)
// $el.dispose()
`

Example with viewModel class:

`javascript
const component = {
template:

,
viewModel: class ViewModel {
constructor(params) {
this.greeting = params.greeting
}
}
}
const params = {
greeting: 'Hello Text Binding'
}
const $el = renderComponent(component, params)
// $el.dispose()
`

Example with viewModel instance:

`javascript
class ViewModel {
constructor(params) {
this.greeting = params.greeting
}
}
const component = {
template:

,
viewModel: { instance: new ViewModel(params) }
}
const $el = renderComponent(component)
// $el.dispose()
`

See spec for more examples of renderComponent().

#### $el.getComponentParams()

see spec for examples

#### $el.waitForBinding()

see spec for examples

#### $el.waitForProperty()

see spec for examples

#### $el.simulate(event, value)

- event - the event to simulate, eg 'click', or 'change'
- value - if provided this value will be assigned. It's handy for assigning a value to a textbox and triggering a change event like this.

`javascript
// simulate changing the value of a textbox
$input.simulate('change', 'new value')
// simulate clicking a button
$submit.simulate('click')
``

#### Attribution

https://github.com/jeremija/kotest