1 files changed, 55 insertions, 2 deletions
diff --git a/spec/frontend/profile/components/profile_tabs_spec.js b/spec/frontend/profile/components/profile_tabs_spec.js
index 11ab372f1dd..80a1ff422ab 100644
--- a/spec/frontend/profile/components/profile_tabs_spec.js
+++ b/spec/frontend/profile/components/profile_tabs_spec.js
@@ -1,6 +1,9 @@
+import projects from 'test_fixtures/api/users/projects/get.json';
 import ProfileTabs from '~/profile/components/profile_tabs.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-
+import { createAlert } from '~/alert';
+import { getUserProjects } from '~/rest_api';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import OverviewTab from '~/profile/components/overview_tab.vue';
 import ActivityTab from '~/profile/components/activity_tab.vue';
 import GroupsTab from '~/profile/components/groups_tab.vue';
@@ -10,12 +13,20 @@ import StarredProjectsTab from '~/profile/components/starred_projects_tab.vue';
 import SnippetsTab from '~/profile/components/snippets_tab.vue';
 import FollowersTab from '~/profile/components/followers_tab.vue';
 import FollowingTab from '~/profile/components/following_tab.vue';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('~/alert');
+jest.mock('~/rest_api');
 
 describe('ProfileTabs', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMountExtended(ProfileTabs);
+    wrapper = shallowMountExtended(ProfileTabs, {
+      provide: {
+        userId: '1',
+      },
+    });
   };
 
   it.each([
@@ -33,4 +44,46 @@ describe('ProfileTabs', () => {
 
     expect(wrapper.findComponent(tab).exists()).toBe(true);
   });
+
+  describe('when personal projects API request is loading', () => {
+    beforeEach(() => {
+      getUserProjects.mockReturnValueOnce(new Promise(() => {}));
+      createComponent();
+    });
+
+    it('passes correct props to `OverviewTab` component', () => {
+      expect(wrapper.findComponent(OverviewTab).props()).toEqual({
+        personalProjects: [],
+        personalProjectsLoading: true,
+      });
+    });
+  });
+
+  describe('when personal projects API request is successful', () => {
+    beforeEach(async () => {
+      getUserProjects.mockResolvedValueOnce({ data: projects });
+      createComponent();
+      await waitForPromises();
+    });
+
+    it('passes correct props to `OverviewTab` component', () => {
+      expect(wrapper.findComponent(OverviewTab).props()).toMatchObject({
+        personalProjects: convertObjectPropsToCamelCase(projects, { deep: true }),
+        personalProjectsLoading: false,
+      });
+    });
+  });
+
+  describe('when personal projects API request is not successful', () => {
+    beforeEach(() => {
+      getUserProjects.mockRejectedValueOnce();
+      createComponent();
+    });
+
+    it('calls `createAlert`', () => {
+      expect(createAlert).toHaveBeenCalledWith({
+        message: ProfileTabs.i18n.personalProjectsErrorMessage,
+      });
+    });
+  });
 });