1 files changed, 41 insertions, 3 deletions

diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
index 7e97a539a99..7e71622770f 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_spec.js
@@ -1,20 +1,35 @@
-import { GlProgressBar } from '@gitlab/ui';
+import { GlProgressBar, GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import LearnGitlab from '~/pages/projects/learn_gitlab/components/learn_gitlab.vue';
 import eventHub from '~/invite_members/event_hub';
-import { testActions, testSections } from './mock_data';
+import { testActions, testSections, testProject } from './mock_data';
 
 describe('Learn GitLab', () => {
   let wrapper;
+  let sidebar;
   let inviteMembersOpen = false;
 
   const createWrapper = () => {
     wrapper = mount(LearnGitlab, {
-      propsData: { actions: testActions, sections: testSections, inviteMembersOpen },
+      propsData: {
+        actions: testActions,
+        sections: testSections,
+        project: testProject,
+        inviteMembersOpen,
+      },
     });
   };
 
   beforeEach(() => {
+    sidebar = document.createElement('div');
+    sidebar.innerHTML = `
+    <div class="sidebar-top-level-items">
+      <div class="active">
+        <div class="count"></div>
+      </div>
+    </div>
+    `;
+    document.body.appendChild(sidebar);
     createWrapper();
   });
 
@@ -22,6 +37,7 @@ describe('Learn GitLab', () => {
     wrapper.destroy();
     wrapper = null;
     inviteMembersOpen = false;
+    sidebar.remove();
   });
 
   it('renders correctly', () => {
@@ -66,4 +82,26 @@ describe('Learn GitLab', () => {
       expect(spy).not.toHaveBeenCalled();
     });
   });
+
+  describe('when the showSuccessfulInvitationsAlert event is fired', () => {
+    const findAlert = () => wrapper.findComponent(GlAlert);
+
+    beforeEach(() => {
+      eventHub.$emit('showSuccessfulInvitationsAlert');
+    });
+
+    it('displays the successful invitations alert', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('displays a message with the project name', () => {
+      expect(findAlert().text()).toBe(
+        "Your team is growing! You've successfully invited new team members to the test-project project.",
+      );
+    });
+
+    it('modifies the sidebar percentage', () => {
+      expect(sidebar.textContent.trim()).toBe('22%');
+    });
+  });
 });