xiGUAwanOU / easy-vue-test-2

Easy vue test 2

Easy Vue Test 2

Introduction

Easy Vue Test 2 is a test library for testing the components in a Vue.js project. It aims at providing a flexible and extendable API, to keep the test code simple and readable, and also fit into the needs of different projects.

I have implemented the vue object cloning functionality by referencing the vue-test-utils library.

Get Started

1. Install

To install the library, simply run the following command:

$ npm install -D <git_repo_clone_path>

The library has not been published to npm repository yet, so git repo is the only way to install it.

2. Code Example

As an example, you can replace the default test generated by vue-cli with following code:

import EasyVueTest, { element, getTextContent } from 'easy-vue-test-2'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', async () => {
    const msg = 'new message'

    // Wrap your tested component into an EasyVueTest object
    const easy = await EasyVueTest.mounted(HelloWorld, {
      propsData: { msg }
    })

    expect(easy
      // Use accessor to get an object
      .get(element('h1'))
      // Use action to do something to the object
      .do(getTextContent())
    ).toEqual(msg)
  })
})

API Reference

The test utilities provides a set of functions which can be applied to either an HTML element or a Vue component. The HTML element or Vue component (they are called "object" or "wrapped object" in the following contents) is wrapped by a wrapper class for the "fluent" feeling of the API.

Functions in the library can be divided into two groups, namely accessors and actions:

• Accessors will help you to get a child object in your current wrapped object. The return value of accessors will be wrapped by the wrapper class automatically.
• Actions will apply action to the current object returned by an accessor. The return value of actions will be returned as-is.

1. Accessors

element

• Declaration:

  declare function element(selector: string): SingleAccessor<WrappedObject, HTMLElement>;

• Description: get the first HTML element which matchs the element selector.

elements

• Declaration:

  declare function elements(selector: string): MultipleAccessor<WrappedObject, HTMLElement>;

• Description: get an array of HTML elements which match the element selector.

childBySelector

• Declaration:

  declare function childBySelector(selector: string): SingleAccessor<VueComponent, VueComponent>;

• Description: get a chlid Vue component using element selector matching its root element.

childByName

• Declaration:

  declare function childByName(componentName: string): SingleAccessor<VueComponent, VueComponent>;

• Description: get a chlid Vue component by its tag name registered in the parent component.

childByRef

• Declaration:

  declare function childByRef(ref: string): SingleAccessor<VueComponent, VueComponent>;

• Description: get a child Vue component by its ref attribute.

childrenBySelector

• Declaration:

  declare function childrenBySelector(selector: string): MultipleAccessor<VueComponent, VueComponent>;

• Description: get an array of chlid Vue components by matching their root components to the element selector.

childrenByName

• Declaration:

  declare function childrenByName(componentName: string): MultipleAccessor<VueComponent, VueComponent>;

• Description: get an array of chlid Vue components by their tag name registered in the parent component.

2. Actions

getProp

• Declaration:

  declare function getProp<T>(field: string): Action<VueComponent, T>;

• Description: get the value of a "props" field specified by its name.

setProp

• Declaration:

  declare function setProp(field: string, value: any): Action<VueComponent, EasyVueTest>;

• Description: set the value of a "props" field specified by its name.

getData

• Declaration:

  declare function getData<T>(field: string): Action<VueComponent, T>;

• Description: get the value of a "data" field specified by its name.

setData

• Declaration:

  declare function setData(field: string, value: any): Action<VueComponent, EasyVueTest>;

• Description: set the value of a "data" field specified by its name.

getComputed

• Declaration:

  declare function getComputed<T>(field: string): Action<VueComponent, T>;

• Description: get the value of a "computed" field specified by its name.

setComputed

• Declaration:

  declare function setComputed(field: string, value: any): Action<VueComponent, EasyVueTest>;

• Description: set the value of a "computed" field specified by its name. It only makes sense if there is a setter of the computed field.

invokeMethod

• Declaration:

  declare function invokeMethod<T>(field: string, ...params: any[]): Action<VueComponent, T>;

• Description: invoke a method defined in the "methods" section. The parameters and the return value of the method will be passed and returned as-is.

get$

• Declaration:

  declare function get$<T>(field: string): Action<VueComponent, T>;

• Description: get the "dollar" fields in the vue component. Eventually useful for mocking vue-router.

set$

• Declaration:

  declare function set$(field: string, value: any): Action<VueComponent, EasyVueTest>;

• Description: set the "dollar" fields in the vue component. Eventually useful for mocking vue-router.

checkElementExistence

• Declaration:

  declare function checkElementExistence(selector: string): Action<WrappedObject, boolean>;

• Description: check if the HTML element matching the selecttor is a child element of the current object.

getInputValue

• Declaration:

  declare function getInputValue(): Action<HTMLElement, string>;

• Description: get the value of an HTML input element.

setInputValue

• Declaration:

  declare function setInputValue(value: string): Action<HTMLElement, EasyVueTest<HTMLElement>>;

• Description: set the value of an HTML input element.

getWrappedObject

• Declaration:

  declare function getWrappedObject<T extends WrappedObject>(): Action<T, T>;

• Description: get the wrapped object, which will be either a Vue object or an HTML element.

getInnerHtml

• Declaration:

  declare function getInnerHtml(): Action<WrappedObject, string>;

• Description: get the HTML content of an object without its root element.

getOuterHtml

• Declaration:

  declare function getOuterHtml(): Action<WrappedObject, string>;

• Description: get the HTML content of an object with its root element.

click

• Declaration:

  declare function click(): Action<WrappedObject, EasyVueTest<WrappedObject>>;

• Description: generate a left mouse button click event on the current object.

keyup

• Declaration:

  declare function keyup(keyAttr?: KeyAttribute): Action<WrappedObject, EasyVueTest<WrappedObject>>;

• Description: generate a keyup event on the current object. The keyAttr parameter can be one of the following constants:

  • KEYS.ENTER
  • KEYS.ESCAPE
  • KEYS.BACKSPACE
  • KEYS.ARROW_LEFT
  • KEYS.ARROW_UP
  • KEYS.ARROW_RIGHT
  • KEYS.ARROW_DOWN

  Or, it can be an object with following structure:

  interface KeyAttribute {
    code: string;
    key: string;
    keyCode: number;
    location: number;
  }

getTextContent

• Declaration:

  declare function getTextContent(): Action<WrappedObject, string>;

• Description: get the text content in the current object.

setVueEventListener

• Declaration:

  declare function setVueEventListener(eventName: string, listener: any): Action<VueComponent, EasyVueTest>;

• Description: set the event listener for a Vue component.

emitVueEvent

• Declaration:

  declare function emitVueEvent(eventName: string, ...eventData: any[]): Action<VueComponent, EasyVueTest>;

• Description: emit an event from current Vue component, the event name and event data will be passed as-is.

3. Wrapper Class

configure

WIP.

mounted

WIP.

mountedAsMixin

WIP.

untilAsyncTasksDone

WIP.

Extensions

WIP.