testing grid subject filter changes

Author: samuelcolvin

src/components/grid.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="tcs-flex">
       <div v-for="contractor in contractors" class="tcs-col">
-        <router-link :to="{name: 'con-modal', params: {link: contractor.link}}" class="tcs-box">
+        <router-link v-if="contractor" :to="{name: 'con-modal', params: {link: contractor.link}}" class="tcs-box">
           <img :src="contractor.photo" :alt="contractor.name" class="tcs-thumb">
           <h3 class="tcs-name">{{ contractor.name }}</h3>
         </router-link>
@@ -32,9 +32,10 @@ export default {
     description () {
       if (this.$root.selected_subject_id) {
         const msg_id_suffix = this.$root.contractors.length === 1 ? 'single' : 'plural'
+        const subject = this.$root.get_selected_subject()
         return this.$root.get_text('subject_filter_summary_' + msg_id_suffix, {
           count: this.$root.contractors.length,
-          subject: this.$root.get_selected_subject().name,
+          subject: subject && subject.name,
         })
       }
     }

src/components/subject-select.vue

@@ -9,7 +9,7 @@
                  @select="changed">
       <div slot="carret">
         <div @mousedown.prevent="" class="multiselect__select"></div>
-        <div class="cross" @mousedown.prevent="changed()">
+        <div class="cross" @click="changed()" @mousedown.prevent>
           <cross></cross>
         </div>
       </div>

test/unit/karma.conf.js

@@ -43,6 +43,7 @@ module.exports = function (config) {
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
     browsers: ['PhantomJS'],
+    // browsers: ['Chrome'],
     frameworks: ['mocha', 'sinon-chai'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],

test/unit/specs/grid.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import grid from 'src/components/grid'
+import {tick, sleep} from './_shared'
 
 describe('grid.vue', () => {
   it('should render contractors', () => {
@@ -15,7 +16,7 @@ describe('grid.vue', () => {
       data: {
         contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', photo: 'http://path/to/img.jpg'}],
         subjects: [],
-        config: {subject_filter: true},
+        config: {subject_filter: false},
       },
       methods: {
         get_contractor_list: () => null,
@@ -27,5 +28,58 @@ describe('grid.vue', () => {
     expect(vm.$el.querySelector('h3').textContent).to.equal('Fred Bloggs')
     expect(vm.$el.querySelector('a').attributes['href'].value).to.equal('#/123-fred-bloggs')
     expect(vm.$el.querySelector('img').attributes['src'].value).to.equal('http://path/to/img.jpg')
+    expect(vm.$el.querySelectorAll('.tcs-select-container')).to.have.lengthOf(0)
+  })
+})
+
+describe('grid.vue', () => {
+  it('should filter contractors', async () => {
+    Vue.use(VueRouter)
+    const router = new VueRouter({routes: [
+        {path: '/:type(s|q)?/:link(\\d+-[\\w-]+)?', name: 'index', component: {render: h => '-'}},
+        {path: '/:link', name: 'con-modal', component: {render: h => '-'}},
+    ]})
+    const routes_visited = []
+    const vm = new Vue({
+      el: document.createElement('div'),
+      router: router,
+      render: (h) => h(grid),
+      data: {
+        contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', photo: 'http://path/to/img.jpg'}],
+        subjects: [],
+        config: {subject_filter: true},
+      },
+      watch: {
+        '$route' (to) {
+          routes_visited.push(to.path)
+        }
+      },
+      methods: {
+        get_contractor_list: () => null,
+        get_subject_list () {
+          this.subjects.push({id: 1, name: 'Maths', link: '1-maths'})
+          this.subjects.push({id: 2, name: 'English', link: '2-english'})
+          this.subjects.push({id: 3, name: 'Science', link: '3-science'})
+        },
+        get_selected_subject: () => null,
+        get_text: () => null,
+      }
+    })
+    expect(routes_visited).to.deep.equal([])
+    expect(vm.$el.querySelector('h3').textContent).to.equal('Fred Bloggs')
+    expect(vm.$el.querySelectorAll('.tcs-select-container')).to.have.lengthOf(1)
+    expect(vm.$el.querySelectorAll('input')).to.have.lengthOf(1)
+
+    vm.$el.querySelector('.multiselect').dispatchEvent(new window.Event('focus'))
+    await tick()
+    const s = vm.$el.querySelectorAll('.multiselect__element')[2].querySelector('span')
+    expect(s.innerText).to.equal('Science')
+    s.dispatchEvent(new window.Event('mousedown'))
+    await tick()
+    expect(routes_visited).to.deep.equal(['/s/3-science'])
+
+    vm.$el.querySelector('.cross').click()
+    await tick()
+    expect(routes_visited).to.deep.equal(['/s/3-science', '/'])
   })
 })