Merge branch 'tz-make-user-popover-spec-more-consistent' into 'master'

Made user_popovers_spec more stable

See merge request gitlab-org/gitlab-ce!24145

1 files changed, 10 insertions, 6 deletions

diff --git a/spec/javascripts/user_popovers_spec.js b/spec/javascripts/user_popovers_spec.js
index c6537e71850..b174a51c1a0 100644
--- a/spec/javascripts/user_popovers_spec.js
+++ b/spec/javascripts/user_popovers_spec.js
@@ -30,7 +30,9 @@ describe('User Popovers', () => {
   });
 
   it('Should Show+Hide Popover on mouseenter and mouseleave', done => {
-    triggerEvent('mouseenter', document.querySelector(selector));
+    const targetLink = document.querySelector(selector);
+    const { userId } = targetLink.dataset;
+    triggerEvent('mouseenter', targetLink);
 
     setTimeout(() => {
       const shownPopover = document.querySelector('.popover');
@@ -38,9 +40,9 @@ describe('User Popovers', () => {
       expect(shownPopover).not.toBeNull();
 
       expect(shownPopover.innerHTML).toContain(dummyUser.name);
-      expect(UsersCache.retrieveById).toHaveBeenCalledWith('58');
+      expect(UsersCache.retrieveById).toHaveBeenCalledWith(userId.toString());
 
-      triggerEvent('mouseleave', document.querySelector(selector));
+      triggerEvent('mouseleave', targetLink);
 
       setTimeout(() => {
         // After Mouse leave it should be hidden now
@@ -51,13 +53,15 @@ describe('User Popovers', () => {
   });
 
   it('Should Not show a popover on short mouse over', done => {
-    triggerEvent('mouseenter', document.querySelector(selector));
+    const targetLink = document.querySelector(selector);
+    const { userId } = targetLink.dataset;
+    triggerEvent('mouseenter', targetLink);
 
     setTimeout(() => {
       expect(document.querySelector('.popover')).toBeNull();
-      expect(UsersCache.retrieveById).not.toHaveBeenCalledWith('1');
+      expect(UsersCache.retrieveById).not.toHaveBeenCalledWith(userId.toString());
 
-      triggerEvent('mouseleave', document.querySelector(selector));
+      triggerEvent('mouseleave', targetLink);
 
       done();
     });