{"id":13804441,"url":"https://github.com/profiscience/ko-component-tester","last_synced_at":"2026-01-26T04:38:05.315Z","repository":{"id":57153997,"uuid":"55069955","full_name":"Profiscience/ko-component-tester","owner":"Profiscience","description":":vertical_traffic_light: TDD Helpers for Knockout JS","archived":false,"fork":false,"pushed_at":"2019-02-13T10:27:52.000Z","size":406,"stargazers_count":15,"open_issues_count":3,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-18T20:51:04.910Z","etag":null,"topics":["knockoutjs","tdd","testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Profiscience.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-30T14:29:09.000Z","updated_at":"2022-09-27T06:42:30.000Z","dependencies_parsed_at":"2022-08-27T18:41:13.945Z","dependency_job_id":null,"html_url":"https://github.com/Profiscience/ko-component-tester","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Profiscience%2Fko-component-tester","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Profiscience%2Fko-component-tester/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Profiscience%2Fko-component-tester/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Profiscience%2Fko-component-tester/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Profiscience","download_url":"https://codeload.github.com/Profiscience/ko-component-tester/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253993203,"owners_count":21996259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["knockoutjs","tdd","testing"],"created_at":"2024-08-04T01:00:47.881Z","updated_at":"2026-01-26T04:38:05.309Z","avatar_url":"https://github.com/Profiscience.png","language":"JavaScript","readme":"# ko-component-tester\n\n[![NPM](https://img.shields.io/npm/v/ko-component-tester.svg)](https://www.npmjs.com/package/ko-component-tester)\n![WTFPL](https://img.shields.io/npm/l/ko-component-tester.svg)\n[![Travis](https://img.shields.io/travis/Profiscience/ko-component-tester.svg)](https://travis-ci.org/Profiscience/ko-component-tester)\n[![Coverage Status](https://coveralls.io/repos/github/Profiscience/ko-component-tester/badge.svg?branch=master)](https://coveralls.io/github/Profiscience/ko-component-tester?branch=master)\n[![Dependency Status](https://img.shields.io/david/Profiscience/ko-component-tester.svg)](https://david-dm.org/Profiscience/ko-component-tester)\n[![Peer Dependency Status](https://img.shields.io/david/peer/Profiscience/ko-component-tester.svg?maxAge=2592000)](https://david-dm.org/Profiscience/ko-component-tester#info=peerDependencies\u0026view=table)\n[![NPM Downloads](https://img.shields.io/npm/dt/ko-component-tester.svg?maxAge=2592000)](http://npm-stat.com/charts.html?package=ko-component-tester\u0026author=\u0026from=\u0026to=)\n\n_TDD Helpers for Knockout components and bindings_\n\n#### Sample tests for a Knockout binding\n\n```javascript\n'use strict'\n\nconst { renderHtml } = require('ko-component-tester')\nconst { expect } = require('chai')\n\ndescribe ('Hello World text-binding', () =\u003e {\n  let $el\n  beforeEach(() =\u003e {\n    $el = renderHtml({\n      template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n      viewModel: { greeting: 'Hello World'}\n      })\n  })\n  it('renders', () =\u003e {\n    expect($el).to.exist\n  })\n  it('renders correct text', () =\u003e {\n    expect($el.html()).equals('Hello World')\n  })\n})\n```\n\n#### Sample tests for a Knockout component\n\n```javascript\n'use strict'\n\nconst { renderComponent } = require('ko-component-tester')\nconst { expect } = require('chai')\n\ndescribe('Hello World Component' , () =\u003e {\n  let $el\n  beforeEach(() =\u003e {\n    $el = renderComponent({\n      template: `\u003cspan data-bind=\"text: greeting\"\u003e\u003c/span\u003e`,\n      viewModel: function() { this.greeting = 'Hello World' }\n    })\n  })\n  afterEach(() =\u003e {\n    $el.dispose()\n  })\n  it('renders', () =\u003e {\n    expect($el).to.exist\n  })\n  it('renders correct content', () =\u003e {\n    expect($el.html()).contains('Hello World')\n  })\n})\n```\n\n#### Sample Login test\n\n```javascript\n'use strict'\n\nconst ko = require('knockout')\nconst { expect } = require('chai')\nconst sinon = require('sinon')\nconst { renderComponent } = require('../src')\n\nclass LoginComponent {\n  constructor() {\n    this.username = ko.observable()\n    this.password = ko.observable()\n  }\n  submit() {}\n}\n\ndescribe('sample login component' , () =\u003e {\n  let $el\n\n  before(() =\u003e {\n    $el = renderComponent({\n      viewModel: LoginComponent,\n      template: `\n        \u003cform data-bind=\"submit: submit\"\u003e\n          \u003cinput name=\"user\" type=\"text\" data-bind=\"value: username\"\u003e\n          \u003cinput name=\"pass\" type=\"text\" data-bind=\"value: password\"\u003e\n          \u003cinput type=\"submit\"\u003e\n        \u003c/form\u003e`\n    })\n  })\n\n  after(() =\u003e {\n    $el.dispose()\n  })\n\n  it('renders correctly', () =\u003e {\n    expect($el).to.exist\n    expect($el.find('form'), 'contains a form').to.exist\n    expect($el.find('input[name=\"user\"]', 'contains a username field')).to.exist\n    expect($el.find('input[name=\"pass\"]', 'contains a password field')).to.exist\n    expect($el.find('input[type=\"submit\"]', 'contains a submit button')).to.exist\n  })\n\n  it('updates the viewmodel when a value is changed', () =\u003e {\n    $el.find('input[name=user]').simulate('change', 'john')\n    expect($el.$data().username()).equals('john')\n  })\n\n  it('can submit the form', () =\u003e {\n    const submitSpy = sinon.spy($el.$data().submit)\n    $el.find('input[name=user]').simulate('change', 'john')\n    $el.find('input[name=pass]').simulate('change', 'p455w0rd')\n    $el.find('input[type=\"submit\"]').simulate('click')\n\n    expect(submitSpy).to.be.called\n  })\n})\n\n```\n\n#### renderHtml(options)\n\nreturns a jQuery element containing the rendered html output\n\n- `options.template` - a string of html to be rendered\n- `options.viewModel` - an object, function, or class\n\nExample with viewModel function:\n\n```javascript\nconst options = {\n  template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n  viewModel: function() { this.greeting = 'Hello Text Binding' }\n}\nconst $el = renderHtml(options)\n```\n\nExample with viewModel class:\n\n```javascript\nconst options = {\n  template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n  viewModel: class ViewModel {\n    constructor() {\n      this.greeting = 'Hello Text Binding'\n    }\n  }\n}\nconst $el = renderHtml(options)\n```\n\nExample with viewModel object:\n\n```javascript\nconst options = {\n  template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n  viewModel: { greeting: 'Hello Text Binding' }\n}\nconst $el = renderHtml(options)\n```\n[See spec for more examples of renderHtml().](test/renderHtml.spec.js)\n\n\n#### renderComponent(component, params, bindingContext)\n\nreturns a jQuery element containing the rendered html output\n\n- `component.template` - a string of html to be rendered\n- `component.viewModel` - a function, class, or instance\n- `params` - optional params to be passed into the viewModel's constructor\n- `bindingContext` - optional bindingContext to inject (useful for stubbing `$parent` or `$index`)\n\nExample with viewModel function:\n\n```javascript\nconst component = {\n  template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n  viewModel: function() { this.greeting = 'Hello Text Binding' }\n}\nconst $el = renderComponent(component)\n// $el.dispose()\n```\n\nExample with viewModel class:\n\n```javascript\nconst component = {\n  template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n  viewModel: class ViewModel {\n    constructor(params) {\n      this.greeting = params.greeting\n    }\n  }\n}\nconst params = {\n  greeting: 'Hello Text Binding'\n}\nconst $el = renderComponent(component, params)\n// $el.dispose()\n```\n\nExample with viewModel instance:\n\n```javascript\nclass ViewModel {\n  constructor(params) {\n    this.greeting = params.greeting\n  }\n}\nconst component = {\n  template: `\u003cdiv data-bind=\"text: greeting\"\u003e\u003c/div\u003e`,\n  viewModel: { instance: new ViewModel(params) }\n}\nconst $el = renderComponent(component)\n// $el.dispose()\n```\n\n[See spec for more examples of renderComponent().](test/renderComponent.spec.js)\n\n#### $el.getComponentParams()\n\n[see spec for examples](test/getComponentParams.spec.js)\n\n#### $el.waitForBinding()\n\n[see spec for examples](test/waitForBinding.spec.js)\n\n#### $el.waitForProperty()\n\n[see spec for examples](test/waitForProperty.spec.js)\n\n#### $el.simulate(event, value)\n\n- `event` - the event to simulate, eg `'click', or 'change'`\n- `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.\n\n```javascript\n// simulate changing the value of a textbox\n$input.simulate('change', 'new value')\n// simulate clicking a button\n$submit.simulate('click')\n```\n\n#### Attribution\n\nhttps://github.com/jeremija/kotest\n","funding_links":[],"categories":["Components"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofiscience%2Fko-component-tester","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprofiscience%2Fko-component-tester","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprofiscience%2Fko-component-tester/lists"}