diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-27 21:07:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-07-27 21:07:34 +0300 |
commit | 7dd130e2cae40514f02b02922251b62302f2fdd5 (patch) | |
tree | fd2f91802a2dd2659b72d3767ea9a00786d7900b /spec/frontend | |
parent | 9979d2afd66e12d938ea55372dcf2d8105b5eaca (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
6 files changed, 148 insertions, 353 deletions
diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js index 576263d5418..ca5f80f331c 100644 --- a/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js +++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_home_spec.js @@ -1,19 +1,19 @@ import { shallowMount } from '@vue/test-utils'; -import { nextTick } from 'vue'; -import { GlButton, GlDrawer, GlModal } from '@gitlab/ui'; +import { GlButton, GlModal } from '@gitlab/ui'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import setWindowLocation from 'helpers/set_window_location_helper'; -import CiEditorHeader from '~/ci/pipeline_editor/components/editor/ci_editor_header.vue'; import CommitSection from '~/ci/pipeline_editor/components/commit/commit_section.vue'; import PipelineEditorDrawer from '~/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue'; import JobAssistantDrawer from '~/ci/pipeline_editor/components/job_assistant_drawer/job_assistant_drawer.vue'; import PipelineEditorFileNav from '~/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue'; import PipelineEditorFileTree from '~/ci/pipeline_editor/components/file_tree/container.vue'; -import BranchSwitcher from '~/ci/pipeline_editor/components/file_nav/branch_switcher.vue'; import PipelineEditorHeader from '~/ci/pipeline_editor/components/header/pipeline_editor_header.vue'; import PipelineEditorTabs from '~/ci/pipeline_editor/components/pipeline_editor_tabs.vue'; import { CREATE_TAB, + EDITOR_APP_DRAWER_HELP, + EDITOR_APP_DRAWER_JOB_ASSISTANT, + EDITOR_APP_DRAWER_NONE, FILE_TREE_DISPLAY_KEY, VALIDATE_TAB, MERGED_TAB, @@ -29,10 +29,9 @@ jest.mock('~/lib/utils/common_utils'); describe('Pipeline editor home wrapper', () => { let wrapper; - const createComponent = ({ props = {}, glFeatures = {}, data = {}, stubs = {} } = {}) => { + const createComponent = ({ props = {}, glFeatures = {}, stubs = {} } = {}) => { wrapper = extendedWrapper( shallowMount(PipelineEditorHome, { - data: () => data, propsData: { ciConfigData: mockLintResponse, ciFileContent: mockCiYml, @@ -53,7 +52,6 @@ describe('Pipeline editor home wrapper', () => { ); }; - const findBranchSwitcher = () => wrapper.findComponent(BranchSwitcher); const findCommitSection = () => wrapper.findComponent(CommitSection); const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav); const findModal = () => wrapper.findComponent(GlModal); @@ -63,8 +61,16 @@ describe('Pipeline editor home wrapper', () => { const findPipelineEditorHeader = () => wrapper.findComponent(PipelineEditorHeader); const findPipelineEditorTabs = () => wrapper.findComponent(PipelineEditorTabs); const findFileTreeBtn = () => wrapper.findByTestId('file-tree-toggle'); - const findHelpBtn = () => wrapper.findByTestId('drawer-toggle'); - const findJobAssistantBtn = () => wrapper.findByTestId('job-assistant-drawer-toggle'); + + const clickHelpBtn = async () => { + await findPipelineEditorDrawer().vm.$emit('switch-drawer', EDITOR_APP_DRAWER_HELP); + }; + const clickJobAssistantBtn = async () => { + await findJobAssistantDrawer().vm.$emit('switch-drawer', EDITOR_APP_DRAWER_JOB_ASSISTANT); + }; + const closeDrawer = async (finder) => { + await finder().vm.$emit('switch-drawer', EDITOR_APP_DRAWER_NONE); + }; afterEach(() => { localStorage.clear(); @@ -103,11 +109,9 @@ describe('Pipeline editor home wrapper', () => { }); }); describe('when `showSwitchBranchModal` value is true', () => { - beforeEach(() => { - createComponent({ - data: { showSwitchBranchModal: true }, - stubs: { PipelineEditorFileNav }, - }); + beforeEach(async () => { + createComponent(); + await findFileNav().vm.$emit('select-branch'); }); it('is visible', () => { @@ -115,11 +119,11 @@ describe('Pipeline editor home wrapper', () => { }); it('pass down `shouldLoadNewBranch` to the branch switcher when primary is selected', async () => { - expect(findBranchSwitcher().props('shouldLoadNewBranch')).toBe(false); + expect(findFileNav().props('shouldLoadNewBranch')).toBe(false); await findModal().vm.$emit('primary'); - expect(findBranchSwitcher().props('shouldLoadNewBranch')).toBe(true); + expect(findFileNav().props('shouldLoadNewBranch')).toBe(true); }); it('closes the modal when secondary action is selected', async () => { @@ -148,9 +152,7 @@ describe('Pipeline editor home wrapper', () => { async ({ tab, shouldShow }) => { expect(findCommitSection().exists()).toBe(true); - findPipelineEditorTabs().vm.$emit('set-current-tab', tab); - - await nextTick(); + await findPipelineEditorTabs().vm.$emit('set-current-tab', tab); expect(findCommitSection().isVisible()).toBe(shouldShow); }, @@ -159,12 +161,10 @@ describe('Pipeline editor home wrapper', () => { it('shows the commit form again when coming back to the create tab', async () => { expect(findCommitSection().isVisible()).toBe(true); - findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB); - await nextTick(); + await findPipelineEditorTabs().vm.$emit('set-current-tab', MERGED_TAB); expect(findCommitSection().isVisible()).toBe(false); - findPipelineEditorTabs().vm.$emit('set-current-tab', CREATE_TAB); - await nextTick(); + await findPipelineEditorTabs().vm.$emit('set-current-tab', CREATE_TAB); expect(findCommitSection().isVisible()).toBe(true); }); @@ -195,7 +195,9 @@ describe('Pipeline editor home wrapper', () => { describe('when "walkthrough-popover-cta-clicked" is emitted from pipeline editor tabs', () => { it('passes down `scrollToCommitForm=true` to commit section', async () => { expect(findCommitSection().props('scrollToCommitForm')).toBe(false); + await findPipelineEditorTabs().vm.$emit('walkthrough-popover-cta-clicked'); + expect(findCommitSection().props('scrollToCommitForm')).toBe(true); }); }); @@ -204,6 +206,7 @@ describe('Pipeline editor home wrapper', () => { it('passes down `scrollToCommitForm=false` to commit section', async () => { await findPipelineEditorTabs().vm.$emit('walkthrough-popover-cta-clicked'); expect(findCommitSection().props('scrollToCommitForm')).toBe(true); + await findCommitSection().vm.$emit('scrolled-to-commit-form'); expect(findCommitSection().props('scrollToCommitForm')).toBe(false); }); @@ -211,133 +214,49 @@ describe('Pipeline editor home wrapper', () => { }); describe('help drawer', () => { - const clickHelpBtn = async () => { - findHelpBtn().vm.$emit('click'); - await nextTick(); - }; - - it('hides the drawer by default', () => { + beforeEach(() => { createComponent(); + }); + it('hides the drawer by default', () => { expect(findPipelineEditorDrawer().props('isVisible')).toBe(false); }); it('toggles the drawer on button click', async () => { - createComponent({ - stubs: { - CiEditorHeader, - GlButton, - GlDrawer, - PipelineEditorTabs, - PipelineEditorDrawer, - }, - }); - - await clickHelpBtn(); - - expect(findPipelineEditorDrawer().props('isVisible')).toBe(true); - - await clickHelpBtn(); - expect(findPipelineEditorDrawer().props('isVisible')).toBe(false); - }); - - it("closes the drawer through the drawer's close button", async () => { - createComponent({ - stubs: { - CiEditorHeader, - GlButton, - GlDrawer, - PipelineEditorTabs, - PipelineEditorDrawer, - }, - }); await clickHelpBtn(); - expect(findPipelineEditorDrawer().props('isVisible')).toBe(true); - findPipelineEditorDrawer().findComponent(GlDrawer).vm.$emit('close'); - await nextTick(); - + await closeDrawer(findPipelineEditorDrawer); expect(findPipelineEditorDrawer().props('isVisible')).toBe(false); }); }); describe('job assistant drawer', () => { - const clickHelpBtn = async () => { - findHelpBtn().vm.$emit('click'); - await nextTick(); - }; - const clickJobAssistantBtn = async () => { - findJobAssistantBtn().vm.$emit('click'); - await nextTick(); - }; - - const stubs = { - CiEditorHeader, - GlButton, - GlDrawer, - PipelineEditorTabs, - JobAssistantDrawer, - }; - - it('hides the job assistant drawer by default', () => { + beforeEach(() => { createComponent({ glFeatures: { ciJobAssistantDrawer: true, }, }); + }); + it('hides the job assistant drawer by default', () => { expect(findJobAssistantDrawer().props('isVisible')).toBe(false); }); it('toggles the job assistant drawer on button click', async () => { - createComponent({ - stubs, - glFeatures: { - ciJobAssistantDrawer: true, - }, - }); - - await clickJobAssistantBtn(); - - expect(findJobAssistantDrawer().props('isVisible')).toBe(true); - - await clickJobAssistantBtn(); - expect(findJobAssistantDrawer().props('isVisible')).toBe(false); - }); - - it("closes the job assistant drawer through the drawer's close button", async () => { - createComponent({ - stubs, - glFeatures: { - ciJobAssistantDrawer: true, - }, - }); await clickJobAssistantBtn(); - expect(findJobAssistantDrawer().props('isVisible')).toBe(true); - findJobAssistantDrawer().findComponent(GlDrawer).vm.$emit('close'); - await nextTick(); - + await closeDrawer(findJobAssistantDrawer); expect(findJobAssistantDrawer().props('isVisible')).toBe(false); }); it('covers helper drawer when opened last', async () => { - createComponent({ - stubs: { - ...stubs, - PipelineEditorDrawer, - }, - glFeatures: { - ciJobAssistantDrawer: true, - }, - }); - await clickHelpBtn(); await clickJobAssistantBtn(); @@ -348,16 +267,6 @@ describe('Pipeline editor home wrapper', () => { }); it('covered by helper drawer when opened first', async () => { - createComponent({ - stubs: { - ...stubs, - PipelineEditorDrawer, - }, - glFeatures: { - ciJobAssistantDrawer: true, - }, - }); - await clickJobAssistantBtn(); await clickHelpBtn(); @@ -370,8 +279,7 @@ describe('Pipeline editor home wrapper', () => { describe('file tree', () => { const toggleFileTree = async () => { - findFileTreeBtn().vm.$emit('click'); - await nextTick(); + await findFileTreeBtn().vm.$emit('click'); }; describe('button toggle', () => { @@ -412,9 +320,7 @@ describe('Pipeline editor home wrapper', () => { describe('when file tree display state is saved in local storage', () => { beforeEach(() => { localStorage.setItem(FILE_TREE_DISPLAY_KEY, 'true'); - createComponent({ - stubs: { PipelineEditorFileNav }, - }); + createComponent(); }); it('shows the file tree by default', () => { @@ -424,9 +330,7 @@ describe('Pipeline editor home wrapper', () => { describe('when file tree display state is not saved in local storage', () => { beforeEach(() => { - createComponent({ - stubs: { PipelineEditorFileNav }, - }); + createComponent(); }); it('hides the file tree by default', () => { diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js index 1a200090805..88ab51cf135 100644 --- a/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js +++ b/spec/frontend/usage_quotas/storage/components/project_storage_app_spec.js @@ -1,16 +1,24 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; -import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; import ProjectStorageApp from '~/usage_quotas/storage/components/project_storage_app.vue'; import UsageGraph from '~/usage_quotas/storage/components/usage_graph.vue'; -import { TOTAL_USAGE_DEFAULT_TEXT } from '~/usage_quotas/storage/constants'; +import { + descendingStorageUsageSort, + getStorageTypesFromProjectStatistics, +} from '~/usage_quotas/storage/utils'; +import { + storageTypeHelpPaths, + PROJECT_STORAGE_TYPES, + NAMESPACE_STORAGE_TYPES, + TOTAL_USAGE_DEFAULT_TEXT, +} from '~/usage_quotas/storage/constants'; import getProjectStorageStatistics from '~/usage_quotas/storage/queries/project_storage.query.graphql'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; import { - projectData, mockGetProjectStorageStatisticsGraphQLResponse, mockEmptyResponse, defaultProjectProvideValues, @@ -36,25 +44,26 @@ describe('ProjectStorageApp', () => { }; const createComponent = ({ provide = {}, mockApollo } = {}) => { - wrapper = extendedWrapper( - shallowMount(ProjectStorageApp, { - apolloProvider: mockApollo, - provide: { - ...defaultProjectProvideValues, - ...provide, - }, - }), - ); + wrapper = shallowMountExtended(ProjectStorageApp, { + apolloProvider: mockApollo, + provide: { + ...defaultProjectProvideValues, + ...provide, + }, + }); }; const findAlert = () => wrapper.findComponent(GlAlert); const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findUsagePercentage = () => wrapper.findByTestId('total-usage'); - const findUsageQuotasHelpLink = () => wrapper.findByTestId('usage-quotas-help-link'); const findUsageGraph = () => wrapper.findComponent(UsageGraph); + const findProjectDetailsTable = () => wrapper.findByTestId('usage-quotas-project-usage-details'); + const findNamespaceDetailsTable = () => + wrapper.findByTestId('usage-quotas-namespace-usage-details'); describe('with apollo fetching successful', () => { let mockApollo; + const mockProjectData = mockGetProjectStorageStatisticsGraphQLResponse.data.project; beforeEach(async () => { mockApollo = createMockApolloProvider({ @@ -65,13 +74,33 @@ describe('ProjectStorageApp', () => { }); it('renders correct total usage', () => { - expect(findUsagePercentage().text()).toBe(projectData.storage.totalUsage); + const expectedValue = numberToHumanSize( + mockGetProjectStorageStatisticsGraphQLResponse.data.project.statistics.storageSize, + 1, + ); + expect(findUsagePercentage().text()).toBe(expectedValue); + }); + + it('passes project storage entities to project details table', () => { + const expectedValue = getStorageTypesFromProjectStatistics( + PROJECT_STORAGE_TYPES, + mockProjectData.statistics, + mockProjectData.statisticsDetailsPaths, + storageTypeHelpPaths, + ).sort(descendingStorageUsageSort('value')); + + expect(findProjectDetailsTable().props('storageTypes')).toStrictEqual(expectedValue); }); - it('renders correct usage quotas help link', () => { - expect(findUsageQuotasHelpLink().attributes('href')).toBe( - defaultProjectProvideValues.helpLinks.usageQuotas, + it('passes namespace storage entities to namespace details table', () => { + const expectedValue = getStorageTypesFromProjectStatistics( + NAMESPACE_STORAGE_TYPES, + mockProjectData.statistics, + mockProjectData.statisticsDetailsPaths, + storageTypeHelpPaths, ); + + expect(findNamespaceDetailsTable().props('storageTypes')).toStrictEqual(expectedValue); }); }); @@ -104,6 +133,14 @@ describe('ProjectStorageApp', () => { it('shows default text for total usage', () => { expect(findUsagePercentage().text()).toBe(TOTAL_USAGE_DEFAULT_TEXT); }); + + it('passes empty array to project details table', () => { + expect(findProjectDetailsTable().props('storageTypes')).toStrictEqual([]); + }); + + it('passes empty array to namespace details table', () => { + expect(findNamespaceDetailsTable().props('storageTypes')).toStrictEqual([]); + }); }); describe('with apollo fetching error', () => { diff --git a/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js index 37fc9602315..364517a474f 100644 --- a/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js +++ b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js @@ -1,15 +1,36 @@ -import { GlTableLite, GlPopover } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; +import { GlTableLite } from '@gitlab/ui'; +import { mount, Wrapper } from '@vue/test-utils'; // eslint-disable-line no-unused-vars import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import ProjectStorageDetail from '~/usage_quotas/storage/components/project_storage_detail.vue'; -import { containerRegistryPopoverId, containerRegistryId } from '~/usage_quotas/storage/constants'; import { numberToHumanSize } from '~/lib/utils/number_utils'; -import { projectData, projectHelpLinks } from '../mock_data'; describe('ProjectStorageDetail', () => { + /** @type { Wrapper } */ let wrapper; - const { storageTypes } = projectData.storage; + const generateStorageType = (props) => { + return { + id: 'id', + name: 'name', + description: 'description', + helpPath: '/help-path', + detailsPath: '/details-link', + value: 42, + ...props, + }; + }; + + const storageTypes = [ + generateStorageType({ id: 'one' }), + generateStorageType({ id: 'two' }), + generateStorageType({ + id: 'three', + warning: { + content: 'warning message', + }, + }), + ]; + const defaultProps = { storageTypes }; const createComponent = (props = {}) => { @@ -26,23 +47,7 @@ describe('ProjectStorageDetail', () => { ); }; - const generateStorageType = (id = 'buildArtifacts') => { - return { - storageType: { - id, - name: 'Test Name', - description: 'Test Description', - helpPath: '/test-type', - }, - value: 400000, - }; - }; - const findTable = () => wrapper.findComponent(GlTableLite); - const findPopoverById = (id) => - wrapper.findAllComponents(GlPopover).filter((p) => p.attributes('data-testid') === id); - const findContainerRegistryPopover = () => findPopoverById(containerRegistryPopoverId); - const findContainerRegistryWarningIcon = () => wrapper.find(`#${containerRegistryPopoverId}`); beforeEach(() => { createComponent(); @@ -51,33 +56,23 @@ describe('ProjectStorageDetail', () => { describe('with storage types', () => { it.each(storageTypes)( 'renders table row correctly %o', - ({ storageType: { id, name, description } }) => { + ({ id, name, value, description, helpPath, warning }) => { expect(wrapper.findByTestId(`${id}-name`).text()).toBe(name); expect(wrapper.findByTestId(`${id}-description`).text()).toBe(description); expect(wrapper.findByTestId(`${id}-icon`).props('name')).toBe(id); - expect(wrapper.findByTestId(`${id}-help-link`).attributes('href')).toBe( - projectHelpLinks[id], - ); + expect(wrapper.findByTestId(`${id}-help-link`).attributes('href')).toBe(helpPath); + expect(wrapper.findByTestId(`${id}-value`).text()).toContain(numberToHumanSize(value, 1)); + + expect(wrapper.findByTestId(`${id}-warning-icon`).exists()).toBe(Boolean(warning)); + expect(wrapper.findByTestId(`${id}-popover`).exists()).toBe(Boolean(warning)); }, ); - - it('should render items in order from the biggest usage size to the smallest', () => { - const rows = findTable().find('tbody').findAll('tr'); - // Cloning array not to mutate the source - const sortedStorageTypes = [...storageTypes].sort((a, b) => b.value - a.value); - - sortedStorageTypes.forEach((storageType, i) => { - const rowUsageAmount = rows.wrappers[i].find('td:last-child').text(); - const expectedUsageAmount = numberToHumanSize(storageType.value, 1); - expect(rowUsageAmount).toBe(expectedUsageAmount); - }); - }); }); describe('with details links', () => { it.each(storageTypes)('each $storageType.id', (item) => { - const shouldExist = Boolean(item.storageType.detailsPath && item.value); - const detailsLink = wrapper.findByTestId(`${item.storageType.id}-details-link`); + const shouldExist = Boolean(item.detailsPath && item.value); + const detailsLink = wrapper.findByTestId(`${item.id}-details-link`); expect(detailsLink.exists()).toBe(shouldExist); }); }); @@ -95,21 +90,4 @@ describe('ProjectStorageDetail', () => { expect(findTable().find('td').exists()).toBe(false); }); }); - - describe.each` - description | mockStorageTypes | rendersContainerRegistryPopover - ${'without any storage type that has popover'} | ${[generateStorageType()]} | ${false} - ${'with container registry storage type'} | ${[generateStorageType(containerRegistryId)]} | ${true} - `('$description', ({ mockStorageTypes, rendersContainerRegistryPopover }) => { - beforeEach(() => { - createComponent({ storageTypes: mockStorageTypes }); - }); - - it(`does ${ - rendersContainerRegistryPopover ? '' : ' not' - } render container registry warning icon and popover`, () => { - expect(findContainerRegistryWarningIcon().exists()).toBe(rendersContainerRegistryPopover); - expect(findContainerRegistryPopover().exists()).toBe(rendersContainerRegistryPopover); - }); - }); }); 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 7fef20c900e..fc116211bf0 100644 --- a/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js +++ b/spec/frontend/usage_quotas/storage/components/usage_graph_spec.js @@ -44,7 +44,6 @@ describe('UsageGraph', () => { buildArtifactsSize, lfsObjectsSize, packagesSize, - containerRegistrySize, repositorySize, wikiSize, snippetsSize, @@ -57,14 +56,11 @@ describe('UsageGraph', () => { expect(types.at(2).text()).toMatchInterpolatedText( `Packages ${numberToHumanSize(packagesSize)}`, ); - expect(types.at(3).text()).toMatchInterpolatedText( - `Container Registry ${numberToHumanSize(containerRegistrySize)}`, - ); - expect(types.at(4).text()).toMatchInterpolatedText(`LFS ${numberToHumanSize(lfsObjectsSize)}`); - expect(types.at(5).text()).toMatchInterpolatedText( + expect(types.at(3).text()).toMatchInterpolatedText(`LFS ${numberToHumanSize(lfsObjectsSize)}`); + expect(types.at(4).text()).toMatchInterpolatedText( `Snippets ${numberToHumanSize(snippetsSize)}`, ); - expect(types.at(6).text()).toMatchInterpolatedText( + expect(types.at(5).text()).toMatchInterpolatedText( `Job artifacts ${numberToHumanSize(buildArtifactsSize)}`, ); }); @@ -102,7 +98,6 @@ describe('UsageGraph', () => { '0.29411764705882354', '0.23529411764705882', '0.17647058823529413', - '0.14705882352941177', '0.11764705882352941', '0.11764705882352941', '0.041176470588235294', @@ -121,7 +116,6 @@ describe('UsageGraph', () => { '0.29411764705882354', '0.23529411764705882', '0.17647058823529413', - '0.14705882352941177', '0.11764705882352941', '0.11764705882352941', '0.041176470588235294', diff --git a/spec/frontend/usage_quotas/storage/mock_data.js b/spec/frontend/usage_quotas/storage/mock_data.js index 452fa83b9a7..16c03a13028 100644 --- a/spec/frontend/usage_quotas/storage/mock_data.js +++ b/spec/frontend/usage_quotas/storage/mock_data.js @@ -3,95 +3,6 @@ import mockGetProjectStorageStatisticsGraphQLResponse from 'test_fixtures/graphq export { mockGetProjectStorageStatisticsGraphQLResponse }; export const mockEmptyResponse = { data: { project: null } }; -export const projectData = { - storage: { - totalUsage: '13.4 MiB', - storageTypes: [ - { - storageType: { - id: 'containerRegistry', - name: 'Container Registry', - description: 'Gitlab-integrated Docker Container Registry for storing Docker Images.', - helpPath: '/container_registry', - detailsPath: 'http://localhost/frontend-fixtures/builds-project/container_registry', - }, - value: 3900000, - }, - { - storageType: { - id: 'buildArtifacts', - name: 'Job artifacts', - description: 'Job artifacts created by CI/CD.', - helpPath: '/build-artifacts', - detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/artifacts', - }, - value: 400000, - }, - { - storageType: { - id: 'lfsObjects', - name: 'LFS', - description: 'Audio samples, videos, datasets, and graphics.', - helpPath: '/lsf-objects', - }, - value: 4800000, - }, - { - storageType: { - id: 'packages', - name: 'Packages', - description: 'Code packages and container images.', - helpPath: '/packages', - detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/packages', - }, - value: 3800000, - }, - { - storageType: { - id: 'repository', - name: 'Repository', - description: 'Git repository.', - helpPath: '/repository', - detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/tree/master', - }, - value: 3900000, - }, - { - storageType: { - id: 'snippets', - name: 'Snippets', - description: 'Shared bits of code and text.', - helpPath: '/snippets', - detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/snippets', - }, - value: 0, - }, - { - storageType: { - id: 'wiki', - name: 'Wiki', - description: 'Wiki content.', - helpPath: '/wiki', - detailsPath: 'http://localhost/frontend-fixtures/builds-project/-/wikis/pages', - }, - value: 300000, - }, - ], - }, -}; - -export const projectHelpLinks = { - containerRegistry: '/container_registry', - usageQuotas: '/usage-quotas', - buildArtifacts: '/build-artifacts', - lfsObjects: '/lsf-objects', - packages: '/packages', - repository: '/repository', - snippets: '/snippets', - wiki: '/wiki', -}; - export const defaultProjectProvideValues = { projectPath: '/project-path', - helpLinks: projectHelpLinks, }; diff --git a/spec/frontend/usage_quotas/storage/utils_spec.js b/spec/frontend/usage_quotas/storage/utils_spec.js index e3a271adc57..dd05e105c26 100644 --- a/spec/frontend/usage_quotas/storage/utils_spec.js +++ b/spec/frontend/usage_quotas/storage/utils_spec.js @@ -1,15 +1,9 @@ -import cloneDeep from 'lodash/cloneDeep'; import { PROJECT_STORAGE_TYPES } from '~/usage_quotas/storage/constants'; import { - parseGetProjectStorageResults, getStorageTypesFromProjectStatistics, descendingStorageUsageSort, } from '~/usage_quotas/storage/utils'; -import { - mockGetProjectStorageStatisticsGraphQLResponse, - defaultProjectProvideValues, - projectData, -} from './mock_data'; +import { mockGetProjectStorageStatisticsGraphQLResponse } from './mock_data'; describe('getStorageTypesFromProjectStatistics', () => { const { @@ -18,15 +12,18 @@ describe('getStorageTypesFromProjectStatistics', () => { } = mockGetProjectStorageStatisticsGraphQLResponse.data.project; describe('matches project statistics value with matching storage type', () => { - const typesWithStats = getStorageTypesFromProjectStatistics(projectStatistics); + const typesWithStats = getStorageTypesFromProjectStatistics( + PROJECT_STORAGE_TYPES, + projectStatistics, + ); it.each(PROJECT_STORAGE_TYPES)('storage type: $id', ({ id }) => { - expect(typesWithStats).toContainEqual({ - storageType: expect.objectContaining({ + expect(typesWithStats).toContainEqual( + expect.objectContaining({ id, + value: projectStatistics[`${id}Size`], }), - value: projectStatistics[`${id}Size`], - }); + ); }); }); @@ -38,57 +35,31 @@ describe('getStorageTypesFromProjectStatistics', () => { }; }, {}); - const typesWithStats = getStorageTypesFromProjectStatistics(projectStatistics, helpLinks); + const typesWithStats = getStorageTypesFromProjectStatistics( + PROJECT_STORAGE_TYPES, + projectStatistics, + {}, + helpLinks, + ); typesWithStats.forEach((type) => { - const key = type.storageType.id; - expect(type.storageType.helpPath).toBe(helpLinks[key]); + expect(type.helpPath).toBe(helpLinks[type.id]); }); }); it('adds details page path', () => { const typesWithStats = getStorageTypesFromProjectStatistics( + PROJECT_STORAGE_TYPES, projectStatistics, - {}, statisticsDetailsPaths, + {}, ); typesWithStats.forEach((type) => { - expect(type.storageType.detailsPath).toBe(statisticsDetailsPaths[type.storageType.id]); + expect(type.detailsPath).toBe(statisticsDetailsPaths[type.id]); }); }); }); -describe('parseGetProjectStorageResults', () => { - it('parses project statistics correctly', () => { - expect( - parseGetProjectStorageResults( - mockGetProjectStorageStatisticsGraphQLResponse.data, - defaultProjectProvideValues.helpLinks, - ), - ).toMatchObject(projectData); - }); - - it('includes storage type with size of 0 in returned value', () => { - const mockedResponse = cloneDeep(mockGetProjectStorageStatisticsGraphQLResponse.data); - // ensuring a specific storage type item has size of 0 - mockedResponse.project.statistics.repositorySize = 0; - - const response = parseGetProjectStorageResults( - mockedResponse, - defaultProjectProvideValues.helpLinks, - ); - - expect(response.storage.storageTypes).toEqual( - expect.arrayContaining([ - { - storageType: expect.any(Object), - value: 0, - }, - ]), - ); - }); -}); - describe('descendingStorageUsageSort', () => { it('sorts items by a given key in descending order', () => { const items = [{ k: 1 }, { k: 3 }, { k: 2 }]; |