fixing tests

Author: samuelcolvin

src/components/modal.vue

@@ -31,9 +31,9 @@
                 {{ contractor.primary_description }}
               </div>
 
-              <div v-for="attr in contractor_extra.extra_attributes">
+              <div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
                 <h3>{{ attr.name }}</h3>
-                {{ attr.value }}
+                <p>{{ attr.value }}</p>
               </div>
 
               <table class="tcs-skills" v-if="contractor_extra.skills">
@@ -78,7 +78,6 @@ export default {
     contractor: function () {
       for (var contractor of this.$root.contractors) {
         if (contractor.link === this.$route.params.link) {
-          console.log('con', contractor)
           this.$root.get_details(contractor.url, contractor.link)
           return contractor
         }

test/unit/specs/grid.js

@@ -6,7 +6,7 @@ describe('grid.vue', () => {
   it('should render contractors', () => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
-        {path: '/:slug', name: 'modal', component: {render: h => '-'}},
+        {path: '/:link', name: 'modal', component: {render: h => '-'}},
     ]})
     const vm = new Vue({
       el: document.createElement('div'),
@@ -16,8 +16,8 @@ describe('grid.vue', () => {
         contractors: []
       },
       methods: {
-        get_data: function () {
-          this.contractors.push({name: 'Fred Bloggs', slug: 'fred-bloggs', img: 'http://path/to/img.jpg'})
+        get_list: function () {
+          this.contractors.push({name: 'Fred Bloggs', link: 'fred-bloggs', photo: 'http://path/to/img.jpg'})
         }
       }
     })

test/unit/specs/main.js

@@ -2,7 +2,7 @@ import socket from 'src/main'
 
 const dft_response = [200, {'Content-Type': 'application/json'}, '[{"name": "Foobars", "slug": "foobar"}]']
 
-describe('main.vue', done => {
+describe('main.js', done => {
   let server
   before(() => {
     server = sinon.fakeServer.create()
@@ -19,7 +19,7 @@ describe('main.vue', done => {
     el.setAttribute('id', 'foobar')
     outer.appendChild(el)
 
-    const vm = socket({
+    const vm = socket('public_key', {
       element: '#foobar'
     })
 
@@ -34,12 +34,12 @@ describe('main.vue', done => {
   })
 })
 
-describe('main.vue', () => {
+describe('main.js', () => {
   let server
   before(() => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
-    server.respondWith('/contractors.json', dft_response)
+    server.respondWith('/public_key/contractors', dft_response)
   })
   after(() => { server.restore() })
 
@@ -48,7 +48,7 @@ describe('main.vue', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket()
+    const vm = socket('public_key')
 
     setTimeout(() => {
       expect(vm.error).to.equal(null)
@@ -58,12 +58,12 @@ describe('main.vue', () => {
   })
 })
 
-describe('main.vue', () => {
+describe('main.js', () => {
   let server
   before(() => {
     server = sinon.fakeServer.create()
     server.autoRespond = true
-    server.respondWith('/contractors.json', [404, {}, 'badness'])
+    server.respondWith('/public_key/contractors', [404, {}, 'badness'])
   })
   after(() => { server.restore() })
 
@@ -72,7 +72,7 @@ describe('main.vue', () => {
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket()
+    const vm = socket('public_key')
 
     setTimeout(() => {
       !expect(vm.error).to.not.equal(null)
@@ -85,13 +85,13 @@ describe('main.vue', () => {
   })
 })
 
-describe('main.vue', () => {
+describe('main.js', () => {
   it('should show connection error', done => {
     let el = document.createElement('div')
     el.setAttribute('id', 'socket')
     document.body.appendChild(el)
 
-    const vm = socket({api_root: 'http://localhost:12345678'})
+    const vm = socket('the-public-key', {api_root: 'http://localhost:12345678'})
 
     setTimeout(() => {
       expect(vm.error).to.contain('Connection error')

test/unit/specs/modal.js

@@ -3,27 +3,31 @@ import VueRouter from 'vue-router'
 import modal from 'src/components/modal'
 
 const vm_data = {
-  contractors: [{name: 'Fred Bloggs', slug: 'fred-bloggs', tag_line: 'hello'}],
-  config: {contact_html: 'name is: {name}'}
+  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'}]}},
 }
 
 describe('modal.vue', () => {
   it('should render contractor details', done => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
         {path: '/', name: 'index', component: {render: h => h('div')}},
-        {path: '/:slug', name: 'modal', component: modal},
+        {path: '/:link', name: 'modal', component: modal},
     ]})
     const vm = new Vue({
       el: document.createElement('div'),
       router: router,
       render: h => h('router-view'),
-      data: vm_data
+      data: vm_data,
+      methods: {get_details: function (url, link) {}}
     })
-    router.push({name: 'modal', params: {slug: 'fred-bloggs'}})
+    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()
     })
   })
@@ -34,15 +38,16 @@ describe('modal.vue', () => {
     Vue.use(VueRouter)
     const router = new VueRouter({routes: [
         {path: '/', name: 'index', component: {render: h => h('div', {attrs: {'class': 'index'}})}},
-        {path: '/:slug', name: 'modal', component: modal},
+        {path: '/:link', name: 'modal', component: modal},
     ]})
     const vm = new Vue({
       el: document.createElement('div'),
       router: router,
       render: h => h('router-view'),
-      data: vm_data
+      data: vm_data,
+      methods: {get_details: function (url, link) {}}
     })
-    router.push({name: 'modal', params: {slug: 'fred-bloggs'}})
+    router.push({name: 'modal', params: {link: 'fred-bloggs'}})
     Vue.nextTick(() => {
       expect(vm.$el.attributes['class'].value).to.equal('modal-mask')
       // this is clicking the background