testing

Author: danielabar

README.md

@@ -55,6 +55,9 @@
   - [Testing](#testing)
     - [Testing Options](#testing-options)
     - [Testing Setup](#testing-setup)
+    - [Testing Component](#testing-component)
+    - [Testing Component Changes](#testing-component-changes)
+    - [Testing with Router and State](#testing-with-router-and-state)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -1109,3 +1112,34 @@ Create a `test` folder at same level as `src`. Place [karma.config.js](test/unit
 Also create [webpack.test.config.js](build/webpack.test.config.js).
 
 [index.js](test/unit/index.js) contains all files that would like to test.
+
+Add extra lint rules for tests (describe, it, expect) [.eslintrc](test/unit/.eslintrc)
+### Testing Component
+
+[Post.spec.js](test/unit/specs/Post.spec.js)
+
+`Post` component has a `link` property and displays the title section in the title slot and content section in content slot.
+
+Test will verify that link is generated correctly.
+
+To run tests, add to `package.json`:
+
+```
+"test": "karma start test/unit/karma.config.js --single-run"
+```
+
+Then run at console:
+
+```shell
+npm test
+```
+
+### Testing Component Changes
+
+Also need to test that when properties of a component change, it re-renders with appropriate changes.
+
+To make property change take effect in test, use [nextTick](https://vuejs.org/v2/api/#Vue-nextTick). This method triggers callback after DOM update cycle is finished. Use Mocha's `done` callback to wait.
+
+### Testing with Router and State
+
+[Category.spec.js](test/unit/specs/Category.spec.js)

build/webpack.test.config.js

@@ -1,4 +1,4 @@
-const base = require('./webback.base.config.js')
+const base = require('./webpack.base.config.js')
 
 let config = Object.assign({}, base, {})
 

package.json

@@ -4,7 +4,7 @@
   "description": "> Notes from Pluralsight [course](https://app.pluralsight.com/library/courses/vue-js-single-page-applications/table-of-contents)",
   "scripts": {
     "start": "node server.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "karma start test/unit/karma.config.js --single-run"
   },
   "keywords": [],
   "author": "",

test/unit/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  }
+}

test/unit/specs/Category.spec.js

@@ -0,0 +1,40 @@
+import 'es6-promise/auto'
+import Vue from 'vue'
+import store from '../../../src/vuex/index.js'
+import VueRouter from 'vue-router'
+import Category from '../../../src/theme/Category.vue'
+
+describe('Category.vue', () => {
+  it('loads front-end links', done => {
+    Vue.use(VueRouter)
+    // dummy router instance
+    const router = new VueRouter({
+      routes: [
+        {path: '/', component: Category}
+      ]
+    })
+
+    // Category component uses router heavily as a dependency
+    const vm = new Vue({
+      el: document.createElement('div'),
+      router,
+      store,
+      // i.e. <div><router-view></router-view></div>
+      render: h => h('router-view')
+    })
+
+    // flaky: depending on real ajax request - homework: mock this
+    store.watch(
+      (state) => {
+        return state.postsModule.posts
+      },
+      function () {
+        console.log(vm.$el)
+        expect(vm.$el.querySelectorAll('.column').length).to.equal(6)
+        done()
+      }
+    )
+    // console.log(vm.$el) // with no api hooked up: <div class="columns"></div>
+    // done()
+  })
+})

test/unit/specs/Post.spec.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Post from '../../../src/theme/Post.vue'
+
+describe('Post.vue', () => {
+  // re-usable function to create component for testing
+  const createComponent = () => {
+    const PostConstructor = Vue.extend(Post)
+    const comp = new PostConstructor({
+      propsData: {
+        link: 'http://www.pluralsight.com'
+      }
+    }).$mount()
+    return comp
+  }
+  it('renders link', () => {
+    const comp = createComponent()
+    expect(comp.$el.querySelector('.card-footer-item').getAttribute('href')).to.equal('http://www.pluralsight.com')
+  })
+
+  it('updates href when property link changes', (done) => {
+    const comp = createComponent()
+    expect(comp.$el.querySelector('.card-footer-item').getAttribute('href')).to.equal('http://www.pluralsight.com')
+    // change link
+    comp.link = 'http://fullstackweekly.com'
+    // wait for dom cycle to complete rendering after link updated
+    Vue.nextTick(() => {
+      expect(comp.$el.querySelector('.card-footer-item').getAttribute('href')).to.equal('http://fullstackweekly.com')
+      done()
+    })
+  })
+})