1 files changed, 39 insertions, 18 deletions

diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js
index 745b66fd700..f3e0a37e163 100644
--- a/spec/frontend/user_popovers_spec.js
+++ b/spec/frontend/user_popovers_spec.js
@@ -18,12 +18,13 @@ describe('User Popovers', () => {
 
     return link;
   };
+  const findPopovers = () => {
+    return Array.from(document.querySelectorAll('[data-testid="user-popover"]'));
+  };
 
   const dummyUser = { name: 'root' };
   const dummyUserStatus = { message: 'active' };
 
-  let popovers;
-
   const triggerEvent = (eventName, el) => {
     const event = new MouseEvent(eventName, {
       bubbles: true,
@@ -45,29 +46,49 @@ describe('User Popovers', () => {
       .spyOn(UsersCache, 'retrieveStatusById')
       .mockImplementation((userId) => userStatusCacheSpy(userId));
 
-    popovers = initUserPopovers(document.querySelectorAll(selector));
+    initUserPopovers(document.querySelectorAll(selector), (popoverInstance) => {
+      const mountingRoot = document.createElement('div');
+      document.body.appendChild(mountingRoot);
+      popoverInstance.$mount(mountingRoot);
+    });
   });
 
-  it('initializes a popover for each user link with a user id', () => {
-    const linksWithUsers = findFixtureLinks();
+  describe('shows a placeholder popover on hover', () => {
+    let linksWithUsers;
+    beforeEach(() => {
+      linksWithUsers = findFixtureLinks();
+      linksWithUsers.forEach((el) => {
+        triggerEvent('mouseenter', el);
+      });
+    });
 
-    expect(linksWithUsers.length).toBe(popovers.length);
-  });
+    it('for initial links', () => {
+      expect(findPopovers().length).toBe(linksWithUsers.length);
+    });
 
-  it('adds popovers to user links added to the DOM tree after the initial call', async () => {
-    document.body.appendChild(createUserLink());
-    document.body.appendChild(createUserLink());
+    it('for elements added after initial load', async () => {
+      const addedLinks = [createUserLink(), createUserLink()];
+      addedLinks.forEach((link) => {
+        document.body.appendChild(link);
+      });
 
-    const linksWithUsers = findFixtureLinks();
+      await Promise.resolve();
 
-    expect(linksWithUsers.length).toBe(popovers.length + 2);
+      addedLinks.forEach((link) => {
+        triggerEvent('mouseenter', link);
+      });
+
+      expect(findPopovers().length).toBe(linksWithUsers.length + addedLinks.length);
+    });
   });
 
   it('does not initialize the user popovers twice for the same element', () => {
-    const newPopovers = initUserPopovers(document.querySelectorAll(selector));
-    const samePopovers = popovers.every((popover, index) => newPopovers[index] === popover);
+    const [firstUserLink] = findFixtureLinks();
+    triggerEvent('mouseenter', firstUserLink);
+    triggerEvent('mouseleave', firstUserLink);
+    triggerEvent('mouseenter', firstUserLink);
 
-    expect(samePopovers).toBe(true);
+    expect(findPopovers().length).toBe(1);
   });
 
   describe('when user link emits mouseenter event', () => {
@@ -86,11 +107,11 @@ describe('User Popovers', () => {
       expect(userLink.dataset.originalTitle).toBeFalsy();
     });
 
-    it('populates popovers with preloaded user data', () => {
+    it('populates popover with preloaded user data', () => {
       const { name, userId, username } = userLink.dataset;
-      const [firstPopover] = popovers;
+      const [firstPopover] = findFixtureLinks();
 
-      expect(firstPopover.$props.user).toEqual(
+      expect(firstPopover.user).toEqual(
         expect.objectContaining({
           name,
           userId,