Begin link-to-member unit test.

app/assets/javascripts/vue_common_component/link_to_member_avatar.js.es6

@@ -42,6 +42,10 @@
         type: Boolean,
         default: false,
         required: false,
+      },
+      tooltipContainer: {
+        type: String,
+        required: false,
       }
     },
     data() {
@@ -50,6 +54,9 @@
       };
     },
     computed: {
+      avatarElemId() {
+        return `${this.username}-avatar-link`;
+      },
       userProfileUrl() {
         return this.nonUser || !this.username ? '' : `/${this.username}`;
       },
@@ -67,12 +74,17 @@
       },
       linkClass() {
         return `author_link ${this.tooltipClass} ${this.extraLinkClass} ${this.disabledClass}`
+      },
+      tooltipContainerAttr() {
+        return this.tooltipContainer || `#${this.avatarElemId}`;
       }
     },
     template: `
-      <a :href='userProfileUrl' :class='linkClass' :data-original-title='displayName' data-container='body'>
-        <img :class='avatarClass' :src='preppedAvatarUrl' :width='size' :height='size' :alt='displayName'/>
-      </a>
+      <span :id='avatarElemId'>
+        <a :href='userProfileUrl' :class='linkClass' :data-original-title='displayName' :data-container='tooltipContainerAttr'>
+          <img :class='avatarClass' :src='preppedAvatarUrl' :width='size' :height='size' :alt='displayName'/>
+        </a>
+      </span>
     `
   });
 })();

spec/javascripts/vue_common_components/link_to_member_avatar_spec.js.es6

 /* eslint-disable */
 //= require jquery
 //= require vue
-//= require issuable_time_tracker
+//= require vue_common_component/link_to_member_avatar
 
-  ((gl) => {
+((gl) => {
+  function initComponent(propsData = {}) {
+    fixture.set(`
+      <div>
+        <div id="mock-container"></div>
+      </div>
+    `);
+
+    const LinkToMembersComponent = Vue.component('link-to-member-avatar');
+
+    this.component = new LinkToMembersComponent({
+      el: '#mock-container',
+      propsData,
+    }).$mount();
+
+    this.$document = $(document);
+  }
   describe('Link To Members Components', function() {
     describe('Initialization', function() {
-      is defined
-      has containing elements
-      configuration, including computed values and special config
-      loading state
-    });
+      describe('No configuration (defaults)', function() {
+        beforeEach(function() {
+          initComponent.call(this, { nonUser: true });
+        });
 
-    describe('Invalid input', function() {
-      defaults applied or errors thrown
-    });
+        it('should return a defined Vue component', function() {
+          expect(this.component).toBeDefined();
+          expect(this.component.$data).toBeDefined();
+        });
 
-    describe('Tooltip', function() {
-      hover state
-      display based on flags
-    });
+        it('should have <a> and <img> children', function() {
+          const componentLink = this.component.$el;
+          const componentLinkTagname = componentLink.tagName;
+
+          const componentImg = componentLink.childNodes[0];
+          const componentImgTagname = componentImg.tagName;
 
-    describe('Avatar', function() {
-      avatarurl vs empty state vs gravatar
+          expect(componentLink).toBeDefined();
+          expect(componentLinkTagname).toBe('A');
+
+          expect(componentImg).toBeDefined();
+          expect(componentImgTagname).toBe('IMG');
+        });
+
+        it('should correctly compute computed values', function() {
+          // disabledclass, avatarClass, tooltipClass, userProfileUrl, preppedAvatarUrl, linkClass, tooltipClass
+          const correctVals = {
+            'disabledClass': 'disabled',
+            'avatarClass': 'avatar avatar-inline s48 ',
+            'preppedAvatarUrl': '/assets/no_avatar.png',
+            'tooltipClass': '',
+            'userProfileUrl': '',
+          };
+
+          for (var computedKey in correctVals) {
+            const expectedVal = correctVals[computedKey];
+            const actualComputed = this.component[computedKey];
+            expect(actualComputed).toBe(expectedVal);
+          }
+        });
+      });
+
+      describe('Props Configured', function() {
+        beforeEach(function() {
+         const propsData = this.propsData = {
+            avatarUrl: 'myavatarurl.com',
+            username: 'myusername',
+            displayName: 'mydisplayname',
+            extraAvatarClass: 'myextraavatarclass',
+            extraLinkClass: 'myextralinkclass',
+            showTooltip: true,
+            size: 32,
+            nonUser: false
+          };
+          initComponent.call(this, {
+            propsData
+          });
+        });
+
+        it('should correctly compute computed values', function(done) {
+          // disabledclass, avatarClass, tooltipClass, userProfileUrl, preppedAvatarUrl, linkClass, tooltipClass
+          const correctVals = {
+            'disabledClass': '',
+            'avatarClass': 'avatar avatar-inline s48 ',
+            'preppedAvatarUrl': this.propsData.avatarUrl,
+            'tooltipClass': 'has-tooltip',
+            'userProfileUrl': `/${this.propsData.username}`,
+          };
+          Vue.nextTick(() => {
+            for (var computedKey in correctVals) {
+              const expectedVal = correctVals[computedKey];
+              const actualComputed = this.component[computedKey];
+              expect(actualComputed).toBe(expectedVal);
+            }
+            done();
+          });
+        });
+      });
     });
 
     describe('Interaction', function() {
-      click link and handler fires
+      it('should remove approval', function() {
+      
+    });
+      it('should give approval', function() {
+      
+      });
+     //  click link and handler fires
     });
 
   });