Adds VAction Unit tests (#121)

* chore: bump^ minor version "wait-on"

* feat: adds VAction tests and linting fix + clean up git history

src/components/VAction/VAction.vue

@@ -32,6 +32,14 @@ export default {
     if (tag === 'RouterLink') {
       options.nativeOn = listeners;
     }
+    /**
+     * Supress Vue warnings of .native modifiers
+     * Reference comment and issue #9999 on Vuetify
+     * https://github.com/vuetifyjs/vuetify/issues/9999#issuecomment-579434865
+     */
+    if (tag === 'button') {
+      options.nativeOn = null;
+    }
 
     return h(tag, options, children);
   },

src/components/VBreadcrumbs/VBreadcrumbs.vue

@@ -1,6 +1,10 @@
 <template>
   <nav role="navigation" class="vts-breadcrumbs">
-    <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="vts-breadcrumbs__list">
+    <ol
+      itemscope
+      itemtype="http://schema.org/BreadcrumbList"
+      class="vts-breadcrumbs__list"
+    >
       <li
         v-for="(item, index) in routeBreadcrumbs"
         :key="index"
@@ -9,10 +13,7 @@
         itemtype="http://schema.org/ListItem"
         class="vts-breadcrumbs__item"
       >
-        <span
-          v-if="index === routeBreadcrumbs.length - 1"
-          class="active"
-        >
+        <span v-if="index === routeBreadcrumbs.length - 1" class="active">
           {{ item.text }}
         </span>
         <router-link
@@ -38,11 +39,11 @@ export default {
   },
 
   computed: {
-    routeBreadcrumbs() {
-      if (this.breadcrumbs.length) {
+    routeBreadcrumbs({ $route }) {
+      if (this.breadcrumbs['length']) {
         return this.breadcrumbs;
       }
-      if (this.$route.fullPath === '/dashboard') {
+      if ($route['fullPath'] === '/dashboard') {
         return [{ text: 'Home' }];
       }
 

tests/unit/src/components/VAction.test.js

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/vue';
+import { RouterLinkStub } from '@vue/test-utils';
+import VActionStub from '../stubs/VActionStub.vue';
+
+describe('VAction Unit Test', () => {
+  describe('Default Functionality', () => {
+    it('Returns a <RouterLink/> tag', () => {
+      const { getByTestId } = render(VActionStub, {
+        stubs: {
+          RouterLink: RouterLinkStub
+        },
+      });
+
+      const testLink = getByTestId('internal');
+      expect(testLink).toHaveAttribute(
+        'to',
+        expect.stringContaining('/internal-link')
+      );
+    });
+    it('Returns an anchor tag with :href', () => {
+      const { getByTestId } = render(VActionStub);
+      const testLink = getByTestId('external-href');
+      expect(testLink).toHaveAttribute(
+        'href',
+        expect.stringContaining('http://example.com/')
+      );
+    });
+    it('Fails to return an anchor tag with :attrs', () => {
+      const { getByTestId } = render(VActionStub);
+      const testLink = getByTestId('external-attrs');
+      expect(testLink).not.toHaveAttribute('href');
+    });
+    it('Fails to return an anchor tag with :data', () => {
+      const { getByTestId } = render(VActionStub);
+      const testLink = getByTestId('external-data');
+      expect(testLink).not.toHaveAttribute('href');
+    });
+    it('Returns a <button />', () => {
+      const { getByTestId } = render(VActionStub);
+      const testLink = getByTestId('button');
+      expect(testLink).toHaveTextContent('Button');
+    });
+  });
+});

tests/unit/src/stubs/VActionStub.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <!-- ROUTER LINK -->
+    <v-action data-testid="internal" to="/internal-link">
+      Internal Link
+    </v-action>
+    <!-- ANCHOR TAG -->
+    <!-- TEST WONT PASS -->
+    <v-action data-testid="external-data" :data="data">
+      External Link
+    </v-action>
+    <!-- TEST WONT PASS -->
+    <v-action data-testid="external-attrs" :attrs="attrs">
+      External Link
+    </v-action>
+    <!-- TEST WILL PASS -->
+    <v-action data-testid="external-href" :href="attrs.href">
+      External Link
+    </v-action>
+    <!-- BUTTON -->
+    <v-action data-testid="button">
+      Button
+    </v-action>
+  </div>
+</template>
+
+<script>
+// TURNS OFF ERROR IN CONSOLE for UNIT TEST
+import { RouterLinkStub } from '@vue/test-utils';
+const RouterLink = RouterLinkStub;
+import VAction from '../../../../src/components/VAction/VAction.vue';
+
+export default {
+  name: 'VActionStub',
+  components: { 
+    VAction, 
+    // eslint-disable-next-line vue/no-unused-components
+    RouterLink
+  },
+  data() {
+    return {
+      attrs: {
+        href: 'http://example.com/',
+      },
+    };
+  },
+};
+</script>