diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-18 12:45:46 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-18 12:45:46 +0300 |
commit | a7b3560714b4d9cc4ab32dffcd1f74a284b93580 (patch) | |
tree | 7452bd5c3545c2fa67a28aa013835fb4fa071baf /spec/frontend/projects | |
parent | ee9173579ae56a3dbfe5afe9f9410c65bb327ca7 (diff) |
Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42
Diffstat (limited to 'spec/frontend/projects')
20 files changed, 286 insertions, 100 deletions
diff --git a/spec/frontend/projects/commit/components/branches_dropdown_spec.js b/spec/frontend/projects/commit/components/branches_dropdown_spec.js index 30556cdeae1..e2848e615c3 100644 --- a/spec/frontend/projects/commit/components/branches_dropdown_spec.js +++ b/spec/frontend/projects/commit/components/branches_dropdown_spec.js @@ -1,6 +1,6 @@ import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; @@ -115,7 +115,7 @@ describe('BranchesDropdown', () => { findSearchBoxByType().vm.$emit('input', '_anything_'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(spy).toHaveBeenCalledWith('_anything_'); expect(wrapper.vm.searchTerm).toBe('_anything_'); diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js index 93e2ae13628..79e9dab935d 100644 --- a/spec/frontend/projects/commit/components/form_modal_spec.js +++ b/spec/frontend/projects/commit/components/form_modal_spec.js @@ -2,6 +2,7 @@ import { GlModal, GlForm, GlFormCheckbox, GlSprintf } from '@gitlab/ui'; import { within } from '@testing-library/dom'; import { shallowMount, mount, createWrapper } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; +import { nextTick } from 'vue'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import api from '~/api'; import axios from '~/lib/utils/axios_utils'; @@ -156,7 +157,7 @@ describe('CommitFormModal', () => { it('Changes the start_branch input value', async () => { findBranchesDropdown().vm.$emit('selectBranch', '_changed_branch_value_'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findStartBranch().attributes('value')).toBe('_changed_branch_value_'); }); @@ -165,7 +166,7 @@ describe('CommitFormModal', () => { createComponent(shallowMount, {}, {}, { isCherryPick: true }); findProjectsDropdown().vm.$emit('selectProject', '_changed_project_value_'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findTargetProject().attributes('value')).toBe('_changed_project_value_'); }); @@ -174,7 +175,7 @@ describe('CommitFormModal', () => { it('action primary button triggers Redis HLL tracking api call', async () => { createComponent(mount, {}, {}, { primaryActionEventName: 'test_event' }); - await wrapper.vm.$nextTick(); + await nextTick(); jest.spyOn(findForm().element, 'submit'); diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js index 23b4cccd92c..4e567ab030e 100644 --- a/spec/frontend/projects/commits/components/author_select_spec.js +++ b/spec/frontend/projects/commits/components/author_select_spec.js @@ -1,12 +1,12 @@ import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import * as urlUtility from '~/lib/utils/url_utility'; import AuthorSelect from '~/projects/commits/components/author_select.vue'; import { createStore } from '~/projects/commits/store'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); const commitsPath = 'author/search/url'; const currentAuthor = 'lorem'; @@ -38,7 +38,6 @@ describe('Author Select', () => { `); wrapper = shallowMount(AuthorSelect, { - localVue, store: new Vuex.Store(store), propsData: { projectCommitsEl: document.querySelector('.js-project-commits-show'), @@ -64,36 +63,33 @@ describe('Author Select', () => { const findDropdownItems = () => wrapper.findAll(GlDropdownItem); describe('user is searching via "filter by commit message"', () => { - it('disables dropdown container', () => { + it('disables dropdown container', async () => { // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ hasSearchParam: true }); - return wrapper.vm.$nextTick().then(() => { - expect(findDropdownContainer().attributes('disabled')).toBeFalsy(); - }); + await nextTick(); + expect(findDropdownContainer().attributes('disabled')).toBeFalsy(); }); - it('has correct tooltip message', () => { + it('has correct tooltip message', async () => { // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ hasSearchParam: true }); - return wrapper.vm.$nextTick().then(() => { - expect(findDropdownContainer().attributes('title')).toBe( - 'Searching by both author and message is currently not supported.', - ); - }); + await nextTick(); + expect(findDropdownContainer().attributes('title')).toBe( + 'Searching by both author and message is currently not supported.', + ); }); - it('disables dropdown', () => { + it('disables dropdown', async () => { // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ hasSearchParam: false }); - return wrapper.vm.$nextTick().then(() => { - expect(findDropdown().attributes('disabled')).toBeFalsy(); - }); + await nextTick(); + expect(findDropdown().attributes('disabled')).toBeFalsy(); }); it('hasSearchParam if user types a truthy string', () => { @@ -108,14 +104,13 @@ describe('Author Select', () => { expect(findDropdown().attributes('text')).toBe('Author'); }); - it('displays the current selected author', () => { + it('displays the current selected author', async () => { // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details // eslint-disable-next-line no-restricted-syntax wrapper.setData({ currentAuthor }); - return wrapper.vm.$nextTick().then(() => { - expect(findDropdown().attributes('text')).toBe(currentAuthor); - }); + await nextTick(); + expect(findDropdown().attributes('text')).toBe(currentAuthor); }); it('displays correct header text', () => { @@ -150,13 +145,12 @@ describe('Author Select', () => { expect(findDropdownItems().at(0).text()).toBe('Any Author'); }); - it('displays the project authors', () => { - return wrapper.vm.$nextTick().then(() => { - expect(findDropdownItems()).toHaveLength(authors.length + 1); - }); + it('displays the project authors', async () => { + await nextTick(); + expect(findDropdownItems()).toHaveLength(authors.length + 1); }); - it('has the correct props', () => { + it('has the correct props', async () => { const [{ avatar_url, username }] = authors; const result = { avatarUrl: avatar_url, @@ -168,15 +162,13 @@ describe('Author Select', () => { // eslint-disable-next-line no-restricted-syntax wrapper.setData({ currentAuthor }); - return wrapper.vm.$nextTick().then(() => { - expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result)); - }); + await nextTick(); + expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result)); }); - it("display the author's name", () => { - return wrapper.vm.$nextTick().then(() => { - expect(findDropdownItems().at(1).text()).toBe(currentAuthor); - }); + it("display the author's name", async () => { + await nextTick(); + expect(findDropdownItems().at(1).text()).toBe(currentAuthor); }); it('passes selected author to redirectPath', () => { diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js index 7989a6f3d74..18e7f2e0f6e 100644 --- a/spec/frontend/projects/compare/components/app_spec.js +++ b/spec/frontend/projects/compare/components/app_spec.js @@ -1,5 +1,6 @@ import { GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import CompareApp from '~/projects/compare/components/app.vue'; import RevisionCard from '~/projects/compare/components/revision_card.vue'; import { appDefaultProps as defaultProps } from './mock_data'; @@ -91,7 +92,7 @@ describe('CompareApp component', () => { project, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findTargetRevisionCard().props('selectedProject')).toEqual( expect.objectContaining(project), @@ -106,7 +107,7 @@ describe('CompareApp component', () => { revision, }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findSourceRevisionCard().props('paramsBranch')).toBe(revision); }); @@ -125,7 +126,7 @@ describe('CompareApp component', () => { it('swaps revisions when clicked', async () => { findSwapRevisionsButton().vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findTargetRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsTo); expect(findSourceRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsFrom); diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js index 27a7a32ebca..98aec347e4b 100644 --- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js +++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js @@ -1,5 +1,6 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue'; import { revisionCardDefaultProps as defaultProps } from './mock_data'; @@ -39,7 +40,7 @@ describe('RepoDropdown component', () => { it('does not emit `changeTargetProject` event', async () => { wrapper.vm.emitTargetProject('foo'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.emitted('changeTargetProject')).toBeUndefined(); }); }); @@ -67,13 +68,13 @@ describe('RepoDropdown component', () => { it('updates the hidden input value when onClick method is triggered', async () => { const repoId = '1'; wrapper.vm.onClick({ id: repoId }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findHiddenInput().attributes('value')).toBe(repoId); }); it('emits `selectProject` event when another target project is selected', async () => { findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.emitted('selectProject')[0][0]).toEqual({ direction: 'from', diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js index eb80d57fb3c..102f95f65da 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js @@ -1,6 +1,7 @@ import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; +import { nextTick } from 'vue'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue'; @@ -105,7 +106,7 @@ describe('RevisionDropdown component', () => { // eslint-disable-next-line no-restricted-syntax wrapper.setData({ branches: ['some-branch'] }); - await wrapper.vm.$nextTick(); + await nextTick(); findFirstGlDropdownItem().vm.$emit('click'); diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js index 118bb68585e..c8a90848492 100644 --- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js +++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js @@ -1,6 +1,7 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; +import { nextTick } from 'vue'; import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue'; @@ -141,7 +142,7 @@ describe('RevisionDropdown component', () => { it('emits `selectRevision` event when another revision is selected', async () => { createComponent(); wrapper.vm.branches = ['some-branch']; - await wrapper.vm.$nextTick(); + await nextTick(); findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click'); diff --git a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap index e1e1aac09aa..b8f9951bbfc 100644 --- a/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap +++ b/spec/frontend/projects/components/__snapshots__/project_delete_button_spec.js.snap @@ -49,16 +49,17 @@ exports[`Project remove modal initialized matches the snapshot 1`] = ` primarybuttontext="" secondarybuttonlink="" secondarybuttontext="" - title="You are about to permanently delete this project" + title="" variant="danger" > - <p> - This project is - <strong> - NOT - </strong> - a fork, and has the following: - </p> + <h4 + class="gl-alert-title" + data-testid="delete-alert-title" + > + + You are about to delete this project containing: + + </h4> <ul> <li> @@ -77,25 +78,17 @@ exports[`Project remove modal initialized matches the snapshot 1`] = ` 4 stars </li> </ul> - After a project is permanently deleted, it - <strong> - cannot be recovered - </strong> - . Permanently deleting this project will - <strong> - immediately delete - </strong> - its repositories and + This project is <strong> - all related resources + NOT </strong> - , including issues, merge requests etc. + a fork. This process deletes the project repository and all related resources. </gl-alert-stub> <p class="gl-mb-1" > - Please type the following to confirm: + Enter the following to confirm: </p> <p> diff --git a/spec/frontend/projects/components/project_delete_button_spec.js b/spec/frontend/projects/components/project_delete_button_spec.js index bb6021fadda..a3bc4931eb3 100644 --- a/spec/frontend/projects/components/project_delete_button_spec.js +++ b/spec/frontend/projects/components/project_delete_button_spec.js @@ -50,7 +50,12 @@ describe('Project remove modal', () => { it('passes confirmPhrase and formPath props to the shared delete button', () => { expect(findSharedDeleteButton().props()).toEqual({ confirmPhrase: defaultProps.confirmPhrase, + forksCount: defaultProps.forksCount, formPath: defaultProps.formPath, + isFork: defaultProps.isFork, + issuesCount: defaultProps.issuesCount, + mergeRequestsCount: defaultProps.mergeRequestsCount, + starsCount: defaultProps.starsCount, }); }); }); diff --git a/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap b/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap index dd54db7dc0a..2d1039a8743 100644 --- a/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap +++ b/spec/frontend/projects/components/shared/__snapshots__/delete_button_spec.js.snap @@ -34,13 +34,63 @@ exports[`Project remove modal intialized matches the snapshot 1`] = ` ok-variant="danger" title-class="gl-text-red-500" > - Delete project. Are you ABSOLUTELY SURE? + Are you absolutely sure? <div> + <gl-alert-stub + class="gl-mb-5" + dismisslabel="Dismiss" + primarybuttonlink="" + primarybuttontext="" + secondarybuttonlink="" + secondarybuttontext="" + title="" + variant="danger" + > + <h4 + class="gl-alert-title" + data-testid="delete-alert-title" + > + + You are about to delete this project containing: + + </h4> + + <ul> + <li> + <gl-sprintf-stub + message="1 issue" + /> + </li> + + <li> + <gl-sprintf-stub + message="2 merge requests" + /> + </li> + + <li> + <gl-sprintf-stub + message="3 forks" + /> + </li> + + <li> + <gl-sprintf-stub + message="4 stars" + /> + </li> + </ul> + + <gl-sprintf-stub + data-testid="delete-alert-body" + message="This project is %{strongStart}NOT%{strongEnd} a fork. This process deletes the project repository and all related resources." + /> + </gl-alert-stub> <p class="gl-mb-1" > - Please type the following to confirm: + Enter the following to confirm: </p> <p> diff --git a/spec/frontend/projects/components/shared/delete_button_spec.js b/spec/frontend/projects/components/shared/delete_button_spec.js index 3e491584670..45c39ee91d8 100644 --- a/spec/frontend/projects/components/shared/delete_button_spec.js +++ b/spec/frontend/projects/components/shared/delete_button_spec.js @@ -12,15 +12,25 @@ describe('Project remove modal', () => { const findConfirmButton = () => wrapper.find('.js-modal-action-primary'); const findAuthenticityTokenInput = () => findFormElement().find('input[name=authenticity_token]'); const findModal = () => wrapper.find(GlModal); + const findTitle = () => wrapper.find('[data-testid="delete-alert-title"]'); + const findAlertBody = () => wrapper.find('[data-testid="delete-alert-body"]'); const defaultProps = { confirmPhrase: 'foo', formPath: 'some/path', + isFork: false, + issuesCount: 1, + mergeRequestsCount: 2, + forksCount: 3, + starsCount: 4, }; - const createComponent = (data = {}, stubs = {}) => { + const createComponent = (data = {}, stubs = {}, props = {}) => { wrapper = shallowMount(SharedDeleteButton, { - propsData: defaultProps, + propsData: { + ...defaultProps, + ...props, + }, data: () => data, stubs: { GlModal: stubComponent(GlModal, { @@ -88,4 +98,20 @@ describe('Project remove modal', () => { expect(findFormElement().element.submit).toHaveBeenCalled(); }); }); + + describe('when project is a fork', () => { + beforeEach(() => { + createComponent({}, {}, { isFork: true }); + }); + + it('matches the fork title', () => { + expect(findTitle().text()).toEqual('You are about to delete this forked project containing:'); + }); + + it('matches the fork body', () => { + expect(findAlertBody().attributes().message).toEqual( + 'This process deletes the project repository and all related resources.', + ); + }); + }); }); diff --git a/spec/frontend/projects/new/components/deployment_target_select_spec.js b/spec/frontend/projects/new/components/deployment_target_select_spec.js new file mode 100644 index 00000000000..8fe4c5f1230 --- /dev/null +++ b/spec/frontend/projects/new/components/deployment_target_select_spec.js @@ -0,0 +1,82 @@ +import { GlFormGroup, GlFormSelect } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import { mockTracking } from 'helpers/tracking_helper'; +import DeploymentTargetSelect from '~/projects/new/components/deployment_target_select.vue'; +import { + DEPLOYMENT_TARGET_SELECTIONS, + DEPLOYMENT_TARGET_LABEL, + DEPLOYMENT_TARGET_EVENT, + NEW_PROJECT_FORM, +} from '~/projects/new/constants'; + +describe('Deployment target select', () => { + let wrapper; + let trackingSpy; + + const findFormGroup = () => wrapper.findComponent(GlFormGroup); + const findSelect = () => wrapper.findComponent(GlFormSelect); + + const createdWrapper = () => { + wrapper = shallowMount(DeploymentTargetSelect, { + stubs: { + GlFormSelect, + }, + }); + }; + + const createForm = () => { + setFixtures(` + <form id="${NEW_PROJECT_FORM}"> + </form> + `); + }; + + beforeEach(() => { + createForm(); + createdWrapper(); + + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders the correct label', () => { + expect(findFormGroup().attributes('label')).toBe('Project deployment target (optional)'); + }); + + it('renders a select with the disabled default option', () => { + expect(findSelect().find('option').text()).toBe('Select the deployment target'); + expect(findSelect().find('option').attributes('disabled')).toBe('disabled'); + }); + + describe.each` + selectedTarget | formSubmitted | eventSent + ${null} | ${true} | ${false} + ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${false} | ${false} + ${DEPLOYMENT_TARGET_SELECTIONS[0]} | ${true} | ${true} + `('Snowplow tracking event', ({ selectedTarget, formSubmitted, eventSent }) => { + beforeEach(() => { + findSelect().vm.$emit('input', selectedTarget); + + if (formSubmitted) { + const form = document.getElementById(NEW_PROJECT_FORM); + form.dispatchEvent(new Event('submit')); + } + }); + + if (eventSent) { + it(`is sent, when the the selectedTarget is ${selectedTarget} and the formSubmitted is ${formSubmitted} `, () => { + expect(trackingSpy).toHaveBeenCalledWith(undefined, DEPLOYMENT_TARGET_EVENT, { + label: DEPLOYMENT_TARGET_LABEL, + property: selectedTarget, + }); + }); + } else { + it(`is not sent, when the the selectedTarget is ${selectedTarget} and the formSubmitted is ${formSubmitted} `, () => { + expect(trackingSpy).toHaveBeenCalledTimes(0); + }); + } + }); +}); diff --git a/spec/frontend/projects/new/components/new_project_url_select_spec.js b/spec/frontend/projects/new/components/new_project_url_select_spec.js index 258fa7636d4..921f5b74278 100644 --- a/spec/frontend/projects/new/components/new_project_url_select_spec.js +++ b/spec/frontend/projects/new/components/new_project_url_select_spec.js @@ -6,9 +6,10 @@ import { GlSearchBoxByType, } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import { mockTracking, unmockTracking } from 'helpers/tracking_helper'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import eventHub from '~/projects/new/event_hub'; @@ -94,13 +95,14 @@ describe('NewProjectUrlSelect component', () => { const clickDropdownItem = async () => { wrapper.findComponent(GlDropdownItem).vm.$emit('click'); - await wrapper.vm.$nextTick(); + await nextTick(); }; const showDropdown = async () => { findDropdown().vm.$emit('shown'); await wrapper.vm.$apollo.queries.currentUser.refetch(); jest.runOnlyPendingTimers(); + await waitForPromises(); }; afterEach(() => { @@ -235,8 +237,7 @@ describe('NewProjectUrlSelect component', () => { }; wrapper = mountComponent({ search: 'no matches', queryResponse, mountFn: mount }); - jest.runOnlyPendingTimers(); - await wrapper.vm.$nextTick(); + await waitForPromises(); expect(wrapper.find('li').text()).toBe('No matches found'); }); diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js index 574756322c7..9c94925c817 100644 --- a/spec/frontend/projects/pipelines/charts/components/app_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js @@ -1,5 +1,6 @@ import { GlTabs, GlTab } from '@gitlab/ui'; import { merge } from 'lodash'; +import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import setWindowLocation from 'helpers/set_window_location_helper'; import { TEST_HOST } from 'helpers/test_constants'; @@ -99,7 +100,7 @@ describe('ProjectsPipelinesChartsApp', () => { tabs.vm.$emit('input', 1); - await wrapper.vm.$nextTick(); + await nextTick(); expect(tabs.attributes('value')).toBe('1'); }); @@ -115,7 +116,7 @@ describe('ProjectsPipelinesChartsApp', () => { tabs.vm.$emit('input', 0); - await wrapper.vm.$nextTick(); + await nextTick(); expect(updateHistory).not.toHaveBeenCalled(); }); @@ -183,7 +184,7 @@ describe('ProjectsPipelinesChartsApp', () => { popstateHandler(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findGlTabs().attributes('value')).toBe('1'); }); diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js index 9adc6dba51e..cafb3f231bd 100644 --- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js @@ -1,6 +1,6 @@ -import { GlSegmentedControl } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { GlSegmentedControl } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import CiCdAnalyticsAreaChart from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_area_chart.vue'; import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue'; import { transformedAreaChartData, chartOptions } from '../mock_data'; @@ -29,12 +29,15 @@ const DEFAULT_PROPS = { describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', () => { let wrapper; - const createWrapper = (props = {}) => - shallowMount(CiCdAnalyticsCharts, { + const createWrapper = (props = {}, slots = {}) => + shallowMountExtended(CiCdAnalyticsCharts, { propsData: { ...DEFAULT_PROPS, ...props, }, + scopedSlots: { + ...slots, + }, }); afterEach(() => { @@ -44,20 +47,20 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( } }); - describe('segmented control', () => { - let segmentedControl; + const findMetricsSlot = () => wrapper.findByTestId('metrics-slot'); + const findSegmentedControl = () => wrapper.findComponent(GlSegmentedControl); + describe('segmented control', () => { beforeEach(() => { wrapper = createWrapper(); - segmentedControl = wrapper.find(GlSegmentedControl); }); it('should default to the first chart', () => { - expect(segmentedControl.props('checked')).toBe(0); + expect(findSegmentedControl().props('checked')).toBe(0); }); it('should use the title and index as values', () => { - const options = segmentedControl.props('options'); + const options = findSegmentedControl().props('options'); expect(options).toHaveLength(3); expect(options).toEqual([ { @@ -76,7 +79,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( }); it('should select a different chart on change', async () => { - segmentedControl.vm.$emit('input', 1); + findSegmentedControl().vm.$emit('input', 1); const chart = wrapper.find(CiCdAnalyticsAreaChart); @@ -91,4 +94,24 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', ( wrapper = createWrapper({ charts: [] }); expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false); }); + + describe('slots', () => { + beforeEach(() => { + wrapper = createWrapper( + {}, + { + metrics: '<div data-testid="metrics-slot">selected chart: {{props.selectedChart}}</div>', + }, + ); + }); + + it('renders a metrics slot', async () => { + const selectedChart = 1; + findSegmentedControl().vm.$emit('input', selectedChart); + + await nextTick(); + + expect(findMetricsSlot().text()).toBe(`selected chart: ${selectedChart}`); + }); + }); }); diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js index 6ef49390c47..3c91b913e67 100644 --- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js +++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js @@ -1,7 +1,9 @@ import { GlColumnChart } from '@gitlab/ui/dist/charts'; -import { createLocalVue, shallowMount } 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 PipelineCharts from '~/projects/pipelines/charts/components/pipeline_charts.vue'; import StatisticsList from '~/projects/pipelines/charts/components/statistics_list.vue'; import getPipelineCountByStatus from '~/projects/pipelines/charts/graphql/queries/get_pipeline_count_by_status.query.graphql'; @@ -10,8 +12,7 @@ import CiCdAnalyticsCharts from '~/vue_shared/components/ci_cd_analytics/ci_cd_a import { mockPipelineCount, mockPipelineStatistics } from '../mock_data'; const projectPath = 'gitlab-org/gitlab'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { let wrapper; @@ -25,14 +26,15 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => { return createMockApollo(requestHandlers); } - beforeEach(() => { + beforeEach(async () => { wrapper = shallowMount(PipelineCharts, { provide: { projectPath, }, - localVue, apolloProvider: createMockApolloProvider(), }); + + await waitForPromises(); }); afterEach(() => { diff --git a/spec/frontend/projects/project_find_file_spec.js b/spec/frontend/projects/project_find_file_spec.js index 9c1000039b1..eec54dd04bc 100644 --- a/spec/frontend/projects/project_find_file_spec.js +++ b/spec/frontend/projects/project_find_file_spec.js @@ -1,6 +1,7 @@ import MockAdapter from 'axios-mock-adapter'; import $ from 'jquery'; import { TEST_HOST } from 'helpers/test_constants'; +import waitForPromises from 'helpers/wait_for_promises'; import { sanitize } from '~/lib/dompurify'; import axios from '~/lib/utils/axios_utils'; import ProjectFindFile from '~/projects/project_find_file'; @@ -53,7 +54,7 @@ describe('ProjectFindFile', () => { { path: 'folde?rC/fil#F.txt', escaped: 'folde%3FrC/fil%23F.txt' }, ]; - beforeEach((done) => { + beforeEach(() => { // Create a mock adapter for stubbing axios API requests mock = new MockAdapter(axios); @@ -64,7 +65,7 @@ describe('ProjectFindFile', () => { ); getProjectFindFileInstance(); // This triggers a load / axios call + subsequent render in the constructor - setImmediate(done); + return waitForPromises(); }); afterEach(() => { diff --git a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js index 0c5bbe2a115..0a05832ceb6 100644 --- a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js +++ b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js @@ -1,6 +1,7 @@ import { GlAlert, GlToggle, GlTooltip } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import MockAxiosAdapter from 'axios-mock-adapter'; +import { nextTick } from 'vue'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; import SharedRunnersToggleComponent from '~/projects/settings/components/shared_runners_toggle.vue'; @@ -121,7 +122,7 @@ describe('projects/settings/components/shared_runners', () => { expect(isToggleLoading()).toBe(false); findSharedRunnersToggle().vm.$emit('change', true); - await wrapper.vm.$nextTick(); + await nextTick(); expect(isToggleLoading()).toBe(true); await waitForPromises(); diff --git a/spec/frontend/projects/settings/components/transfer_project_form_spec.js b/spec/frontend/projects/settings/components/transfer_project_form_spec.js index f7ce7c6f840..85b09ced024 100644 --- a/spec/frontend/projects/settings/components/transfer_project_form_spec.js +++ b/spec/frontend/projects/settings/components/transfer_project_form_spec.js @@ -1,4 +1,7 @@ -import { namespaces } from 'jest/vue_shared/components/namespace_select/mock_data'; +import { + groupNamespaces, + userNamespaces, +} from 'jest/vue_shared/components/namespace_select/mock_data'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import TransferProjectForm from '~/projects/settings/components/transfer_project_form.vue'; import NamespaceSelect from '~/vue_shared/components/namespace_select/namespace_select.vue'; @@ -13,7 +16,8 @@ describe('Transfer project form', () => { const createComponent = () => shallowMountExtended(TransferProjectForm, { propsData: { - namespaces, + userNamespaces, + groupNamespaces, confirmButtonText, confirmationPhrase, }, @@ -43,7 +47,7 @@ describe('Transfer project form', () => { }); describe('with a selected namespace', () => { - const [selectedItem] = namespaces.group; + const [selectedItem] = groupNamespaces; beforeEach(() => { findNamespaceSelect().vm.$emit('select', selectedItem); diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js index 875c58583df..57e515723e5 100644 --- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js +++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js @@ -139,7 +139,7 @@ describe('ServiceDeskSetting', () => { input.setValue('abc_A.'); input.trigger('blur'); - await wrapper.vm.$nextTick(); + await nextTick(); const errorText = wrapper.find('.invalid-feedback'); expect(errorText.exists()).toBe(true); |