1 files changed, 29 insertions, 5 deletions

diff --git a/spec/frontend/super_sidebar/components/global_search/components/frequent_groups_spec.js b/spec/frontend/super_sidebar/components/global_search/components/frequent_groups_spec.js
index e63768a03c0..38e1baabf41 100644
--- a/spec/frontend/super_sidebar/components/global_search/components/frequent_groups_spec.js
+++ b/spec/frontend/super_sidebar/components/global_search/components/frequent_groups_spec.js
@@ -1,14 +1,32 @@
 import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import FrequentItems from '~/super_sidebar/components/global_search/components/frequent_items.vue';
 import FrequentGroups from '~/super_sidebar/components/global_search/components/frequent_groups.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import currentUserFrecentGroupsQuery from '~/super_sidebar/graphql/queries/current_user_frecent_groups.query.graphql';
+import waitForPromises from 'helpers/wait_for_promises';
+import { frecentGroupsMock } from '../../../mock_data';
+
+Vue.use(VueApollo);
 
 describe('FrequentlyVisitedGroups', () => {
   let wrapper;
 
   const groupsPath = '/mock/group/path';
+  const currentUserFrecentGroupsQueryHandler = jest.fn().mockResolvedValue({
+    data: {
+      frecentGroups: frecentGroupsMock,
+    },
+  });
 
   const createComponent = (options) => {
+    const mockApollo = createMockApollo([
+      [currentUserFrecentGroupsQuery, currentUserFrecentGroupsQueryHandler],
+    ]);
+
     wrapper = shallowMount(FrequentGroups, {
+      apolloProvider: mockApollo,
       provide: {
         groupsPath,
       },
@@ -28,19 +46,25 @@ describe('FrequentlyVisitedGroups', () => {
     expect(findFrequentItems().props()).toMatchObject({
       emptyStateText: 'Groups you visit often will appear here.',
       groupName: 'Frequently visited groups',
-      maxItems: 3,
-      storageKey: null,
       viewAllItemsIcon: 'group',
       viewAllItemsText: 'View all my groups',
       viewAllItemsPath: groupsPath,
     });
   });
 
-  it('with a user, passes a storage key string to FrequentItems', () => {
-    gon.current_username = 'test_user';
+  it('loads frecent groups', () => {
+    createComponent();
+
+    expect(currentUserFrecentGroupsQueryHandler).toHaveBeenCalled();
+    expect(findFrequentItems().props('loading')).toBe(true);
+  });
+
+  it('passes fetched groups to FrequentItems', async () => {
     createComponent();
+    await waitForPromises();
 
-    expect(findFrequentItems().props('storageKey')).toBe('test_user/frequent-groups');
+    expect(findFrequentItems().props('items')).toEqual(frecentGroupsMock);
+    expect(findFrequentItems().props('loading')).toBe(false);
   });
 
   it('passes attrs to FrequentItems', () => {