ko-component-tester
TDD Helpers for Knockout components and bindings
Sample tests for a Knockout binding
'use strict' const renderHtml = const expect =
Sample tests for a Knockout component
'use strict' const renderComponent = const expect =
Sample Login test
'use strict' const ko = const expect = const sinon = const renderComponent = { thisusername = ko thispassword = ko } {}
renderHtml(options)
returns a jQuery element containing the rendered html output
options.template
- a string of html to be renderedoptions.viewModel
- an object, function, or class
Example with viewModel function:
const options = template: `<div data-bind="text: greeting"></div>` { thisgreeting = 'Hello Text Binding' }const $el =
Example with viewModel class:
const options = template: `<div data-bind="text: greeting"></div>` viewModel: { thisgreeting = 'Hello Text Binding' } const $el =
Example with viewModel object:
const options = template: `<div data-bind="text: greeting"></div>` viewModel: greeting: 'Hello Text Binding' const $el =
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 renderedcomponent.viewModel
- a function, class, or instanceparams
- optional params to be passed into the viewModel's constructorbindingContext
- optional bindingContext to inject (useful for stubbing$parent
or$index
)
Example with viewModel function:
const component = template: `<div data-bind="text: greeting"></div>` { thisgreeting = 'Hello Text Binding' }const $el = // $el.dispose()
Example with viewModel class:
const component = template: `<div data-bind="text: greeting"></div>` viewModel: { thisgreeting = paramsgreeting } const params = greeting: 'Hello Text Binding'const $el = // $el.dispose()
Example with viewModel instance:
{ thisgreeting = paramsgreeting }const component = template: `<div data-bind="text: greeting"></div>` viewModel: instance: params const $el = // $el.dispose()
See spec for more examples of renderComponent().
$el.getComponentParams()
$el.waitForBinding()
$el.waitForProperty()
$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 achange
event like this.
// simulate changing the value of a textbox$input// simulate clicking a button$submit