diff options
Diffstat (limited to 'spec/frontend')
4 files changed, 84 insertions, 60 deletions
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap index 7a488a74dcb..e0e6c101029 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap @@ -104,35 +104,33 @@ exports[`packages_list_row renders 1`] = ` <div class="gl-w-9 gl-display-flex gl-justify-content-end gl-pr-1" > - <gl-dropdown-stub + <gl-disclosure-dropdown-stub + autoclose="true" category="tertiary" - clearalltext="Clear all" - clearalltextclass="gl-px-5" data-testid="delete-dropdown" - headertext="" - hideheaderborder="true" - highlighteditemstitle="Selected" - highlighteditemstitleclass="gl-px-5" icon="ellipsis_v" - no-caret="" + items="" + nocaret="true" + placement="left" + positioningstrategy="absolute" size="medium" - text="More actions" textsronly="true" + toggleid="dropdown-toggle-btn-3" + toggletext="More actions" variant="default" > - <gl-dropdown-item-stub - avatarurl="" + <gl-disclosure-dropdown-item-stub data-testid="action-delete" - iconcolor="" - iconname="" - iconrightarialabel="" - iconrightname="" - secondarytext="" - variant="danger" > - Delete package - </gl-dropdown-item-stub> - </gl-dropdown-stub> + <span + class="gl-text-red-500" + > + + Delete package + + </span> + </gl-disclosure-dropdown-item-stub> + </gl-disclosure-dropdown-stub> </div> </div> diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js index 523d5f855fc..9f8fd4e28e7 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/list/package_list_row_spec.js @@ -34,7 +34,8 @@ describe('packages_list_row', () => { const packageWithTags = { ...packageWithoutTags, tags: { nodes: packageTags() } }; const findPackageTags = () => wrapper.findComponent(PackageTags); - const findDeleteDropdown = () => wrapper.findByTestId('action-delete'); + const findDeleteDropdown = () => wrapper.findByTestId('delete-dropdown'); + const findDeleteButton = () => wrapper.findByTestId('action-delete'); const findPackageType = () => wrapper.findByTestId('package-type'); const findPackageLink = () => wrapper.findByTestId('details-link'); const findWarningIcon = () => wrapper.findByTestId('warning-icon'); @@ -103,7 +104,7 @@ describe('packages_list_row', () => { }); }); - describe('delete button', () => { + describe('delete dropdown', () => { it('does not exist when package cannot be destroyed', () => { mountComponent({ packageEntity: { ...packageWithoutTags, canDestroy: false }, @@ -112,19 +113,39 @@ describe('packages_list_row', () => { expect(findDeleteDropdown().exists()).toBe(false); }); - it('exists and has the correct props', () => { - mountComponent({ packageEntity: packageWithoutTags }); + it('exists when package can be destroyed', () => { + mountComponent(); - expect(findDeleteDropdown().exists()).toBe(true); - expect(findDeleteDropdown().attributes()).toMatchObject({ - variant: 'danger', + expect(findDeleteDropdown().props()).toMatchObject({ + category: 'tertiary', + icon: 'ellipsis_v', + textSrOnly: true, + noCaret: true, + toggleText: 'More actions', }); }); + }); + + describe('delete button', () => { + it('does not exist when package cannot be destroyed', () => { + mountComponent({ + packageEntity: { ...packageWithoutTags, canDestroy: false }, + }); + + expect(findDeleteButton().exists()).toBe(false); + }); + + it('exists and has the correct text', () => { + mountComponent({ packageEntity: packageWithoutTags }); + + expect(findDeleteButton().exists()).toBe(true); + expect(findDeleteButton().text()).toBe('Delete package'); + }); it('emits the delete event when the delete button is clicked', () => { mountComponent({ packageEntity: packageWithoutTags }); - findDeleteDropdown().vm.$emit('click'); + findDeleteButton().vm.$emit('action'); expect(wrapper.emitted('delete')).toHaveLength(1); }); diff --git a/spec/frontend/work_items/components/work_item_created_updated_spec.js b/spec/frontend/work_items/components/work_item_created_updated_spec.js index 428b33aecfa..f77c5481906 100644 --- a/spec/frontend/work_items/components/work_item_created_updated_spec.js +++ b/spec/frontend/work_items/components/work_item_created_updated_spec.js @@ -1,10 +1,11 @@ -import { GlAvatarLink, GlSprintf } from '@gitlab/ui'; +import { GlAvatarLink, GlSprintf, 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 waitForPromises from 'helpers/wait_for_promises'; import WorkItemCreatedUpdated from '~/work_items/components/work_item_created_updated.vue'; +import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue'; import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue'; import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql'; import { workItemByIidResponseFactory, mockAssignees } from '../mock_data'; @@ -20,11 +21,20 @@ describe('WorkItemCreatedUpdated component', () => { const findCreatedAtText = () => findCreatedAt().text().replace(/\s+/g, ' '); const findWorkItemTypeIcon = () => wrapper.findComponent(WorkItemTypeIcon); - - const createComponent = async ({ workItemIid = '1', author = null, updatedAt } = {}) => { + const findConfidentialityBadge = () => wrapper.findComponent(ConfidentialityBadge); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); + + const createComponent = async ({ + workItemIid = '1', + author = null, + updatedAt, + confidential = false, + updateInProgress = false, + } = {}) => { const workItemQueryResponse = workItemByIidResponseFactory({ author, updatedAt, + confidential, }); successHandler = jest.fn().mockResolvedValue(workItemQueryResponse); @@ -34,7 +44,7 @@ describe('WorkItemCreatedUpdated component', () => { provide: { fullPath: '/some/project', }, - propsData: { workItemIid }, + propsData: { workItemIid, updateInProgress }, stubs: { GlAvatarLink, GlSprintf, @@ -88,4 +98,24 @@ describe('WorkItemCreatedUpdated component', () => { expect(findUpdatedAt().exists()).toBe(false); }); + + describe('confidential badge', () => { + it('renders badge when the work item is confidential', async () => { + await createComponent({ confidential: true }); + + expect(findConfidentialityBadge().exists()).toBe(true); + }); + + it('does not render badge when the work item is confidential', async () => { + await createComponent({ confidential: false }); + + expect(findConfidentialityBadge().exists()).toBe(false); + }); + + it('shows loading icon badge when the work item is confidential', async () => { + await createComponent({ updateInProgress: true }); + + expect(findLoadingIcon().exists()).toBe(true); + }); + }); }); diff --git a/spec/frontend/work_items/components/work_item_detail_spec.js b/spec/frontend/work_items/components/work_item_detail_spec.js index 07cbd975878..d3c7c9e2074 100644 --- a/spec/frontend/work_items/components/work_item_detail_spec.js +++ b/spec/frontend/work_items/components/work_item_detail_spec.js @@ -1,7 +1,5 @@ import { GlAlert, - GlBadge, - GlLoadingIcon, GlSkeletonLoader, GlButton, GlEmptyState, @@ -68,7 +66,6 @@ describe('WorkItemDetail component', () => { const findAlert = () => wrapper.findComponent(GlAlert); const findEmptyState = () => wrapper.findComponent(GlEmptyState); const findSkeleton = () => wrapper.findComponent(GlSkeletonLoader); - const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findWorkItemActions = () => wrapper.findComponent(WorkItemActions); const findWorkItemTitle = () => wrapper.findComponent(WorkItemTitle); const findCreatedUpdated = () => wrapper.findComponent(WorkItemCreatedUpdated); @@ -316,27 +313,7 @@ describe('WorkItemDetail component', () => { `( 'when work item has $context', ({ handlerMock, confidentialityMock, confidentialityFailureMock, inputVariables }) => { - it('renders confidential badge when work item is confidential', async () => { - createComponent({ - handler: jest.fn().mockResolvedValue(confidentialWorkItem), - confidentialityMock, - }); - - await waitForPromises(); - - const confidentialBadge = wrapper.findComponent(GlBadge); - expect(confidentialBadge.exists()).toBe(true); - expect(confidentialBadge.props()).toMatchObject({ - variant: 'warning', - icon: 'eye-slash', - }); - expect(confidentialBadge.attributes('title')).toBe( - 'Only project members with at least the Reporter role, the author, and assignees can view or be notified about this task.', - ); - expect(confidentialBadge.text()).toBe('Confidential'); - }); - - it('renders gl-loading-icon while update mutation is in progress', async () => { + it('sends updateInProgress props to child component', async () => { createComponent({ handler: handlerMock, confidentialityMock, @@ -348,10 +325,10 @@ describe('WorkItemDetail component', () => { await nextTick(); - expect(findLoadingIcon().exists()).toBe(true); + expect(findCreatedUpdated().props('updateInProgress')).toBe(true); }); - it('emits workItemUpdated and shows confidentiality badge when mutation is successful', async () => { + it('emits workItemUpdated when mutation is successful', async () => { createComponent({ handler: handlerMock, confidentialityMock, @@ -366,7 +343,6 @@ describe('WorkItemDetail component', () => { expect(confidentialityMock[1]).toHaveBeenCalledWith({ input: inputVariables, }); - expect(findLoadingIcon().exists()).toBe(false); }); it('shows an alert when mutation fails', async () => { @@ -384,7 +360,6 @@ describe('WorkItemDetail component', () => { expect(findAlert().exists()).toBe(true); expect(findAlert().text()).toBe(errorMessage); - expect(findLoadingIcon().exists()).toBe(false); }); }, ); |