Add latest changes from gitlab-org/gitlab@master

4 files changed, 165 insertions, 1 deletions

diff --git a/spec/frontend/jira_connect/api_spec.js b/spec/frontend/jira_connect/api_spec.js
index e5a2484c827..8fecbee9ca7 100644
--- a/spec/frontend/jira_connect/api_spec.js
+++ b/spec/frontend/jira_connect/api_spec.js
@@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 
-import { addSubscription, removeSubscription } from '~/jira_connect/api';
+import { addSubscription, removeSubscription, fetchGroups } from '~/jira_connect/api';
 
 describe('JiraConnect API', () => {
   let mock;
@@ -72,4 +72,36 @@ describe('JiraConnect API', () => {
       expect(response.data).toEqual(mockResponse);
     });
   });
+
+  describe('fetchGroups', () => {
+    const mockGroupsPath = 'groupsPath';
+    const mockPage = 1;
+    const mockPerPage = 10;
+
+    const makeRequest = () =>
+      fetchGroups(mockGroupsPath, {
+        page: mockPage,
+        perPage: mockPerPage,
+      });
+
+    it('returns success response', async () => {
+      jest.spyOn(axios, 'get');
+      mock
+        .onGet(mockGroupsPath, {
+          page: mockPage,
+          per_page: mockPerPage,
+        })
+        .replyOnce(httpStatus.OK, mockResponse);
+
+      response = await makeRequest();
+
+      expect(axios.get).toHaveBeenCalledWith(mockGroupsPath, {
+        params: {
+          page: mockPage,
+          per_page: mockPerPage,
+        },
+      });
+      expect(response.data).toEqual(mockResponse);
+    });
+  });
 });
diff --git a/spec/frontend/jira_connect/components/groups_list_item_spec.js b/spec/frontend/jira_connect/components/groups_list_item_spec.js
new file mode 100644
index 00000000000..77577c53cf4
--- /dev/null
+++ b/spec/frontend/jira_connect/components/groups_list_item_spec.js
@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAvatar } from '@gitlab/ui';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { mockGroup1 } from '../mock_data';
+
+import GroupsListItem from '~/jira_connect/components/groups_list_item.vue';
+
+describe('GroupsListItem', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = extendedWrapper(
+      shallowMount(GroupsListItem, {
+        propsData: {
+          group: mockGroup1,
+        },
+      }),
+    );
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  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');
+
+  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);
+  });
+});
diff --git a/spec/frontend/jira_connect/components/groups_list_spec.js b/spec/frontend/jira_connect/components/groups_list_spec.js
new file mode 100644
index 00000000000..94f158e6344
--- /dev/null
+++ b/spec/frontend/jira_connect/components/groups_list_spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import { fetchGroups } from '~/jira_connect/api';
+import GroupsList from '~/jira_connect/components/groups_list.vue';
+import GroupsListItem from '~/jira_connect/components/groups_list_item.vue';
+import { mockGroup1, mockGroup2 } from '../mock_data';
+
+jest.mock('~/jira_connect/api', () => {
+  return {
+    fetchGroups: jest.fn(),
+  };
+});
+describe('GroupsList', () => {
+  let wrapper;
+
+  const mockEmptyResponse = { data: [] };
+
+  const createComponent = (options = {}) => {
+    wrapper = shallowMount(GroupsList, {
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findGlLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findAllItems = () => wrapper.findAll(GroupsListItem);
+  const findFirstItem = () => findAllItems().at(0);
+  const findSecondItem = () => findAllItems().at(1);
+
+  describe('isLoading is true', () => {
+    it('renders loading icon', async () => {
+      fetchGroups.mockResolvedValue(mockEmptyResponse);
+      createComponent();
+
+      wrapper.setData({ isLoading: true });
+      await wrapper.vm.$nextTick();
+
+      expect(findGlLoadingIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('no groups returned', () => {
+    it('renders empty state', async () => {
+      fetchGroups.mockResolvedValue(mockEmptyResponse);
+      createComponent();
+
+      await waitForPromises();
+
+      expect(wrapper.text()).toContain('No available namespaces');
+    });
+  });
+
+  describe('with groups returned', () => {
+    it('renders groups list', async () => {
+      fetchGroups.mockResolvedValue({ data: [mockGroup1, mockGroup2] });
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findAllItems().length).toBe(2);
+      expect(findFirstItem().props('group')).toBe(mockGroup1);
+      expect(findSecondItem().props('group')).toBe(mockGroup2);
+    });
+  });
+});
diff --git a/spec/frontend/jira_connect/mock_data.js b/spec/frontend/jira_connect/mock_data.js
new file mode 100644
index 00000000000..31565912489
--- /dev/null
+++ b/spec/frontend/jira_connect/mock_data.js
@@ -0,0 +1,15 @@
+export const mockGroup1 = {
+  id: 1,
+  avatar_url: 'avatar.png',
+  name: 'Gitlab Org',
+  full_name: 'Gitlab Org',
+  description: 'Open source software to collaborate on code',
+};
+
+export const mockGroup2 = {
+  id: 2,
+  avatar_url: 'avatar.png',
+  name: 'Gitlab Com',
+  full_name: 'Gitlab Com',
+  description: 'For GitLab company related projects',
+};