Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/profiscience/ko-component-tester
:vertical_traffic_light: TDD Helpers for Knockout JS
https://github.com/profiscience/ko-component-tester
knockoutjs tdd testing
Last synced: 2 months ago
JSON representation
:vertical_traffic_light: TDD Helpers for Knockout JS
- Host: GitHub
- URL: https://github.com/profiscience/ko-component-tester
- Owner: Profiscience
- Created: 2016-03-30T14:29:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-13T10:27:52.000Z (over 5 years ago)
- Last Synced: 2024-07-09T16:01:53.483Z (3 months ago)
- Topics: knockoutjs, tdd, testing
- Language: JavaScript
- Homepage:
- Size: 396 KB
- Stars: 15
- Watchers: 4
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-knockout - Testing - Helpful utilities for TDD + Knockout.js (Components)
README
# ko-component-tester
[](https://www.npmjs.com/package/ko-component-tester)
[](https://travis-ci.org/Profiscience/ko-component-tester)
[](https://coveralls.io/github/Profiscience/ko-component-tester?branch=master)
[](https://david-dm.org/Profiscience/ko-component-tester)
[](https://david-dm.org/Profiscience/ko-component-tester#info=peerDependencies&view=table)
[](http://npm-stat.com/charts.html?package=ko-component-tester&author=&from=&to=)
_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().](test/renderHtml.spec.js)
#### 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().](test/renderComponent.spec.js)
#### $el.getComponentParams()
[see spec for examples](test/getComponentParams.spec.js)
#### $el.waitForBinding()
[see spec for examples](test/waitForBinding.spec.js)
#### $el.waitForProperty()
[see spec for examples](test/waitForProperty.spec.js)
#### $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