1 files changed, 66 insertions, 0 deletions
diff --git a/spec/javascripts/user_popovers_spec.js b/spec/javascripts/user_popovers_spec.js
new file mode 100644
index 00000000000..6cf8dd81b36
--- /dev/null
+++ b/spec/javascripts/user_popovers_spec.js
@@ -0,0 +1,66 @@
+import initUserPopovers from '~/user_popovers';
+import UsersCache from '~/lib/utils/users_cache';
+
+describe('User Popovers', () => {
+  const selector = '.js-user-link';
+
+  const dummyUser = { name: 'root' };
+  const dummyUserStatus = { message: 'active' };
+
+  const triggerEvent = (eventName, el) => {
+    const event = document.createEvent('MouseEvents');
+    event.initMouseEvent(eventName, true, true, window);
+
+    el.dispatchEvent(event);
+  };
+
+  beforeEach(() => {
+    setFixtures(`
+      <a href="/root" data-user-id="1" class="js-user-link" data-username="root" data-original-title="" title="">
+        Root
+      </a>
+    `);
+
+    const usersCacheSpy = () => Promise.resolve(dummyUser);
+    spyOn(UsersCache, 'retrieveById').and.callFake(userId => usersCacheSpy(userId));
+
+    const userStatusCacheSpy = () => Promise.resolve(dummyUserStatus);
+    spyOn(UsersCache, 'retrieveStatusById').and.callFake(userId => userStatusCacheSpy(userId));
+
+    initUserPopovers(document.querySelectorAll('.js-user-link'));
+  });
+
+  it('Should Show+Hide Popover on mouseenter and mouseleave', done => {
+    triggerEvent('mouseenter', document.querySelector(selector));
+
+    setTimeout(() => {
+      const shownPopover = document.querySelector('.popover');
+
+      expect(shownPopover).not.toBeNull();
+
+      expect(shownPopover.innerHTML).toContain(dummyUser.name);
+      expect(UsersCache.retrieveById).toHaveBeenCalledWith('1');
+
+      triggerEvent('mouseleave', document.querySelector(selector));
+
+      setTimeout(() => {
+        // After Mouse leave it should be hidden now
+        expect(document.querySelector('.popover')).toBeNull();
+        done();
+      });
+    }, 210); // We need to wait until the 200ms mouseover delay is over, only then the popover will be visible
+  });
+
+  it('Should Not show a popover on short mouse over', done => {
+    triggerEvent('mouseenter', document.querySelector(selector));
+
+    setTimeout(() => {
+      expect(document.querySelector('.popover')).toBeNull();
+      expect(UsersCache.retrieveById).not.toHaveBeenCalledWith('1');
+
+      triggerEvent('mouseleave', document.querySelector(selector));
+
+      done();
+    });
+  });
+});