Show category icons in user popover

Show bio, organization and location icons within user popover.

1 files changed, 18 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
index 852558a83bc..c7e0d806d80 100644
--- a/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/javascripts/vue_shared/components/user_popover/user_popover_spec.js
@@ -61,6 +61,12 @@ describe('User Popover Component', () => {
       expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.username);
       expect(vm.$el.textContent).toContain(DEFAULT_PROPS.user.location);
     });
+
+    it('shows icon for location', () => {
+      const iconEl = vm.$el.querySelector('.js-location svg');
+
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('location');
+    });
   });
 
   describe('job data', () => {
@@ -117,6 +123,18 @@ describe('User Popover Component', () => {
         'Me & my <funky> Company',
       );
     });
+
+    it('shows icon for bio', () => {
+      const iconEl = vm.$el.querySelector('.js-bio svg');
+
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('profile');
+    });
+
+    it('shows icon for organization', () => {
+      const iconEl = vm.$el.querySelector('.js-organization svg');
+
+      expect(iconEl.querySelector('use').getAttribute('xlink:href')).toContain('work');
+    });
   });
 
   describe('status data', () => {