Skip to content

Commit 7e96e07

Browse files
samuelcolvinsamuelcolvin
committed
tests for enquiry submission
1 parent d6d4203 commit 7e96e07

File tree

3 files changed

+85
-53
lines changed

3 files changed

+85
-53
lines changed

‎test/unit/specs/_shared.js‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
import modal from 'src/components/modal'
24

35
const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
46

@@ -22,28 +24,50 @@ class TestConsole {
2224

2325
const enquiry_options = {
2426
visible: [
25-
{field: 'first_field', type: 'text', label: 'Foobar'}
27+
{field: 'first_field', type: 'text', label: 'Foobar', max_length: 255}
28+
],
29+
attributes: [
30+
{field: 'custom_field', type: 'text', label: 'Custom Field', max_length: 2047}
2631
]
2732
}
2833

2934
const vm_data = {
3035
contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
31-
config: {contact_html: 'name is: {name}'},
36+
config: {},
3237
contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
3338
enquiry_form_info: enquiry_options,
3439
enquiry_data: {},
40+
method_calls: {},
3541
}
3642

37-
const generate_vm = (router, vm_data_) => new Vue({
38-
el: document.createElement('div'),
39-
router: router,
40-
render: h => h('router-view'),
41-
data: vm_data_ || vm_data,
42-
methods: {
43-
get_details: () => null,
44-
get_enquiry: () => null,
45-
get_text: (name, replacements) => null,
46-
}
47-
})
43+
const dft_router = new VueRouter({routes: [
44+
{path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
45+
{path: '/:link', name: 'modal', component: modal},
46+
]})
47+
48+
const generate_vm = (router, vm_data_) => {
49+
Vue.use(VueRouter)
50+
return new Vue({
51+
el: document.createElement('div'),
52+
router: router || dft_router,
53+
render: h => h('router-view'),
54+
data: vm_data_ || vm_data,
55+
methods: {
56+
__record_call: function (method_name) {
57+
if (this.hasOwnProperty('method_calls')) {
58+
this.method_calls[method_name] = (this.method_calls[method_name] || 0) + 1
59+
}
60+
},
61+
get_details: function () { this.__record_call('get_details') },
62+
get_enquiry: function () { this.__record_call('get_enquiry') },
63+
get_text: function (name, replacements) { this.__record_call('get_text') },
64+
submit_enquiry: function (callback) {
65+
this.__record_call('submit_enquiry')
66+
this.enquiry_data = {}
67+
callback()
68+
},
69+
}
70+
})
71+
}
4872

4973
export {dft_response, TestConsole, enquiry_options, vm_data, generate_vm}

‎test/unit/specs/con-details.js‎

Lines changed: 9 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
import Vue from 'vue'
2-
import VueRouter from 'vue-router'
3-
import modal from 'src/components/modal'
42
import {generate_vm} from './_shared'
53

64
describe('modal.vue', () => {
75
it('should close on tcs-modal-mask', done => {
8-
Vue.use(VueRouter)
9-
const router = new VueRouter({routes: [
10-
{path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
11-
{path: '/:link', name: 'modal', component: modal},
12-
]})
13-
const vm = generate_vm(router)
14-
router.push({name: 'modal', params: {link: 'fred-bloggs'}})
6+
const vm = generate_vm()
7+
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
158
Vue.nextTick(() => {
169
expect(vm.$el.attributes['class'].value).to.contain('tcs-modal-mask')
1710
// this is clicking the background
@@ -26,13 +19,8 @@ describe('modal.vue', () => {
2619

2720
describe('con-details.vue', () => {
2821
it('should render contractor details', done => {
29-
Vue.use(VueRouter)
30-
const router = new VueRouter({routes: [
31-
{path: '/', name: 'index', component: {render: h => h('div')}},
32-
{path: '/:link', name: 'modal', component: modal},
33-
]})
34-
const vm = generate_vm(router)
35-
router.push({name: 'modal', params: {link: 'fred-bloggs'}})
22+
const vm = generate_vm()
23+
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
3624
Vue.nextTick(() => {
3725
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
3826
expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
@@ -45,11 +33,6 @@ describe('con-details.vue', () => {
4533

4634
describe('con-details.vue', () => {
4735
it('should render only five qual levels', done => {
48-
Vue.use(VueRouter)
49-
const router = new VueRouter({routes: [
50-
{path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
51-
{path: '/:link', name: 'modal', component: modal},
52-
]})
5336
const _vm_data = {
5437
contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
5538
config: {},
@@ -72,8 +55,8 @@ describe('con-details.vue', () => {
7255
}
7356
}
7457

75-
const vm = generate_vm(router, _vm_data)
76-
router.push({name: 'modal', params: {link: 'fred-bloggs'}})
58+
const vm = generate_vm(null, _vm_data)
59+
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
7760
Vue.nextTick(() => {
7861
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
7962
expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('GCSE')
@@ -91,23 +74,18 @@ describe('con-details.vue', () => {
9174

9275
describe('con-details.vue', () => {
9376
it('should render markdown', done => {
94-
Vue.use(VueRouter)
95-
const router = new VueRouter({routes: [
96-
{path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
97-
{path: '/:link', name: 'modal', component: modal},
98-
]})
9977
const _vm_data = {
10078
contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
101-
config: {contact_html: 'name is: {name}'},
79+
config: {},
10280
contractors_extra: {
10381
'fred-bloggs': {
10482
extra_attributes: [{'name': 'Bio', 'value': 'I am **great**', 'type': 'text_extended'}],
10583
},
10684
}
10785
}
10886

109-
const vm = generate_vm(router, _vm_data)
110-
router.push({name: 'modal', params: {link: 'fred-bloggs'}})
87+
const vm = generate_vm(null, _vm_data)
88+
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
11189
Vue.nextTick(() => {
11290
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
11391
expect(vm.$el.querySelector('.tcs-attr').innerHTML).to.include('I am <strong>great</strong>')

‎test/unit/specs/enquiry.js‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,56 @@
11
import Vue from 'vue'
2-
import VueRouter from 'vue-router'
3-
import modal from 'src/components/modal'
42
import {generate_vm} from './_shared'
53

64
describe('enquiry.vue', () => {
75
it('should render contractor details then form', done => {
8-
Vue.use(VueRouter)
9-
const router = new VueRouter({routes: [
10-
{path: '/', name: 'index', component: {render: h => h('div')}},
11-
{path: '/:link', name: 'modal', component: modal},
12-
]})
13-
const vm = generate_vm(router)
14-
router.push({name: 'modal', params: {link: 'fred-bloggs'}})
6+
const vm = generate_vm()
7+
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
158
Vue.nextTick(() => {
169
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
1710
expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
1811
vm.$el.querySelector('.tcs-extra button').click()
1912
Vue.nextTick(() => {
2013
expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
2114
expect(vm.$el.querySelector('input').attributes['name'].value).to.equal('.first_field')
15+
expect(vm.$el.querySelector('textarea').attributes['placeholder'].value).to.equal('Custom Field')
16+
expect(vm.$el.querySelector('textarea').attributes['name'].value).to.equal('attributes.custom_field')
2217
done()
2318
})
2419
})
2520
})
2621
})
22+
23+
describe('enquiry.vue', () => {
24+
it('should submit form', done => {
25+
const vm = generate_vm()
26+
vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
27+
Vue.nextTick(() => {
28+
expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
29+
vm.$el.querySelector('.tcs-extra button').click()
30+
Vue.nextTick(() => {
31+
expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
32+
expect(vm.$el.querySelector('input').value).to.equal('')
33+
expect(vm.enquiry_data).to.deep.equal({})
34+
vm.$el.querySelector('input').value = 'the new value'
35+
vm.$el.querySelector('input').dispatchEvent(new window.Event('input'))
36+
37+
vm.$el.querySelector('textarea').value = 'X'
38+
vm.$el.querySelector('textarea').dispatchEvent(new window.Event('input'))
39+
40+
Vue.nextTick(() => {
41+
expect(vm.$el.querySelector('input').value).to.equal('the new value')
42+
expect(vm.enquiry_data).to.deep.equal({first_field: 'the new value', attributes: {custom_field: 'X'}})
43+
44+
expect(vm.method_calls['submit_enquiry']).to.equal(undefined)
45+
vm.$el.querySelector('form').dispatchEvent(new window.Event('submit'))
46+
Vue.nextTick(() => {
47+
expect(vm.method_calls['submit_enquiry']).to.equal(1)
48+
expect(vm.enquiry_data).to.deep.equal({})
49+
done()
50+
})
51+
})
52+
})
53+
})
54+
})
55+
})
56+

0 commit comments

Comments
 (0)