npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wendigo-vue-plugin

v0.3.4

Published

Plugin for Wendigo with Vue integration

Downloads

9

Readme

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:"[email protected]" }
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"); // "[email protected]"

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