This package has been deprecated

Author message:

Moved to @crishellco/vue-hubble

Vue Hubble

A better way to select elements for UI testing in Vue.

Vue Hubble makes it simple to add selectors (only in your testing environment) and target component elements in tests without worrying about collisions, extraneous classes, etc.

Install

yarn add -D vue-hubble
# or 
npm i -D vue-hubble

import VueHubble from 'vue-hubble';
 
Vue.use(VueHubble, options);

Usage

Implementation

<template>
  <div v-hubble="'attribute-selector'"></div>
  <div v-hubble:class="'class-selector'" class="existing-class"></div>
  <div v-hubble:id="'id-selector'" id="existing-id"></div>
</template>
 
<!-- Resulting HTML when NODE_ENV === 'test' -->
 
<!--(vue-hubble) attribute-selector-->
<div attribute-selector></div>
<!--//(vue-hubble) attribute-selector-->
 
<!--(vue-hubble) class-selector-->
<div class="existing-class class-selector"></div>
<!--//(vue-hubble) class-selector-->
 
<!--(vue-hubble) id-selector-->
<div id="id-selector"></div>
<!--//(vue-hubble) id-selector-->

Namespacing

Hubble gives you the ability to namespace all selectors in a given component. Namespacing is recursive up the component tree, ignoring missing or empty namespace values. This feature is enabled by default, but can be disabled via install options.

<!-- Form Component (child) -->
<template>
  <div v-hubble="'attribute-selector'"></div>
</template>
 
<script>
  export default {
    hubble: {
      namespace: 'form'
    }
  };
</script> 
 
<!-- Login Component (parent) -->
<template>
  <form />
</template>
 
<script>
  export default {
    components: {
      Form
    },
    hubble: {
      namespace: 'login'
    }
    /**
     * Or shorthand...
     * hubble: 'login'
     **/
  };
</script> 
 
<!-- Resulting HTML when NODE_ENV equals correct environment (see install options)-->
 
<!--(vue-hubble) login--form--attribute-selector-->
<div login--form--attribute-selector></div>
<!--//(vue-hubble) login--form--attribute-selector-->

Writing Tests

Examples

describe('directive.js', () => {
  it('should add an attribute selector', () => {
    const wrapper = mount({
      template: '<div><span v-hubble="\'selector\'"></span></div>'
    });
 
    expect(wrapper.contains('[selector]')).toBe(true);
  });
});

Install Options

Name	Type	Default	Description
defaultSelectorType	String	attr	Defines the selector type if not passed into the directive v-hubble:attr
enableComments	Boolean	true	Enables or disables comments around elements with hubble selectors
enableDeepNamespacing	Boolean	true	Enables or disables auto recursive namespacing
environment	String or Array	test	Defines the environment(s) in which these selectors are added
prefix	String		Prefixes all selectors with the value and --, if value exists. For example, if prefix = 'qa', all selectors well begin withqa--

Lint

yarn lint

Test

yarn test

Build Dist

yarn build

How to Contribute

Pull Requests

1. Fork the repository
2. Create a new branch for each feature or improvement
3. Send a pull request from each feature branch to the develop branch

License

MIT