Update specs with refactors

And add new specs for newly added components

app/assets/javascripts/jira_connect/components/app.vue

@@ -93,8 +93,7 @@ export default {
     <h2 class="gl-text-center">{{ s__('JiraService|GitLab for Jira Configuration') }}</h2>
 
     <div class="jira-connect-app-body gl-my-7 gl-pb-4">
-      <div class="gl-display-flex gl-justify-content-space-between">
-        <h5 class="" data-testid="new-jira-connect-ui-heading"></h5>
+      <div class="gl-display-flex gl-justify-content-end">
         <gl-button
           v-if="usersPath"
           category="primary"

locale/gitlab.pot

@@ -33286,6 +33286,9 @@ msgstr ""
 msgid "Unlimited"
 msgstr ""
 
+msgid "Unlink"
+msgstr ""
+
 msgid "Unlock"
 msgstr ""
 

spec/frontend/jira_connect/api_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { addSubscription, removeSubscription, fetchGroups } from '~/jira_connect/api';
+import { getJwt } from '~/jira_connect/utils';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 
+jest.mock('~/jira_connect/utils', () => ({
+  getJwt: jest.fn().mockResolvedValue('jwt'),
+}));
+
 describe('JiraConnect API', () => {
   let mock;
   let response;
@@ -13,14 +18,6 @@ describe('JiraConnect API', () => {
   const mockJwt = 'jwt';
   const mockResponse = { success: true };
 
-  const tokenSpy = jest.fn((callback) => callback(mockJwt));
-
-  window.AP = {
-    context: {
-      getToken: tokenSpy,
-    },
-  };
-
   beforeEach(() => {
     mock = new MockAdapter(axios);
   });
@@ -44,7 +41,7 @@ describe('JiraConnect API', () => {
 
       response = await makeRequest();
 
-      expect(tokenSpy).toHaveBeenCalled();
+      expect(getJwt).toHaveBeenCalled();
       expect(axios.post).toHaveBeenCalledWith(mockAddPath, {
         jwt: mockJwt,
         namespace_path: mockNamespace,
@@ -62,7 +59,7 @@ describe('JiraConnect API', () => {
 
       response = await makeRequest();
 
-      expect(tokenSpy).toHaveBeenCalled();
+      expect(getJwt).toHaveBeenCalled();
       expect(axios.delete).toHaveBeenCalledWith(mockRemovePath, {
         params: {
           jwt: mockJwt,

spec/frontend/jira_connect/components/app_spec.js

 import { GlAlert, GlButton, GlModal, GlLink } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import JiraConnectApp from '~/jira_connect/components/app.vue';
 import createStore from '~/jira_connect/store';
 import { SET_ALERT } from '~/jira_connect/store/mutation_types';
-import { persistAlert } from '~/jira_connect/utils';
 import { __ } from '~/locale';
 
-jest.mock('~/jira_connect/api');
+jest.mock('~/jira_connect/utils', () => ({
+  retrieveAlert: jest.fn().mockReturnValue({ message: 'error message' }),
+  getLocation: jest.fn(),
+}));
 
 describe('JiraConnectApp', () => {
   let wrapper;
   let store;
 
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findAlertLink = () => findAlert().find(GlLink);
+  const findAlertLink = () => findAlert().findComponent(GlLink);
   const findGlButton = () => wrapper.findComponent(GlButton);
   const findGlModal = () => wrapper.findComponent(GlModal);
-  const findHeader = () => wrapper.findByTestId('new-jira-connect-ui-heading');
-  const findHeaderText = () => findHeader().text();
 
   const createComponent = ({ provide, mountFn = shallowMount } = {}) => {
     store = createStore();
 
-    wrapper = extendedWrapper(
-      mountFn(JiraConnectApp, {
-        store,
-        provide,
-      }),
-    );
+    wrapper = mountFn(JiraConnectApp, {
+      store,
+      provide,
+    });
   };
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
   describe('template', () => {
-    it('renders new UI', () => {
-      createComponent();
-
-      expect(findHeader().exists()).toBe(true);
-      expect(findHeaderText()).toBe('Linked namespaces');
-    });
-
     describe('when user is not logged in', () => {
       beforeEach(() => {
         createComponent({
@@ -128,7 +117,6 @@ describe('JiraConnectApp', () => {
 
       describe('when alert is set in localStoage', () => {
         it('renders alert on mount', () => {
-          persistAlert({ message: 'error message' });
           createComponent();
 
           const alert = findAlert();

spec/frontend/jira_connect/components/group_item_name_spec.js

+import { GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+import GroupItemName from '~/jira_connect/components/group_item_name.vue';
+import { mockGroup1 } from '../mock_data';
+
+describe('GroupItemName', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = extendedWrapper(
+      shallowMount(GroupItemName, {
+        propsData: {
+          group: mockGroup1,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findGlAvatar = () => wrapper.findComponent(GlAvatar);
+  const findGroupName = () => wrapper.findByTestId('group-list-item-name');
+  const findGroupDescription = () => wrapper.findByTestId('group-list-item-description');
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders group avatar', () => {
+      expect(findGlAvatar().exists()).toBe(true);
+      expect(findGlAvatar().props('src')).toBe(mockGroup1.avatar_url);
+    });
+
+    it('renders group name', () => {
+      expect(findGroupName().text()).toBe(mockGroup1.full_name);
+    });
+
+    it('renders group description', () => {
+      expect(findGroupDescription().text()).toBe(mockGroup1.description);
+    });
+  });
+});

spec/frontend/jira_connect/components/groups_list_item_spec.js

-import { GlAvatar, GlButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import * as JiraConnectApi from '~/jira_connect/api';
+import GroupItemName from '~/jira_connect/components/group_item_name.vue';
 import GroupsListItem from '~/jira_connect/components/groups_list_item.vue';
-import { persistAlert } from '~/jira_connect/utils';
+import { persistAlert, reloadPage } from '~/jira_connect/utils';
 import { mockGroup1 } from '../mock_data';
 
 jest.mock('~/jira_connect/utils');
@@ -14,36 +14,23 @@ describe('GroupsListItem', () => {
   let wrapper;
   const mockSubscriptionPath = 'subscriptionPath';
 
-  const reloadSpy = jest.fn();
-
-  global.AP = {
-    navigator: {
-      reload: reloadSpy,
-    },
-  };
-
   const createComponent = ({ mountFn = shallowMount } = {}) => {
-    wrapper = extendedWrapper(
-      mountFn(GroupsListItem, {
-        propsData: {
-          group: mockGroup1,
-        },
-        provide: {
-          subscriptionsPath: mockSubscriptionPath,
-        },
-      }),
-    );
+    wrapper = mountFn(GroupsListItem, {
+      propsData: {
+        group: mockGroup1,
+      },
+      provide: {
+        subscriptionsPath: mockSubscriptionPath,
+      },
+    });
   };
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
   });
 
-  const findGlAvatar = () => wrapper.find(GlAvatar);
-  const findGroupName = () => wrapper.findByTestId('group-list-item-name');
-  const findGroupDescription = () => wrapper.findByTestId('group-list-item-description');
-  const findLinkButton = () => wrapper.find(GlButton);
+  const findGroupItemName = () => wrapper.findComponent(GroupItemName);
+  const findLinkButton = () => wrapper.findComponent(GlButton);
   const clickLinkButton = () => findLinkButton().trigger('click');
 
   describe('template', () => {
@@ -51,17 +38,9 @@ describe('GroupsListItem', () => {
       createComponent();
     });
 
-    it('renders group avatar', () => {
-      expect(findGlAvatar().exists()).toBe(true);
-      expect(findGlAvatar().props('src')).toBe(mockGroup1.avatar_url);
-    });
-
-    it('renders group name', () => {
-      expect(findGroupName().text()).toBe(mockGroup1.full_name);
-    });
-
-    it('renders group description', () => {
-      expect(findGroupDescription().text()).toBe(mockGroup1.description);
+    it('renders GroupItemName', () => {
+      expect(findGroupItemName().exists()).toBe(true);
+      expect(findGroupItemName().props('group')).toBe(mockGroup1);
     });
 
     it('renders Link button', () => {
@@ -106,7 +85,7 @@ describe('GroupsListItem', () => {
 
         await waitForPromises();
 
-        expect(reloadSpy).toHaveBeenCalled();
+        expect(reloadPage).toHaveBeenCalled();
       });
     });
 
@@ -125,7 +104,7 @@ describe('GroupsListItem', () => {
 
         await waitForPromises();
 
-        expect(reloadSpy).not.toHaveBeenCalled();
+        expect(reloadPage).not.toHaveBeenCalled();
         expect(wrapper.emitted('error')[0][0]).toBe(mockErrorMessage);
       });
     });

spec/frontend/jira_connect/components/groups_list_spec.js

@@ -35,12 +35,12 @@ describe('GroupsList', () => {
     wrapper.destroy();
   });
 
-  const findGlAlert = () => wrapper.find(GlAlert);
-  const findGlLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAllItems = () => wrapper.findAll(GroupsListItem);
   const findFirstItem = () => findAllItems().at(0);
   const findSecondItem = () => findAllItems().at(1);
-  const findSearchBox = () => wrapper.find(GlSearchBoxByType);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
   const findGroupsList = () => wrapper.findByTestId('groups-list');
 
   describe('when groups are loading', () => {

spec/frontend/jira_connect/index_spec.js

@@ -4,16 +4,13 @@ import { removeSubscription } from '~/jira_connect/api';
 
 jest.mock('~/jira_connect/api', () => ({
   removeSubscription: jest.fn().mockResolvedValue(),
+}));
+
+jest.mock('~/jira_connect/utils', () => ({
   getLocation: jest.fn().mockResolvedValue('test/location'),
 }));
 
 describe('initJiraConnect', () => {
-  window.AP = {
-    navigator: {
-      reload: jest.fn(),
-    },
-  };
-
   beforeEach(async () => {
     setFixtures(`
       <a class="js-jira-connect-sign-in" href="https://gitlab.com">Sign In</a>

spec/frontend/jira_connect/utils_spec.js

 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import { ALERT_LOCALSTORAGE_KEY } from '~/jira_connect/constants';
-import { persistAlert, retrieveAlert } from '~/jira_connect/utils';
-
-useLocalStorageSpy();
+import {
+  persistAlert,
+  retrieveAlert,
+  getJwt,
+  getLocation,
+  reloadPage,
+  sizeToParent,
+} from '~/jira_connect/utils';
 
 describe('JiraConnect utils', () => {
   describe('alert utils', () => {
+    useLocalStorageSpy();
+
     it.each`
       arg                                                                                 | expectedRetrievedValue
       ${{ title: 'error' }}                                                               | ${{ title: 'error' }}
@@ -29,4 +37,104 @@ describe('JiraConnect utils', () => {
       },
     );
   });
+
+  describe('AP object utils', () => {
+    afterEach(() => {
+      global.AP = null;
+    });
+
+    describe('getJwt', () => {
+      const mockJwt = 'jwt';
+      const getTokenSpy = jest.fn((callback) => callback(mockJwt));
+
+      it('resolves to the function call when AP.context.getToken is a function', async () => {
+        global.AP = {
+          context: {
+            getToken: getTokenSpy,
+          },
+        };
+
+        const jwt = await getJwt();
+
+        expect(getTokenSpy).toHaveBeenCalled();
+        expect(jwt).toBe(mockJwt);
+      });
+
+      it('resolves to undefined when AP.context.getToken is not a function', async () => {
+        const jwt = await getJwt();
+
+        expect(getTokenSpy).not.toHaveBeenCalled();
+        expect(jwt).toBeUndefined();
+      });
+    });
+
+    describe('getLocation', () => {
+      const mockLocation = 'test/location';
+      const getLocationSpy = jest.fn((callback) => callback(mockLocation));
+
+      it('resolves to the function call when AP.getLocation is a function', async () => {
+        global.AP = {
+          getLocation: getLocationSpy,
+        };
+
+        const location = await getLocation();
+
+        expect(getLocationSpy).toHaveBeenCalled();
+        expect(location).toBe(mockLocation);
+      });
+
+      it('resolves to undefined when AP.getLocation is not a function', async () => {
+        const location = await getLocation();
+
+        expect(getLocationSpy).not.toHaveBeenCalled();
+        expect(location).toBeUndefined();
+      });
+    });
+
+    describe('reloadPage', () => {
+      const reloadSpy = jest.fn();
+
+      useMockLocationHelper();
+
+      it('calls the function when AP.navigator.reload is a function', async () => {
+        global.AP = {
+          navigator: {
+            reload: reloadSpy,
+          },
+        };
+
+        await reloadPage();
+
+        expect(reloadSpy).toHaveBeenCalled();
+        expect(window.location.reload).not.toHaveBeenCalled();
+      });
+
+      it('calls window.location.reload when AP.navigator.reload is not a function', async () => {
+        await reloadPage();
+
+        expect(reloadSpy).not.toHaveBeenCalled();
+        expect(window.location.reload).toHaveBeenCalled();
+      });
+    });
+
+    describe('sizeToParent', () => {
+      const sizeToParentSpy = jest.fn();
+
+      it('calls the function when AP.sizeToParent is a function', async () => {
+        global.AP = {
+          sizeToParent: sizeToParentSpy,
+        };
+
+        await sizeToParent();
+
+        expect(sizeToParentSpy).toHaveBeenCalled();
+      });
+
+      it('does nothing when AP.navigator.reload is not a function', async () => {
+        await sizeToParent();
+
+        expect(sizeToParentSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
 });