Repository: baianat/vee-validate (js)

Issue:
reset counter of vv-id for consecutive snapshot tests
#### Versions:
- VueJs: #.#.#
- Vee-Validate: 2.0.6

### Description:
vee-validate generates a ID for each field that it's applied to when they're rendered. This means that if you're using Jest snapshots, or any other test framework that supports snapshots, they will include this id. When you run 2 consecutive tests on a component that has a input field the first snapshot test will save data-vv-id=1 and the second test will save data-vv-id=2.
If we want to run the **second** test individual the snapshot will contain vv-id=1.

I found an old related issue https://github.com/baianat/vee-validate/issues/1000
But at the moment vee-validate doesn't use Math.random anymore so i can't overrule the generation of a unique id.

Is there a way i can reset the vv-id count 
(reset the _id_ and _idTemplate_ variables of src/core/utils/index.js)

### Steps To Reproduce:
- store 2 snapshots with 2 consecutive tests
- run the second test individually


Pull request:
Avoid data attr
closes #1249

Patch:
diff --git a/src/core/field.js b/src/core/field.js
index 4e24ef89..d4592790 100644
--- a/src/core/field.js
+++ b/src/core/field.js
@@ -5,7 +5,6 @@ import {
   normalizeRules,
   isNullOrUndefined,
   getDataAttribute,
-  setDataAttribute,
   toggleClass,
   isTextInput,
   debounce,
@@ -199,7 +198,7 @@ export default class Field {
    */
   _cacheId (options: FieldOptions): void {
     if (this.el && !options.targetOf) {
-      setDataAttribute(this.el, 'id', this.id); // cache field id if it is independent and has a root element.
+      this.el._veeValidateId = this.id;
     }
   }
 
@@ -603,7 +602,7 @@ export default class Field {
     const els = document.querySelectorAll(`input[name="${this.el.name}"]`);
     toArray(els).forEach(el => {
       // skip if it is added by v-validate and is not the current element.
-      if (getDataAttribute(el, 'id') && el !== this.el) {
+      if (el._veeValidateId && el !== this.el) {
         return;
       }
 
diff --git a/src/directive.js b/src/directive.js
index 44c8beef..96dfc17e 100644
--- a/src/directive.js
+++ b/src/directive.js
@@ -1,18 +1,18 @@
 import Generator from './core/generator';
 import Field from './core/field';
-import { getDataAttribute, isEqual, warn } from './core/utils';
+import { isEqual, warn } from './core/utils';
 
 // @flow
 
 /**
  * Finds the requested field by id from the context object.
  */
-const findField = (el: HTMLElement, context: ValidatingVM): ?Field => {
+function findField (el: HTMLElement, context: ValidatingVM): ?Field {
   if (!context || !context.$validator) {
     return null;
   }
 
-  return context.$validator.fields.find({ id: getDataAttribute(el, 'id') });
+  return context.$validator.fields.find({ id: el._veeValidateId });
 };
 
 export default {
@@ -26,7 +26,7 @@ export default {
     const fieldOptions = Generator.generate(el, binding, vnode);
     validator.attach(fieldOptions);
   },
-  inserted: (el: HTMLElement, binding, vnode) => {
+  inserted (el: HTMLElement, binding, vnode) {
     const field = findField(el, vnode.context);
     const scope = Generator.resolveScope(el, binding, vnode);
 
@@ -39,7 +39,7 @@ export default {
     // allows the field to re-evaluated once more in the update hook.
     field.updated = false;
   },
-  update: (el: HTMLElement, binding, vnode) => {
+  update (el: HTMLElement, binding, vnode) {
     const field = findField(el, vnode.context);
 
     // make sure we don't do unneccasary work if no important change was done.


Test patch:
diff --git a/tests/integration/components/Snapshot.vue b/tests/integration/components/Snapshot.vue
new file mode 100644
index 00000000..e5975313
--- /dev/null
+++ b/tests/integration/components/Snapshot.vue
@@ -0,0 +1,9 @@
+<template>
+  <input type="text" name="field" v-validate="'required'">
+</template>
+
+<script>
+export default {
+  name: 'snapshot-test'
+};
+</script>
diff --git a/tests/integration/snapshot.js b/tests/integration/snapshot.js
new file mode 100644
index 00000000..fb5cbe60
--- /dev/null
+++ b/tests/integration/snapshot.js
@@ -0,0 +1,15 @@
+import { shallow, createLocalVue } from '@vue/test-utils';
+import flushPromises from 'flush-promises';
+import VeeValidate from './../../src/index';
+import TestComponent from './components/Snapshot';
+
+const Vue = createLocalVue();
+Vue.use(VeeValidate);
+
+test('snapshots should match', () => {
+  const first = shallow(TestComponent, { localVue: Vue });
+  const second = shallow(TestComponent, { localVue: Vue });
+
+  // same component, no props, should match in UI and in HTML.
+  expect(first.html()).toBe(second.html());
+});