diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-27 15:08:03 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-27 15:08:03 +0300 |
commit | 274a42ccfaa22f6d6bc2d21da0c891bae15d3508 (patch) | |
tree | 9e7cee0f3d7e90c3b14da6857ac7cf50d6c3298d /spec/frontend | |
parent | 7a84ffdf31c0ba2fbfb448bcbd12b21f6d40a5fc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/boards/components/board_new_issue_spec.js | 4 | ||||
-rw-r--r-- | spec/frontend/boards/mock_data.js | 39 | ||||
-rw-r--r-- | spec/frontend/boards/project_select_spec.js | 111 | ||||
-rw-r--r-- | spec/frontend/usage_quotas/storage/components/usage_graph_spec.js | 9 | ||||
-rw-r--r-- | spec/frontend/usage_quotas/storage/mock_data.js | 10 |
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', |