diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-01-18 19:00:14 +0000 |
commit | 05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2 (patch) | |
tree | 11d0f2a6ec31c7793c184106cedc2ded3d9a2cc5 /spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js | |
parent | ec73467c23693d0db63a797d10194da9e72a74af (diff) | |
download | gitlab-ce-05f0ebba3a2c8ddf39e436f412dc2ab5bf1353b2.tar.gz |
Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42
Diffstat (limited to 'spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js')
-rw-r--r-- | spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js | 129 |
1 files changed, 129 insertions, 0 deletions
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 new file mode 100644 index 00000000000..ce489f69cad --- /dev/null +++ b/spec/frontend/usage_quotas/storage/components/project_storage_detail_spec.js @@ -0,0 +1,129 @@ +import { GlTableLite, GlPopover } from '@gitlab/ui'; +import { mount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import ProjectStorageDetail from '~/usage_quotas/storage/components/project_storage_detail.vue'; +import { + containerRegistryPopoverId, + containerRegistryId, + uploadsPopoverId, + uploadsId, +} from '~/usage_quotas/storage/constants'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; +import { projectData, projectHelpLinks } from '../mock_data'; + +describe('ProjectStorageDetail', () => { + let wrapper; + + const { storageTypes } = projectData.storage; + const defaultProps = { storageTypes }; + + const createComponent = (props = {}) => { + wrapper = extendedWrapper( + mount(ProjectStorageDetail, { + propsData: { + ...defaultProps, + ...props, + }, + provide: { + containerRegistryPopoverContent: 'Sample popover message', + }, + }), + ); + }; + + const generateStorageType = (id = 'buildArtifactsSize') => { + 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 findUploadsPopover = () => findPopoverById(uploadsPopoverId); + const findContainerRegistryWarningIcon = () => wrapper.find(`#${containerRegistryPopoverId}`); + const findUploadsWarningIcon = () => wrapper.find(`#${uploadsPopoverId}`); + + beforeEach(() => { + createComponent(); + }); + afterEach(() => { + wrapper.destroy(); + }); + + describe('with storage types', () => { + it.each(storageTypes)( + 'renders table row correctly %o', + ({ storageType: { id, name, description } }) => { + 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.replace(`Size`, ``)], + ); + }, + ); + + 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('without storage types', () => { + beforeEach(() => { + createComponent({ storageTypes: [] }); + }); + + it('should render the table header <th>', () => { + expect(findTable().find('th').exists()).toBe(true); + }); + + it('should not render any table data <td>', () => { + expect(findTable().find('td').exists()).toBe(false); + }); + }); + + describe.each` + description | mockStorageTypes | rendersContainerRegistryPopover | rendersUploadsPopover + ${'without any storage type that has popover'} | ${[generateStorageType()]} | ${false} | ${false} + ${'with container registry storage type'} | ${[generateStorageType(containerRegistryId)]} | ${true} | ${false} + ${'with uploads storage type'} | ${[generateStorageType(uploadsId)]} | ${false} | ${true} + ${'with container registry and uploads storage types'} | ${[generateStorageType(containerRegistryId), generateStorageType(uploadsId)]} | ${true} | ${true} + `( + '$description', + ({ mockStorageTypes, rendersContainerRegistryPopover, rendersUploadsPopover }) => { + 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); + }); + + it(`does ${ + rendersUploadsPopover ? '' : ' not' + } render container registry warning icon and popover`, () => { + expect(findUploadsWarningIcon().exists()).toBe(rendersUploadsPopover); + expect(findUploadsPopover().exists()).toBe(rendersUploadsPopover); + }); + }, + ); +}); |