Giter VIP home page Giter VIP logo

easy-vue-test-2's Introduction

Build Status

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.

easy-vue-test-2's People

Contributors

xiguawanou avatar

Stargazers

Liwen S avatar Billal BEGUERADJ avatar

Watchers

 avatar

Forkers

begueradj

easy-vue-test-2's Issues

Implement the existing functionalities in the previous project

Previously there are a lot of different methods which are proven to be very useful. In the new project we just need to provide functions to reach the same level of functionalities.

  • New functions have been implemented to provide the equivalent functionalities as the old version.

Create scaffolding project

Requirements:

  • Explicit webpack configuration (if webpack is needed).
  • Use TypeScript for the implementation.
  • Create test using jest.
  • Use travis.ci for CI tasks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.