wendigo-vue-plugin

    0.3.4 • Public • Published

    Wendigo Vue Plugin

    by @angrykoala

    npm version Build Status

    A Wendigo plugin for Vue.js pages.

    This plugin is intended to be used with Wendigo 2

    Contents

    Getting Started

    To install Wendigo Vue Plugin, execute:

    npm install --save-dev wendigo wendigo-vue-plugin
    

    To add the plugin to Wendigo in your tests:

    const Wendigo = require('wendigo');
    const WendigoVuePlugin = require('../index.js');
     
     
    Wendigo.registerPlugin(WendigoVuePlugin);
     
    const browser = Wendigo.createBrowser();

    You can access the Vue methods using browser.vue and browser.assert.vue

    Plugin

    All the methods and properties are under browser.vue. The plugin provides the following properties:

    • detected: true if Vue.js is detected in the page, false otherwise.

    There are several modules that can be accessed through browser.vue.[module].

    Store

    The store module allows to access and modify Vuex store if it is set. These methods and properties can be accesed through browser.vue.store.

    getState(key?)
    Returns the state of the given key, if no key is set, the whole state of the store will be returned.

    await browser.vue.store.getState("user"); // { id: 1234, email:"foo@bar.com" }
    await browser.vue..store.getState(); // { user: { ... }, msg: ["My Msg"] }

    The state must be serializable and it cannot be modified

    getter(key)
    Executes and returns the getter with given key:

    await browser.vue.store.getter("userEmail"); // "foo@bar.com"

    commit(name, data?)
    Executes the mutation with given name, passing the data object as argument.

    await browser.vue.store.commit("updateUser", { id:1234, email: "bar@foo,com"})

    dispatch(name, data?)
    Executes the action with given name, returns the promise returned by the action.

    await browser.vue.store.dispatch("userUpdateAndGetId"); // 2345

    Keep in mind that, unlike in Vuex, all methods are asynchronous and return promises.

    Router

    This module allow to execute actions and get information about vue-router

    getAll()
    Returns all routes defined in the router, each route contains the following attributes:

    • name: The name defined for the route, if any.
    • path: The path the route is active (e.g /page2, *).
    • redirect: The path the route is redirecting to, if any.
    const routes = await browser.vue.router.getAll();

    Assertions

    Assertions regarding Vue, these can be accessed through browser.assertions.vue, some negative assertions are provided using browser.assertions.vue.not.

    detected()
    Asserts that Vue.js is detected in page.

    await browser.open("http://localhost:8080/foo");
    await browser.assert.vue.detected();

    not.detected() Asserts that Vue.js is not detected in page.

    Store Assertions

    Assertions regarding Vuex store, these can be accessed through browser.assertions.vue.store.

    state(key, expected, msg?)
    Asserts that the state element with given key has the expected value.

    await browser.assert.vue.store.state("count", 0);

    getter(key, expected, msg?) Asserts that the getter with given key has the expected value.

    Injected Scripts

    Along with the scripts injected by Wendigo, this plugin required to inject some js scripts into the web to work properly. All these scripts are injected under the global object WendigoVuePlugin, and can be accessed by using browser.evaluate().

    This object contains the following properties:

    • vue: Contains the Vue root parent, if any.

    The following methods are exposed as well:

    • detectVue(): Detects if Vue is in the page and sets the vue property, returns true if found, false otherwise. This method should not be executed by code outside the plugin itself.

    Development

    To develop Wendigo Vue Plugin follow these steps:

    1. Clone the repo or your fork
    2. Execute npm install (node 8.12 or superior needed)
    3. Execute npm test to run the tests
    • Execute npm run lint to run the code linter

    After making your changes and before doing any pull request, please make sure that npm test and npm run lint are running without errors.

    Troubleshooting

    VueNotFoundError: Vue not detected.

    This error will be thrown if you try to execute an action or assertion in a page that doesn't uses Vue. Make sure that the page you've opened uses Vue, if so, this may be caused by your built if Vue is in production mode, try to run the tests with development mode and fill an issue detailing your built, error and tests.

    Please, check the troubleshooting page of Wendigo and make sure your problem is not described there or in any issue before filling one.

    License

    Wendigo Vue Plugin is maintained by @angrykoala under GPL-3.0 License

    Install

    npm i wendigo-vue-plugin

    DownloadsWeekly Downloads

    5

    Version

    0.3.4

    License

    GPL-3.0

    Unpacked Size

    74 kB

    Total Files

    35

    Last publish

    Collaborators

    • angrykoala