diff options
Diffstat (limited to 'spec/frontend/artifacts/components')
4 files changed, 104 insertions, 5 deletions
diff --git a/spec/frontend/artifacts/components/artifact_row_spec.js b/spec/frontend/artifacts/components/artifact_row_spec.js index dcc0d684f13..2a7156bf480 100644 --- a/spec/frontend/artifacts/components/artifact_row_spec.js +++ b/spec/frontend/artifacts/components/artifact_row_spec.js @@ -16,13 +16,14 @@ describe('ArtifactRow component', () => { const findDownloadButton = () => wrapper.findByTestId('job-artifact-row-download-button'); const findDeleteButton = () => wrapper.findByTestId('job-artifact-row-delete-button'); - const createComponent = (mountFn = shallowMountExtended) => { - wrapper = mountFn(ArtifactRow, { + const createComponent = ({ canDestroyArtifacts = true } = {}) => { + wrapper = shallowMountExtended(ArtifactRow, { propsData: { artifact, isLoading: false, isLastRow: false, }, + provide: { canDestroyArtifacts }, stubs: { GlBadge, GlButton, GlFriendlyWrap }, }); }; @@ -50,12 +51,24 @@ describe('ArtifactRow component', () => { it('displays the download button as a link to the download path', () => { expect(findDownloadButton().attributes('href')).toBe(artifact.downloadPath); }); + }); + + describe('delete button', () => { + it('does not show when user does not have permission', () => { + createComponent({ canDestroyArtifacts: false }); + + expect(findDeleteButton().exists()).toBe(false); + }); + + it('shows when user has permission', () => { + createComponent(); - it('displays the delete button', () => { expect(findDeleteButton().exists()).toBe(true); }); - it('emits the delete event when the delete button is clicked', async () => { + it('emits the delete event when clicked', async () => { + createComponent(); + expect(wrapper.emitted('delete')).toBeUndefined(); findDeleteButton().trigger('click'); diff --git a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js b/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js index c6ad13462f9..d006e0285d2 100644 --- a/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js +++ b/spec/frontend/artifacts/components/artifacts_table_row_details_spec.js @@ -40,6 +40,7 @@ describe('ArtifactsTableRowDetails component', () => { refetchArtifacts, queryVariables: {}, }, + provide: { canDestroyArtifacts: true }, data() { return { deletingArtifactId: null }; }, diff --git a/spec/frontend/artifacts/components/feedback_banner_spec.js b/spec/frontend/artifacts/components/feedback_banner_spec.js new file mode 100644 index 00000000000..3421486020a --- /dev/null +++ b/spec/frontend/artifacts/components/feedback_banner_spec.js @@ -0,0 +1,63 @@ +import { GlBanner } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import FeedbackBanner from '~/artifacts/components/feedback_banner.vue'; +import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser'; +import { + I18N_FEEDBACK_BANNER_TITLE, + I18N_FEEDBACK_BANNER_BUTTON, + FEEDBACK_URL, +} from '~/artifacts/constants'; + +const mockBannerImagePath = 'banner/image/path'; + +describe('Artifacts management feedback banner', () => { + let wrapper; + let userCalloutDismissSpy; + + const findBanner = () => wrapper.findComponent(GlBanner); + + const createComponent = ({ shouldShowCallout = true } = {}) => { + userCalloutDismissSpy = jest.fn(); + + wrapper = shallowMount(FeedbackBanner, { + provide: { + artifactsManagementFeedbackImagePath: mockBannerImagePath, + }, + stubs: { + UserCalloutDismisser: makeMockUserCalloutDismisser({ + dismiss: userCalloutDismissSpy, + shouldShowCallout, + }), + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it('is displayed with the correct props', () => { + createComponent(); + + expect(findBanner().props()).toMatchObject({ + title: I18N_FEEDBACK_BANNER_TITLE, + buttonText: I18N_FEEDBACK_BANNER_BUTTON, + buttonLink: FEEDBACK_URL, + svgPath: mockBannerImagePath, + }); + }); + + it('dismisses the callout when closed', () => { + createComponent(); + + findBanner().vm.$emit('close'); + + expect(userCalloutDismissSpy).toHaveBeenCalled(); + }); + + it('is not displayed once it has been dismissed', () => { + createComponent({ shouldShowCallout: false }); + + expect(findBanner().exists()).toBe(false); + }); +}); diff --git a/spec/frontend/artifacts/components/job_artifacts_table_spec.js b/spec/frontend/artifacts/components/job_artifacts_table_spec.js index 131b4b99bb2..dbe4598f599 100644 --- a/spec/frontend/artifacts/components/job_artifacts_table_spec.js +++ b/spec/frontend/artifacts/components/job_artifacts_table_spec.js @@ -5,6 +5,7 @@ import getJobArtifactsResponse from 'test_fixtures/graphql/artifacts/graphql/que import CiIcon from '~/vue_shared/components/ci_icon.vue'; import waitForPromises from 'helpers/wait_for_promises'; import JobArtifactsTable from '~/artifacts/components/job_artifacts_table.vue'; +import FeedbackBanner from '~/artifacts/components/feedback_banner.vue'; import ArtifactsTableRowDetails from '~/artifacts/components/artifacts_table_row_details.vue'; import ArtifactDeleteModal from '~/artifacts/components/artifact_delete_modal.vue'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -23,6 +24,8 @@ describe('JobArtifactsTable component', () => { let wrapper; let requestHandlers; + const findBanner = () => wrapper.findComponent(FeedbackBanner); + const findLoadingState = () => wrapper.findComponent(GlLoadingIcon); const findTable = () => wrapper.findComponent(GlTable); const findDetailsRows = () => wrapper.findAllComponents(ArtifactsTableRowDetails); @@ -79,13 +82,18 @@ describe('JobArtifactsTable component', () => { getJobArtifactsQuery: jest.fn().mockResolvedValue(getJobArtifactsResponse), }, data = {}, + canDestroyArtifacts = true, ) => { requestHandlers = handlers; wrapper = mountExtended(JobArtifactsTable, { apolloProvider: createMockApollo([ [getJobArtifactsQuery, requestHandlers.getJobArtifactsQuery], ]), - provide: { projectPath: 'project/path' }, + provide: { + projectPath: 'project/path', + canDestroyArtifacts, + artifactsManagementFeedbackImagePath: 'banner/image/path', + }, data() { return data; }, @@ -96,6 +104,12 @@ describe('JobArtifactsTable component', () => { wrapper.destroy(); }); + it('renders feedback banner', () => { + createComponent(); + + expect(findBanner().exists()).toBe(true); + }); + it('when loading, shows a loading state', () => { createComponent(); @@ -283,6 +297,14 @@ describe('JobArtifactsTable component', () => { }); describe('delete button', () => { + it('does not show when user does not have permission', async () => { + createComponent({}, {}, false); + + await waitForPromises(); + + expect(findDeleteButton().exists()).toBe(false); + }); + it('shows a disabled delete button for now (coming soon)', async () => { createComponent(); |