using promises and more tests

Author: samuelcolvin

src/main.js

@@ -134,7 +134,7 @@ response text:   "${xhr.responseText}"`)
       },
       get_details: function (url, link) {
         if (this.contractors_extra[link] !== undefined) {
-          return
+          return false
         }
         let xhr = new window.XMLHttpRequest()
         xhr.open('GET', url)
@@ -147,6 +147,7 @@ response text:   "${xhr.responseText}"`)
           }
         }
         xhr.send()
+        return true
       },
       get_enquiry: function () {
         if (this.enquiry_form_info !== null) {

test/unit/specs/_shared.js

@@ -70,4 +70,8 @@ const generate_vm = (router, vm_data_) => {
   })
 }
 
-export {dft_response, TestConsole, enquiry_options, vm_data, generate_vm}
+function tick () {
+  return new Promise((resolve, reject) => Vue.nextTick(resolve))
+}
+
+export {dft_response, TestConsole, enquiry_options, vm_data, generate_vm, tick}

test/unit/specs/con-details.js

@@ -1,38 +1,35 @@
-import Vue from 'vue'
-import {generate_vm} from './_shared'
+import {generate_vm, tick} from './_shared'
 
 describe('modal.vue', () => {
-  it('should close on tcs-modal-mask', done => {
+  it('should close on tcs-modal-mask', async function () {
     const vm = generate_vm()
     vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.attributes['class'].value).to.contain('tcs-modal-mask')
-      // this is clicking the background
-      vm.$el.click()
-      Vue.nextTick(() => {
-        expect(vm.$el.attributes['class'].value).to.equal('index')
-        done()
-      })
-    })
+
+    await tick()
+    expect(vm.$el.attributes['class'].value).to.contain('tcs-modal-mask')
+    // this is clicking the background
+    vm.$el.click()
+
+    await tick()
+    expect(vm.$el.attributes['class'].value).to.equal('index')
   })
 })
 
 describe('con-details.vue', () => {
-  it('should render contractor details', done => {
+  it('should render contractor details', async function () {
     const vm = generate_vm()
     vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
-      expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
-      expect(vm.$el.querySelector('.tcs-attr h3').textContent).to.equal('Bio')
-      expect(vm.$el.querySelector('.tcs-attr p').textContent).to.equal('I am great')
-      done()
-    })
+
+    await tick()
+    expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+    expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
+    expect(vm.$el.querySelector('.tcs-attr h3').textContent).to.equal('Bio')
+    expect(vm.$el.querySelector('.tcs-attr p').textContent).to.equal('I am great')
   })
 })
 
 describe('con-details.vue', () => {
-  it('should render only five qual levels', done => {
+  it('should render only five qual levels', async function () {
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
       config: {},
@@ -57,23 +54,22 @@ describe('con-details.vue', () => {
 
     const vm = generate_vm(null, _vm_data)
     vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('GCSE')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('AS Level')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL1')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL2')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.not.include('QL3')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.not.include('QL4')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL5')
-      expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL6')
-      done()
-    })
+
+    await tick()
+    expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('GCSE')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('AS Level')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL1')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL2')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.not.include('QL3')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.not.include('QL4')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL5')
+    expect(vm.$el.querySelector('.tcs-skills').textContent).to.include('QL6')
   })
 })
 
 describe('con-details.vue', () => {
-  it('should render markdown', done => {
+  it('should render markdown', async function () {
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
       config: {},
@@ -86,10 +82,9 @@ describe('con-details.vue', () => {
 
     const vm = generate_vm(null, _vm_data)
     vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
-      expect(vm.$el.querySelector('.tcs-attr').innerHTML).to.include('I am <strong>great</strong>')
-      done()
-    })
+
+    await tick()
+    expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+    expect(vm.$el.querySelector('.tcs-attr').innerHTML).to.include('I am <strong>great</strong>')
   })
 })

test/unit/specs/enquiry.js

@@ -1,56 +1,50 @@
-import Vue from 'vue'
-import {generate_vm} from './_shared'
+import {generate_vm, tick} from './_shared'
 
 describe('enquiry.vue', () => {
-  it('should render contractor details then form', done => {
+  it('should render contractor details then form', async function () {
     const vm = generate_vm()
     vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
-      expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
-      vm.$el.querySelector('.tcs-extra button').click()
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
-        expect(vm.$el.querySelector('input').attributes['name'].value).to.equal('.first_field')
-        expect(vm.$el.querySelector('textarea').attributes['placeholder'].value).to.equal('Custom Field')
-        expect(vm.$el.querySelector('textarea').attributes['name'].value).to.equal('attributes.custom_field')
-        done()
-      })
-    })
+    await tick()
+    expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+    expect(vm.$el.querySelector('.tcs-aside').textContent).to.equal('hello')
+    vm.$el.querySelector('.tcs-extra button').click()
+    await tick()
+    expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
+    expect(vm.$el.querySelector('input').attributes['name'].value).to.equal('.first_field')
+    expect(vm.$el.querySelector('textarea').attributes['placeholder'].value).to.equal('Custom Field')
+    expect(vm.$el.querySelector('textarea').attributes['name'].value).to.equal('attributes.custom_field')
   })
 })
 
 describe('enquiry.vue', () => {
-  it('should submit form', done => {
+  it('should submit form', async function () {
     const vm = generate_vm()
     vm.$router.push({name: 'modal', params: {link: 'fred-bloggs'}})
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
-      vm.$el.querySelector('.tcs-extra button').click()
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
-        expect(vm.$el.querySelector('input').value).to.equal('')
-        expect(vm.enquiry_data).to.deep.equal({})
-        vm.$el.querySelector('input').value = 'the new value'
-        vm.$el.querySelector('input').dispatchEvent(new window.Event('input'))
-
-        vm.$el.querySelector('textarea').value = 'X'
-        vm.$el.querySelector('textarea').dispatchEvent(new window.Event('input'))
-
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelector('input').value).to.equal('the new value')
-          expect(vm.enquiry_data).to.deep.equal({first_field: 'the new value', attributes: {custom_field: 'X'}})
-
-          expect(vm.method_calls['submit_enquiry']).to.equal(undefined)
-          vm.$el.querySelector('form').dispatchEvent(new window.Event('submit'))
-          Vue.nextTick(() => {
-            expect(vm.method_calls['submit_enquiry']).to.equal(1)
-            expect(vm.enquiry_data).to.deep.equal({})
-            done()
-          })
-        })
-      })
-    })
+
+    await tick()
+    expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
+    vm.$el.querySelector('.tcs-extra button').click()
+
+    await tick()
+    expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
+    expect(vm.$el.querySelector('input').value).to.equal('')
+    expect(vm.enquiry_data).to.deep.equal({})
+    vm.$el.querySelector('input').value = 'the new value'
+    vm.$el.querySelector('input').dispatchEvent(new window.Event('input'))
+
+    vm.$el.querySelector('textarea').value = 'X'
+    vm.$el.querySelector('textarea').dispatchEvent(new window.Event('input'))
+
+    await tick()
+    expect(vm.$el.querySelector('input').value).to.equal('the new value')
+    expect(vm.enquiry_data).to.deep.equal({first_field: 'the new value', attributes: {custom_field: 'X'}})
+
+    expect(vm.method_calls['submit_enquiry']).to.equal(undefined)
+    vm.$el.querySelector('form').dispatchEvent(new window.Event('submit'))
+
+    await tick()
+    expect(vm.method_calls['submit_enquiry']).to.equal(1)
+    expect(vm.enquiry_data).to.deep.equal({})
   })
 })
 

test/unit/specs/main.js

@@ -113,10 +113,26 @@ describe('main.js', () => {
   before(() => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
-    server.respondWith(dft_response)
+    server.respondWith('/public-key/contractors', dft_response)
+    server.respondWith('/public-key/enquiry', [200, {'Content-Type': 'application/json'}, '{"response": "ok"}'])
+    server.respondWith('/foobar', [200, {'Content-Type': 'application/json'}, '{"the": "response"}'])
   })
   after(() => { server.restore() })
 
+  it('should get enquiry info', done => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key')
+    vm.get_enquiry()
+
+    setTimeout(() => {
+      expect(vm.enquiry_form_info).to.deep.equal({response: 'ok'})
+      done()
+    }, 50)
+  })
+
   it('should convert text', () => {
     let el = document.createElement('div')
     el.setAttribute('id', 'socket')
@@ -129,28 +145,21 @@ describe('main.js', () => {
     text = vm.get_text('contractor_enquiry_button', {'contractor_name': 'foobar'})
     expect(text).to.equal('Speak to foobar')
   })
-})
 
-describe('main.js', () => {
-  let server
-  before(() => {
-    server = sinon.fakeServer.create()
-    server.autoRespond = true
-    server.respondWith('/public-key/contractors', dft_response)
-    server.respondWith('/public-key/enquiry', [200, {'Content-Type': 'application/json'}, '{"response": "ok"}'])
-  })
-  after(() => { server.restore() })
-
-  it('should get enquiry info', done => {
+  it('should get contractor details', done => {
     let el = document.createElement('div')
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
     const vm = socket('public-key')
-    vm.get_enquiry()
+    expect(vm.contractors_extra).to.deep.equal({})
+    let v = vm.get_details('/foobar', 'key')
+    expect(v).to.equal(true)
 
     setTimeout(() => {
-      expect(vm.enquiry_form_info).to.deep.equal({response: 'ok'})
+      expect(vm.contractors_extra).to.deep.equal({key: {the: 'response'}})
+      v = vm.get_details('/foobar', 'key')
+      expect(v).to.equal(false)
       done()
     }, 50)
   })