' })
38 | } catch (e) {
39 | // do nothing
40 | }
41 |
42 | $el = renderComponent({
43 | template: `
44 | Hello Component
45 | `
46 | })
47 |
48 | expect($el).to.exist
49 | expect($el.html()).contains('Hello Component')
50 | })
51 | })
52 |
53 | describe('renderComponent', () => {
54 | describe('#dispose', () => {
55 | const dispose = sinon.spy()
56 |
57 | it('calls the dispose callback', () => {
58 | const $el = renderComponent({
59 | template: '
',
60 | viewModel() { this.dispose = dispose }
61 | })
62 |
63 | $el.dispose()
64 | expect(dispose.called).to.be.true
65 | })
66 |
67 | })
68 | })
69 |
--------------------------------------------------------------------------------
/test/renderHtml.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const { renderHtml } = require('../src')
4 | const { expect } = require('chai')
5 |
6 | describe('renderHtml' , () => {
7 | it('works with elements', () => {
8 | const $el = renderHtml({ template: '
Hello World!
' })
9 | expect($el).to.exist
10 | expect($el.html()).equals('Hello World!')
11 | })
12 |
13 | it('works with text nodes', () => {
14 | const $el = renderHtml({ template: 'Hello World!' })
15 | expect($el).to.exist
16 | expect($el.html()).contains('Hello World!')
17 | })
18 |
19 | it('works with viewModel object', () => {
20 | const $el = renderHtml({
21 | template: '
',
22 | viewModel: { greeting: 'Hello Text Binding' }
23 | })
24 | expect($el).to.exist
25 | expect($el.html()).equals('Hello Text Binding')
26 | })
27 |
28 | it('works with viewModel function', () => {
29 | const $el = renderHtml({
30 | template: '
',
31 | viewModel() {
32 | this.greeting = 'Hello Text Binding'
33 | }
34 | })
35 | expect($el).to.exist
36 | expect($el.html()).equals('Hello Text Binding')
37 | })
38 |
39 | it('works with viewModel es6 class', () => {
40 | const $el = renderHtml({
41 | template: '
',
42 | viewModel: class ViewModel {
43 | constructor() {
44 | this.greeting = 'Hello Text Binding'
45 | }
46 | }
47 | })
48 | expect($el).to.exist
49 | expect($el.html()).equals('Hello Text Binding')
50 | })
51 | })
52 |
--------------------------------------------------------------------------------
/test/sample.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const ko = require('knockout')
4 | const { expect } = require('chai')
5 | const sinon = require('sinon')
6 | const { renderComponent } = require('../src')
7 |
8 | class LoginComponent {
9 | constructor() {
10 | this.username = ko.observable()
11 | this.password = ko.observable()
12 | }
13 | submit() {}
14 | }
15 |
16 | describe('sample login component' , () => {
17 | let $el
18 |
19 | before(() => {
20 | $el = renderComponent({
21 | viewModel: LoginComponent,
22 | template: `
23 |
`
28 | })
29 | })
30 |
31 | after(() => {
32 | $el.dispose()
33 | })
34 |
35 | it('renders correctly', () => {
36 | expect($el).to.exist
37 | expect($el.find('form'), 'contains a form').to.exist
38 | expect($el.find('input[name="user"]', 'contains a username field')).to.exist
39 | expect($el.find('input[name="pass"]', 'contains a password field')).to.exist
40 | expect($el.find('input[type="submit"]', 'contains a submit button')).to.exist
41 | })
42 |
43 | it('updates the viewmodel when a value is changed', () => {
44 | $el.find('input[name=user]').simulate('change', 'john')
45 | expect($el.$data().username()).equals('john')
46 | })
47 |
48 | it('can submit the form', () => {
49 | const submitSpy = sinon.spy($el.$data().submit)
50 | $el.find('input[name=user]').simulate('change', 'john')
51 | $el.find('input[name=pass]').simulate('change', 'p455w0rd')
52 | $el.find('input[type="submit"]').simulate('click')
53 |
54 | expect(submitSpy).to.be.called
55 | })
56 | })
57 |
--------------------------------------------------------------------------------
/test/waitForBinding.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const ko = require('knockout')
4 | const { renderComponent } = require('../src')
5 | const { expect } = require('chai')
6 |
7 | describe('waitForBinding' , () => {
8 | let $el
9 |
10 | before(() => {
11 | ko.bindingHandlers.asyncText = {
12 | init(el, valueAccessor) {
13 | setTimeout(() => {
14 | ko.applyBindingsToNode(el, {
15 | text: valueAccessor()
16 | })
17 | }, 200)
18 | return { controlsDescendantBindings: true }
19 | }
20 | }
21 |
22 | ko.bindingHandlers.asyncVisible = {
23 | init(el, valueAccessor) {
24 | setTimeout(() => {
25 | ko.applyBindingsToNode(el, {
26 | visible: valueAccessor()
27 | })
28 | }, 200)
29 | return { controlsDescendantBindings: true }
30 | }
31 | }
32 | })
33 |
34 | after(() => {
35 | ko.options.deferUpdates = false
36 | ko.bindingHandlers.asyncText = (void 0)
37 | })
38 |
39 | afterEach(() => {
40 | $el.dispose()
41 | })
42 |
43 | it('should throw error if binding is not defined', (done) => {
44 | $el = renderComponent({
45 | template: '
',
46 | viewModel() { }
47 | })
48 |
49 | const $$el = $el.find('.test-me')
50 | try {
51 | $$el.waitForBinding('notdefined')
52 | }
53 | catch (e) {
54 | expect(e.message).to.contain('binding does not exist')
55 | }
56 | done()
57 | })
58 |
59 | it('works with bindings that have init funcs', (done) => {
60 | $el = renderComponent({
61 | template: `
62 |
63 |
64 | `,
65 | viewModel() { this.greeting = 'Hello Component' }
66 | })
67 |
68 | const $$el = $el.find('.test-me')
69 | $$el.waitForBinding('text').then(() => {
70 | expect($$el.html()).to.contain('Hello Component')
71 | done()
72 | })
73 | })
74 |
75 | it('works with bindings that DON\'T have init funcs', (done) => {
76 | $el = renderComponent({
77 | template: `
78 |
79 | `,
80 | viewModel() { this.visible = false }
81 | })
82 |
83 | const $$el = $el.find('.test-me')
84 | $$el.waitForBinding('visible').then(() => {
85 | expect($$el).to.not.be.visible
86 | done()
87 | })
88 | })
89 | })
90 |
--------------------------------------------------------------------------------
/test/waitForProperty.spec.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const ko = require('knockout')
4 | const sinon = require('sinon')
5 | const { renderComponent } = require('../src')
6 | const { expect } = require('chai')
7 |
8 | describe('waitForProperty' , function() { // eslint-disable-line
9 | let $el
10 |
11 | afterEach(() => {
12 | $el.dispose()
13 | })
14 |
15 | it('waits for property to be defined when no value specified', (done) => {
16 | $el = renderComponent({
17 | template: '
',
18 | viewModel() {
19 | this.greeting = ko.observable()
20 | setTimeout(() => this.greeting('Hello, World!'), 200)
21 | }
22 | })
23 |
24 | $el.waitForProperty('greeting').then((v) => {
25 | expect(v).to.equal('Hello, World!')
26 | expect($el.$data().greeting()).to.equal('Hello, World!')
27 | done()
28 | })
29 | })
30 |
31 | it('works with deep properties (ex. `foo.bar.baz` to access { foo: { bar: { baz: null } } })', (done) => {
32 | $el = renderComponent({
33 | template: '
',
34 | viewModel() {
35 | this.foo = {
36 | bar: ko.observable()
37 | }
38 | setTimeout(() => this.foo.bar('bar'), 200)
39 | }
40 | })
41 |
42 | $el.waitForProperty('foo.bar').then((v) => {
43 | expect(v).to.equal('bar')
44 | expect($el.$data().foo.bar()).to.equal('bar')
45 | done()
46 | })
47 | })
48 |
49 | it('waits for property to be equal value specified', (done) => {
50 | $el = renderComponent({
51 | template: '
',
52 | viewModel() {
53 | this.greeting = ko.observable('Hello, World"')
54 | setTimeout(() => this.greeting('Good afternoon, World!'), 100)
55 | setTimeout(() => this.greeting('Goodbye, World!'), 200)
56 | }
57 | })
58 |
59 | $el.waitForProperty('greeting', 'Goodbye, World!').then((v) => {
60 | expect(v).to.equal('Goodbye, World!')
61 | expect($el.$data().greeting()).to.equal('Goodbye, World!')
62 | done()
63 | })
64 | })
65 |
66 | it('waits for property to match regex specified', (done) => {
67 | $el = renderComponent({
68 | template: '
',
69 | viewModel() {
70 | this.greeting = ko.observable('Hello, World"')
71 | setTimeout(() => this.greeting('Good afternoon, World!'), 100)
72 | setTimeout(() => this.greeting('Goodbye, World!'), 200)
73 | }
74 | })
75 |
76 | $el.waitForProperty('greeting', /bye/i).then((v) => {
77 | expect(v).to.equal('Goodbye, World!')
78 | expect($el.$data().greeting()).to.equal('Goodbye, World!')
79 | done()
80 | })
81 | })
82 |
83 | it('resolves immediately if not undefined and no value specified', (done) => {
84 | $el = renderComponent({
85 | template: '
',
86 | viewModel() {
87 | this.greeting = ko.observable('Hello, World!')
88 | }
89 | })
90 |
91 | $el.waitForProperty('greeting').then((v) => {
92 | expect(v).to.equal('Hello, World!')
93 | expect($el.$data().greeting()).to.equal('Hello, World!')
94 | done()
95 | })
96 | })
97 |
98 | it('resolves immediately if already equal to value specified', (done) => {
99 | $el = renderComponent({
100 | template: '
',
101 | viewModel() {
102 | this.greeting = ko.observable('Hello, World!')
103 | }
104 | })
105 |
106 | $el.waitForProperty('greeting', 'Hello, World!').then((v) => {
107 | expect(v).to.equal('Hello, World!')
108 | expect($el.$data().greeting()).to.equal('Hello, World!')
109 | done()
110 | })
111 | })
112 |
113 | it('resolves immediately if already matches regex specified', (done) => {
114 | $el = renderComponent({
115 | template: '
',
116 | viewModel() {
117 | this.greeting = ko.observable('Hello, World!')
118 | }
119 | })
120 |
121 | $el.waitForProperty('greeting', 'Hello, World!').then((v) => {
122 | expect(v).to.equal('Hello, World!')
123 | expect($el.$data().greeting()).to.equal('Hello, World!')
124 | done()
125 | })
126 | })
127 |
128 | it('times out after 2000ms by default', (done) => {
129 | const clock = sinon.useFakeTimers()
130 |
131 | $el = renderComponent({
132 | template: '
',
133 | viewModel() {
134 | this.greeting = ko.observable()
135 | }
136 | })
137 |
138 | $el.waitForProperty('greeting').catch((err) => {
139 | expect(err).to.contain('Timed out')
140 | clock.restore()
141 | done()
142 | })
143 |
144 | clock.tick(3000)
145 | })
146 |
147 | it('can set a custom timeout', (done) => {
148 | const clock = sinon.useFakeTimers()
149 |
150 | $el = renderComponent({
151 | template: '
',
152 | viewModel() {
153 | this.greeting = ko.observable()
154 | }
155 | })
156 |
157 | $el.waitForProperty('greeting', undefined, 500).catch((err) => {
158 | expect(err).to.contain('Timed out')
159 | clock.restore()
160 | done()
161 | })
162 |
163 | clock.tick(1000)
164 | })
165 | })
166 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | module.exports = {
4 | entry: './src/index.js',
5 |
6 | output: {
7 | path: 'dist',
8 | filename: 'ko-component-tester.js',
9 | library: 'ko-component-tester',
10 | libraryTarget: 'umd'
11 | },
12 |
13 | module: {
14 | loaders: [
15 | {
16 | test: /\.js$/,
17 | exclude: /(node_modules)/,
18 | loader: 'babel',
19 | query: {
20 | cacheDirectory: true,
21 | presets: ['es2015']
22 | }
23 | }
24 | ]
25 | },
26 |
27 | externals: {
28 | 'jquery': {
29 | root: 'jQuery',
30 | commonjs: 'jquery',
31 | commonjs2: 'jquery',
32 | amd: 'jquery'
33 | },
34 | 'knockout': {
35 | root: 'ko',
36 | commonjs: 'knockout',
37 | commonjs2: 'knockout',
38 | amd: 'knockout'
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------