Vue-hubble NPM

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 with`qa--`