VueJS Resources

A big ol' list of VueJS stuff

Note: I'm pretty new to this whole testing thing so somethings might not be the correct way to do things, but I've just given it a go. If you are more experiences please fork this and edit the examples.

Table of contents

• Unit Testing
• Vuex Unit Testing

Great resources

• VueJS Unit Tests

• Testing Vuex-Dependent Vue.js Components

• VueJS unit tests

• Testing component props

• Testing component data

• Testing with Mocks

• Testing with Mocks with Avoriaz

• Testing language example

Unit Testing

I find testing Vue components super hard to test.

• Testing example
• VueJS Unit Testing
• Slides on Unit Testing (tricky to understand)

Vuex Unit Testing

If found that Vuex is way easier to test that doing Vue components.

• Vuex Unit testing

• Globally access styles - alias

Examples

• White label app - ReactJS

Webpack

• Using Scss in VueJS 2
• Globally access styles - alias
• Components with multiple themes
• How to extract multiple theme stylesheets with webpack?

Misc

• Sass theming

Examples

Inspect the raw component options

export default {
 name: 'myComponent',
 data () {
  return {
   message: 'hello!'
  }
 },
 created () {
  this.message = 'bye!'
 }
}

// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
// Here are some Jasmine 2.0 tests, though you can
// use any test runner / assertion library combo you prefer
describe('MyComponent', () => {
  // Inspect the raw component options
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })
  // Evaluate the results of functions in
  // the raw component options
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  // Inspect the component instance on mount
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })
  // Mount an instance and inspect the render output
  it('renders the correct message', () => {
    // create constructor
    const Ctor = Vue.extend(MyComponent)
    // create an instance of MyComponent and mount it on an element
    const vm = new Ctor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Testing a mounted component

// Import Vue and the component being tested
import Vue from 'vue'
import CheeseList from 'path/to/CheeseList.vue'

describe('MyComponent', () => {
  let vm

  beforeEach(() => {
     const state = {
      cheeses: [
        'brie',
        'stilton'
      ]
    }

    const getters = {
      getListOfCheeses: (state) => state.listOfCheeses
    }

    const options = {
      state,
      getters
    }

    const mockStore = new Vuex.Store(options)

    // When you extend it you get all of the options e.g. cheeseList
    const Ctrl = Vue.extend(CheeseList)

    vm = new Vue({
      template: '<div><test ref="component"></test></div>',
      store: mockStore,
      components: {
        'test': CheeseList
      }
    }).$mount()
  })
  it('should have a created hook', () => {
    expect(typeof CheeseList.created).toBe('function')
  })
  it('should get the time granularity from store', () => {
    expect(vm.cheeseList).toBe(2)
  })
})