diff options
Diffstat (limited to 'spec/frontend/packages_and_registries')
34 files changed, 242 insertions, 238 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 5278e730ec9..f4c22d9bfa7 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,6 +1,7 @@ import { GlDropdownItem, GlIcon, GlDropdown } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; +import { nextTick } from 'vue'; import { useFakeDate } from 'helpers/fake_date'; import createMockApollo from 'helpers/mock_apollo_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; @@ -54,8 +55,8 @@ describe('Details Header', () => { const waitForMetadataItems = async () => { // Metadata items are printed by a loop in the title-area and it takes two ticks for them to be available - await wrapper.vm.$nextTick(); - await wrapper.vm.$nextTick(); + await nextTick(); + await nextTick(); }; const mountComponent = ({ diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js index 0dcf988c814..ef6c4a1fa32 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_list_spec.js @@ -1,5 +1,5 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import { GlEmptyState } from '@gitlab/ui'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -8,7 +8,7 @@ import { stripTypenames } from 'helpers/graphql_helpers'; import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue'; import TagsListRow from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue'; -import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue'; +import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue'; import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue'; import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue'; import getContainerRepositoryTagsQuery from '~/packages_and_registries/container_registry/explorer/graphql/queries/get_container_repository_tags.query.graphql'; @@ -22,8 +22,6 @@ import { import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; import { tagsMock, imageTagsMock, tagsPageInfo } from '../../mock_data'; -const localVue = createLocalVue(); - describe('Tags List', () => { let wrapper; let apolloProvider; @@ -50,13 +48,12 @@ describe('Tags List', () => { }; const mountComponent = ({ propsData = { isMobile: false, id: 1 } } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [[getContainerRepositoryTagsQuery, resolver]]; apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMount(component, { - localVue, apolloProvider, propsData, stubs: { RegistryList }, @@ -108,6 +105,7 @@ describe('Tags List', () => { describe('events', () => { it('prev-page fetch the previous page', async () => { findRegistryList().vm.$emit('prev-page'); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith({ first: null, @@ -119,8 +117,9 @@ describe('Tags List', () => { }); }); - it('next-page fetch the previous page', () => { + it('next-page fetch the previous page', async () => { findRegistryList().vm.$emit('next-page'); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith({ after: tagsPageInfo.endCursor, diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js index 060dc9dc5f3..e5df260a260 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/details_page/tags_loader_spec.js @@ -1,5 +1,5 @@ import { shallowMount } from '@vue/test-utils'; -import component from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue'; +import component from '~/packages_and_registries/shared/components/tags_loader.vue'; import { GlSkeletonLoader } from '../../stubs'; describe('TagsLoader component', () => { diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js index 4039fba869b..7727bf167fe 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/cli_commands_spec.js @@ -1,7 +1,8 @@ import { GlDropdown } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; -import QuickstartDropdown from '~/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue'; +import QuickstartDropdown from '~/packages_and_registries/shared/components/cli_commands.vue'; import { QUICK_START, LOGIN_COMMAND_LABEL, @@ -16,28 +17,18 @@ import CodeInstruction from '~/vue_shared/components/registry/code_instruction.v import { dockerCommands } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('cli_commands', () => { let wrapper; - const config = { - repositoryUrl: 'foo', - registryHostUrlWithPort: 'bar', - }; - const findDropdownButton = () => wrapper.find(GlDropdown); const findCodeInstruction = () => wrapper.findAll(CodeInstruction); const mountComponent = () => { wrapper = mount(QuickstartDropdown, { - localVue, - provide() { - return { - config, - ...dockerCommands, - }; + propsData: { + ...dockerCommands, }, }); }; diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js index 027cdf732bc..d2086943e4f 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state_spec.js @@ -1,11 +1,11 @@ import { GlSprintf } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import groupEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue'; import { GlEmptyState } from '../../stubs'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('Registry Group Empty state', () => { let wrapper; @@ -16,7 +16,6 @@ describe('Registry Group Empty state', () => { beforeEach(() => { wrapper = shallowMount(groupEmptyState, { - localVue, stubs: { GlEmptyState, GlSprintf, diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js index 21748ae2813..8cfa8128021 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state_spec.js @@ -1,12 +1,12 @@ import { GlSprintf } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import projectEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue'; import { dockerCommands } from '../../mock_data'; import { GlEmptyState } from '../../stubs'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('Registry Project Empty state', () => { let wrapper; @@ -21,7 +21,6 @@ describe('Registry Project Empty state', () => { beforeEach(() => { wrapper = shallowMount(projectEmptyState, { - localVue, stubs: { GlEmptyState, GlSprintf, 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 92cfeb7633e..c91a9c0f0fb 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 @@ -1,5 +1,6 @@ import { GlSprintf } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import Component from '~/packages_and_registries/container_registry/explorer/components/list_page/registry_header.vue'; import { CONTAINER_REGISTRY_TITLE, @@ -21,7 +22,7 @@ describe('registry_header', () => { const findImagesCountSubHeader = () => wrapper.find('[data-testid="images-count"]'); const findExpirationPolicySubHeader = () => wrapper.find('[data-testid="expiration-policy"]'); - const mountComponent = (propsData, slots) => { + const mountComponent = async (propsData, slots) => { wrapper = shallowMount(Component, { stubs: { GlSprintf, @@ -30,7 +31,7 @@ describe('registry_header', () => { propsData, slots, }); - return wrapper.vm.$nextTick(); + await nextTick(); }; afterEach(() => { diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js index 7992bead60a..c602b37c3b5 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/details_spec.js @@ -1,7 +1,8 @@ import { GlKeysetPagination, GlEmptyState } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; -import { nextTick } from 'vue'; + import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; @@ -11,7 +12,7 @@ import DetailsHeader from '~/packages_and_registries/container_registry/explorer import PartialCleanupAlert from '~/packages_and_registries/container_registry/explorer/components/details_page/partial_cleanup_alert.vue'; import StatusAlert from '~/packages_and_registries/container_registry/explorer/components/details_page/status_alert.vue'; import TagsList from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue'; -import TagsLoader from '~/packages_and_registries/container_registry/explorer/components/details_page/tags_loader.vue'; +import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue'; import { UNFINISHED_STATUS, @@ -39,8 +40,6 @@ import { } from '../mock_data'; import { DeleteModal } from '../stubs'; -const localVue = createLocalVue(); - describe('Details Page', () => { let wrapper; let apolloProvider; @@ -85,7 +84,7 @@ describe('Details Page', () => { options, config = defaultConfig, } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [ [getContainerRepositoryDetailsQuery, resolver], @@ -96,7 +95,6 @@ describe('Details Page', () => { apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMount(component, { - localVue, apolloProvider, stubs: { DeleteModal, @@ -522,7 +520,7 @@ describe('Details Page', () => { findDeleteImage().vm.$emit('start'); - await nextTick(); + await waitForPromises(); expect(findTagsLoader().exists()).toBe(true); diff --git a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js index 051d1e2a169..bd126fe532d 100644 --- a/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js +++ b/spec/frontend/packages_and_registries/container_registry/explorer/pages/list_spec.js @@ -1,6 +1,7 @@ import { GlSkeletonLoader, GlSprintf, GlAlert } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; + import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -8,7 +9,7 @@ import getContainerRepositoriesQuery from 'shared_queries/container_registry/get import CleanupPolicyEnabledAlert from '~/packages_and_registries/shared/components/cleanup_policy_enabled_alert.vue'; import { FILTERED_SEARCH_TERM } from '~/packages_and_registries/shared/constants'; import DeleteImage from '~/packages_and_registries/container_registry/explorer/components/delete_image.vue'; -import CliCommands from '~/packages_and_registries/container_registry/explorer/components/list_page/cli_commands.vue'; +import CliCommands from '~/packages_and_registries/shared/components/cli_commands.vue'; import GroupEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/group_empty_state.vue'; import ImageList from '~/packages_and_registries/container_registry/explorer/components/list_page/image_list.vue'; import ProjectEmptyState from '~/packages_and_registries/container_registry/explorer/components/list_page/project_empty_state.vue'; @@ -38,8 +39,6 @@ import { } from '../mock_data'; import { GlModal, GlEmptyState } from '../stubs'; -const localVue = createLocalVue(); - describe('List Page', () => { let wrapper; let apolloProvider; @@ -75,7 +74,7 @@ describe('List Page', () => { config = { isGroupPage: false }, query = {}, } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [ [getContainerRepositoriesQuery, resolver], @@ -86,7 +85,6 @@ describe('List Page', () => { apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMount(component, { - localVue, apolloProvider, stubs: { GlModal, @@ -307,15 +305,8 @@ describe('List Page', () => { await selectImageForDeletion(); findDeleteModal().vm.$emit('primary'); - await waitForApolloRequestRender(); - - expect(wrapper.vm.itemToDelete).toEqual(deletedContainerRepository); - - const updatedImage = findImageList() - .props('images') - .find((i) => i.id === deletedContainerRepository.id); - expect(updatedImage.status).toBe(deletedContainerRepository.status); + expect(mutationResolver).toHaveBeenCalledWith({ id: deletedContainerRepository.id }); }); it('should show a success alert when delete request is successful', async () => { @@ -361,7 +352,7 @@ describe('List Page', () => { findRegistrySearch().vm.$emit('filter:submit'); - await nextTick(); + await waitForPromises(); }; it('has a search box element', async () => { @@ -429,7 +420,7 @@ describe('List Page', () => { await waitForApolloRequestRender(); findImageList().vm.$emit('prev-page'); - await nextTick(); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith( expect.objectContaining({ before: pageInfo.startCursor }), @@ -449,7 +440,7 @@ describe('List Page', () => { await waitForApolloRequestRender(); findImageList().vm.$emit('next-page'); - await nextTick(); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith( expect.objectContaining({ after: pageInfo.endCursor }), @@ -471,8 +462,9 @@ describe('List Page', () => { }); it('contains a description with the path of the item to delete', async () => { + await waitForPromises(); findImageList().vm.$emit('delete', { path: 'foo' }); - await nextTick(); + await waitForPromises(); expect(findDeleteModal().html()).toContain('foo'); }); }); diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js index 44a7186904d..79894e25889 100644 --- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js +++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js @@ -5,7 +5,7 @@ import { GlSprintf, GlEmptyState, } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -21,8 +21,6 @@ import getDependencyProxyDetailsQuery from '~/packages_and_registries/dependency import { proxyDetailsQuery, proxyData, pagination, proxyManifests } from './mock_data'; -const localVue = createLocalVue(); - describe('DependencyProxyApp', () => { let wrapper; let apolloProvider; @@ -35,14 +33,13 @@ describe('DependencyProxyApp', () => { }; function createComponent({ provide = provideDefaults } = {}) { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [[getDependencyProxyDetailsQuery, resolver]]; apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMountExtended(DependencyProxyApp, { - localVue, apolloProvider, provide, stubs: { @@ -195,8 +192,9 @@ describe('DependencyProxyApp', () => { }); }); - it('prev-page event on list fetches the previous page', () => { + it('prev-page event on list fetches the previous page', async () => { findManifestList().vm.$emit('prev-page'); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith({ before: pagination().startCursor, @@ -206,8 +204,9 @@ describe('DependencyProxyApp', () => { }); }); - it('next-page event on list fetches the next page', () => { + it('next-page event on list fetches the next page', async () => { findManifestList().vm.$emit('next-page'); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith({ after: pagination().endCursor, diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js index 2868af84181..69c78e64e22 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/app_spec.js @@ -1,6 +1,6 @@ import { GlEmptyState } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; import stubChildren from 'helpers/stub_children'; @@ -19,8 +19,7 @@ import Tracking from '~/tracking'; import { mavenPackage, mavenFiles, npmPackage } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); useMockLocationHelper(); @@ -60,7 +59,6 @@ describe('PackagesApp', () => { }); wrapper = mount(PackagesApp, { - localVue, store, stubs: { ...stubChildren(PackagesApp), diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js index 24bd80ba80c..b504f7489ab 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/details_title_spec.js @@ -1,17 +1,20 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import component from '~/packages_and_registries/infrastructure_registry/details/components/details_title.vue'; import TitleArea from '~/vue_shared/components/registry/title_area.vue'; import { terraformModule, mavenFiles, npmPackage } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('PackageTitle', () => { let wrapper; let store; - function createComponent({ packageFiles = mavenFiles, packageEntity = terraformModule } = {}) { + async function createComponent({ + packageFiles = mavenFiles, + packageEntity = terraformModule, + } = {}) { store = new Vuex.Store({ state: { packageEntity, @@ -23,13 +26,12 @@ describe('PackageTitle', () => { }); wrapper = shallowMount(component, { - localVue, store, stubs: { TitleArea, }, }); - return wrapper.vm.$nextTick(); + await nextTick(); } const findTitleArea = () => wrapper.findComponent(TitleArea); diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js index 6ff4a4c51ef..78c1b840dbc 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/details/components/terraform_installation_spec.js @@ -1,11 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import TerraformInstallation from '~/packages_and_registries/infrastructure_registry/details/components/terraform_installation.vue'; import CodeInstructions from '~/vue_shared/components/registry/code_instruction.vue'; import { terraformModule as packageEntity } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('TerraformInstallation', () => { let wrapper; @@ -22,7 +22,6 @@ describe('TerraformInstallation', () => { function createComponent() { wrapper = shallowMount(TerraformInstallation, { - localVue, store, }); } diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap index 7cdf21dde46..d82af8f9e63 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/__snapshots__/packages_list_app_spec.js.snap @@ -3,6 +3,7 @@ exports[`packages_list_app renders 1`] = ` <div> <infrastructure-title-stub + count="1" helpurl="foo" /> @@ -37,8 +38,8 @@ exports[`packages_list_app renders 1`] = ` class="gl-font-size-h-display gl-line-height-36 h4" > - There are no packages yet - + There are no packages yet + </h1> <p diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js index b519ab00d06..e5230417c78 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_search_spec.js @@ -1,11 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import component from '~/packages_and_registries/infrastructure_registry/list/components/infrastructure_search.vue'; import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('Infrastructure Search', () => { let wrapper; @@ -48,7 +48,6 @@ describe('Infrastructure Search', () => { createStore(isGroupPage); wrapper = shallowMount(component, { - localVue, store, stubs: { UrlSync, diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js index b0e586f189a..72d08d5683b 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/infrastructure_title_spec.js @@ -10,7 +10,9 @@ describe('Infrastructure Title', () => { const findTitleArea = () => wrapper.find(TitleArea); const findMetadataItem = () => wrapper.find(MetadataItem); - const mountComponent = (propsData = { helpUrl: 'foo' }) => { + const exampleProps = { helpUrl: 'http://example.gitlab.com/help' }; + + const mountComponent = (propsData = exampleProps) => { wrapper = shallowMount(component, { store, propsData, @@ -26,23 +28,36 @@ describe('Infrastructure Title', () => { }); describe('title area', () => { - it('exists', () => { + beforeEach(() => { mountComponent(); + }); + it('exists', () => { expect(findTitleArea().exists()).toBe(true); }); - it('has the correct props', () => { - mountComponent(); + it('has the correct title', () => { + expect(findTitleArea().props('title')).toBe('Infrastructure Registry'); + }); + + describe('with no modules', () => { + it('has no info message', () => { + expect(findTitleArea().props('infoMessages')).toStrictEqual([]); + }); + }); + + describe('with at least one module', () => { + beforeEach(() => { + mountComponent({ ...exampleProps, count: 1 }); + }); - expect(findTitleArea().props()).toMatchObject({ - title: 'Infrastructure Registry', - infoMessages: [ + it('has an info message', () => { + expect(findTitleArea().props('infoMessages')).toStrictEqual([ { text: 'Publish and share your modules. %{docLinkStart}More information%{docLinkEnd}', - link: 'foo', + link: exampleProps.helpUrl, }, - ], + ]); }); }); }); @@ -51,15 +66,15 @@ describe('Infrastructure Title', () => { count | exist | text ${null} | ${false} | ${''} ${undefined} | ${false} | ${''} - ${0} | ${true} | ${'0 Modules'} + ${0} | ${false} | ${''} ${1} | ${true} | ${'1 Module'} ${2} | ${true} | ${'2 Modules'} `('when count is $count metadata item', ({ count, exist, text }) => { beforeEach(() => { - mountComponent({ count, helpUrl: 'foo' }); + mountComponent({ ...exampleProps, count }); }); - it(`is ${exist} that it exists`, () => { + it(exist ? 'exists' : 'does not exist', () => { expect(findMetadataItem().exists()).toBe(exist); }); diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js index cad75d2a858..31616e0b2f5 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_app_spec.js @@ -1,5 +1,6 @@ import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import setWindowLocation from 'helpers/set_window_location_helper'; import createFlash from '~/flash'; @@ -17,8 +18,7 @@ import InfrastructureSearch from '~/packages_and_registries/infrastructure_regis jest.mock('~/lib/utils/common_utils'); jest.mock('~/flash'); -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('packages_list_app', () => { let wrapper; @@ -35,7 +35,7 @@ describe('packages_list_app', () => { const findListComponent = () => wrapper.find(PackageList); const findInfrastructureSearch = () => wrapper.find(InfrastructureSearch); - const createStore = (filter = []) => { + const createStore = ({ filter = [], packageCount = 0 } = {}) => { store = new Vuex.Store({ state: { isLoading: false, @@ -46,6 +46,9 @@ describe('packages_list_app', () => { packageHelpUrl: 'foo', }, filter, + pagination: { + total: packageCount, + }, }, }); store.dispatch = jest.fn(); @@ -53,7 +56,6 @@ describe('packages_list_app', () => { const mountComponent = (provide) => { wrapper = shallowMount(PackageListApp, { - localVue, store, stubs: { GlEmptyState, @@ -69,6 +71,7 @@ describe('packages_list_app', () => { beforeEach(() => { createStore(); jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue({}); + mountComponent(); }); afterEach(() => { @@ -76,30 +79,26 @@ describe('packages_list_app', () => { }); it('renders', () => { + createStore({ packageCount: 1 }); mountComponent(); + expect(wrapper.element).toMatchSnapshot(); }); - it('call requestPackagesList on page:changed', () => { - mountComponent(); - store.dispatch.mockClear(); - + it('calls requestPackagesList on page:changed', () => { const list = findListComponent(); list.vm.$emit('page:changed', 1); expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList', { page: 1 }); }); - it('call requestDeletePackage on package:delete', () => { - mountComponent(); - + it('calls requestDeletePackage on package:delete', () => { const list = findListComponent(); list.vm.$emit('package:delete', 'foo'); + expect(store.dispatch).toHaveBeenCalledWith('requestDeletePackage', 'foo'); }); - it('does call requestPackagesList only one time on render', () => { - mountComponent(); - + it('calls requestPackagesList only once on render', () => { expect(store.dispatch).toHaveBeenCalledTimes(3); expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', expect.any(Object)); expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', expect.any(Array)); @@ -114,9 +113,12 @@ describe('packages_list_app', () => { orderBy: 'created', }; - it('calls setSorting with the query string based sorting', () => { + beforeEach(() => { + createStore(); jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock); + }); + it('calls setSorting with the query string based sorting', () => { mountComponent(); expect(store.dispatch).toHaveBeenNthCalledWith(1, 'setSorting', { @@ -126,8 +128,6 @@ describe('packages_list_app', () => { }); it('calls setFilter with the query string based filters', () => { - jest.spyOn(packageUtils, 'getQueryParams').mockReturnValue(defaultQueryParamsMock); - mountComponent(); expect(store.dispatch).toHaveBeenNthCalledWith(2, 'setFilter', [ @@ -151,8 +151,6 @@ describe('packages_list_app', () => { describe('empty state', () => { it('generate the correct empty list link', () => { - mountComponent(); - const link = findListComponent().find(GlLink); expect(link.attributes('href')).toBe(emptyListHelpUrl); @@ -160,8 +158,6 @@ describe('packages_list_app', () => { }); it('includes the right content on the default tab', () => { - mountComponent(); - const heading = findEmptyState().find('h1'); expect(heading.text()).toBe('There are no packages yet'); @@ -170,7 +166,7 @@ describe('packages_list_app', () => { describe('filter without results', () => { beforeEach(() => { - createStore([{ type: 'something' }]); + createStore({ filter: [{ type: 'something' }] }); mountComponent(); }); @@ -182,20 +178,30 @@ describe('packages_list_app', () => { }); }); - describe('Search', () => { - it('exists', () => { - mountComponent(); - - expect(findInfrastructureSearch().exists()).toBe(true); + describe('search', () => { + describe('with no packages', () => { + it('does not exist', () => { + expect(findInfrastructureSearch().exists()).toBe(false); + }); }); - it('on update fetches data from the store', () => { - mountComponent(); - store.dispatch.mockClear(); + describe('with packages', () => { + beforeEach(() => { + createStore({ packageCount: 1 }); + mountComponent(); + }); - findInfrastructureSearch().vm.$emit('update'); + it('exists', () => { + expect(findInfrastructureSearch().exists()).toBe(true); + }); - expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); + it('on update fetches data from the store', () => { + store.dispatch.mockClear(); + + findInfrastructureSearch().vm.$emit('update'); + + expect(store.dispatch).toHaveBeenCalledWith('requestPackagesList'); + }); }); }); diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js index 26569f20e94..fed82653016 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/list/components/packages_list_spec.js @@ -1,5 +1,6 @@ import { GlTable, GlPagination, GlModal } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import { last } from 'lodash'; import Vuex from 'vuex'; import stubChildren from 'helpers/stub_children'; @@ -11,8 +12,7 @@ import { TRACK_CATEGORY } from '~/packages_and_registries/infrastructure_registr import Tracking from '~/tracking'; import { packageList } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('packages_list', () => { let wrapper; @@ -61,7 +61,6 @@ describe('packages_list', () => { createStore(isGroupPage, packages, isLoading); wrapper = mount(PackagesList, { - localVue, store, stubs: { ...stubChildren(PackagesList), @@ -121,16 +120,15 @@ describe('packages_list', () => { mountComponent(); }); - it('setItemToBeDeleted sets itemToBeDeleted and open the modal', () => { + it('setItemToBeDeleted sets itemToBeDeleted and open the modal', async () => { const mockModalShow = jest.spyOn(wrapper.vm.$refs.packageListDeleteModal, 'show'); const item = last(wrapper.vm.list); findPackagesListRow().vm.$emit('packageToDelete', item); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.itemToBeDeleted).toEqual(item); - expect(mockModalShow).toHaveBeenCalled(); - }); + await nextTick(); + expect(wrapper.vm.itemToBeDeleted).toEqual(item); + expect(mockModalShow).toHaveBeenCalled(); }); it('deleteItemConfirmation resets itemToBeDeleted', () => { @@ -141,15 +139,14 @@ describe('packages_list', () => { expect(wrapper.vm.itemToBeDeleted).toEqual(null); }); - it('deleteItemConfirmation emit package:delete', () => { + it('deleteItemConfirmation emit package:delete', async () => { const itemToBeDeleted = { id: 2 }; // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ itemToBeDeleted }); wrapper.vm.deleteItemConfirmation(); - return wrapper.vm.$nextTick(() => { - expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]); - }); + await nextTick(); + expect(wrapper.emitted('package:delete')[0]).toEqual([itemToBeDeleted]); }); it('deleteItemCanceled resets itemToBeDeleted', () => { diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js index 1052fdd1dda..79c1b18c9f9 100644 --- a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js +++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/package_list_row_spec.js @@ -1,4 +1,5 @@ import { GlLink } from '@gitlab/ui'; +import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; @@ -126,7 +127,7 @@ describe('packages_list_row', () => { findDeleteButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.emitted('packageToDelete')).toBeTruthy(); expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap index 7aa42a1f1e5..bdd0fe3ad9e 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/components/details/__snapshots__/version_row_spec.js.snap @@ -72,12 +72,14 @@ exports[`VersionRow renders 1`] = ` <div class="gl-display-flex gl-align-items-center gl-min-h-6" > - Created - <time-ago-tooltip-stub - cssclass="" - time="2021-08-10T09:33:54Z" - tooltipplacement="top" - /> + <span> + Created + <time-ago-tooltip-stub + cssclass="" + time="2021-08-10T09:33:54Z" + tooltipplacement="top" + /> + </span> </div> </div> </div> diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js index 6ad6007c9da..5da9cfffaae 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js @@ -1,5 +1,6 @@ import { GlIcon, GlSprintf } from '@gitlab/ui'; import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; +import { nextTick } from 'vue'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import PackageTags from '~/packages_and_registries/shared/components/package_tags.vue'; @@ -24,7 +25,7 @@ const packageWithTags = { describe('PackageTitle', () => { let wrapper; - function createComponent(packageEntity = packageWithTags) { + async function createComponent(packageEntity = packageWithTags) { wrapper = shallowMountExtended(PackageTitle, { propsData: { packageEntity }, stubs: { @@ -35,7 +36,7 @@ describe('PackageTitle', () => { GlResizeObserver: createMockDirective(), }, }); - return wrapper.vm.$nextTick(); + await nextTick(); } const findTitleArea = () => wrapper.findComponent(TitleArea); @@ -71,7 +72,7 @@ describe('PackageTitle', () => { await createComponent(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findPackageBadges()).toHaveLength(packageTags().length); }); @@ -85,7 +86,7 @@ describe('PackageTitle', () => { const { value } = getBinding(wrapper.element, 'gl-resize-observer'); value(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findPackageBadges()).toHaveLength(packageTags().length); }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js index 5de30829fa5..14a70def7d0 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/functional/delete_package_spec.js @@ -1,4 +1,4 @@ -import { createLocalVue } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import waitForPromises from 'helpers/wait_for_promises'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; @@ -16,8 +16,6 @@ import { jest.mock('~/flash'); -const localVue = createLocalVue(); - describe('DeletePackage', () => { let wrapper; let apolloProvider; @@ -27,7 +25,7 @@ describe('DeletePackage', () => { const eventPayload = { id: '1' }; function createComponent(propsData = {}) { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [ [getPackagesQuery, resolver], @@ -37,7 +35,6 @@ describe('DeletePackage', () => { wrapper = shallowMountExtended(DeletePackage, { propsData, - localVue, apolloProvider, scopedSlots: { default(props) { 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 9467a613b2a..12a3eaa3873 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,5 +1,5 @@ import { GlSprintf } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueRouter from 'vue-router'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; @@ -17,8 +17,7 @@ import { PACKAGE_ERROR_STATUS } from '~/packages_and_registries/package_registry import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { packageData, packagePipelines, packageProject, packageTags } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(VueRouter); +Vue.use(VueRouter); describe('packages_list_row', () => { let wrapper; @@ -47,7 +46,6 @@ describe('packages_list_row', () => { provide = defaultProvide, } = {}) => { wrapper = shallowMountExtended(PackagesListRow, { - localVue, provide, stubs: { ListItem, @@ -121,7 +119,7 @@ describe('packages_list_row', () => { findDeleteButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.emitted('packageToDelete')).toBeTruthy(); expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]); }); diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js b/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js index bed7a07ff36..9e91b15bc6e 100644 --- a/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/components/list/packages_search_spec.js @@ -5,7 +5,10 @@ import component from '~/packages_and_registries/package_registry/components/lis import PackageTypeToken from '~/packages_and_registries/package_registry/components/list/tokens/package_type_token.vue'; import RegistrySearch from '~/vue_shared/components/registry/registry_search.vue'; import UrlSync from '~/vue_shared/components/url_sync.vue'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; +import { LIST_KEY_CREATED_AT } from '~/packages_and_registries/package_registry/constants'; + import { getQueryParams, extractFilterAndSorting } from '~/packages_and_registries/shared/utils'; jest.mock('~/packages_and_registries/shared/utils'); @@ -22,6 +25,7 @@ describe('Package Search', () => { const findRegistrySearch = () => wrapper.findComponent(RegistrySearch); const findUrlSync = () => wrapper.findComponent(UrlSync); + const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync); const mountComponent = (isGroupPage = false) => { wrapper = shallowMountExtended(component, { @@ -32,6 +36,7 @@ describe('Package Search', () => { }, stubs: { UrlSync, + LocalStorageSync, }, }); }; @@ -64,6 +69,19 @@ describe('Package Search', () => { expect(findUrlSync().exists()).toBe(true); }); + it('has a LocalStorageSync component', () => { + mountComponent(); + + expect(findLocalStorageSync().props()).toMatchObject({ + asJson: true, + storageKey: 'package_registry_list_sorting', + value: { + orderBy: LIST_KEY_CREATED_AT, + sort: 'desc', + }, + }); + }); + it.each` isGroupPage | page ${false} | ${'project'} @@ -92,7 +110,7 @@ describe('Package Search', () => { await nextTick(); - expect(findRegistrySearch().props('sorting')).toEqual({ sort: 'foo', orderBy: 'name' }); + expect(findRegistrySearch().props('sorting')).toEqual({ sort: 'foo', orderBy: 'created_at' }); // there is always a first call on mounted that emits up default values expect(wrapper.emitted('update')[1]).toEqual([ @@ -101,7 +119,7 @@ describe('Package Search', () => { packageName: '', packageType: undefined, }, - sort: 'NAME_FOO', + sort: 'CREATED_FOO', }, ]); }); @@ -133,7 +151,7 @@ describe('Package Search', () => { packageName: '', packageType: undefined, }, - sort: 'NAME_DESC', + sort: 'CREATED_DESC', }, ]); }); diff --git a/spec/frontend/packages_and_registries/package_registry/mock_data.js b/spec/frontend/packages_and_registries/package_registry/mock_data.js index c6a59f20998..0a4747fc9ec 100644 --- a/spec/frontend/packages_and_registries/package_registry/mock_data.js +++ b/spec/frontend/packages_and_registries/package_registry/mock_data.js @@ -119,6 +119,7 @@ export const packageVersions = () => [ ]; export const packageData = (extend) => ({ + __typename: 'Package', id: 'gid://gitlab/Packages::Package/111', canDestroy: true, name: '@gitlab-org/package-15', diff --git a/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap index ed96abe24b1..0154486e224 100644 --- a/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap +++ b/spec/frontend/packages_and_registries/package_registry/pages/__snapshots__/list_spec.js.snap @@ -38,8 +38,8 @@ exports[`PackagesListApp renders 1`] = ` class="gl-font-size-h-display gl-line-height-36 h4" > - There are no packages yet - + There are no packages yet + </h1> <p diff --git a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js index 637e2edf3be..a7e31d42c9e 100644 --- a/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/pages/details_spec.js @@ -1,6 +1,6 @@ import { GlEmptyState, GlBadge, GlTabs, GlTab } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import Vue, { nextTick } from 'vue'; + import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import { useMockLocationHelper } from 'helpers/mock_window_location_helper'; @@ -41,8 +41,6 @@ import { jest.mock('~/flash'); useMockLocationHelper(); -const localVue = createLocalVue(); - describe('PackagesApp', () => { let wrapper; let apolloProvider; @@ -59,12 +57,14 @@ describe('PackagesApp', () => { breadCrumbState, }; + const { __typename, ...packageWithoutTypename } = packageData(); + function createComponent({ resolver = jest.fn().mockResolvedValue(packageDetailsQuery()), fileDeleteMutationResolver = jest.fn().mockResolvedValue(packageDestroyFileMutation()), routeId = '1', } = {}) { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [ [getPackageDetails, resolver], @@ -73,7 +73,6 @@ describe('PackagesApp', () => { apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMountExtended(PackagesApp, { - localVue, apolloProvider, provide, stubs: { @@ -133,7 +132,7 @@ describe('PackagesApp', () => { expect(findPackageTitle().exists()).toBe(true); expect(findPackageTitle().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), + packageEntity: expect.objectContaining(packageWithoutTypename), }); }); @@ -156,7 +155,7 @@ describe('PackagesApp', () => { expect(findPackageHistory().exists()).toBe(true); expect(findPackageHistory().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), + packageEntity: expect.objectContaining(packageWithoutTypename), projectName: packageDetailsQuery().data.package.project.name, }); }); @@ -168,7 +167,7 @@ describe('PackagesApp', () => { expect(findAdditionalMetadata().exists()).toBe(true); expect(findAdditionalMetadata().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), + packageEntity: expect.objectContaining(packageWithoutTypename), }); }); @@ -179,7 +178,7 @@ describe('PackagesApp', () => { expect(findInstallationCommands().exists()).toBe(true); expect(findInstallationCommands().props()).toMatchObject({ - packageEntity: expect.objectContaining(packageData()), + packageEntity: expect.objectContaining(packageWithoutTypename), }); }); diff --git a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js index 2ac2a6455ef..0e74fbbc6d9 100644 --- a/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js +++ b/spec/frontend/packages_and_registries/package_registry/pages/list_spec.js @@ -1,8 +1,8 @@ import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; -import { nextTick } from 'vue'; + import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -27,8 +27,6 @@ import { packagesListQuery, packageData, pagination } from '../mock_data'; jest.mock('~/lib/utils/common_utils'); jest.mock('~/flash'); -const localVue = createLocalVue(); - describe('PackagesListApp', () => { let wrapper; let apolloProvider; @@ -61,13 +59,12 @@ describe('PackagesListApp', () => { resolver = jest.fn().mockResolvedValue(packagesListQuery()), provide = defaultProvide, } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [[getPackagesQuery, resolver]]; apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMountExtended(ListPage, { - localVue, apolloProvider, provide, stubs: { @@ -85,7 +82,7 @@ describe('PackagesListApp', () => { wrapper.destroy(); }); - const waitForFirstRequest = () => { + const waitForFirstRequest = async () => { // emit a search update so the query is executed findSearch().vm.$emit('update', { sort: 'NAME_DESC', filters: [] }); return waitForPromises(); @@ -149,11 +146,10 @@ describe('PackagesListApp', () => { beforeEach(() => { resolver = jest.fn().mockResolvedValue(packagesListQuery()); mountComponent({ resolver }); - - return waitForFirstRequest(); }); - it('exists and has the right props', () => { + it('exists and has the right props', async () => { + await waitForFirstRequest(); expect(findListComponent().props()).toMatchObject({ list: expect.arrayContaining([expect.objectContaining({ id: packageData().id })]), isLoading: false, @@ -161,16 +157,20 @@ describe('PackagesListApp', () => { }); }); - it('when list emits next-page fetches the next set of records', () => { + it('when list emits next-page fetches the next set of records', async () => { + await waitForFirstRequest(); findListComponent().vm.$emit('next-page'); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith( expect.objectContaining({ after: pagination().endCursor, first: GRAPHQL_PAGE_SIZE }), ); }); - it('when list emits prev-page fetches the prev set of records', () => { + it('when list emits prev-page fetches the prev set of records', async () => { + await waitForFirstRequest(); findListComponent().vm.$emit('prev-page'); + await waitForPromises(); expect(resolver).toHaveBeenCalledWith( expect.objectContaining({ before: pagination().startCursor, last: GRAPHQL_PAGE_SIZE }), diff --git a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js index f6c1d212b51..94f56e5c979 100644 --- a/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/components/dependency_proxy_settings_spec.js @@ -1,5 +1,5 @@ import { GlSprintf, GlToggle } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -33,8 +33,6 @@ import { jest.mock('~/flash'); jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'); -const localVue = createLocalVue(); - describe('DependencyProxySettings', () => { let wrapper; let apolloProvider; @@ -47,7 +45,7 @@ describe('DependencyProxySettings', () => { groupDependencyProxyPath: 'group_dependency_proxy_path', }; - localVue.use(VueApollo); + Vue.use(VueApollo); const mountComponent = ({ provide = defaultProvide, @@ -63,7 +61,6 @@ describe('DependencyProxySettings', () => { apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMountExtended(component, { - localVue, apolloProvider, provide, propsData: { diff --git a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js index 933dac7f5a8..5c30074a6af 100644 --- a/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/components/group_settings_app_spec.js @@ -1,7 +1,8 @@ import { GlAlert } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; -import { nextTick } from 'vue'; + import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import PackagesSettings from '~/packages_and_registries/settings/group/components/packages_settings.vue'; @@ -19,8 +20,6 @@ import { jest.mock('~/flash'); -const localVue = createLocalVue(); - describe('Group Settings App', () => { let wrapper; let apolloProvider; @@ -36,14 +35,13 @@ describe('Group Settings App', () => { resolver = jest.fn().mockResolvedValue(groupPackageSettingsMock), provide = defaultProvide, } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [[getGroupPackagesSettingsQuery, resolver]]; apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMount(component, { - localVue, apolloProvider, provide, mocks: { diff --git a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js index 693af21e24a..d92d42e7834 100644 --- a/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js +++ b/spec/frontend/packages_and_registries/settings/group/components/package_settings_spec.js @@ -1,5 +1,5 @@ import { GlSprintf, GlLink } from '@gitlab/ui'; -import { createLocalVue } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -28,8 +28,6 @@ import { jest.mock('~/flash'); jest.mock('~/packages_and_registries/settings/group/graphql/utils/optimistic_responses'); -const localVue = createLocalVue(); - describe('Packages Settings', () => { let wrapper; let apolloProvider; @@ -42,14 +40,13 @@ describe('Packages Settings', () => { const mountComponent = ({ mutationResolver = jest.fn().mockResolvedValue(groupPackageSettingsMutationMock()), } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [[updateNamespacePackageSettings, mutationResolver]]; apolloProvider = createMockApollo(requestHandlers); wrapper = shallowMountExtended(component, { - localVue, apolloProvider, provide: defaultProvide, propsData: { @@ -252,7 +249,7 @@ describe('Packages Settings', () => { emitMavenSettingsUpdate(); - await wrapper.vm.$nextTick(); + await nextTick(); // errors are reset on mutation call expect(findMavenDuplicatedSettings().props('duplicateExceptionRegexError')).toBe(''); diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js index 8266f9bee89..a6c929844b1 100644 --- a/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js +++ b/spec/frontend/packages_and_registries/settings/project/settings/components/registry_settings_app_spec.js @@ -1,7 +1,9 @@ import { GlAlert, GlSprintf, GlLink } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +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 component from '~/packages_and_registries/settings/project/components/registry_settings_app.vue'; import SettingsForm from '~/packages_and_registries/settings/project/components/settings_form.vue'; import { @@ -19,8 +21,6 @@ import { containerExpirationPolicyData, } from '../mock_data'; -const localVue = createLocalVue(); - describe('Registry Settings App', () => { let wrapper; let fakeApollo; @@ -55,17 +55,14 @@ describe('Registry Settings App', () => { }; const mountComponentWithApollo = ({ provide = defaultProvidedValues, resolver } = {}) => { - localVue.use(VueApollo); + Vue.use(VueApollo); const requestHandlers = [[expirationPolicyQuery, resolver]]; fakeApollo = createMockApollo(requestHandlers); mountComponent(provide, { - localVue, apolloProvider: fakeApollo, }); - - return requestHandlers.map((request) => request[1]); }; afterEach(() => { @@ -101,25 +98,25 @@ describe('Registry Settings App', () => { ${'response and changes'} | ${expirationPolicyPayload()} | ${{ ...containerExpirationPolicyData(), nameRegex: '12345' }} | ${true} ${'response and empty'} | ${expirationPolicyPayload()} | ${{}} | ${true} `('$description', async ({ apiResponse, workingCopy, result }) => { - const requests = mountComponentWithApollo({ + mountComponentWithApollo({ provide: { ...defaultProvidedValues, enableHistoricEntries: true }, resolver: jest.fn().mockResolvedValue(apiResponse), }); - await Promise.all(requests); + await waitForPromises(); findSettingsComponent().vm.$emit('input', workingCopy); - await wrapper.vm.$nextTick(); + await waitForPromises(); expect(findSettingsComponent().props('isEdited')).toBe(result); }); }); it('renders the setting form', async () => { - const requests = mountComponentWithApollo({ + mountComponentWithApollo({ resolver: jest.fn().mockResolvedValue(expirationPolicyPayload()), }); - await Promise.all(requests); + await waitForPromises(); expect(findSettingsComponent().exists()).toBe(true); }); @@ -153,11 +150,11 @@ describe('Registry Settings App', () => { }); describe('fetchSettingsError', () => { - beforeEach(() => { - const requests = mountComponentWithApollo({ + beforeEach(async () => { + mountComponentWithApollo({ resolver: jest.fn().mockRejectedValue(new Error('GraphQL error')), }); - return Promise.all(requests); + await waitForPromises(); }); it('the form is hidden', () => { @@ -175,14 +172,14 @@ describe('Registry Settings App', () => { ${true} | ${true} ${false} | ${false} `('is $isShown that the form is shown', async ({ enableHistoricEntries, isShown }) => { - const requests = mountComponentWithApollo({ + mountComponentWithApollo({ provide: { ...defaultProvidedValues, enableHistoricEntries, }, resolver: jest.fn().mockResolvedValue(emptyExpirationPolicyPayload()), }); - await Promise.all(requests); + await waitForPromises(); expect(findSettingsComponent().exists()).toBe(isShown); }); diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js index bc104a25ef9..625aa37fc0f 100644 --- a/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js +++ b/spec/frontend/packages_and_registries/settings/project/settings/components/settings_form_spec.js @@ -1,5 +1,6 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; +import { nextTick } from 'vue'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; import { GlCard, GlLoadingIcon } from 'jest/packages_and_registries/shared/stubs'; @@ -201,7 +202,7 @@ describe('Settings Form', () => { finder().vm.$emit('input', 'foo'); expect(finder().props('error')).toEqual('bar'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(finder().props('error')).toEqual(''); }); @@ -213,7 +214,7 @@ describe('Settings Form', () => { finder().vm.$emit('validation', false); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findSaveButton().props('disabled')).toBe(true); }); @@ -252,7 +253,7 @@ describe('Settings Form', () => { findForm().trigger('reset'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findKeepRegexInput().props('error')).toBe(''); expect(findRemoveRegexInput().props('error')).toBe(''); @@ -319,7 +320,7 @@ describe('Settings Form', () => { findForm().trigger('submit'); await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_SUCCESS_MESSAGE); }); @@ -335,7 +336,7 @@ describe('Settings Form', () => { findForm().trigger('submit'); await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('foo'); }); @@ -349,7 +350,7 @@ describe('Settings Form', () => { findForm().trigger('submit'); await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE); }); @@ -368,7 +369,7 @@ describe('Settings Form', () => { findForm().trigger('submit'); await waitForPromises(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findKeepRegexInput().props('error')).toEqual('baz'); }); diff --git a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js index a56bb75f8ed..33406c98f4b 100644 --- a/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js +++ b/spec/frontend/packages_and_registries/settings/project/settings/mock_data.js @@ -13,6 +13,7 @@ export const expirationPolicyPayload = (override) => ({ project: { id: '1', containerExpirationPolicy: { + __typename: 'ContainerExpirationPolicy', ...containerExpirationPolicyData(), ...override, }, |