Add latest changes from gitlab-org/gitlab@master

5 files changed, 87 insertions, 86 deletions

diff --git a/spec/frontend/boards/components/board_new_issue_spec.js b/spec/frontend/boards/components/board_new_issue_spec.js
index 651d1daee52..8c4a1b9e5c5 100644
--- a/spec/frontend/boards/components/board_new_issue_spec.js
+++ b/spec/frontend/boards/components/board_new_issue_spec.js
@@ -14,10 +14,11 @@ const addListNewIssuesSpy = jest.fn().mockResolvedValue();
 const mockActions = { addListNewIssue: addListNewIssuesSpy };
 
 const createComponent = ({
-  state = { selectedProject: mockGroupProjects[0] },
+  state = {},
   actions = mockActions,
   getters = { getBoardItemsByList: () => () => [] },
   isGroupBoard = true,
+  data = { selectedProject: mockGroupProjects[0] },
 } = {}) =>
   shallowMount(BoardNewIssue, {
     store: new Vuex.Store({
@@ -28,6 +29,7 @@ const createComponent = ({
     propsData: {
       list: mockList,
     },
+    data: () => data,
     provide: {
       groupId: 1,
       fullPath: mockGroupProjects[0].fullPath,
diff --git a/spec/frontend/boards/mock_data.js b/spec/frontend/boards/mock_data.js
index 447aacd9cea..b22b64bcf82 100644
--- a/spec/frontend/boards/mock_data.js
+++ b/spec/frontend/boards/mock_data.js
@@ -1040,4 +1040,43 @@ export const destroyBoardListMutationResponse = {
   },
 };
 
+export const mockProjects = [
+  {
+    id: 'gid://gitlab/Project/1',
+    name: 'Gitlab Shell',
+    nameWithNamespace: 'Gitlab Org / Gitlab Shell',
+    fullPath: 'gitlab-org/gitlab-shell',
+    archived: false,
+    __typename: 'Project',
+  },
+  {
+    id: 'gid://gitlab/Project/2',
+    name: 'Gitlab Test',
+    nameWithNamespace: 'Gitlab Org / Gitlab Test',
+    fullPath: 'gitlab-org/gitlab-test',
+    archived: true,
+    __typename: 'Project',
+  },
+];
+
+export const mockGroupProjectsResponse = (projects = mockProjects) => ({
+  data: {
+    group: {
+      id: 'gid://gitlab/Group/1',
+      projects: {
+        nodes: projects,
+        pageInfo: {
+          hasNextPage: true,
+          hasPreviousPage: false,
+          startCursor: 'abc',
+          endCursor: 'bcd',
+          __typename: 'PageInfo',
+        },
+        __typename: 'ProjectConnection',
+      },
+      __typename: 'Group',
+    },
+  },
+});
+
 export const DEFAULT_COLOR = '#1068bf';
diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js
index b4308b38947..f1daccfadda 100644
--- a/spec/frontend/boards/project_select_spec.js
+++ b/spec/frontend/boards/project_select_spec.js
@@ -1,17 +1,19 @@
 import { GlCollapsibleListbox, GlListboxItem, GlLoadingIcon } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
-import Vuex from 'vuex';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import groupProjectsQuery from '~/boards/graphql/group_projects.query.graphql';
 import ProjectSelect from '~/boards/components/project_select.vue';
-import defaultState from '~/boards/stores/state';
 
-import { mockActiveGroupProjects, mockList } from './mock_data';
+import { mockList, mockGroupProjectsResponse, mockProjects } from './mock_data';
 
-const mockProjectsList1 = mockActiveGroupProjects.slice(0, 1);
+Vue.use(VueApollo);
 
 describe('ProjectSelect component', () => {
   let wrapper;
-  let store;
+  let mockApollo;
 
   const findLabel = () => wrapper.find("[data-testid='header-label']");
   const findGlCollapsibleListBox = () => wrapper.findComponent(GlCollapsibleListbox);
@@ -26,77 +28,54 @@ describe('ProjectSelect component', () => {
   const findInMenuLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']");
   const findEmptySearchMessage = () => wrapper.find("[data-testid='listbox-no-results-text']");
 
-  const createStore = ({ state, activeGroupProjects }) => {
-    Vue.use(Vuex);
-
-    store = new Vuex.Store({
-      state: {
-        defaultState,
-        groupProjectsFlags: {
-          isLoading: false,
-          pageInfo: {
-            hasNextPage: false,
-          },
-        },
-        ...state,
-      },
-      actions: {
-        fetchGroupProjects: jest.fn(),
-        setSelectedProject: jest.fn(),
-      },
-      getters: {
-        activeGroupProjects: () => activeGroupProjects,
-      },
-    });
-  };
-
-  const createWrapper = ({ state = {}, activeGroupProjects = [] } = {}) => {
-    createStore({
-      state,
-      activeGroupProjects,
-    });
+  const projectsQueryHandler = jest.fn().mockResolvedValue(mockGroupProjectsResponse());
+  const emptyProjectsQueryHandler = jest.fn().mockResolvedValue(mockGroupProjectsResponse([]));
 
-    wrapper = mount(ProjectSelect, {
+  const createWrapper = ({ queryHandler = projectsQueryHandler, selectedProject = {} } = {}) => {
+    mockApollo = createMockApollo([[groupProjectsQuery, queryHandler]]);
+    wrapper = mountExtended(ProjectSelect, {
+      apolloProvider: mockApollo,
       propsData: {
         list: mockList,
+        selectedProject,
       },
-      store,
       provide: {
         groupId: 1,
+        fullPath: 'gitlab-org',
       },
       attachTo: document.body,
     });
   };
 
-  it('displays a header title', () => {
-    createWrapper();
-
-    expect(findLabel().text()).toBe('Projects');
-  });
-
-  it('renders a default dropdown text', () => {
-    createWrapper();
-
-    expect(findGlCollapsibleListBox().exists()).toBe(true);
-    expect(findGlCollapsibleListBox().text()).toContain('Select a project');
-  });
-
   describe('when mounted', () => {
-    it('displays a loading icon while projects are being fetched', async () => {
+    beforeEach(() => {
       createWrapper();
+    });
 
+    it('displays a loading icon while projects are being fetched', async () => {
       expect(findGlDropdownLoadingIcon().exists()).toBe(true);
 
-      await nextTick();
+      await waitForPromises();
 
       expect(findGlDropdownLoadingIcon().exists()).toBe(false);
+      expect(projectsQueryHandler).toHaveBeenCalled();
+    });
+
+    it('displays a header title', () => {
+      expect(findLabel().text()).toBe('Projects');
+    });
+
+    it('renders a default dropdown text', () => {
+      expect(findGlCollapsibleListBox().exists()).toBe(true);
+      expect(findGlCollapsibleListBox().text()).toContain('Select a project');
     });
   });
 
   describe('when dropdown menu is open', () => {
     describe('by default', () => {
-      beforeEach(() => {
-        createWrapper({ activeGroupProjects: mockActiveGroupProjects });
+      beforeEach(async () => {
+        createWrapper();
+        await waitForPromises();
       });
 
       it('shows GlListboxSearchInput with placeholder text', () => {
@@ -106,7 +85,7 @@ describe('ProjectSelect component', () => {
 
       it("displays the fetched project's name", () => {
         expect(findFirstGlDropdownItem().exists()).toBe(true);
-        expect(findFirstGlDropdownItem().text()).toContain(mockProjectsList1[0].name);
+        expect(findFirstGlDropdownItem().text()).toContain(mockProjects[0].name);
       });
 
       it("doesn't render loading icon in the menu", () => {
@@ -119,33 +98,31 @@ describe('ProjectSelect component', () => {
     });
 
     describe('when no projects are being returned', () => {
-      it('renders empty search result message', () => {
-        createWrapper();
+      it('renders empty search result message', async () => {
+        createWrapper({ queryHandler: emptyProjectsQueryHandler });
+        await waitForPromises();
 
         expect(findEmptySearchMessage().exists()).toBe(true);
       });
     });
 
     describe('when a project is selected', () => {
-      beforeEach(() => {
-        createWrapper({ activeGroupProjects: mockProjectsList1 });
-
-        findFirstGlDropdownItem().find('li').trigger('click');
+      beforeEach(async () => {
+        createWrapper({ selectedProject: mockProjects[0] });
+        await waitForPromises();
       });
 
       it('renders the name of the selected project', () => {
         expect(findGlCollapsibleListBox().find('.gl-new-dropdown-button-text').text()).toBe(
-          mockProjectsList1[0].name,
+          mockProjects[0].name,
         );
       });
     });
 
     describe('when projects are loading', () => {
-      beforeEach(() => {
-        createWrapper({ state: { groupProjectsFlags: { isLoading: true } } });
-      });
-
-      it('displays and hides gl-loading-icon while and after fetching data', () => {
+      it('displays and hides gl-loading-icon while and after fetching data', async () => {
+        createWrapper();
+        await nextTick();
         expect(findInMenuLoadingIcon().isVisible()).toBe(true);
       });
     });
diff --git a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
index 2662711076b..7fef20c900e 100644
--- a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
+++ b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js
@@ -19,7 +19,7 @@ function findStorageTypeUsagesSerialized() {
     .wrappers.map((wp) => wp.element.style.flex);
 }
 
-describe('Storage Counter usage graph component', () => {
+describe('UsageGraph', () => {
   beforeEach(() => {
     data = {
       rootStorageStatistics: {
@@ -29,7 +29,6 @@ describe('Storage Counter usage graph component', () => {
         containerRegistrySize: 2500,
         lfsObjectsSize: 2000,
         buildArtifactsSize: 700,
-        pipelineArtifactsSize: 300,
         snippetsSize: 2000,
         storageSize: 17000,
       },
@@ -43,7 +42,6 @@ describe('Storage Counter usage graph component', () => {
 
     const {
       buildArtifactsSize,
-      pipelineArtifactsSize,
       lfsObjectsSize,
       packagesSize,
       containerRegistrySize,
@@ -69,9 +67,6 @@ describe('Storage Counter usage graph component', () => {
     expect(types.at(6).text()).toMatchInterpolatedText(
       `Job artifacts ${numberToHumanSize(buildArtifactsSize)}`,
     );
-    expect(types.at(7).text()).toMatchInterpolatedText(
-      `Pipeline artifacts ${numberToHumanSize(pipelineArtifactsSize)}`,
-    );
   });
 
   describe('when storage type is not used', () => {
@@ -111,7 +106,6 @@ describe('Storage Counter usage graph component', () => {
         '0.11764705882352941',
         '0.11764705882352941',
         '0.041176470588235294',
-        '0.01764705882352941',
       ]);
     });
   });
@@ -131,7 +125,6 @@ describe('Storage Counter usage graph component', () => {
         '0.11764705882352941',
         '0.11764705882352941',
         '0.041176470588235294',
-        '0.01764705882352941',
       ]);
     });
   });
diff --git a/spec/frontend/usage_quotas/storage/mock_data.js b/spec/frontend/usage_quotas/storage/mock_data.js
index 6b83bbdbd97..452fa83b9a7 100644
--- a/spec/frontend/usage_quotas/storage/mock_data.js
+++ b/spec/frontend/usage_quotas/storage/mock_data.js
@@ -29,15 +29,6 @@ export const projectData = {
       },
       {
         storageType: {
-          id: 'pipelineArtifacts',
-          name: 'Pipeline artifacts',
-          description: 'Pipeline artifacts created by CI/CD.',
-          helpPath: '/pipeline-artifacts',
-        },
-        value: 400000,
-      },
-      {
-        storageType: {
           id: 'lfsObjects',
           name: 'LFS',
           description: 'Audio samples, videos, datasets, and graphics.',
@@ -93,7 +84,6 @@ export const projectHelpLinks = {
   containerRegistry: '/container_registry',
   usageQuotas: '/usage-quotas',
   buildArtifacts: '/build-artifacts',
-  pipelineArtifacts: '/pipeline-artifacts',
   lfsObjects: '/lsf-objects',
   packages: '/packages',
   repository: '/repository',