diff options
Diffstat (limited to 'spec/frontend/packages_and_registries/package_registry/components/list')
3 files changed, 107 insertions, 49 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 5be05ddf629..a7de751aadd 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 @@ -8,7 +8,14 @@ exports[`packages_list_row renders 1`] = ` <div class="gl-display-flex gl-align-items-center gl-py-3" > - <!----> + <div + class="gl-w-7 gl-display-flex gl-justify-content-start gl-pl-2" + > + <gl-form-checkbox-stub + class="gl-m-0" + id="2" + /> + </div> <div class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-grow-1" 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 b5a512b8806..913b4f5926f 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 @@ -1,4 +1,4 @@ -import { GlSprintf } from '@gitlab/ui'; +import { GlFormCheckbox, GlSprintf } from '@gitlab/ui'; import Vue, { nextTick } from 'vue'; import VueRouter from 'vue-router'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -40,9 +40,11 @@ describe('packages_list_row', () => { const findPublishMethod = () => wrapper.findComponent(PublishMethod); const findCreatedDateText = () => wrapper.findByTestId('created-date'); const findTimeAgoTooltip = () => wrapper.findComponent(TimeagoTooltip); + const findBulkDeleteAction = () => wrapper.findComponent(GlFormCheckbox); const mountComponent = ({ packageEntity = packageWithoutTags, + selected = false, provide = defaultProvide, } = {}) => { wrapper = shallowMountExtended(PackagesListRow, { @@ -53,6 +55,7 @@ describe('packages_list_row', () => { }, propsData: { packageEntity, + selected, }, directives: { GlTooltip: createMockDirective(), @@ -117,14 +120,13 @@ describe('packages_list_row', () => { }); }); - it('emits the packageToDelete event when the delete button is clicked', async () => { + it('emits the delete event when the delete button is clicked', async () => { mountComponent({ packageEntity: packageWithoutTags }); findDeleteDropdown().vm.$emit('click'); await nextTick(); - expect(wrapper.emitted('packageToDelete')).toHaveLength(1); - expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]); + expect(wrapper.emitted('delete')).toHaveLength(1); }); }); @@ -151,6 +153,39 @@ describe('packages_list_row', () => { }); }); + describe('left action template', () => { + it('does not render checkbox if not permitted', () => { + mountComponent({ + packageEntity: { ...packageWithoutTags, canDestroy: false }, + }); + + expect(findBulkDeleteAction().exists()).toBe(false); + }); + + it('renders checkbox', () => { + mountComponent(); + + expect(findBulkDeleteAction().exists()).toBe(true); + expect(findBulkDeleteAction().attributes('checked')).toBeUndefined(); + }); + + it('emits select when checked', () => { + mountComponent(); + + findBulkDeleteAction().vm.$emit('change'); + + expect(wrapper.emitted('select')).toHaveLength(1); + }); + + it('renders checkbox in selected state if selected', () => { + mountComponent({ + selected: true, + }); + + expect(findBulkDeleteAction().attributes('checked')).toBe('true'); + }); + }); + describe('secondary left info', () => { it('has the package version', () => { mountComponent(); diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js index 3e3607a361c..7cc5bea0f7a 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/list/packages_list_spec.js @@ -1,8 +1,10 @@ -import { GlAlert, GlKeysetPagination, GlModal, GlSprintf } from '@gitlab/ui'; +import { GlAlert, GlSprintf } from '@gitlab/ui'; import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import PackagesListRow from '~/packages_and_registries/package_registry/components/list/package_list_row.vue'; import PackagesListLoader from '~/packages_and_registries/shared/components/packages_list_loader.vue'; +import DeletePackageModal from '~/packages_and_registries/shared/components/delete_package_modal.vue'; +import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; import { DELETE_PACKAGE_TRACKING_ACTION, REQUEST_DELETE_PACKAGE_TRACKING_ACTION, @@ -35,16 +37,11 @@ describe('packages_list', () => { }; const EmptySlotStub = { name: 'empty-slot-stub', template: '<div>bar</div>' }; - const GlModalStub = { - name: GlModal.name, - template: '<div><slot></slot></div>', - methods: { show: jest.fn() }, - }; const findPackagesListLoader = () => wrapper.findComponent(PackagesListLoader); - const findPackageListPagination = () => wrapper.findComponent(GlKeysetPagination); - const findPackageListDeleteModal = () => wrapper.findComponent(GlModalStub); + const findPackageListDeleteModal = () => wrapper.findComponent(DeletePackageModal); const findEmptySlot = () => wrapper.findComponent(EmptySlotStub); + const findRegistryList = () => wrapper.findComponent(RegistryList); const findPackagesListRow = () => wrapper.findComponent(PackagesListRow); const findErrorPackageAlert = () => wrapper.findComponent(GlAlert); @@ -55,8 +52,9 @@ describe('packages_list', () => { ...props, }, stubs: { - GlModal: GlModalStub, + DeletePackageModal, GlSprintf, + RegistryList, }, slots: { 'empty-state': EmptySlotStub, @@ -64,10 +62,6 @@ describe('packages_list', () => { }); }; - beforeEach(() => { - GlModalStub.methods.show.mockReset(); - }); - afterEach(() => { wrapper.destroy(); }); @@ -81,12 +75,12 @@ describe('packages_list', () => { expect(findPackagesListLoader().exists()).toBe(true); }); - it('does not show the rows', () => { - expect(findPackagesListRow().exists()).toBe(false); + it('does not show the registry list', () => { + expect(findRegistryList().exists()).toBe(false); }); - it('does not show the pagination', () => { - expect(findPackageListPagination().exists()).toBe(false); + it('does not show the rows', () => { + expect(findPackagesListRow().exists()).toBe(false); }); }); @@ -99,22 +93,29 @@ describe('packages_list', () => { expect(findPackagesListLoader().exists()).toBe(false); }); + it('shows the registry list', () => { + expect(findRegistryList().exists()).toBe(true); + }); + + it('shows the registry list with the right props', () => { + expect(findRegistryList().props()).toMatchObject({ + title: '2 packages', + items: defaultProps.list, + pagination: defaultProps.pageInfo, + isLoading: false, + }); + }); + it('shows the rows', () => { expect(findPackagesListRow().exists()).toBe(true); }); }); describe('layout', () => { - it('contains a pagination component', () => { - mountComponent({ pageInfo: { hasPreviousPage: true } }); - - expect(findPackageListPagination().exists()).toBe(true); - }); - - it('contains a modal component', () => { + it("doesn't contain a visible modal component", () => { mountComponent(); - expect(findPackageListDeleteModal().exists()).toBe(true); + expect(findPackageListDeleteModal().props('itemToBeDeleted')).toBeNull(); }); it('does not have an error alert displayed', () => { @@ -125,31 +126,46 @@ describe('packages_list', () => { }); describe('when the user can destroy the package', () => { - beforeEach(() => { + beforeEach(async () => { mountComponent(); - findPackagesListRow().vm.$emit('packageToDelete', firstPackage); - return nextTick(); + await findPackagesListRow().vm.$emit('delete', firstPackage); }); - it('deleting a package opens the modal', () => { - expect(findPackageListDeleteModal().text()).toContain(firstPackage.name); + it('passes itemToBeDeleted to the modal', () => { + expect(findPackageListDeleteModal().props('itemToBeDeleted')).toStrictEqual(firstPackage); }); - it('confirming on the modal emits package:delete', async () => { - findPackageListDeleteModal().vm.$emit('ok'); - - await nextTick(); + it('emits package:delete when modal confirms', async () => { + await findPackageListDeleteModal().vm.$emit('ok'); expect(wrapper.emitted('package:delete')[0]).toEqual([firstPackage]); }); - it('closing the modal resets itemToBeDeleted', async () => { - // triggering the v-model - findPackageListDeleteModal().vm.$emit('input', false); + it.each(['ok', 'cancel'])('resets itemToBeDeleted when modal emits %s', async (event) => { + await findPackageListDeleteModal().vm.$emit(event); - await nextTick(); + expect(findPackageListDeleteModal().props('itemToBeDeleted')).toBeNull(); + }); + }); + + describe('when the user can bulk destroy packages', () => { + beforeEach(() => { + mountComponent(); + }); + + it('passes itemToBeDeleted to the modal when there is only one package', async () => { + await findRegistryList().vm.$emit('delete', [firstPackage]); + + expect(findPackageListDeleteModal().props('itemToBeDeleted')).toStrictEqual(firstPackage); + expect(wrapper.emitted('delete')).toBeUndefined(); + }); + + it('emits delete when there is more than one package', () => { + const items = [firstPackage, secondPackage]; + findRegistryList().vm.$emit('delete', items); - expect(findPackageListDeleteModal().text()).not.toContain(firstPackage.name); + expect(wrapper.emitted('delete')).toHaveLength(1); + expect(wrapper.emitted('delete')[0]).toEqual([items]); }); }); @@ -196,15 +212,15 @@ describe('packages_list', () => { }); it('emits prev-page events when the prev event is fired', () => { - findPackageListPagination().vm.$emit('prev'); + findRegistryList().vm.$emit('prev-page'); - expect(wrapper.emitted('prev-page')).toEqual([[]]); + expect(wrapper.emitted('prev-page')).toHaveLength(1); }); it('emits next-page events when the next event is fired', () => { - findPackageListPagination().vm.$emit('next'); + findRegistryList().vm.$emit('next-page'); - expect(wrapper.emitted('next-page')).toEqual([[]]); + expect(wrapper.emitted('next-page')).toHaveLength(1); }); }); @@ -215,7 +231,7 @@ describe('packages_list', () => { beforeEach(() => { eventSpy = jest.spyOn(Tracking, 'event'); mountComponent(); - findPackagesListRow().vm.$emit('packageToDelete', firstPackage); + findPackagesListRow().vm.$emit('delete', firstPackage); return nextTick(); }); |