mwangaben-vthelpers

A package that aim at simplify writing your Vue test.

Your attention please

How this package works:

This package depends on vue-test-utils and expect (if you don't use jest) packages.

Installation

$ npm install mwangaben-vthelpers --save-dev

Configuration for Jest

transformIgnorePatterns: [
  '<rootDir>/node_modules/(?!mwangaben-vthelpers)'
]

Basic Usage

import expect from 'expect' // no needed if you already use jest
import Helpers from 'mwangaben-vthelpers'
import { mount } from '@vue/test-utils'
import Questions from '../components/Questions.vue'

describe('Questions', () => {
  let wrapper, b

  beforeEach(() => {
    wrapper = mount(Questions)

    b = new Helpers(wrapper, expect)
  })

  // ...
})

Note

Please note that the second argument is now optional and will be removed in the near future

   b = new Helpers(wrapper)

Documentation

Note the instantiation of the Helpers class and the arguments it takes, first is wrapper and second is expect package

DOM

• b.see(text, selector)

  it('shows the text in h2 tag ', () => {
    b.see('Where am i ?', 'h2')
  
    // Or anywhere you can find this text
    b.see('Where am i?')
  })

• b.doNotSee(text)

  it('does not show the text node when visibility is hidden', () => {
    b.doNotSee('Header')
  })

• b.hidden(selector)

  it('checks if the list is visible', () => {
    b.hidden('ul')
  })

• b.domHas(selector)

  it('checks if the wrapper or DOM has this', () => {
    b.domHas('h2')
  })

• b.domHasNot(selector)

  it('checks if the wrapper or DOM does not have this', () => {
    b.domHasNot('h2')
  })

• b.hasAClass(class)

  it('confirm the existance of a class container in a DOM', () => {
      b.hasAClass('container')
  })

• b.hasAClass(class, selector)

  it('confirm the existance of a class container in a first div to be found in a DOM', () => {
      b.hasAClass('container', 'div')
  })

• b.doesNotHaveAClass(class)

  it('confirms that a class container does not exist in a DOM', () => {
      b.doesNotHaveAClass('containers', 'div')
  })

• b.doesNotHaveAClass(class, selector)

  it('confirms that a class container does not exist on first div to be found in a DOM', () => {
      b.doesNotHaveAClass('containers', 'div')
  })

• b.hasAttribute(attribute, value, selector)

  it('h2 has a class attribute display-4', () => {
      b.hasAttribute('class', 'display-4', '.container h2')
  })

• b.doesNotHaveAttribute(attribute, value, selector)

  it('h2 hasn\'t a class attribute display-3', () => {
      b.doesNotHaveAttribute('class', 'display-3', '.container h2')
  })

INPUT

• b.type(text, selector, event=input)

  it('does the typing thing ', () => {
    b.type('Vue test helpers', 'input[name=title]') // event = 'input' by default
    b.type('Vue test helpers', 'select[name=selectList]', 'change')
  })

• b.inputValueIs(text, selector)

  it('does the input value has this text', () => {
    b.type('Vue test helpers', 'input[name=title]')
  
    b.inputValueIs('Vue test helpers', 'input[name=title]')
  })

• b.inputValueIsNot(text, selector)

  it('does the input value is not this text', () => {
    b.type('Vue test helpers', 'input[name=title]')
  
    b.inputValueIsNot('Tdd in Vue', 'input[name=title]')
  })

• b.isEmpty(selector)

  it('checks if the input is empty/ has no value', () => {
    b.isEmpty(selector);
  });

EVENT

• b.click(selector)

  it('does the click thing ', () => {
    b.click('#edit')
  })

• b.emitted(event)

  it('broadcasts event', () => {
    b.emitted('event')
  })

• b.emittedContains(event,data)

  it('checks data emitted by this.$emit(event, 40)', () => {
    b.emittedContains('event', 40)
  })
  
  it('checks data emitted by this.$emit(event, 40, 20, 10, 23)', () => {
    b.emittedContains('event', 40, 10)
  })
  
  it('checks data emitted by this.$emit(event, [40, 12, 24, 45])', () => {
    b.emittedContains('event', [12, 45])
  })
  
  it('checks data emitted by this.$emit(event, {company: "Apple.incl", product: "iPhone X"})', () => {
    b.emittedContains('event', {product: 'iPhone X'} )
  })

STORE

• b.getter(getterName)

  it('returns the value of the getter passed in argument', () => {
    b.getter('myModule/myGetter')
  })

All in action

import expect from 'expect'
import moxios from 'moxios'
import Helpers from 'mwangaben-vthelpers'
import { mount } from 'vue-test-utils'
import MockingRequest from '../../resources/assets/js/components/MockingRequest.vue'

describe('MockingRequest', () => {
  let wrapper, b

  beforeEach(() => {
    moxios.install()

    wrapper = mount(MockingRequest, {
      propsData: {
        dataQuestion: {
          title: 'The title',
          body: 'The body'
        }
      }
    })

    b = new Helpers(wrapper, expect)
  })

  afterEach(() => {
    moxios.uninstall()
  })

  it('should have title and body', () => {
    b.see('The title')
    b.see('The body')
  })

  it('can be edited', () => {
    b.domHasNot('input[name=title]')
    b.domHasNot('textearea[name=body]')

    b.click('.edit')

    b.inputValueIs('The title', 'input[name=title]')
    b.inputValueIs('The body', 'textarea[name=body]')
  })

  it('hides the edit button during editing mode', () => {
    b.click('.edit')
    expect(wrapper.contains('.edit')).toBe(false)
  })

  it('updates the question when the update is clicked', (done) => {
    b.click('.edit')

    b.see('Update')
    b.see('Cancel')

    b.type('Changed title', 'input[name=title]')
    b.type('Changed body', 'textarea[name=body]')

    b.inputValueIs('Changed title', 'input[name=title]')

    moxios.stubRequest('/questions', {
      status: 200,
      response: {
        title: 'The title',
        body: 'The body'
      }
    })

    b.click('#update')

    b.see('Changed title')
    b.see('Changed body')
    moxios.wait(() => {
      b.see('Your question has been updated')
      done()
    })
  })

  it('can cancel the editing', () => {
    b.click('.edit')

    b.type('Changed title', 'input[name=title]')

    b.click('.cancel')

    b.see('The title')
  })

  it('clears input after submission of data', () => {
       b.type('Go to the store', 'input[name="todo"]')

       b.click('#save')

       b.isEmpty('input[name="todo"]')
   })
})

License

This project is licensed under the MIT license.