Skip to content

Instantly share code, notes, and snippets.

@aelbore
Last active July 24, 2019 12:17
Show Gist options
  • Save aelbore/0bbc8b2f337a4c709a4344bf92352bd6 to your computer and use it in GitHub Desktop.
Save aelbore/0bbc8b2f337a4c709a4344bf92352bd6 to your computer and use it in GitHub Desktop.

Testing in Vue

Write lots of tests so people will afraid to delete yout code
  - creator of redux
  
Don't just write tests that let you verify unit works with confidence.
Write tests that let you *delete* that unit of confidence.
  - creator of redux

alt text

Slides

Testing in Vue

Why need test?

  • Get an error if we break code
  • Save time (don't need to test manually)
    • It speeds up development because you don’t have to test everything manually after every change.
  • Integrate into build workflow
  • Improve your code

Different kind of Test

  • Unit Test
    • Fully isolated testing one function
  • Integration Test
    • Test with dependencies

Getting Started

mkdir vue-app
cd vue-app

npm init -y
npm i --save-dev vue vue-template-compiler @vue/cli-service

Create Vue App

  • Create src folder
  • Create ./src/Card.vue please see code
  • Create ./src/App.vue please see code
  • Create ./src/main.js please code code
  • Add or Update scripts in package.json
    • serve run your vue app into dev mode
      "scripts": {
        "serve": "vue-cli-service serve"
      },

Add unit test your app

  • Install dependencies
    npm i --save-dev @vue/cli-plugin-unit-mocha @vue/test-utils chai sinon
    
  • Add test
    • create Card.spec.js
      import Card from './Card.vue'
      import sinon from 'sinon'
      
      import { expect } from 'chai'
      import { mount } from '@vue/test-utils'
      
      describe('Card.vue', () => {
        let wrapper
      
        beforeEach(() => {
          wrapper = shallowMount(Card)
        })
      
        it('should bind and render when props have value', () => {
      
          const profile = {
            name: "Leanne Graham",
            profession: "UI Developer",
            motto: "The key to performance is elegance, not battalions of special cases.",
            photo: "https://pymwoqn637.codesandbox.io/default.png"
          }
      
          const wrapper = shallowMount(Card, {
            propsData: { 
              profile 
            }
          })
      
          expect(wrapper.find('img').attributes().src).eq(profile.photo) 
          expect(wrapper.find('.name').text()).eq(profile.name)
          expect(wrapper.find('.profession').text()).eq(profile.profession)
          expect(wrapper.find('.text-center').text()).eq(profile.motto)
        })
        
        it('should called or execute [remove] method', () => {
          const mockRemove = sinon.stub()
      
          wrapper.setMethods({ remove: mockRemove })
          wrapper.find('.icon-x').find('a').trigger('click')
      
          expect(mockRemove.called).to.be.true
        })  
        
      })
  • Add or Update scripts in package.json
  "scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service test:unit ./src/**/*.spec.js"
  },
  • Run the test
npm test
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment