diff options
Diffstat (limited to 'spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js')
| -rw-r--r-- | spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js | 61 |
1 files changed, 37 insertions, 24 deletions
diff --git a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js index 9f7a2758ae1..b9839d92f1d 100644 --- a/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js +++ b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { GlIcon, GlSprintf } from '@gitlab/ui'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import Component from '~/registry/explorer/components/list_page/image_list_row.vue'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; @@ -11,13 +12,15 @@ import { REMOVE_REPOSITORY_LABEL, ASYNC_DELETE_IMAGE_ERROR_MESSAGE, CLEANUP_TIMED_OUT_ERROR_MESSAGE, + IMAGE_DELETE_SCHEDULED_STATUS, + IMAGE_FAILED_DELETED_STATUS, } from '~/registry/explorer/constants'; import { RouterLink } from '../../stubs'; import { imagesListResponse } from '../../mock_data'; describe('Image List Row', () => { let wrapper; - const item = imagesListResponse.data[0]; + const [item] = imagesListResponse; const findDetailsLink = () => wrapper.find('[data-testid="details-link"]'); const findTagsCount = () => wrapper.find('[data-testid="tagsCount"]'); @@ -50,13 +53,15 @@ describe('Image List Row', () => { describe('main tooltip', () => { it(`the title is ${ROW_SCHEDULED_FOR_DELETION}`, () => { mountComponent(); + const tooltip = getBinding(wrapper.element, 'gl-tooltip'); expect(tooltip).toBeDefined(); expect(tooltip.value.title).toBe(ROW_SCHEDULED_FOR_DELETION); }); it('is disabled when item is being deleted', () => { - mountComponent({ item: { ...item, deleting: true } }); + mountComponent({ item: { ...item, status: IMAGE_DELETE_SCHEDULED_STATUS } }); + const tooltip = getBinding(wrapper.element, 'gl-tooltip'); expect(tooltip.value.disabled).toBe(false); }); @@ -65,12 +70,13 @@ describe('Image List Row', () => { describe('image title and path', () => { it('contains a link to the details page', () => { mountComponent(); + const link = findDetailsLink(); expect(link.html()).toContain(item.path); expect(link.props('to')).toMatchObject({ name: 'details', params: { - id: item.id, + id: getIdFromGraphQLId(item.id), }, }); }); @@ -85,16 +91,18 @@ describe('Image List Row', () => { describe('warning icon', () => { it.each` - failedDelete | cleanup_policy_started_at | shown | title - ${true} | ${true} | ${true} | ${ASYNC_DELETE_IMAGE_ERROR_MESSAGE} - ${false} | ${true} | ${true} | ${CLEANUP_TIMED_OUT_ERROR_MESSAGE} - ${false} | ${false} | ${false} | ${''} + status | expirationPolicyStartedAt | shown | title + ${IMAGE_FAILED_DELETED_STATUS} | ${true} | ${true} | ${ASYNC_DELETE_IMAGE_ERROR_MESSAGE} + ${''} | ${true} | ${true} | ${CLEANUP_TIMED_OUT_ERROR_MESSAGE} + ${''} | ${false} | ${false} | ${''} `( - 'when failedDelete is $failedDelete and cleanup_policy_started_at is $cleanup_policy_started_at', - ({ cleanup_policy_started_at, failedDelete, shown, title }) => { - mountComponent({ item: { ...item, failedDelete, cleanup_policy_started_at } }); + 'when status is $status and expirationPolicyStartedAt is $expirationPolicyStartedAt', + ({ expirationPolicyStartedAt, status, shown, title }) => { + mountComponent({ item: { ...item, status, expirationPolicyStartedAt } }); + const icon = findWarningIcon(); expect(icon.exists()).toBe(shown); + if (shown) { const tooltip = getBinding(icon.element, 'gl-tooltip'); expect(tooltip.value.title).toBe(title); @@ -112,30 +120,33 @@ describe('Image List Row', () => { it('has the correct props', () => { mountComponent(); - expect(findDeleteBtn().attributes()).toMatchObject({ + + expect(findDeleteBtn().props()).toMatchObject({ title: REMOVE_REPOSITORY_LABEL, - tooltipdisabled: `${Boolean(item.destroy_path)}`, - tooltiptitle: LIST_DELETE_BUTTON_DISABLED, + tooltipDisabled: item.canDelete, + tooltipTitle: LIST_DELETE_BUTTON_DISABLED, }); }); it('emits a delete event', () => { mountComponent(); + findDeleteBtn().vm.$emit('delete'); expect(wrapper.emitted('delete')).toEqual([[item]]); }); it.each` - destroy_path | deleting | state - ${null} | ${null} | ${'true'} - ${null} | ${true} | ${'true'} - ${'foo'} | ${true} | ${'true'} - ${'foo'} | ${false} | ${undefined} + canDelete | status | state + ${false} | ${''} | ${true} + ${false} | ${IMAGE_DELETE_SCHEDULED_STATUS} | ${true} + ${true} | ${IMAGE_DELETE_SCHEDULED_STATUS} | ${true} + ${true} | ${''} | ${false} `( - 'disabled is $state when destroy_path is $destroy_path and deleting is $deleting', - ({ destroy_path, deleting, state }) => { - mountComponent({ item: { ...item, destroy_path, deleting } }); - expect(findDeleteBtn().attributes('disabled')).toBe(state); + 'disabled is $state when canDelete is $canDelete and status is $status', + ({ canDelete, status, state }) => { + mountComponent({ item: { ...item, canDelete, status } }); + + expect(findDeleteBtn().props('disabled')).toBe(state); }, ); }); @@ -155,11 +166,13 @@ describe('Image List Row', () => { describe('tags count text', () => { it('with one tag in the image', () => { - mountComponent({ item: { ...item, tags_count: 1 } }); + mountComponent({ item: { ...item, tagsCount: 1 } }); + expect(findTagsCount().text()).toMatchInterpolatedText('1 Tag'); }); it('with more than one tag in the image', () => { - mountComponent({ item: { ...item, tags_count: 3 } }); + mountComponent({ item: { ...item, tagsCount: 3 } }); + expect(findTagsCount().text()).toMatchInterpolatedText('3 Tags'); }); }); |