From ab480483e885308777bd6ff3c4387d96fbb1efc8 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 3 Mar 2017 14:03:38 +0000
Subject: [PATCH 01/11] starting enquiry form

---
 src/components/con-details.vue | 41 --------------------
 src/components/enquiry.vue     | 17 ++++++++
 src/components/modal.vue       | 71 +++++++++++++++++++++++++++-------
 test/unit/specs/modal.js       |  2 +-
 4 files changed, 76 insertions(+), 55 deletions(-)
 create mode 100644 src/components/enquiry.vue

diff --git a/src/components/con-details.vue b/src/components/con-details.vue
index 05e099f7..4dc7176e 100644
--- a/src/components/con-details.vue
+++ b/src/components/con-details.vue
@@ -1,20 +1,5 @@
 <template>
   <div>
-    <div class="tcs-location">
-      <!--
-      this is the svg for map icon straight from
-      https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
-      -->
-      <svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
-          179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
-          362 150 150 362z"/>
-      </svg>
-      <span>{{ contractor.town }}, {{ contractor.country }}</span>
-    </div>
-
-    <div class="tcs-aside tcs-md" v-html="to_markdown(contractor.tag_line)"></div>
-
     <div class="tcs-md" v-html="to_markdown(contractor.primary_description)"></div>
 
     <div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
@@ -59,14 +44,6 @@ export default {
     contractor_extra: function () {
       return this.$root.contractors_extra[this.$route.params.link] || {}
     },
-  },
-  created: function () {
-    // TODO could do something less ugly here like hide the scroll bar at all times
-    this.body_overflow_before = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  },
-  destroyed: function () {
-    document.body.style.overflow = this.body_overflow_before
   }
 }
 </script>
@@ -74,30 +51,12 @@ export default {
 <style lang="scss">
 @import '../conf';
 
-.tcs-location {
-  margin-bottom: 10px;
-  float: right;
-  span {
-    display: inline-block;
-    padding-top: 4px;
-    vertical-align: top;
-    font-weight: 500;
-  }
-}
-
 .tcs-md {
   p {
     margin: 0 0 8px;
   }
 }
 
-.tcs-aside {
-  font-size: 22px;
-  margin-bottom: 10px;
-  color: $hightlight;
-  min-height: 28px;
-}
-
 h3 {
   margin-top: 12px;
   margin-bottom: 4px;
diff --git a/src/components/enquiry.vue b/src/components/enquiry.vue
new file mode 100644
index 00000000..216456fa
--- /dev/null
+++ b/src/components/enquiry.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>Enquiry Form</h3>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'enquiry',
+  props: ['contractor'],
+}
+</script>
+
+<style lang="scss">
+@import '../conf';
+
+</style>
diff --git a/src/components/modal.vue b/src/components/modal.vue
index a57546d8..779e2c66 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -19,12 +19,30 @@
 
         <div class="tcs-body">
           <div class="tcs-content">
-            <con-details :contractor="contractor"></con-details>
+            <div class="tcs-location">
+              <!--
+              this is the svg for map icon straight from
+              https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
+              -->
+              <svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
+                  179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
+                  362 150 150 362z"/>
+              </svg>
+              <span>{{ contractor.town }}, {{ contractor.country }}</span>
+            </div>
+
+            <div class="tcs-aside tcs-md">{{ contractor.tag_line }}</div>
+
+            <div class="tcs-scroll">
+              <enquiry v-if="show_enquiry"></enquiry>
+              <con-details v-else :contractor="contractor"></con-details>
+            </div>
           </div>
           <div class="tcs-extra">
             <img :src="contractor.photo" :alt="contractor.name">
-            <!--<button>Contact {{ contractor.name }}</button>-->
-            <p v-html="contact_html"></p>
+            <button v-if="show_enquiry" @click="switch_show">Show Profile</button>
+            <button v-else @click="switch_show">Contact {{ contractor.name }}</button>
           </div>
         </div>
 
@@ -38,16 +56,27 @@
 
 <script>
 var con_details = require('./con-details')
+var enquiry = require('./enquiry')
 
 export default {
   name: 'tcs-modal',
   methods: {
     close: function () {
       this.$router.push({name: 'index'})
+    },
+    switch_show: function () {
+      this.show_enquiry = !this.show_enquiry
     }
   },
   components: {
-    'con-details': con_details
+    'con-details': con_details,
+    'enquiry': enquiry,
+  },
+  props: {
+    show_enquiry: {
+      type: Boolean,
+      default: false
+    },
   },
   computed: {
     contractor: function () {
@@ -98,6 +127,24 @@ export default {
   transition: all .3s ease;
 }
 
+.tcs-location {
+  margin-bottom: 10px;
+  float: right;
+  span {
+    display: inline-block;
+    padding-top: 4px;
+    vertical-align: top;
+    font-weight: 500;
+  }
+}
+
+.tcs-aside {
+  font-size: 22px;
+  margin-bottom: 10px;
+  color: $hightlight;
+  min-height: 28px;
+}
+
 svg.tcs-svg {
   width: $svg-size;
   height: $svg-size;
@@ -133,8 +180,6 @@ svg.tcs-svg {
 .tcs-body {
   display: flex;
   justify-content: space-between;
-  max-height: calc(94vh - 130px);
-  overflow-y: auto;
 }
 
 .tcs-content {
@@ -142,12 +187,17 @@ svg.tcs-svg {
   padding-right: 10px;
   color: #444;
   width: calc(100% - 200px);
+  margin-right: 5px;
+  .tcs-scroll {
+    max-height: calc(94vh - 180px);
+    overflow-y: auto;
+  }
 }
 
 .tcs-extra {
   text-align: center;
+  width: $extra-width;
   img {
-    width: $extra-width;
     height: $extra-width;
     border-radius: 4px;
   }
@@ -162,16 +212,11 @@ svg.tcs-svg {
     border: none;
     transition: all .3s ease;
     outline: none;
+    cursor: pointer;
     &:hover {
       background-color: darken($button-colour, 20%);
     }
   }
-  p {
-    max-width: $extra-width;
-  }
-  a {
-    color: $hightlight;
-  }
 }
 
 // auto applied:
diff --git a/test/unit/specs/modal.js b/test/unit/specs/modal.js
index d1b2b444..8e9b5dc0 100644
--- a/test/unit/specs/modal.js
+++ b/test/unit/specs/modal.js
@@ -25,7 +25,7 @@ describe('modal.vue', () => {
     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\n')
+      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()

From 87055ace01f64115ebcb5a262e56b93c79dfcf96 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 3 Mar 2017 17:45:37 +0000
Subject: [PATCH 02/11] enquiry form rendering properly

---
 src/components/enquiry.vue | 72 +++++++++++++++++++++++++++++++++++++-
 src/components/modal.vue   | 24 ++++++-------
 src/conf.scss              |  2 +-
 src/main.js                | 41 ++++++++++++++++++----
 4 files changed, 118 insertions(+), 21 deletions(-)

diff --git a/src/components/enquiry.vue b/src/components/enquiry.vue
index 216456fa..377a0e32 100644
--- a/src/components/enquiry.vue
+++ b/src/components/enquiry.vue
@@ -1,6 +1,23 @@
 <template>
   <div>
-    <h3>Enquiry Form</h3>
+    <p class="tcs">
+      {{ $root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}) }}
+    </p>
+    <form class="tcs">
+      <div class="tcs-field" v-for="field in visible_fields">
+        <input :type="field.type" :id="field.field" :placeholder="field.label" :required="field.required">
+      </div>
+      <div class="tcs-field" v-for="field in attribute_fields">
+        <textarea v-if="field.type == 'text'" :id="'attributes_' + field.field" :placeholder="field.label" :required="field.required" rows="5">
+        </textarea>
+        <input v-else :type="field.type" :id="'attributes_' + field.field" :placeholder="field.label" :required="field.required">
+      </div>
+      <div class="tcs-field tcs-submit">
+        <button type="submit">
+          {{ $root.config.submit_enquiry }}
+        </button>
+      </div>
+    </form>
   </div>
 </template>
 
@@ -8,10 +25,63 @@
 export default {
   name: 'enquiry',
   props: ['contractor'],
+  computed: {
+    visible_fields: function () {
+      return this.$root.enquiry_info.visible || {}
+    },
+    attribute_fields: function () {
+      return this.$root.enquiry_info.attributes || {}
+    },
+  }
 }
 </script>
 
 <style lang="scss">
 @import '../conf';
 
+form.tcs {
+  margin: auto;
+  max-width: 400px;
+}
+
+p.tcs {
+  margin: 0 0 10px;
+}
+
+$border-colour: #66afe9;
+.tcs-field {
+  padding: 8px 0;
+  width: 100%;
+  input, textarea {
+    font-size: 15px;
+    width: calc(100% - 16px);
+    padding: 6px 8px;
+    border-radius: 2px;
+    border: 1px solid #aaa;
+    outline: none;
+    &:focus {
+      border-color: $border-colour;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
+    }
+  }
+}
+
+.tcs-submit {
+  text-align: right;
+  button {
+    font-size: 17px;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+
+    background-color: $button-colour;
+    color: white;
+    transition: all .3s ease;
+    outline: none;
+    cursor: pointer;
+    &:hover {
+      background-color: darken($button-colour, 20%);
+    }
+  }
+}
 </style>
diff --git a/src/components/modal.vue b/src/components/modal.vue
index 779e2c66..a65419f0 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -35,14 +35,18 @@
             <div class="tcs-aside tcs-md">{{ contractor.tag_line }}</div>
 
             <div class="tcs-scroll">
-              <enquiry v-if="show_enquiry"></enquiry>
+              <enquiry v-if="show_enquiry" :contractor="contractor"></enquiry>
               <con-details v-else :contractor="contractor"></con-details>
             </div>
           </div>
           <div class="tcs-extra">
             <img :src="contractor.photo" :alt="contractor.name">
-            <button v-if="show_enquiry" @click="switch_show">Show Profile</button>
-            <button v-else @click="switch_show">Contact {{ contractor.name }}</button>
+            <button v-if="show_enquiry" @click="switch_show">
+              {{ $root.get_text('contractor_details_button', {contractor_name: contractor.name}) }}
+            </button>
+            <button v-else @click="switch_show">
+              {{ $root.get_text('contractor_enquiry_button', {contractor_name: contractor.name}) }}
+            </button>
           </div>
         </div>
 
@@ -72,12 +76,9 @@ export default {
     'con-details': con_details,
     'enquiry': enquiry,
   },
-  props: {
-    show_enquiry: {
-      type: Boolean,
-      default: false
-    },
-  },
+  data: () => ({
+    show_enquiry: false
+  }),
   computed: {
     contractor: function () {
       for (var contractor of this.$root.contractors) {
@@ -86,13 +87,10 @@ export default {
           return contractor
         }
       }
-    },
-    contact_html: function () {
-      let raw = this.$root.config.contact_html
-      return raw.replace('{name}', this.contractor.name).replace('{contact_link}', this.$root.config.contact_link)
     }
   },
   created: function () {
+    this.$root.get_enquiry()
     // TODO could do something less ugly here like hide the scroll bar at all times
     this.body_overflow_before = document.body.style.overflow
     document.body.style.overflow = 'hidden'
diff --git a/src/conf.scss b/src/conf.scss
index dc3f6c51..fa16e966 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -3,7 +3,7 @@ $border-radius: 3px;
 // model background colour
 $back-colour: 35;
 // highlight sections of modals
-$hightlight: #1f2e50;
+$hightlight: lighten(#1f2e50, 10%);
 // svgs on modals
 $svg-size: 22px;
 // section on right (with image) on modals
diff --git a/src/main.js b/src/main.js
index 5f48ae86..4b1e6706 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,6 +29,14 @@ const ConfiguredVueRouter = config => new VueRouter({
   ]
 })
 
+const STRINGS = {
+  skills_label: 'Skills',
+  contractor_enquiry_message: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
+  contractor_enquiry_button: 'Contact {contractor_name}',
+  contractor_details_button: 'Show Profile',
+  submit_enquiry: 'Submit Enquiry'
+}
+
 module.exports = function (public_key, config) {
   config = config || {}
   let error = null
@@ -52,16 +60,14 @@ module.exports = function (public_key, config) {
     config.element = '#socket'
   }
 
-  if (config.contact_html === undefined) {
-    config.contact_html = 'To request tutoring from {name} please <a href="{contact_link}">get in touch</a> with us.'
-  }
-
   if (config.contact_link === undefined) {
     config.contact_link = '/contact'
   }
 
-  if (config.skills_label === undefined) {
-    config.skills_label = 'Skills'
+  for (let k of Object.keys(STRINGS)) {
+    if (config[k] === undefined) {
+      config[k] = STRINGS[k]
+    }
   }
 
   return new Vue({
@@ -74,6 +80,7 @@ module.exports = function (public_key, config) {
       config: config,
       error: null,
       public_key: public_key,
+      enquiry_info: null,
     },
     components: {
       app
@@ -137,6 +144,28 @@ response text:   "${xhr.responseText}"`)
           }
         }
         xhr.send()
+      },
+      get_enquiry: function () {
+        if (this.enquiry_info !== null) {
+          return
+        }
+        let xhr = new window.XMLHttpRequest()
+        xhr.open('GET', `${config.api_root}/${public_key}/enquiry`)
+        xhr.onload = () => {
+          if (xhr.status !== 200) {
+            throw new Error(`bad response ${xhr.status}`)
+          } else {
+            this.enquiry_info = JSON.parse(xhr.responseText)
+          }
+        }
+        xhr.send()
+      },
+      get_text: function (key, replace_with) {
+        let s = this.config[key]
+        for (let [k, v] of Object.entries(replace_with)) {
+          s = s.replace('{' + k + '}', v)
+        }
+        return s
       }
     }
   })

From 2e2c7eac7b98c2771d53cff8591c6d9fda348845 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 11:51:08 +0000
Subject: [PATCH 03/11] fixing tests

---
 src/main.js              |  6 ++---
 test/unit/index.js       |  2 +-
 test/unit/specs/main.js  |  2 ++
 test/unit/specs/modal.js | 48 +++++++++++++++-------------------------
 4 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/main.js b/src/main.js
index 4b1e6706..6ec01aa2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -160,9 +160,9 @@ response text:   "${xhr.responseText}"`)
         }
         xhr.send()
       },
-      get_text: function (key, replace_with) {
-        let s = this.config[key]
-        for (let [k, v] of Object.entries(replace_with)) {
+      get_text: function (name, replacements) {
+        let s = this.config[name]
+        for (let [k, v] of Object.entries(replacements)) {
           s = s.replace('{' + k + '}', v)
         }
         return s
diff --git a/test/unit/index.js b/test/unit/index.js
index 3584c4c5..2127fb17 100644
--- a/test/unit/index.js
+++ b/test/unit/index.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-extend-native */
 Function.prototype.bind = require('function-bind')
 
-// require all test files (files that ends with .spec.js)
+// const testsContext = require.context('./specs', true, /main\.js$/)
 const testsContext = require.context('./specs', true)
 testsContext.keys().forEach(testsContext)
 
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index ecc51029..abab0c7e 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -1,6 +1,7 @@
 import socket from 'src/main'
 
 const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
+const blank_response = [200, {'Content-Type': 'application/json'}, '{}']
 
 describe('main.js', done => {
   let server
@@ -40,6 +41,7 @@ describe('main.js', () => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith('/public_key/contractors', dft_response)
+    server.respondWith('/public_key/enquiry', blank_response)
   })
   after(() => { server.restore() })
 
diff --git a/test/unit/specs/modal.js b/test/unit/specs/modal.js
index 8e9b5dc0..2d6e1a71 100644
--- a/test/unit/specs/modal.js
+++ b/test/unit/specs/modal.js
@@ -8,6 +8,18 @@ const vm_data = {
   contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
 }
 
+const generate_vm = (router, vm_data_) => new Vue({
+  el: document.createElement('div'),
+  router: router,
+  render: h => h('router-view'),
+  data: vm_data_ || vm_data,
+  methods: {
+    get_details: () => null,
+    get_enquiry: () => null,
+    get_text: (name, replacements) => null,
+  }
+})
+
 describe('modal.vue', () => {
   it('should render contractor details', done => {
     Vue.use(VueRouter)
@@ -15,13 +27,7 @@ describe('modal.vue', () => {
         {path: '/', name: 'index', component: {render: h => h('div')}},
         {path: '/:link', name: 'modal', component: modal},
     ]})
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
+    const vm = generate_vm(router)
     router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
@@ -34,22 +40,16 @@ describe('modal.vue', () => {
 })
 
 describe('modal.vue', () => {
-  it('should closes on tcs-modal-mask', done => {
+  it('should close on tcs-modal-mask', done => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
         {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
         {path: '/:link', name: 'modal', component: modal},
     ]})
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
+    const vm = generate_vm(router)
     router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
-      expect(vm.$el.attributes['class'].value).to.equal('tcs-modal-mask')
+      expect(vm.$el.attributes['class'].value).to.contain('tcs-modal-mask')
       // this is clicking the background
       vm.$el.click()
       Vue.nextTick(() => {
@@ -89,13 +89,7 @@ describe('modal.vue', () => {
       }
     }
 
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: _vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
+    const vm = generate_vm(router, _vm_data)
     router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')
@@ -129,13 +123,7 @@ describe('modal.vue', () => {
       }
     }
 
-    const vm = new Vue({
-      el: document.createElement('div'),
-      router: router,
-      render: h => h('router-view'),
-      data: _vm_data,
-      methods: {get_details: function (url, link) {}}
-    })
+    const vm = generate_vm(router, _vm_data)
     router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('h2').textContent).to.equal('Fred Bloggs')

From be7eac36322c0afb83464741f981763ac2d27da2 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 12:30:40 +0000
Subject: [PATCH 04/11] cleanup tests

---
 src/main.js             |  6 +++++-
 test/unit/specs/main.js | 35 +++++++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/main.js b/src/main.js
index 6ec01aa2..29388d06 100644
--- a/src/main.js
+++ b/src/main.js
@@ -64,6 +64,10 @@ module.exports = function (public_key, config) {
     config.contact_link = '/contact'
   }
 
+  if (config.console === undefined) {
+    config.console = console
+  }
+
   for (let k of Object.keys(STRINGS)) {
     if (config[k] === undefined) {
       config[k] = STRINGS[k]
@@ -89,7 +93,7 @@ module.exports = function (public_key, config) {
       // get_data is called by components, eg. grid
       handle_error: function (error_message) {
         this.error = error_message || 'unknown'
-        console.error(this.error)
+        config.console.error(this.error)
         Raven.captureException(new Error(this.error))
       },
       get_list: function () {
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index abab0c7e..a7e08a8f 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -1,7 +1,24 @@
 import socket from 'src/main'
 
 const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
-const blank_response = [200, {'Content-Type': 'application/json'}, '{}']
+
+class TestConsole {
+  log_ = []
+  warning_ = []
+  error_ = []
+
+  log () {
+    this.log_.push(Array.from(arguments).join())
+  }
+
+  warning () {
+    this.warning_.push(Array.from(arguments).join())
+  }
+
+  error () {
+    this.error_.push(Array.from(arguments).join())
+  }
+}
 
 describe('main.js', done => {
   let server
@@ -23,9 +40,9 @@ describe('main.js', done => {
     const vm = socket('public_key', {
       element: '#foobar'
     })
-
+    vm.enquiry_info = 'foobar'  // prevent get_enquiry making a GET request
     expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
-    // no time for get_data to be called so wont fail
+    // no time for get_data to be called so should be empty
     expect(vm.contractors).to.be.empty
 
     setTimeout(() => {
@@ -41,7 +58,6 @@ describe('main.js', () => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith('/public_key/contractors', dft_response)
-    server.respondWith('/public_key/enquiry', blank_response)
   })
   after(() => { server.restore() })
 
@@ -51,6 +67,7 @@ describe('main.js', () => {
     document.body.appendChild(el)
 
     const vm = socket('public_key')
+    vm.enquiry_info = 'foobar'  // prevent get_enquiry making a GET request
 
     setTimeout(() => {
       expect(vm.error).to.equal(null)
@@ -74,7 +91,8 @@ describe('main.js', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket('public_key')
+    let test_console = new TestConsole()
+    const vm = socket('public_key', {console: test_console})
 
     setTimeout(() => {
       !expect(vm.error).to.not.equal(null)
@@ -82,6 +100,9 @@ describe('main.js', () => {
       expect(vm.error).to.contain('response status: 404')
       expect(vm.error).to.contain('response text:\nbadness')
       expect(vm.error).to.not.contain('Connection error')
+      expect(test_console.log_).to.have.lengthOf(0)
+      expect(test_console.warning_).to.have.lengthOf(0)
+      expect(test_console.error_).to.have.lengthOf(1)
       done()
     }, 50)
   })
@@ -93,11 +114,13 @@ describe('main.js', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket('the-public-key', {api_root: 'http://localhost:12345678'})
+    let test_console = new TestConsole()
+    const vm = socket('the-public-key', {api_root: 'http://localhost:12345678', console: test_console})
 
     setTimeout(() => {
       expect(vm.error).to.contain('Connection error')
       expect(vm.error).to.contain('response status: 0')
+      expect(test_console.error_).to.have.lengthOf(1)
       done()
     }, 50)
   })

From 1a710af94b9422747e089884c4674b68ebba8908 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 13:01:42 +0000
Subject: [PATCH 05/11] adding tests for converting text and getting enquiry
 info

---
 src/main.js             |  2 +-
 test/unit/specs/main.js | 51 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index 29388d06..ffffa86c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -166,7 +166,7 @@ response text:   "${xhr.responseText}"`)
       },
       get_text: function (name, replacements) {
         let s = this.config[name]
-        for (let [k, v] of Object.entries(replacements)) {
+        for (let [k, v] of Object.entries(replacements || {})) {
           s = s.replace('{' + k + '}', v)
         }
         return s
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index a7e08a8f..add856d0 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -95,7 +95,7 @@ describe('main.js', () => {
     const vm = socket('public_key', {console: test_console})
 
     setTimeout(() => {
-      !expect(vm.error).to.not.equal(null)
+      expect(vm.error).to.not.equal(null)
       expect(vm.error).to.contain('Error: bad response 404')
       expect(vm.error).to.contain('response status: 404')
       expect(vm.error).to.contain('response text:\nbadness')
@@ -125,3 +125,52 @@ describe('main.js', () => {
     }, 50)
   })
 })
+
+describe('main.js', () => {
+  let server
+  before(() => {
+    server = sinon.fakeServer.create()
+    server.autoRespond = true
+    server.respondWith(dft_response)
+  })
+  after(() => { server.restore() })
+
+  it('should convert text', () => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key', {contractor_enquiry_button: 'Speak to {contractor_name}'})
+    vm.enquiry_info = 'x'  // prevent get_enquiry making a GET request
+    let text = vm.get_text('skills_label')
+    expect(text).to.equal('Skills')
+    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 => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key', {contractor_enquiry_button: 'Speak to {contractor_name}'})
+    vm.get_enquiry()
+
+    setTimeout(() => {
+      expect(vm.enquiry_info).to.deep.equal({response: 'ok'})
+      done()
+    }, 50)
+  })
+})

From cdcc41c983aa28a79d31c2ea63458520a939bf50 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 13:07:28 +0000
Subject: [PATCH 06/11] fix linting

---
 src/components/enquiry.vue | 17 ++++++++++++++---
 test/unit/specs/main.js    |  1 -
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/enquiry.vue b/src/components/enquiry.vue
index 377a0e32..1c7d9b5c 100644
--- a/src/components/enquiry.vue
+++ b/src/components/enquiry.vue
@@ -5,12 +5,23 @@
     </p>
     <form class="tcs">
       <div class="tcs-field" v-for="field in visible_fields">
-        <input :type="field.type" :id="field.field" :placeholder="field.label" :required="field.required">
+        <input :type="field.type"
+               :id="field.field"
+               :placeholder="field.label"
+               :required="field.required">
       </div>
       <div class="tcs-field" v-for="field in attribute_fields">
-        <textarea v-if="field.type == 'text'" :id="'attributes_' + field.field" :placeholder="field.label" :required="field.required" rows="5">
+        <textarea v-if="field.type == 'text'"
+                  :id="'attributes_' + field.field"
+                  :placeholder="field.label"
+                  :required="field.required"
+                  rows="5">
         </textarea>
-        <input v-else :type="field.type" :id="'attributes_' + field.field" :placeholder="field.label" :required="field.required">
+        <input v-else
+               :type="field.type"
+               :id="'attributes_' + field.field"
+               :placeholder="field.label"
+               :required="field.required">
       </div>
       <div class="tcs-field tcs-submit">
         <button type="submit">
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index add856d0..32a641e9 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -149,7 +149,6 @@ describe('main.js', () => {
   })
 })
 
-
 describe('main.js', () => {
   let server
   before(() => {

From 4f8254e27a26fdef0e9551361e081077a59d1b9c Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 16:12:56 +0000
Subject: [PATCH 07/11] enquiry form submission working

---
 config.js                      |  2 +-
 src/components/con-details.vue |  2 +-
 src/components/enquiry.vue     | 93 ++++++++++++++++------------------
 src/components/input.vue       | 83 ++++++++++++++++++++++++++++++
 src/components/modal.vue       |  4 +-
 src/conf.scss                  |  5 +-
 src/main.js                    | 44 ++++++++++++----
 src/utils.js                   |  3 +-
 test/unit/specs/main.js        |  8 +--
 9 files changed, 173 insertions(+), 71 deletions(-)
 create mode 100644 src/components/input.vue

diff --git a/config.js b/config.js
index e1d7415a..54bf712a 100644
--- a/config.js
+++ b/config.js
@@ -46,7 +46,7 @@ module.exports = {
       // SOCKET_API_URL: '"api/"',
       SOCKET_API_URL: '"https://socket.tutorcruncher.com"',
     },
-    port: 8000,
+    port: 5000,
     build_dir: path.resolve(__dirname, 'dev'),
     css_source_map: true,
     public_path: '/',
diff --git a/src/components/con-details.vue b/src/components/con-details.vue
index 4dc7176e..2d781f9c 100644
--- a/src/components/con-details.vue
+++ b/src/components/con-details.vue
@@ -92,7 +92,7 @@ table.tcs-skills {
       padding: 3px 3px;
       margin: 0 2px 2px;
       color: white;
-      background: $hightlight;
+      background: $hightlight-light;
       border-radius: 3px;
     }
   }
diff --git a/src/components/enquiry.vue b/src/components/enquiry.vue
index 1c7d9b5c..4098f7f6 100644
--- a/src/components/enquiry.vue
+++ b/src/components/enquiry.vue
@@ -1,49 +1,56 @@
 <template>
   <div>
-    <p class="tcs">
-      {{ $root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}) }}
-    </p>
-    <form class="tcs">
-      <div class="tcs-field" v-for="field in visible_fields">
-        <input :type="field.type"
-               :id="field.field"
-               :placeholder="field.label"
-               :required="field.required">
-      </div>
-      <div class="tcs-field" v-for="field in attribute_fields">
-        <textarea v-if="field.type == 'text'"
-                  :id="'attributes_' + field.field"
-                  :placeholder="field.label"
-                  :required="field.required"
-                  rows="5">
-        </textarea>
-        <input v-else
-               :type="field.type"
-               :id="'attributes_' + field.field"
-               :placeholder="field.label"
-               :required="field.required">
-      </div>
-      <div class="tcs-field tcs-submit">
-        <button type="submit">
-          {{ $root.config.submit_enquiry }}
-        </button>
-      </div>
-    </form>
+    <div class="tcs-submitted" v-if="submitted" v-html="$root.get_text('enquiry_submitted_thanks', {}, true)"></div>
+    <div v-else>
+      <p class="tcs">
+        {{ $root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}) }}
+      </p>
+      <form class="tcs" @submit.prevent="submit">
+        <div v-for="field in visible_fields">
+          <input_ :field="field"></input_>
+        </div>
+        <div v-for="field in attribute_fields">
+          <input_ :field="field" prefix="attributes"></input_>
+        </div>
+        <div class="tcs-field tcs-submit">
+          <button type="submit">
+            {{ $root.config.submit_enquiry }}
+          </button>
+        </div>
+      </form>
+    </div>
   </div>
 </template>
 
 <script>
+var input = require('./input')
+
 export default {
   name: 'enquiry',
   props: ['contractor'],
+  components: {
+    'input_': input
+  },
   computed: {
     visible_fields: function () {
-      return this.$root.enquiry_info.visible || {}
+      return this.$root.enquiry_form_info.visible || []
     },
     attribute_fields: function () {
-      return this.$root.enquiry_info.attributes || {}
+      return this.$root.enquiry_form_info.attributes || []
+    }
+  },
+  data: () => ({
+    submitted: false
+  }),
+  methods: {
+    submit: function () {
+      this.$set(this.$root.enquiry_data, 'contractor', this.contractor.id)
+      this.$root.submit_enquiry(this.submission_complete)
     },
-  }
+    submission_complete: function () {
+      this.submitted = true
+    }
+  },
 }
 </script>
 
@@ -52,29 +59,17 @@ export default {
 
 form.tcs {
   margin: auto;
-  max-width: 400px;
+  max-width: 450px;
 }
 
 p.tcs {
   margin: 0 0 10px;
 }
 
-$border-colour: #66afe9;
-.tcs-field {
-  padding: 8px 0;
-  width: 100%;
-  input, textarea {
-    font-size: 15px;
-    width: calc(100% - 16px);
-    padding: 6px 8px;
-    border-radius: 2px;
-    border: 1px solid #aaa;
-    outline: none;
-    &:focus {
-      border-color: $border-colour;
-      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
-    }
-  }
+.tcs-submitted {
+  text-align: center;
+  font-size: 20px;
+  padding: 30px 40px;
 }
 
 .tcs-submit {
diff --git a/src/components/input.vue b/src/components/input.vue
new file mode 100644
index 00000000..17fc582e
--- /dev/null
+++ b/src/components/input.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="tcs-field">
+    <textarea v-if="is_textarea"
+              :name="name"
+              :placeholder="field.label"
+              :required="field.required"
+              :maxlength="field.max_length || 255"
+              :value="value"
+              @input="changed"
+              rows="5">
+    </textarea>
+    <input v-else
+           :type="field.type"
+           :name="name"
+           :placeholder="field.label"
+           :required="field.required"
+           :maxlength="field.max_length || 255"
+           :value="value"
+           @input="changed">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'input',
+  props: {
+    field: Object,
+    prefix: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    is_textarea: function () {
+      // TODO return this.field.type === 'text' && this.field.max_length > 1000
+      return this.field.type === 'text' && this.prefix === 'attribute_'
+    },
+    name: function () {
+      return this.prefix + '.' + this.field.field
+    },
+    value: function () {
+      if (this.prefix === '') {
+        return this.$root.enquiry_data[this.field.field] || ''
+      } else {
+        return (this.$root.enquiry_data[this.prefix] || {})[this.field.field] || ''
+      }
+    }
+  },
+  methods: {
+    changed: function (event) {
+      if (this.prefix === '') {
+        this.$set(this.$root.enquiry_data, this.field.field, event.target.value)
+      } else {
+        var obj = this.$root.enquiry_data[this.prefix] || {}
+        obj[this.field.field] = event.target.value
+        this.$set(this.$root.enquiry_data, this.prefix, obj)
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../conf';
+
+$border-colour: #66afe9;
+.tcs-field {
+  padding: 8px 0;
+  width: 100%;
+  input, textarea {
+    font-size: 16px;
+    width: calc(100% - 26px);
+    padding: 10px 12px;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+    outline: none;
+    &:focus {
+      border-color: $border-colour;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
+    }
+  }
+}
+</style>
diff --git a/src/components/modal.vue b/src/components/modal.vue
index a65419f0..f5f37ab1 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -139,7 +139,7 @@ export default {
 .tcs-aside {
   font-size: 22px;
   margin-bottom: 10px;
-  color: $hightlight;
+  color: $hightlight-dark;
   min-height: 28px;
 }
 
@@ -147,7 +147,7 @@ svg.tcs-svg {
   width: $svg-size;
   height: $svg-size;
   path {
-    fill: $hightlight;
+    fill: $hightlight-dark;
   }
 }
 
diff --git a/src/conf.scss b/src/conf.scss
index fa16e966..d6171a3b 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -3,10 +3,11 @@ $border-radius: 3px;
 // model background colour
 $back-colour: 35;
 // highlight sections of modals
-$hightlight: lighten(#1f2e50, 10%);
+$hightlight-dark: #01579B;
+$hightlight-light: #039BE5;
 // svgs on modals
 $svg-size: 22px;
 // section on right (with image) on modals
 $extra-width: 200px;
 // contact button on modals
-$button-colour: #5cb85c;
+$button-colour: $hightlight-light;
diff --git a/src/main.js b/src/main.js
index ffffa86c..f1a86d55 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import VueRouter from 'vue-router'
 import app from './app'
 import grid from './components/grid'
 import modal from './components/modal'
+import {to_markdown} from './utils'
 
 let dsn = process.env.NODE_ENV === 'production' && 'https://e8143a1422274f0bbf312ed8792f4e86@sentry.io/128441'
 Raven.config(dsn, {release: process.env.RELEASE}).addPlugin(RavenVue, Vue).install()
@@ -34,7 +35,8 @@ const STRINGS = {
   contractor_enquiry_message: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
   contractor_enquiry_button: 'Contact {contractor_name}',
   contractor_details_button: 'Show Profile',
-  submit_enquiry: 'Submit Enquiry'
+  submit_enquiry: 'Submit Enquiry',
+  enquiry_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.'
 }
 
 module.exports = function (public_key, config) {
@@ -60,10 +62,6 @@ module.exports = function (public_key, config) {
     config.element = '#socket'
   }
 
-  if (config.contact_link === undefined) {
-    config.contact_link = '/contact'
-  }
-
   if (config.console === undefined) {
     config.console = console
   }
@@ -84,7 +82,8 @@ module.exports = function (public_key, config) {
       config: config,
       error: null,
       public_key: public_key,
-      enquiry_info: null,
+      enquiry_form_info: null,
+      enquiry_data: {},
     },
     components: {
       app
@@ -150,7 +149,7 @@ response text:   "${xhr.responseText}"`)
         xhr.send()
       },
       get_enquiry: function () {
-        if (this.enquiry_info !== null) {
+        if (this.enquiry_form_info !== null) {
           return
         }
         let xhr = new window.XMLHttpRequest()
@@ -159,18 +158,41 @@ response text:   "${xhr.responseText}"`)
           if (xhr.status !== 200) {
             throw new Error(`bad response ${xhr.status}`)
           } else {
-            this.enquiry_info = JSON.parse(xhr.responseText)
+            this.enquiry_form_info = JSON.parse(xhr.responseText)
           }
         }
         xhr.send()
       },
-      get_text: function (name, replacements) {
+      get_text: function (name, replacements, is_markdown) {
         let s = this.config[name]
         for (let [k, v] of Object.entries(replacements || {})) {
           s = s.replace('{' + k + '}', v)
         }
-        return s
-      }
+        if (is_markdown === true) {
+          return to_markdown(s)
+        } else {
+          return s
+        }
+      },
+      submit_enquiry: function (callback) {
+        let data = JSON.stringify(this.enquiry_data)
+        let xhr = new window.XMLHttpRequest()
+        let url = `${config.api_root}/${public_key}/enquiry`
+        xhr.open('POST', url)
+        xhr.onload = () => {
+          if (xhr.status !== 201) {
+            this.handle_error(`\
+Connection error
+requested url:   "${url}"
+response status: ${xhr.status}
+response text:   "${xhr.responseText}"`)
+          } else {
+            this.enquiry_data = {}
+            callback()
+          }
+        }
+        xhr.send(data)
+      },
     }
   })
 }
diff --git a/src/utils.js b/src/utils.js
index 9626548b..c88939f4 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -6,10 +6,11 @@ marked.setOptions({
   smartLists: true,
 })
 
-export function to_markdown (t) {
+function to_markdown (t) {
   if (t === null || t === undefined) {
     return ''
   } else {
     return marked(t)
   }
 }
+export { to_markdown }
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index 32a641e9..0a92b61e 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -40,7 +40,7 @@ describe('main.js', done => {
     const vm = socket('public_key', {
       element: '#foobar'
     })
-    vm.enquiry_info = 'foobar'  // prevent get_enquiry making a GET request
+    vm.enquiry_form_info = 'foobar'  // prevent get_enquiry making a GET request
     expect(vm.$el.parentNode.attributes['id'].value).to.equal('outer')
     // no time for get_data to be called so should be empty
     expect(vm.contractors).to.be.empty
@@ -67,7 +67,7 @@ describe('main.js', () => {
     document.body.appendChild(el)
 
     const vm = socket('public_key')
-    vm.enquiry_info = 'foobar'  // prevent get_enquiry making a GET request
+    vm.enquiry_form_info = 'foobar'  // prevent get_enquiry making a GET request
 
     setTimeout(() => {
       expect(vm.error).to.equal(null)
@@ -141,7 +141,7 @@ describe('main.js', () => {
     document.body.appendChild(el)
 
     const vm = socket('public-key', {contractor_enquiry_button: 'Speak to {contractor_name}'})
-    vm.enquiry_info = 'x'  // prevent get_enquiry making a GET request
+    vm.enquiry_form_info = 'x'  // prevent get_enquiry making a GET request
     let text = vm.get_text('skills_label')
     expect(text).to.equal('Skills')
     text = vm.get_text('contractor_enquiry_button', {'contractor_name': 'foobar'})
@@ -168,7 +168,7 @@ describe('main.js', () => {
     vm.get_enquiry()
 
     setTimeout(() => {
-      expect(vm.enquiry_info).to.deep.equal({response: 'ok'})
+      expect(vm.enquiry_form_info).to.deep.equal({response: 'ok'})
       done()
     }, 50)
   })

From 90669d2ab574f1094ec37f994786f10e209810e4 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 16:59:14 +0000
Subject: [PATCH 08/11] tweaking colours

---
 src/components/con-details.vue | 2 +-
 src/components/input.vue       | 3 ++-
 src/components/modal.vue       | 4 ++--
 src/conf.scss                  | 5 ++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/con-details.vue b/src/components/con-details.vue
index 2d781f9c..4dc7176e 100644
--- a/src/components/con-details.vue
+++ b/src/components/con-details.vue
@@ -92,7 +92,7 @@ table.tcs-skills {
       padding: 3px 3px;
       margin: 0 2px 2px;
       color: white;
-      background: $hightlight-light;
+      background: $hightlight;
       border-radius: 3px;
     }
   }
diff --git a/src/components/input.vue b/src/components/input.vue
index 17fc582e..1e5dbfbc 100644
--- a/src/components/input.vue
+++ b/src/components/input.vue
@@ -33,7 +33,7 @@ export default {
   computed: {
     is_textarea: function () {
       // TODO return this.field.type === 'text' && this.field.max_length > 1000
-      return this.field.type === 'text' && this.prefix === 'attribute_'
+      return this.field.type === 'text' && this.prefix === 'attributes'
     },
     name: function () {
       return this.prefix + '.' + this.field.field
@@ -73,6 +73,7 @@ $border-colour: #66afe9;
     padding: 10px 12px;
     border-radius: 5px;
     border: 1px solid #aaa;
+    font-family: inherit;
     outline: none;
     &:focus {
       border-color: $border-colour;
diff --git a/src/components/modal.vue b/src/components/modal.vue
index f5f37ab1..a65419f0 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -139,7 +139,7 @@ export default {
 .tcs-aside {
   font-size: 22px;
   margin-bottom: 10px;
-  color: $hightlight-dark;
+  color: $hightlight;
   min-height: 28px;
 }
 
@@ -147,7 +147,7 @@ svg.tcs-svg {
   width: $svg-size;
   height: $svg-size;
   path {
-    fill: $hightlight-dark;
+    fill: $hightlight;
   }
 }
 
diff --git a/src/conf.scss b/src/conf.scss
index d6171a3b..2ee5d2b3 100644
--- a/src/conf.scss
+++ b/src/conf.scss
@@ -3,11 +3,10 @@ $border-radius: 3px;
 // model background colour
 $back-colour: 35;
 // highlight sections of modals
-$hightlight-dark: #01579B;
-$hightlight-light: #039BE5;
+$hightlight: #016997;
 // svgs on modals
 $svg-size: 22px;
 // section on right (with image) on modals
 $extra-width: 200px;
 // contact button on modals
-$button-colour: $hightlight-light;
+$button-colour: $hightlight;

From 74ff53e9fd5dd2761745f9aae5dea0e3880e0984 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 18:37:24 +0000
Subject: [PATCH 09/11] basic enquiry get tests

---
 src/components/input.vue                     |  2 +-
 src/main.js                                  |  9 +--
 test/unit/specs/_shared.js                   | 47 ++++++++++++++++
 test/unit/specs/{modal.js => con-details.js} | 59 +++++++-------------
 test/unit/specs/enquiry.js                   | 26 +++++++++
 test/unit/specs/grid.js                      |  1 -
 test/unit/specs/main.js                      | 26 ++-------
 7 files changed, 104 insertions(+), 66 deletions(-)
 create mode 100644 test/unit/specs/_shared.js
 rename test/unit/specs/{modal.js => con-details.js} (86%)
 create mode 100644 test/unit/specs/enquiry.js

diff --git a/src/components/input.vue b/src/components/input.vue
index 1e5dbfbc..79281269 100644
--- a/src/components/input.vue
+++ b/src/components/input.vue
@@ -32,7 +32,7 @@ export default {
   },
   computed: {
     is_textarea: function () {
-      // TODO return this.field.type === 'text' && this.field.max_length > 1000
+      // TODO return this.field.type === 'text' && this.field.max_length > 500
       return this.field.type === 'text' && this.prefix === 'attributes'
     },
     name: function () {
diff --git a/src/main.js b/src/main.js
index f1a86d55..d9bb5d5e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -108,7 +108,7 @@ module.exports = function (public_key, config) {
           let contractors
           try {
             if (xhr.status !== 200) {
-              throw new Error(`bad response ${xhr.status}`)
+              throw new Error(`bad response ${xhr.status} at "${url}"`)
             } else {
               contractors = JSON.parse(xhr.responseText)
             }
@@ -140,7 +140,7 @@ response text:   "${xhr.responseText}"`)
         xhr.open('GET', url)
         xhr.onload = () => {
           if (xhr.status !== 200) {
-            throw new Error(`bad response ${xhr.status}`)
+            throw new Error(`bad response ${xhr.status} at "${url}"`)
           } else {
             let con = JSON.parse(xhr.responseText)
             Vue.set(this.contractors_extra, link, con)
@@ -153,10 +153,11 @@ response text:   "${xhr.responseText}"`)
           return
         }
         let xhr = new window.XMLHttpRequest()
-        xhr.open('GET', `${config.api_root}/${public_key}/enquiry`)
+        let url = `${config.api_root}/${public_key}/enquiry`
+        xhr.open('GET', url)
         xhr.onload = () => {
           if (xhr.status !== 200) {
-            throw new Error(`bad response ${xhr.status}`)
+            throw new Error(`bad response ${xhr.status} at "${url}"`)
           } else {
             this.enquiry_form_info = JSON.parse(xhr.responseText)
           }
diff --git a/test/unit/specs/_shared.js b/test/unit/specs/_shared.js
new file mode 100644
index 00000000..f19328ad
--- /dev/null
+++ b/test/unit/specs/_shared.js
@@ -0,0 +1,47 @@
+import Vue from 'vue'
+
+const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
+
+class TestConsole {
+  log_ = []
+  warning_ = []
+  error_ = []
+
+  log () {
+    this.log_.push(Array.from(arguments).join())
+  }
+
+  warning () {
+    this.warning_.push(Array.from(arguments).join())
+  }
+
+  error () {
+    this.error_.push(Array.from(arguments).join())
+  }
+}
+
+const vm_data = {
+  contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
+  config: {contact_html: 'name is: {name}'},
+  contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
+  enquiry_form_info: {
+    visible: [
+      {field: 'first_field', type: 'text', label: 'Foobar'}
+    ]
+  },
+  enquiry_data: {},
+}
+
+const generate_vm = (router, vm_data_) => new Vue({
+  el: document.createElement('div'),
+  router: router,
+  render: h => h('router-view'),
+  data: vm_data_ || vm_data,
+  methods: {
+    get_details: () => null,
+    get_enquiry: () => null,
+    get_text: (name, replacements) => null,
+  }
+})
+
+export {dft_response, TestConsole, vm_data, generate_vm}
diff --git a/test/unit/specs/modal.js b/test/unit/specs/con-details.js
similarity index 86%
rename from test/unit/specs/modal.js
rename to test/unit/specs/con-details.js
index 2d6e1a71..f2a79e00 100644
--- a/test/unit/specs/modal.js
+++ b/test/unit/specs/con-details.js
@@ -1,66 +1,49 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import modal from 'src/components/modal'
-
-const vm_data = {
-  contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-  config: {contact_html: 'name is: {name}'},
-  contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
-}
-
-const generate_vm = (router, vm_data_) => new Vue({
-  el: document.createElement('div'),
-  router: router,
-  render: h => h('router-view'),
-  data: vm_data_ || vm_data,
-  methods: {
-    get_details: () => null,
-    get_enquiry: () => null,
-    get_text: (name, replacements) => null,
-  }
-})
+import {generate_vm} from './_shared'
 
 describe('modal.vue', () => {
-  it('should render contractor details', done => {
+  it('should close on tcs-modal-mask', done => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div')}},
+        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
         {path: '/:link', name: 'modal', component: modal},
     ]})
     const vm = generate_vm(router)
     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()
+      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()
+      })
     })
   })
 })
 
-describe('modal.vue', () => {
-  it('should close on tcs-modal-mask', done => {
+describe('con-details.vue', () => {
+  it('should render contractor details', done => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
+        {path: '/', name: 'index', component: {render: h => h('div')}},
         {path: '/:link', name: 'modal', component: modal},
     ]})
     const vm = generate_vm(router)
     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()
-      })
+      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()
     })
   })
 })
 
-describe('modal.vue', () => {
+describe('con-details.vue', () => {
   it('should render only five qual levels', done => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
@@ -69,7 +52,7 @@ describe('modal.vue', () => {
     ]})
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-      config: {contact_html: 'name is: {name}'},
+      config: {},
       contractors_extra: {
         'fred-bloggs': {
           extra_attributes: [{'name': 'Bio', 'value': 'I am great'}],
@@ -106,7 +89,7 @@ describe('modal.vue', () => {
   })
 })
 
-describe('modal.vue', () => {
+describe('con-details.vue', () => {
   it('should render markdown', done => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
diff --git a/test/unit/specs/enquiry.js b/test/unit/specs/enquiry.js
new file mode 100644
index 00000000..d351c552
--- /dev/null
+++ b/test/unit/specs/enquiry.js
@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import modal from 'src/components/modal'
+import {generate_vm} from './_shared'
+
+describe('enquiry.vue', () => {
+  it('should render contractor details then form', done => {
+    Vue.use(VueRouter)
+    const router = new VueRouter({routes: [
+        {path: '/', name: 'index', component: {render: h => h('div')}},
+        {path: '/:link', name: 'modal', component: modal},
+    ]})
+    const vm = generate_vm(router)
+    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')
+        done()
+      })
+    })
+  })
+})
diff --git a/test/unit/specs/grid.js b/test/unit/specs/grid.js
index 9500c40c..5bb43ea6 100644
--- a/test/unit/specs/grid.js
+++ b/test/unit/specs/grid.js
@@ -19,7 +19,6 @@ describe('grid.vue', () => {
         get_list: function () {
           this.contractors.push({name: 'Fred Bloggs', link: 'fred-bloggs', photo: 'http://path/to/img.jpg'})
         },
-        to_markdown: (t) => t
       }
     })
     expect(vm.$el.querySelector('h3').textContent).to.equal('Fred Bloggs')
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index 0a92b61e..32d701ac 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -1,24 +1,5 @@
 import socket from 'src/main'
-
-const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
-
-class TestConsole {
-  log_ = []
-  warning_ = []
-  error_ = []
-
-  log () {
-    this.log_.push(Array.from(arguments).join())
-  }
-
-  warning () {
-    this.warning_.push(Array.from(arguments).join())
-  }
-
-  error () {
-    this.error_.push(Array.from(arguments).join())
-  }
-}
+import {dft_response, TestConsole} from './_shared'
 
 describe('main.js', done => {
   let server
@@ -58,6 +39,7 @@ describe('main.js', () => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith('/public_key/contractors', dft_response)
+    server.respondWith('/public_key/enquiry', dft_response)  // to prevent errors with get_enquiry
   })
   after(() => { server.restore() })
 
@@ -67,7 +49,6 @@ describe('main.js', () => {
     document.body.appendChild(el)
 
     const vm = socket('public_key')
-    vm.enquiry_form_info = 'foobar'  // prevent get_enquiry making a GET request
 
     setTimeout(() => {
       expect(vm.error).to.equal(null)
@@ -83,6 +64,7 @@ describe('main.js', () => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
     server.respondWith('/public_key/contractors', [404, {}, 'badness'])
+    server.respondWith('/public_key/enquiry', dft_response)  // to prevent errors with get_enquiry
   })
   after(() => { server.restore() })
 
@@ -92,7 +74,7 @@ describe('main.js', () => {
     document.body.appendChild(el)
 
     let test_console = new TestConsole()
-    const vm = socket('public_key', {console: test_console})
+    const vm = socket('public_key', {console: test_console, v: 404})
 
     setTimeout(() => {
       expect(vm.error).to.not.equal(null)

From d6d4203d88d04d12f19991d5d480a16430f4e5c6 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 6 Mar 2017 18:58:17 +0000
Subject: [PATCH 10/11] enquiry submission test

---
 test/unit/specs/_shared.js | 14 ++++++++------
 test/unit/specs/main.js    | 38 ++++++++++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/test/unit/specs/_shared.js b/test/unit/specs/_shared.js
index f19328ad..fdc592f9 100644
--- a/test/unit/specs/_shared.js
+++ b/test/unit/specs/_shared.js
@@ -20,15 +20,17 @@ class TestConsole {
   }
 }
 
+const enquiry_options = {
+  visible: [
+    {field: 'first_field', type: 'text', label: 'Foobar'}
+  ]
+}
+
 const vm_data = {
   contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
   config: {contact_html: 'name is: {name}'},
   contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
-  enquiry_form_info: {
-    visible: [
-      {field: 'first_field', type: 'text', label: 'Foobar'}
-    ]
-  },
+  enquiry_form_info: enquiry_options,
   enquiry_data: {},
 }
 
@@ -44,4 +46,4 @@ const generate_vm = (router, vm_data_) => new Vue({
   }
 })
 
-export {dft_response, TestConsole, vm_data, generate_vm}
+export {dft_response, TestConsole, enquiry_options, vm_data, generate_vm}
diff --git a/test/unit/specs/main.js b/test/unit/specs/main.js
index 32d701ac..65448607 100644
--- a/test/unit/specs/main.js
+++ b/test/unit/specs/main.js
@@ -1,5 +1,5 @@
 import socket from 'src/main'
-import {dft_response, TestConsole} from './_shared'
+import {dft_response, TestConsole, enquiry_options} from './_shared'
 
 describe('main.js', done => {
   let server
@@ -146,7 +146,7 @@ describe('main.js', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket('public-key', {contractor_enquiry_button: 'Speak to {contractor_name}'})
+    const vm = socket('public-key')
     vm.get_enquiry()
 
     setTimeout(() => {
@@ -155,3 +155,37 @@ describe('main.js', () => {
     }, 50)
   })
 })
+
+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'}, JSON.stringify(enquiry_options)])
+    server.respondWith('POST', '/public-key/enquiry',
+        [201, {'Content-Type': 'application/json'}, '{"response": "ok"}'])
+  })
+  after(() => { server.restore() })
+
+  it('should post enquiry data', done => {
+    let el = document.createElement('div')
+    el.setAttribute('id', 'socket')
+    document.body.appendChild(el)
+
+    const vm = socket('public-key')
+    vm.get_enquiry()
+
+    setTimeout(() => {
+      vm.$set(vm.enquiry_data, 'first_field', 'foobar')
+      expect(vm.enquiry_data).to.deep.equal({first_field: 'foobar'})
+      let callback = () => {
+        expect(vm.enquiry_data).to.deep.equal({})
+        done()
+      }
+      vm.submit_enquiry(callback)
+    }, 50)
+  })
+})
+

From 7e96e0727997d48b5fd24fba1719e3d9d7442644 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Tue, 7 Mar 2017 11:27:48 +0000
Subject: [PATCH 11/11] tests for enquiry submission

---
 test/unit/specs/_shared.js     | 50 +++++++++++++++++++++++++---------
 test/unit/specs/con-details.js | 40 ++++++---------------------
 test/unit/specs/enquiry.js     | 48 ++++++++++++++++++++++++++------
 3 files changed, 85 insertions(+), 53 deletions(-)

diff --git a/test/unit/specs/_shared.js b/test/unit/specs/_shared.js
index fdc592f9..8169ccd8 100644
--- a/test/unit/specs/_shared.js
+++ b/test/unit/specs/_shared.js
@@ -1,4 +1,6 @@
 import Vue from 'vue'
+import VueRouter from 'vue-router'
+import modal from 'src/components/modal'
 
 const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "link": "foobar"}]']
 
@@ -22,28 +24,50 @@ class TestConsole {
 
 const enquiry_options = {
   visible: [
-    {field: 'first_field', type: 'text', label: 'Foobar'}
+    {field: 'first_field', type: 'text', label: 'Foobar', max_length: 255}
+  ],
+  attributes: [
+    {field: 'custom_field', type: 'text', label: 'Custom Field', max_length: 2047}
   ]
 }
 
 const vm_data = {
   contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-  config: {contact_html: 'name is: {name}'},
+  config: {},
   contractors_extra: {'fred-bloggs': {'extra_attributes': [{'name': 'Bio', 'value': 'I am great'}]}},
   enquiry_form_info: enquiry_options,
   enquiry_data: {},
+  method_calls: {},
 }
 
-const generate_vm = (router, vm_data_) => new Vue({
-  el: document.createElement('div'),
-  router: router,
-  render: h => h('router-view'),
-  data: vm_data_ || vm_data,
-  methods: {
-    get_details: () => null,
-    get_enquiry: () => null,
-    get_text: (name, replacements) => null,
-  }
-})
+const dft_router = new VueRouter({routes: [
+  {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
+  {path: '/:link', name: 'modal', component: modal},
+]})
+
+const generate_vm = (router, vm_data_) => {
+  Vue.use(VueRouter)
+  return new Vue({
+    el: document.createElement('div'),
+    router: router || dft_router,
+    render: h => h('router-view'),
+    data: vm_data_ || vm_data,
+    methods: {
+      __record_call: function (method_name) {
+        if (this.hasOwnProperty('method_calls')) {
+          this.method_calls[method_name] = (this.method_calls[method_name] || 0) + 1
+        }
+      },
+      get_details: function () { this.__record_call('get_details') },
+      get_enquiry: function () { this.__record_call('get_enquiry') },
+      get_text: function (name, replacements) { this.__record_call('get_text') },
+      submit_enquiry: function (callback) {
+        this.__record_call('submit_enquiry')
+        this.enquiry_data = {}
+        callback()
+      },
+    }
+  })
+}
 
 export {dft_response, TestConsole, enquiry_options, vm_data, generate_vm}
diff --git a/test/unit/specs/con-details.js b/test/unit/specs/con-details.js
index f2a79e00..2656278e 100644
--- a/test/unit/specs/con-details.js
+++ b/test/unit/specs/con-details.js
@@ -1,17 +1,10 @@
 import Vue from 'vue'
-import VueRouter from 'vue-router'
-import modal from 'src/components/modal'
 import {generate_vm} from './_shared'
 
 describe('modal.vue', () => {
   it('should close on tcs-modal-mask', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
-    const vm = generate_vm(router)
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    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
@@ -26,13 +19,8 @@ describe('modal.vue', () => {
 
 describe('con-details.vue', () => {
   it('should render contractor details', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div')}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
-    const vm = generate_vm(router)
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    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')
@@ -45,11 +33,6 @@ describe('con-details.vue', () => {
 
 describe('con-details.vue', () => {
   it('should render only five qual levels', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
       config: {},
@@ -72,8 +55,8 @@ describe('con-details.vue', () => {
       }
     }
 
-    const vm = generate_vm(router, _vm_data)
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    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')
@@ -91,14 +74,9 @@ describe('con-details.vue', () => {
 
 describe('con-details.vue', () => {
   it('should render markdown', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
     const _vm_data = {
       contractors: [{name: 'Fred Bloggs', link: 'fred-bloggs', tag_line: 'hello'}],
-      config: {contact_html: 'name is: {name}'},
+      config: {},
       contractors_extra: {
         'fred-bloggs': {
           extra_attributes: [{'name': 'Bio', 'value': 'I am **great**', 'type': 'text_extended'}],
@@ -106,8 +84,8 @@ describe('con-details.vue', () => {
       }
     }
 
-    const vm = generate_vm(router, _vm_data)
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    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>')
diff --git a/test/unit/specs/enquiry.js b/test/unit/specs/enquiry.js
index d351c552..3d1bdaf8 100644
--- a/test/unit/specs/enquiry.js
+++ b/test/unit/specs/enquiry.js
@@ -1,17 +1,10 @@
 import Vue from 'vue'
-import VueRouter from 'vue-router'
-import modal from 'src/components/modal'
 import {generate_vm} from './_shared'
 
 describe('enquiry.vue', () => {
   it('should render contractor details then form', done => {
-    Vue.use(VueRouter)
-    const router = new VueRouter({routes: [
-        {path: '/', name: 'index', component: {render: h => h('div')}},
-        {path: '/:link', name: 'modal', component: modal},
-    ]})
-    const vm = generate_vm(router)
-    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
+    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')
@@ -19,8 +12,45 @@ describe('enquiry.vue', () => {
       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()
       })
     })
   })
 })
+
+describe('enquiry.vue', () => {
+  it('should submit form', done => {
+    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()
+          })
+        })
+      })
+    })
+  })
+})
+