diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/container_registry')
4 files changed, 51 insertions, 40 deletions
diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js index a8d0d15007c..ca666e38291 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/details_header_spec.js @@ -1,7 +1,7 @@ import { GlDropdownItem, GlIcon, GlDropdown } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; -import { nextTick } from 'vue'; +import Vue, { nextTick } from 'vue'; import { numberToHumanSize } from '~/lib/utils/number_utils'; import { useFakeDate } from 'helpers/fake_date'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -28,7 +28,6 @@ import { imageTagsCountMock } from '../../mock_data'; describe('Details Header', () => { let wrapper; let apolloProvider; - let localVue; const defaultImage = { name: 'foo', @@ -64,28 +63,18 @@ describe('Details Header', () => { const mountComponent = ({ propsData = { image: defaultImage }, resolver = jest.fn().mockResolvedValue(imageTagsCountMock()), - $apollo = undefined, } = {}) => { - const mocks = {}; + Vue.use(VueApollo); - if ($apollo) { - mocks.$apollo = $apollo; - } else { - localVue = createLocalVue(); - localVue.use(VueApollo); - - const requestHandlers = [[getContainerRepositoryMetadata, resolver]]; - apolloProvider = createMockApollo(requestHandlers); - } + const requestHandlers = [[getContainerRepositoryMetadata, resolver]]; + apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMount(component, { - localVue, apolloProvider, propsData, directives: { GlTooltip: createMockDirective(), }, - mocks, stubs: { TitleArea, GlDropdown, @@ -98,7 +87,6 @@ describe('Details Header', () => { // if we want to mix createMockApollo and manual mocks we need to reset everything wrapper.destroy(); apolloProvider = undefined; - localVue = undefined; wrapper = null; }); @@ -194,10 +182,7 @@ describe('Details Header', () => { describe('metadata items', () => { describe('tags count', () => { it('displays "-- tags" while loading', async () => { - // here we are forced to mock apollo because `waitForMetadataItems` waits - // for two ticks, de facto allowing the promise to resolve, so there is - // no way to catch the component as both rendered and in loading state - mountComponent({ $apollo: { queries: { containerRepository: { loading: true } } } }); + mountComponent(); await waitForMetadataItems(); diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js index e8ddad2d8ca..af5723267f4 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status_spec.js @@ -1,8 +1,8 @@ -import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import { GlLink, GlPopover, GlSprintf } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { helpPagePath } from '~/helpers/help_page_helper'; import CleanupStatus from '~/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue'; import { - CLEANUP_TIMED_OUT_ERROR_MESSAGE, CLEANUP_STATUS_SCHEDULED, CLEANUP_STATUS_ONGOING, CLEANUP_STATUS_UNFINISHED, @@ -17,12 +17,20 @@ describe('cleanup_status', () => { const findMainIcon = () => wrapper.findByTestId('main-icon'); const findExtraInfoIcon = () => wrapper.findByTestId('extra-info'); + const findPopover = () => wrapper.findComponent(GlPopover); + + const cleanupPolicyHelpPage = helpPagePath( + 'user/packages/container_registry/reduce_container_registry_storage.html', + { anchor: 'how-the-cleanup-policy-works' }, + ); const mountComponent = (propsData = { status: SCHEDULED_STATUS }) => { wrapper = shallowMountExtended(CleanupStatus, { propsData, - directives: { - GlTooltip: createMockDirective(), + stubs: { + GlLink, + GlPopover, + GlSprintf, }, }); }; @@ -43,7 +51,7 @@ describe('cleanup_status', () => { mountComponent({ status }); expect(findMainIcon().exists()).toBe(visible); - expect(wrapper.text()).toBe(text); + expect(wrapper.text()).toContain(text); }, ); @@ -53,12 +61,6 @@ describe('cleanup_status', () => { expect(findMainIcon().exists()).toBe(true); }); - - it(`has the orange class when the status is ${UNFINISHED_STATUS}`, () => { - mountComponent({ status: UNFINISHED_STATUS }); - - expect(findMainIcon().classes('gl-text-orange-500')).toBe(true); - }); }); describe('extra info icon', () => { @@ -76,12 +78,18 @@ describe('cleanup_status', () => { }, ); - it(`has a tooltip`, () => { - mountComponent({ status: UNFINISHED_STATUS }); + it(`has a popover with a learn more link and a time frame for the next run`, () => { + jest.spyOn(Date, 'now').mockImplementation(() => new Date('2063-04-04T00:42:00Z').getTime()); - const tooltip = getBinding(findExtraInfoIcon().element, 'gl-tooltip'); + mountComponent({ + status: UNFINISHED_STATUS, + expirationPolicy: { next_run: '2063-04-08T01:44:03Z' }, + }); - expect(tooltip.value.title).toBe(CLEANUP_TIMED_OUT_ERROR_MESSAGE); + expect(findPopover().exists()).toBe(true); + expect(findPopover().text()).toContain('The cleanup will continue within 4 days. Learn more'); + expect(findPopover().findComponent(GlLink).exists()).toBe(true); + expect(findPopover().findComponent(GlLink).attributes('href')).toBe(cleanupPolicyHelpPage); }); }); }); diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js index 7d09c09d03b..f811468550d 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/registry_header_spec.js @@ -4,7 +4,6 @@ import { nextTick } from 'vue'; import Component from '~/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue'; import { CONTAINER_REGISTRY_TITLE, - LIST_INTRO_TEXT, EXPIRATION_POLICY_DISABLED_TEXT, SET_UP_CLEANUP, } from '~/packages_and_registries/container_registry/explorer/constants'; @@ -135,9 +134,7 @@ describe('registry_header', () => { it('is correctly bound to title_area props', () => { mountComponent({ helpPagePath: 'foo' }); - expect(findTitleArea().props('infoMessages')).toEqual([ - { text: LIST_INTRO_TEXT, link: 'foo' }, - ]); + expect(findTitleArea().props('infoMessages')).toEqual([]); }); }); }); diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/utils_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/utils_spec.js new file mode 100644 index 00000000000..5063759a620 --- /dev/null +++ b/spec/frontend/packages_and_registries/container_registry/explorer/utils_spec.js @@ -0,0 +1,21 @@ +import { timeTilRun } from '~/packages_and_registries/container_registry/explorer/utils'; + +describe('Container registry utilities', () => { + describe('timeTilRun', () => { + beforeEach(() => { + jest.spyOn(Date, 'now').mockImplementation(() => new Date('2063-04-04T00:42:00Z').getTime()); + }); + + it('should return a human readable time', () => { + const result = timeTilRun('2063-04-08T01:44:03Z'); + + expect(result).toBe('4 days'); + }); + + it('should return an empty string with null times', () => { + const result = timeTilRun(null); + + expect(result).toBe(''); + }); + }); +}); |