diff options
Diffstat (limited to 'spec/frontend/pages')
21 files changed, 590 insertions, 381 deletions
diff --git a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js index 81750b4827f..52648d3ce00 100644 --- a/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js +++ b/spec/frontend/pages/admin/jobs/index/components/stop_jobs_modal_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; import { TEST_HOST } from 'helpers/test_constants'; -import { redirectTo } from '~/lib/utils/url_utility'; +import mountComponent from 'helpers/vue_mount_component_helper'; import axios from '~/lib/utils/axios_utils'; +import { redirectTo } from '~/lib/utils/url_utility'; import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue'; jest.mock('~/lib/utils/url_utility', () => ({ diff --git a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js index d203a8ea0e0..c7293b00adf 100644 --- a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js +++ b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton, GlFormInput } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import DeleteUserModal from '~/pages/admin/users/components/delete_user_modal.vue'; import ModalStub from './stubs/modal_stub'; diff --git a/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js b/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js index 6df2efd624d..3669bc40d7e 100644 --- a/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js +++ b/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js @@ -3,6 +3,8 @@ import UserModalManager from '~/pages/admin/users/components/user_modal_manager. import ModalStub from './stubs/modal_stub'; describe('Users admin page Modal Manager', () => { + let wrapper; + const modalConfiguration = { action1: { title: 'action1', @@ -14,11 +16,12 @@ describe('Users admin page Modal Manager', () => { }, }; - let wrapper; + const findModal = () => wrapper.find({ ref: 'modal' }); const createComponent = (props = {}) => { wrapper = mount(UserModalManager, { propsData: { + selector: '.js-delete-user-modal-button', modalConfiguration, csrfToken: 'dummyCSRF', ...props, @@ -37,7 +40,7 @@ describe('Users admin page Modal Manager', () => { describe('render behavior', () => { it('does not renders modal when initialized', () => { createComponent(); - expect(wrapper.find({ ref: 'modal' }).exists()).toBeFalsy(); + expect(findModal().exists()).toBeFalsy(); }); it('throws if action has no proper configuration', () => { @@ -55,7 +58,7 @@ describe('Users admin page Modal Manager', () => { }); return wrapper.vm.$nextTick().then(() => { - const modal = wrapper.find({ ref: 'modal' }); + const modal = findModal(); expect(modal.exists()).toBeTruthy(); expect(modal.vm.$attrs.csrfToken).toEqual('dummyCSRF'); expect(modal.vm.$attrs.extraProp).toEqual('extraPropValue'); @@ -64,68 +67,60 @@ describe('Users admin page Modal Manager', () => { }); }); - describe('global listener', () => { + describe('click handling', () => { + let button; + let button2; + + const createButtons = () => { + button = document.createElement('button'); + button2 = document.createElement('button'); + button.setAttribute('class', 'js-delete-user-modal-button'); + button.setAttribute('data-username', 'foo'); + button.setAttribute('data-gl-modal-action', 'action1'); + button.setAttribute('data-block-user-url', '/block'); + button.setAttribute('data-delete-user-url', '/delete'); + document.body.appendChild(button); + document.body.appendChild(button2); + }; + const removeButtons = () => { + button.remove(); + button = null; + button2.remove(); + button2 = null; + }; + beforeEach(() => { - jest.spyOn(document, 'addEventListener'); - jest.spyOn(document, 'removeEventListener'); + createButtons(); + createComponent(); }); - afterAll(() => { - jest.restoreAllMocks(); + afterEach(() => { + removeButtons(); }); - it('registers global listener on mount', () => { - createComponent(); - expect(document.addEventListener).toHaveBeenCalledWith('click', expect.any(Function)); - }); + it('renders the modal when the button is clicked', async () => { + button.click(); - it('removes global listener on destroy', () => { - createComponent(); - wrapper.destroy(); - expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function)); + await wrapper.vm.$nextTick(); + + expect(findModal().exists()).toBe(true); }); - }); - describe('click handling', () => { - let node; + it('does not render the modal when a misconfigured button is clicked', async () => { + button.removeAttribute('data-gl-modal-action'); + button.click(); - beforeEach(() => { - node = document.createElement('div'); - document.body.appendChild(node); - }); + await wrapper.vm.$nextTick(); - afterEach(() => { - node.remove(); - node = null; + expect(findModal().exists()).toBe(false); }); - it('ignores wrong clicks', () => { - createComponent(); - const event = new window.MouseEvent('click', { - bubbles: true, - cancellable: true, - }); - jest.spyOn(event, 'preventDefault'); - node.dispatchEvent(event); - expect(event.preventDefault).not.toHaveBeenCalled(); - }); + it('does not render the modal when a button without the selector class is clicked', async () => { + button2.click(); - it('captures click with glModalAction', () => { - createComponent(); - node.dataset.glModalAction = 'action1'; - const event = new window.MouseEvent('click', { - bubbles: true, - cancellable: true, - }); - jest.spyOn(event, 'preventDefault'); - node.dispatchEvent(event); + await wrapper.vm.$nextTick(); - expect(event.preventDefault).toHaveBeenCalled(); - return wrapper.vm.$nextTick().then(() => { - const modal = wrapper.find({ ref: 'modal' }); - expect(modal.exists()).toBeTruthy(); - expect(modal.vm.showWasCalled).toBeTruthy(); - }); + expect(findModal().exists()).toBe(false); }); }); }); diff --git a/spec/frontend/pages/dashboard/projects/index/components/customize_homepage_banner_spec.js b/spec/frontend/pages/dashboard/projects/index/components/customize_homepage_banner_spec.js index fbe2274c40d..63c1260560b 100644 --- a/spec/frontend/pages/dashboard/projects/index/components/customize_homepage_banner_spec.js +++ b/spec/frontend/pages/dashboard/projects/index/components/customize_homepage_banner_spec.js @@ -1,9 +1,9 @@ -import { shallowMount } from '@vue/test-utils'; import { GlBanner } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper'; -import CustomizeHomepageBanner from '~/pages/dashboard/projects/index/components/customize_homepage_banner.vue'; import axios from '~/lib/utils/axios_utils'; +import CustomizeHomepageBanner from '~/pages/dashboard/projects/index/components/customize_homepage_banner.vue'; const svgPath = '/illustrations/background'; const provide = { diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js index 5018b0c4f73..fb612f17669 100644 --- a/spec/frontend/pages/dashboard/todos/index/todos_spec.js +++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js @@ -1,10 +1,10 @@ -import $ from 'jquery'; import MockAdapter from 'axios-mock-adapter'; -import Todos from '~/pages/dashboard/todos/index/todos'; +import $ from 'jquery'; import '~/lib/utils/common_utils'; import axios from '~/lib/utils/axios_utils'; import { addDelimiter } from '~/lib/utils/text_utility'; import { visitUrl } from '~/lib/utils/url_utility'; +import Todos from '~/pages/dashboard/todos/index/todos'; jest.mock('~/lib/utils/url_utility', () => ({ visitUrl: jest.fn().mockName('visitUrl'), diff --git a/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js b/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js index a91fc5abe09..7a8a249cb2a 100644 --- a/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js +++ b/spec/frontend/pages/import/bitbucket_server/components/bitbucket_server_status_table_spec.js @@ -1,8 +1,8 @@ +import { GlButton } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { GlButton } from '@gitlab/ui'; -import BitbucketServerStatusTable from '~/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue'; import BitbucketStatusTable from '~/import_entities/import_projects/components/bitbucket_status_table.vue'; +import BitbucketServerStatusTable from '~/pages/import/bitbucket_server/status/components/bitbucket_server_status_table.vue'; const BitbucketStatusTableStub = { name: 'BitbucketStatusTable', diff --git a/spec/frontend/pages/labels/components/promote_label_modal_spec.js b/spec/frontend/pages/labels/components/promote_label_modal_spec.js index 19807313c77..4d5d1f98b59 100644 --- a/spec/frontend/pages/labels/components/promote_label_modal_spec.js +++ b/spec/frontend/pages/labels/components/promote_label_modal_spec.js @@ -1,9 +1,9 @@ import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; import { TEST_HOST } from 'helpers/test_constants'; +import mountComponent from 'helpers/vue_mount_component_helper'; +import axios from '~/lib/utils/axios_utils'; import promoteLabelModal from '~/pages/projects/labels/components/promote_label_modal.vue'; import eventHub from '~/pages/projects/labels/event_hub'; -import axios from '~/lib/utils/axios_utils'; describe('Promote label modal', () => { let vm; diff --git a/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js b/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js index 7bb637356c2..1fbec0d996d 100644 --- a/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js +++ b/spec/frontend/pages/milestones/shared/components/delete_milestone_modal_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; -import mountComponent from 'helpers/vue_mount_component_helper'; import { TEST_HOST } from 'helpers/test_constants'; -import { redirectTo } from '~/lib/utils/url_utility'; +import mountComponent from 'helpers/vue_mount_component_helper'; import axios from '~/lib/utils/axios_utils'; +import { redirectTo } from '~/lib/utils/url_utility'; import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_milestone_modal.vue'; import eventHub from '~/pages/milestones/shared/event_hub'; diff --git a/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js b/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js index 7cd94deb3da..d22e0474e06 100644 --- a/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js +++ b/spec/frontend/pages/milestones/shared/components/promote_milestone_modal_spec.js @@ -1,12 +1,12 @@ import { GlModal } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import { TEST_HOST } from 'helpers/test_constants'; import { setHTMLFixture } from 'helpers/fixtures'; +import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; -import PromoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue'; +import * as flash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import * as urlUtils from '~/lib/utils/url_utility'; -import * as flash from '~/flash'; +import PromoteMilestoneModal from '~/pages/milestones/shared/components/promote_milestone_modal.vue'; jest.mock('~/lib/utils/url_utility'); jest.mock('~/flash'); diff --git a/spec/frontend/pages/projects/edit/mount_search_settings_spec.js b/spec/frontend/pages/projects/edit/mount_search_settings_spec.js deleted file mode 100644 index b48809b3d00..00000000000 --- a/spec/frontend/pages/projects/edit/mount_search_settings_spec.js +++ /dev/null @@ -1,25 +0,0 @@ -import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; -import initSearch from '~/search_settings'; -import mountSearchSettings from '~/pages/projects/edit/mount_search_settings'; - -jest.mock('~/search_settings'); - -describe('pages/projects/edit/mount_search_settings', () => { - afterEach(() => { - resetHTMLFixture(); - }); - - it('initializes search settings when js-search-settings-app is available', async () => { - setHTMLFixture('<div class="js-search-settings-app"></div>'); - - await mountSearchSettings(); - - expect(initSearch).toHaveBeenCalled(); - }); - - it('does not initialize search settings when js-search-settings-app is unavailable', async () => { - await mountSearchSettings(); - - expect(initSearch).not.toHaveBeenCalled(); - }); -}); diff --git a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js index b90c07a335b..b5425fa6f2e 100644 --- a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js +++ b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_item_spec.js @@ -1,14 +1,10 @@ -import { shallowMount } from '@vue/test-utils'; import { GlBadge, GlButton, GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import ForkGroupsListItem from '~/pages/projects/forks/new/components/fork_groups_list_item.vue'; describe('Fork groups list item component', () => { let wrapper; - const DEFAULT_PROPS = { - hasReachedProjectLimit: false, - }; - const DEFAULT_GROUP_DATA = { id: 22, name: 'Gitlab Org', @@ -33,7 +29,6 @@ describe('Fork groups list item component', () => { const createWrapper = (propsData) => { wrapper = shallowMount(ForkGroupsListItem, { propsData: { - ...DEFAULT_PROPS, ...propsData, }, }); diff --git a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js index 91740c7ce3b..e7ac837a4c8 100644 --- a/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js +++ b/spec/frontend/pages/projects/forks/new/components/fork_groups_list_spec.js @@ -1,10 +1,10 @@ -import AxiosMockAdapter from 'axios-mock-adapter'; -import { shallowMount } from '@vue/test-utils'; import { GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import AxiosMockAdapter from 'axios-mock-adapter'; import { nextTick } from 'vue'; import waitForPromises from 'helpers/wait_for_promises'; -import axios from '~/lib/utils/axios_utils'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import axios from '~/lib/utils/axios_utils'; import ForkGroupsList from '~/pages/projects/forks/new/components/fork_groups_list.vue'; import ForkGroupsListItem from '~/pages/projects/forks/new/components/fork_groups_list_item.vue'; @@ -16,7 +16,6 @@ describe('Fork groups list component', () => { const DEFAULT_PROPS = { endpoint: '/dummy', - hasReachedProjectLimit: false, }; const replyWith = (...args) => axiosMock.onGet(DEFAULT_PROPS.endpoint).reply(...args); @@ -94,10 +93,9 @@ describe('Fork groups list component', () => { it('renders list items for each available group', async () => { const namespaces = [{ name: 'dummy1' }, { name: 'dummy2' }, { name: 'otherdummy' }]; - const hasReachedProjectLimit = true; replyWith(200, { namespaces }); - createWrapper({ hasReachedProjectLimit }); + createWrapper(); await waitForPromises(); @@ -106,7 +104,6 @@ describe('Fork groups list component', () => { namespaces.forEach((namespace, idx) => { expect(wrapper.findAll(ForkGroupsListItem).at(idx).props()).toStrictEqual({ group: namespace, - hasReachedProjectLimit, }); }); }); diff --git a/spec/frontend/pages/projects/graphs/code_coverage_spec.js b/spec/frontend/pages/projects/graphs/code_coverage_spec.js index 4a60c7fd509..1f9029b40c7 100644 --- a/spec/frontend/pages/projects/graphs/code_coverage_spec.js +++ b/spec/frontend/pages/projects/graphs/code_coverage_spec.js @@ -1,13 +1,13 @@ -import MockAdapter from 'axios-mock-adapter'; -import { shallowMount } from '@vue/test-utils'; import { GlAlert, GlDropdown, GlDropdownItem } from '@gitlab/ui'; import { GlAreaChart } from '@gitlab/ui/dist/charts'; +import { shallowMount } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; import waitForPromises from 'helpers/wait_for_promises'; import axios from '~/lib/utils/axios_utils'; +import httpStatusCodes from '~/lib/utils/http_status'; import CodeCoverage from '~/pages/projects/graphs/components/code_coverage.vue'; import { codeCoverageMockData, sortedDataByDates } from './mock_data'; -import httpStatusCodes from '~/lib/utils/http_status'; describe('Code Coverage', () => { let wrapper; diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap new file mode 100644 index 00000000000..c9141d13a46 --- /dev/null +++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap @@ -0,0 +1,66 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Learn GitLab Design A should render the loading state 1`] = ` +<ul> + <li> + <span> + Create a repository + </span> + </li> + <li> + <span> + Invite your colleagues + </span> + </li> + <li> + <span> + Set-up CI/CD + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Start a free trial of GitLab Gold + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Add code owners + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Enable require merge approvals + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Submit a merge request (MR) + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Run a Security scan using CI/CD + </gl-link-stub> + </span> + </li> +</ul> +`; diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap new file mode 100644 index 00000000000..85e3b675e5b --- /dev/null +++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_b_spec.js.snap @@ -0,0 +1,66 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Learn GitLab Design B should render the loading state 1`] = ` +<ul> + <li> + <span> + Create a repository + </span> + </li> + <li> + <span> + Invite your colleagues + </span> + </li> + <li> + <span> + Set-up CI/CD + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Start a free trial of GitLab Gold + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Add code owners + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Enable require merge approvals + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Submit a merge request (MR) + </gl-link-stub> + </span> + </li> + <li> + <span> + <gl-link-stub + href="http://example.com/" + > + Run a Security scan using CI/CD + </gl-link-stub> + </span> + </li> +</ul> +`; diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js new file mode 100644 index 00000000000..ddc5339e7e0 --- /dev/null +++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js @@ -0,0 +1,63 @@ +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue'; + +const TEST_ACTIONS = { + gitWrite: { + url: 'http://example.com/', + completed: true, + }, + userAdded: { + url: 'http://example.com/', + completed: true, + }, + pipelineCreated: { + url: 'http://example.com/', + completed: true, + }, + trialStarted: { + url: 'http://example.com/', + completed: false, + }, + codeOwnersEnabled: { + url: 'http://example.com/', + completed: false, + }, + requiredMrApprovalsEnabled: { + url: 'http://example.com/', + completed: false, + }, + mergeRequestCreated: { + url: 'http://example.com/', + completed: false, + }, + securityScanEnabled: { + url: 'http://example.com/', + completed: false, + }, +}; + +describe('Learn GitLab Design A', () => { + let wrapper; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const createWrapper = () => { + wrapper = extendedWrapper( + shallowMount(LearnGitlabA, { + propsData: { + actions: TEST_ACTIONS, + }, + }), + ); + }; + + it('should render the loading state', () => { + createWrapper(); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js new file mode 100644 index 00000000000..be4f5768402 --- /dev/null +++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_b_spec.js @@ -0,0 +1,63 @@ +import { shallowMount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue'; + +const TEST_ACTIONS = { + gitWrite: { + url: 'http://example.com/', + completed: true, + }, + userAdded: { + url: 'http://example.com/', + completed: true, + }, + pipelineCreated: { + url: 'http://example.com/', + completed: true, + }, + trialStarted: { + url: 'http://example.com/', + completed: false, + }, + codeOwnersEnabled: { + url: 'http://example.com/', + completed: false, + }, + requiredMrApprovalsEnabled: { + url: 'http://example.com/', + completed: false, + }, + mergeRequestCreated: { + url: 'http://example.com/', + completed: false, + }, + securityScanEnabled: { + url: 'http://example.com/', + completed: false, + }, +}; + +describe('Learn GitLab Design B', () => { + let wrapper; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const createWrapper = () => { + wrapper = extendedWrapper( + shallowMount(LearnGitlabA, { + propsData: { + actions: TEST_ACTIONS, + }, + }), + ); + }; + + it('should render the loading state', () => { + createWrapper(); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js b/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js new file mode 100644 index 00000000000..ea49111760b --- /dev/null +++ b/spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js @@ -0,0 +1,41 @@ +import initCheckFormState from '~/pages/projects/merge_requests/edit/check_form_state'; + +describe('Check form state', () => { + const findInput = () => document.querySelector('#form-input'); + + let beforeUnloadEvent; + let setDialogContent; + + beforeEach(() => { + setFixtures(` + <form class="merge-request-form"> + <input type="text" name="test" id="form-input"/> + </form>`); + + beforeUnloadEvent = new Event('beforeunload'); + jest.spyOn(beforeUnloadEvent, 'preventDefault'); + setDialogContent = jest.spyOn(beforeUnloadEvent, 'returnValue', 'set'); + + initCheckFormState(); + }); + + afterEach(() => { + beforeUnloadEvent.preventDefault.mockRestore(); + setDialogContent.mockRestore(); + }); + + it('shows confirmation dialog when there are unsaved changes', () => { + findInput().value = 'value changed'; + window.dispatchEvent(beforeUnloadEvent); + + expect(beforeUnloadEvent.preventDefault).toHaveBeenCalled(); + expect(setDialogContent).toHaveBeenCalledWith(''); + }); + + it('does not show confirmation dialog when there are no unsaved changes', () => { + window.dispatchEvent(beforeUnloadEvent); + + expect(beforeUnloadEvent.preventDefault).not.toHaveBeenCalled(); + expect(setDialogContent).not.toHaveBeenCalled(); + }); +}); diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js index cfe54016410..5fed9fcaad2 100644 --- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js +++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import Cookies from 'js-cookie'; import PipelineSchedulesCallout from '~/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue'; diff --git a/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js b/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js index c90ebd47b08..0fffcf433a3 100644 --- a/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js +++ b/spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js @@ -1,7 +1,6 @@ -import { mount, shallowMount } from '@vue/test-utils'; - -import projectFeatureSetting from '~/pages/projects/shared/permissions/components/project_feature_setting.vue'; -import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue'; +import { GlToggle } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import ProjectFeatureSetting from '~/pages/projects/shared/permissions/components/project_feature_setting.vue'; describe('Project Feature Settings', () => { const defaultProps = { @@ -19,81 +18,76 @@ describe('Project Feature Settings', () => { }; let wrapper; - const mountComponent = (customProps) => { - const propsData = { ...defaultProps, ...customProps }; - return shallowMount(projectFeatureSetting, { propsData }); - }; + const findHiddenInput = () => wrapper.find(`input[name=${defaultProps.name}]`); + const findToggle = () => wrapper.findComponent(GlToggle); - beforeEach(() => { - wrapper = mountComponent(); - }); + const mountComponent = (customProps = {}) => + shallowMount(ProjectFeatureSetting, { + propsData: { + ...defaultProps, + ...customProps, + }, + }); afterEach(() => { wrapper.destroy(); + wrapper = null; }); describe('Hidden name input', () => { it('should set the hidden name input if the name exists', () => { - expect(wrapper.find(`input[name=${defaultProps.name}]`).attributes().value).toBe('1'); + wrapper = mountComponent(); + + expect(findHiddenInput().attributes('value')).toBe('1'); }); it('should not set the hidden name input if the name does not exist', () => { - wrapper.setProps({ name: null }); + wrapper = mountComponent({ name: null }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(`input[name=${defaultProps.name}]`).exists()).toBe(false); - }); + expect(findHiddenInput().exists()).toBe(false); }); }); describe('Feature toggle', () => { - it('should be hidden if "showToggle" is passed false', async () => { - wrapper.setProps({ showToggle: false }); - - await wrapper.vm.$nextTick(); + it('should be hidden if "showToggle" is passed false', () => { + wrapper = mountComponent({ showToggle: false }); - expect(wrapper.find(projectFeatureToggle).element).toBeUndefined(); + expect(findToggle().exists()).toBe(false); }); it('should enable the feature toggle if the value is not 0', () => { - expect(wrapper.find(projectFeatureToggle).props().value).toBe(true); + wrapper = mountComponent(); + + expect(findToggle().props('value')).toBe(true); }); it('should enable the feature toggle if the value is less than 0', () => { - wrapper.setProps({ value: -1 }); + wrapper = mountComponent({ value: -1 }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(projectFeatureToggle).props().value).toBe(true); - }); + expect(findToggle().props('value')).toBe(true); }); it('should disable the feature toggle if the value is 0', () => { - wrapper.setProps({ value: 0 }); + wrapper = mountComponent({ value: 0 }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(projectFeatureToggle).props().value).toBe(false); - }); + expect(findToggle().props('value')).toBe(false); }); it('should disable the feature toggle if disabledInput is set', () => { - wrapper.setProps({ disabledInput: true }); + wrapper = mountComponent({ disabledInput: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find(projectFeatureToggle).props().disabledInput).toBe(true); - }); + expect(findToggle().props('disabled')).toBe(true); }); it('should emit a change event when the feature toggle changes', () => { - // Needs to be fully mounted to be able to trigger the click event on the internal button - wrapper = mount(projectFeatureSetting, { propsData: defaultProps }); + wrapper = mountComponent({ propsData: defaultProps }); + + expect(wrapper.emitted('change')).toBeUndefined(); - expect(wrapper.emitted().change).toBeUndefined(); - wrapper.find(projectFeatureToggle).find('button').trigger('click'); + findToggle().vm.$emit('change', false); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().change.length).toBe(1); - expect(wrapper.emitted().change[0]).toEqual([0]); - }); + expect(wrapper.emitted('change')).toHaveLength(1); + expect(wrapper.emitted('change')[0]).toEqual([0]); }); }); @@ -108,26 +102,23 @@ describe('Project Feature Settings', () => { `( 'should set disabled to $isDisabled when disabledInput is $disabledInput, the value is $value and options are $options', ({ disabledInput, value, options, isDisabled }) => { - wrapper.setProps({ disabledInput, value, options }); - - return wrapper.vm.$nextTick(() => { - if (isDisabled) { - expect(wrapper.find('select').attributes().disabled).toEqual('disabled'); - } else { - expect(wrapper.find('select').attributes().disabled).toBeUndefined(); - } - }); + wrapper = mountComponent({ disabledInput, value, options }); + + const expected = isDisabled ? 'disabled' : undefined; + + expect(wrapper.find('select').attributes('disabled')).toBe(expected); }, ); it('should emit the change when a new option is selected', () => { - expect(wrapper.emitted().change).toBeUndefined(); + wrapper = mountComponent(); + + expect(wrapper.emitted('change')).toBeUndefined(); + wrapper.findAll('option').at(1).trigger('change'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().change.length).toBe(1); - expect(wrapper.emitted().change[0]).toEqual([2]); - }); + expect(wrapper.emitted('change')).toHaveLength(1); + expect(wrapper.emitted('change')[0]).toEqual([2]); }); }); }); diff --git a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js index 9aee6ec7ace..d7c754fd3cc 100644 --- a/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js +++ b/spec/frontend/pages/projects/shared/permissions/components/settings_panel_spec.js @@ -1,13 +1,12 @@ +import { GlToggle } from '@gitlab/ui'; import { shallowMount, mount } from '@vue/test-utils'; - +import projectFeatureSetting from '~/pages/projects/shared/permissions/components/project_feature_setting.vue'; import settingsPanel from '~/pages/projects/shared/permissions/components/settings_panel.vue'; import { featureAccessLevel, visibilityLevelDescriptions, visibilityOptions, } from '~/pages/projects/shared/permissions/constants'; -import projectFeatureSetting from '~/pages/projects/shared/permissions/components/project_feature_setting.vue'; -import projectFeatureToggle from '~/vue_shared/components/toggle_button.vue'; const defaultProps = { currentSettings: { @@ -69,57 +68,61 @@ describe('Settings Panel', () => { }); }; - const overrideCurrentSettings = ( - currentSettingsProps, - extraProps = {}, - mountFn = shallowMount, - ) => { - return mountComponent({ ...extraProps, currentSettings: currentSettingsProps }, mountFn); - }; - const findLFSSettingsRow = () => wrapper.find({ ref: 'git-lfs-settings' }); const findLFSSettingsMessage = () => findLFSSettingsRow().find('p'); - const findLFSFeatureToggle = () => findLFSSettingsRow().find(projectFeatureToggle); - + const findLFSFeatureToggle = () => findLFSSettingsRow().find(GlToggle); const findRepositoryFeatureProjectRow = () => wrapper.find({ ref: 'repository-settings' }); const findRepositoryFeatureSetting = () => findRepositoryFeatureProjectRow().find(projectFeatureSetting); - + const findProjectVisibilitySettings = () => wrapper.find({ ref: 'project-visibility-settings' }); const findAnalyticsRow = () => wrapper.find({ ref: 'analytics-settings' }); - - beforeEach(() => { - wrapper = mountComponent(); - }); + const findProjectVisibilityLevelInput = () => wrapper.find('[name="project[visibility_level]"]'); + const findRequestAccessEnabledInput = () => + wrapper.find('[name="project[request_access_enabled]"]'); + const findMergeRequestsAccessLevelInput = () => + wrapper.find('[name="project[project_feature_attributes][merge_requests_access_level]"]'); + const findForkingAccessLevelInput = () => + wrapper.find('[name="project[project_feature_attributes][forking_access_level]"]'); + const findBuildsAccessLevelInput = () => + wrapper.find('[name="project[project_feature_attributes][builds_access_level]"]'); + const findContainerRegistrySettings = () => wrapper.find({ ref: 'container-registry-settings' }); + const findContainerRegistryEnabledInput = () => + wrapper.find('[name="project[container_registry_enabled]"]'); + const findPackageSettings = () => wrapper.find({ ref: 'package-settings' }); + const findPackagesEnabledInput = () => wrapper.find('[name="project[packages_enabled]"]'); + const findPagesSettings = () => wrapper.find({ ref: 'pages-settings' }); + const findEmailSettings = () => wrapper.find({ ref: 'email-settings' }); + const findShowDefaultAwardEmojis = () => + wrapper.find('input[name="project[project_setting_attributes][show_default_award_emojis]"]'); + const findMetricsVisibilitySettings = () => wrapper.find({ ref: 'metrics-visibility-settings' }); + const findAllowEditingCommitMessages = () => + wrapper.find({ ref: 'allow-editing-commit-messages' }).exists(); + const findOperationsSettings = () => wrapper.find({ ref: 'operations-settings' }); afterEach(() => { wrapper.destroy(); + wrapper = null; }); describe('Project Visibility', () => { it('should set the project visibility help path', () => { - expect(wrapper.find({ ref: 'project-visibility-settings' }).props().helpPath).toBe( + wrapper = mountComponent(); + + expect(findProjectVisibilitySettings().props('helpPath')).toBe( defaultProps.visibilityHelpPath, ); }); it('should not disable the visibility level dropdown', () => { - wrapper.setProps({ canChangeVisibilityLevel: true }); + wrapper = mountComponent({ canChangeVisibilityLevel: true }); - return wrapper.vm.$nextTick(() => { - expect( - wrapper.find('[name="project[visibility_level]"]').attributes().disabled, - ).toBeUndefined(); - }); + expect(findProjectVisibilityLevelInput().attributes('disabled')).toBeUndefined(); }); it('should disable the visibility level dropdown', () => { - wrapper.setProps({ canChangeVisibilityLevel: false }); + wrapper = mountComponent({ canChangeVisibilityLevel: false }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find('[name="project[visibility_level]"]').attributes().disabled).toBe( - 'disabled', - ); - }); + expect(findProjectVisibilityLevelInput().attributes('disabled')).toBe('disabled'); }); it.each` @@ -133,232 +136,209 @@ describe('Settings Panel', () => { `( 'sets disabled to $disabled for the visibility option $option when given $allowedOptions', ({ option, allowedOptions, disabled }) => { - wrapper.setProps({ allowedVisibilityOptions: allowedOptions }); - - return wrapper.vm.$nextTick(() => { - const attributeValue = wrapper - .find(`[name="project[visibility_level]"] option[value="${option}"]`) - .attributes().disabled; - - if (disabled) { - expect(attributeValue).toBe('disabled'); - } else { - expect(attributeValue).toBeUndefined(); - } - }); + wrapper = mountComponent({ allowedVisibilityOptions: allowedOptions }); + + const attributeValue = findProjectVisibilityLevelInput() + .find(`option[value="${option}"]`) + .attributes('disabled'); + + const expected = disabled ? 'disabled' : undefined; + + expect(attributeValue).toBe(expected); }, ); it('should set the visibility level description based upon the selected visibility level', () => { - wrapper.find('[name="project[visibility_level]"]').setValue(visibilityOptions.INTERNAL); + wrapper = mountComponent(); + + findProjectVisibilityLevelInput().setValue(visibilityOptions.INTERNAL); - expect(wrapper.find({ ref: 'project-visibility-settings' }).text()).toContain( + expect(findProjectVisibilitySettings().text()).toContain( visibilityLevelDescriptions[visibilityOptions.INTERNAL], ); }); it('should show the request access checkbox if the visibility level is not private', () => { - wrapper = overrideCurrentSettings({ visibilityLevel: visibilityOptions.INTERNAL }); + wrapper = mountComponent({ + currentSettings: { visibilityLevel: visibilityOptions.INTERNAL }, + }); - expect(wrapper.find('[name="project[request_access_enabled]"]').exists()).toBe(true); + expect(findRequestAccessEnabledInput().exists()).toBe(true); }); it('should not show the request access checkbox if the visibility level is private', () => { - wrapper = overrideCurrentSettings({ visibilityLevel: visibilityOptions.PRIVATE }); + wrapper = mountComponent({ currentSettings: { visibilityLevel: visibilityOptions.PRIVATE } }); - expect(wrapper.find('[name="project[request_access_enabled]"]').exists()).toBe(false); + expect(findRequestAccessEnabledInput().exists()).toBe(false); }); }); describe('Repository', () => { it('should set the repository help text when the visibility level is set to private', () => { - wrapper = overrideCurrentSettings({ visibilityLevel: visibilityOptions.PRIVATE }); + wrapper = mountComponent({ currentSettings: { visibilityLevel: visibilityOptions.PRIVATE } }); - expect(findRepositoryFeatureProjectRow().props().helpText).toBe( - 'View and edit files in this project', + expect(findRepositoryFeatureProjectRow().props('helpText')).toBe( + 'View and edit files in this project.', ); }); it('should set the repository help text with a read access warning when the visibility level is set to non-private', () => { - wrapper = overrideCurrentSettings({ visibilityLevel: visibilityOptions.PUBLIC }); + wrapper = mountComponent({ currentSettings: { visibilityLevel: visibilityOptions.PUBLIC } }); - expect(findRepositoryFeatureProjectRow().props().helpText).toBe( - 'View and edit files in this project. Non-project members will only have read access', + expect(findRepositoryFeatureProjectRow().props('helpText')).toBe( + 'View and edit files in this project. Non-project members will only have read access.', ); }); }); describe('Merge requests', () => { it('should enable the merge requests access level input when the repository is enabled', () => { - wrapper = overrideCurrentSettings({ repositoryAccessLevel: featureAccessLevel.EVERYONE }); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE }, + }); - expect( - wrapper - .find('[name="project[project_feature_attributes][merge_requests_access_level]"]') - .props().disabledInput, - ).toBe(false); + expect(findMergeRequestsAccessLevelInput().props('disabledInput')).toBe(false); }); it('should disable the merge requests access level input when the repository is disabled', () => { - wrapper = overrideCurrentSettings({ repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, + }); - expect( - wrapper - .find('[name="project[project_feature_attributes][merge_requests_access_level]"]') - .props().disabledInput, - ).toBe(true); + expect(findMergeRequestsAccessLevelInput().props('disabledInput')).toBe(true); }); }); describe('Forks', () => { it('should enable the forking access level input when the repository is enabled', () => { - wrapper = overrideCurrentSettings({ repositoryAccessLevel: featureAccessLevel.EVERYONE }); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE }, + }); - expect( - wrapper.find('[name="project[project_feature_attributes][forking_access_level]"]').props() - .disabledInput, - ).toBe(false); + expect(findForkingAccessLevelInput().props('disabledInput')).toBe(false); }); it('should disable the forking access level input when the repository is disabled', () => { - wrapper = overrideCurrentSettings({ repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, + }); - expect( - wrapper.find('[name="project[project_feature_attributes][forking_access_level]"]').props() - .disabledInput, - ).toBe(true); + expect(findForkingAccessLevelInput().props('disabledInput')).toBe(true); }); }); describe('Pipelines', () => { it('should enable the builds access level input when the repository is enabled', () => { - wrapper = overrideCurrentSettings({ repositoryAccessLevel: featureAccessLevel.EVERYONE }); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE }, + }); - expect( - wrapper.find('[name="project[project_feature_attributes][builds_access_level]"]').props() - .disabledInput, - ).toBe(false); + expect(findBuildsAccessLevelInput().props('disabledInput')).toBe(false); }); it('should disable the builds access level input when the repository is disabled', () => { - wrapper = overrideCurrentSettings({ repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, + }); - expect( - wrapper.find('[name="project[project_feature_attributes][builds_access_level]"]').props() - .disabledInput, - ).toBe(true); + expect(findBuildsAccessLevelInput().props('disabledInput')).toBe(true); }); }); describe('Container registry', () => { it('should show the container registry settings if the registry is available', () => { - wrapper.setProps({ registryAvailable: true }); + wrapper = mountComponent({ registryAvailable: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'container-registry-settings' }).exists()).toBe(true); - }); + expect(findContainerRegistrySettings().exists()).toBe(true); }); it('should hide the container registry settings if the registry is not available', () => { - wrapper.setProps({ registryAvailable: false }); + wrapper = mountComponent({ registryAvailable: false }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'container-registry-settings' }).exists()).toBe(false); - }); + expect(findContainerRegistrySettings().exists()).toBe(false); }); it('should set the container registry settings help path', () => { - wrapper.setProps({ registryAvailable: true }); + wrapper = mountComponent({ registryAvailable: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'container-registry-settings' }).props().helpPath).toBe( - defaultProps.registryHelpPath, - ); - }); + expect(findContainerRegistrySettings().props('helpPath')).toBe(defaultProps.registryHelpPath); }); it('should show the container registry public note if the visibility level is public and the registry is available', () => { - wrapper = overrideCurrentSettings( - { visibilityLevel: visibilityOptions.PUBLIC }, - { registryAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { visibilityLevel: visibilityOptions.PUBLIC }, + registryAvailable: true, + }); - expect(wrapper.find({ ref: 'container-registry-settings' }).text()).toContain( + expect(findContainerRegistrySettings().text()).toContain( 'Note: the container registry is always visible when a project is public', ); }); it('should hide the container registry public note if the visibility level is private and the registry is available', () => { - wrapper = overrideCurrentSettings( - { visibilityLevel: visibilityOptions.PRIVATE }, - { registryAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { visibilityLevel: visibilityOptions.PRIVATE }, + registryAvailable: true, + }); - expect(wrapper.find({ ref: 'container-registry-settings' }).text()).not.toContain( + expect(findContainerRegistrySettings().text()).not.toContain( 'Note: the container registry is always visible when a project is public', ); }); it('should enable the container registry input when the repository is enabled', () => { - wrapper = overrideCurrentSettings( - { repositoryAccessLevel: featureAccessLevel.EVERYONE }, - { registryAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE }, + registryAvailable: true, + }); - expect( - wrapper.find('[name="project[container_registry_enabled]"]').props().disabledInput, - ).toBe(false); + expect(findContainerRegistryEnabledInput().props('disabled')).toBe(false); }); it('should disable the container registry input when the repository is disabled', () => { - wrapper = overrideCurrentSettings( - { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, - { registryAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, + registryAvailable: true, + }); - expect( - wrapper.find('[name="project[container_registry_enabled]"]').props().disabledInput, - ).toBe(true); + expect(findContainerRegistryEnabledInput().props('disabled')).toBe(true); }); }); describe('Git Large File Storage', () => { it('should show the LFS settings if LFS is available', () => { - wrapper.setProps({ lfsAvailable: true }); + wrapper = mountComponent({ lfsAvailable: true }); - return wrapper.vm.$nextTick(() => { - expect(findLFSSettingsRow().exists()).toBe(true); - }); + expect(findLFSSettingsRow().exists()).toBe(true); }); it('should hide the LFS settings if LFS is not available', () => { - wrapper.setProps({ lfsAvailable: false }); + wrapper = mountComponent({ lfsAvailable: false }); - return wrapper.vm.$nextTick(() => { - expect(findLFSSettingsRow().exists()).toBe(false); - }); + expect(findLFSSettingsRow().exists()).toBe(false); }); it('should set the LFS settings help path', () => { - expect(findLFSSettingsRow().props().helpPath).toBe(defaultProps.lfsHelpPath); + wrapper = mountComponent(); + expect(findLFSSettingsRow().props('helpPath')).toBe(defaultProps.lfsHelpPath); }); it('should enable the LFS input when the repository is enabled', () => { - wrapper = overrideCurrentSettings( - { repositoryAccessLevel: featureAccessLevel.EVERYONE }, - { lfsAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE }, + lfsAvailable: true, + }); - expect(findLFSFeatureToggle().props().disabledInput).toBe(false); + expect(findLFSFeatureToggle().props('disabled')).toBe(false); }); it('should disable the LFS input when the repository is disabled', () => { - wrapper = overrideCurrentSettings( - { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, - { lfsAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, + lfsAvailable: true, + }); - expect(findLFSFeatureToggle().props().disabledInput).toBe(true); + expect(findLFSFeatureToggle().props('disabled')).toBe(true); }); it('should not change lfsEnabled when disabling the repository', async () => { @@ -373,8 +353,7 @@ describe('Settings Panel', () => { expect(isToggleButtonChecked(lfsFeatureToggleButton)).toBe(true); expect(isToggleButtonChecked(repositoryFeatureToggleButton)).toBe(true); - repositoryFeatureToggleButton.trigger('click'); - await wrapper.vm.$nextTick(); + await repositoryFeatureToggleButton.trigger('click'); expect(isToggleButtonChecked(repositoryFeatureToggleButton)).toBe(false); // LFS toggle should still be checked @@ -400,7 +379,7 @@ describe('Settings Panel', () => { const link = message.find('a'); expect(message.text()).toContain( - 'LFS objects from this repository are still available to forks', + 'LFS objects from this repository are available to forks.', ); expect(link.text()).toBe('How do I remove them?'); expect(link.attributes('href')).toBe( @@ -418,47 +397,39 @@ describe('Settings Panel', () => { describe('Packages', () => { it('should show the packages settings if packages are available', () => { - wrapper.setProps({ packagesAvailable: true }); + wrapper = mountComponent({ packagesAvailable: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'package-settings' }).exists()).toBe(true); - }); + expect(findPackageSettings().exists()).toBe(true); }); it('should hide the packages settings if packages are not available', () => { - wrapper.setProps({ packagesAvailable: false }); + wrapper = mountComponent({ packagesAvailable: false }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'package-settings' }).exists()).toBe(false); - }); + expect(findPackageSettings().exists()).toBe(false); }); it('should set the package settings help path', () => { - wrapper.setProps({ packagesAvailable: true }); + wrapper = mountComponent({ packagesAvailable: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'package-settings' }).props().helpPath).toBe( - defaultProps.packagesHelpPath, - ); - }); + expect(findPackageSettings().props('helpPath')).toBe(defaultProps.packagesHelpPath); }); it('should enable the packages input when the repository is enabled', () => { - wrapper = overrideCurrentSettings( - { repositoryAccessLevel: featureAccessLevel.EVERYONE }, - { packagesAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.EVERYONE }, + packagesAvailable: true, + }); - expect(wrapper.find('[name="project[packages_enabled]"]').props().disabledInput).toBe(false); + expect(findPackagesEnabledInput().props('disabled')).toBe(false); }); it('should disable the packages input when the repository is disabled', () => { - wrapper = overrideCurrentSettings( - { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, - { packagesAvailable: true }, - ); + wrapper = mountComponent({ + currentSettings: { repositoryAccessLevel: featureAccessLevel.NOT_ENABLED }, + packagesAvailable: true, + }); - expect(wrapper.find('[name="project[packages_enabled]"]').props().disabledInput).toBe(true); + expect(findPackagesEnabledInput().props('disabled')).toBe(true); }); }); @@ -472,78 +443,66 @@ describe('Settings Panel', () => { `( 'should $visibility the page settings if pagesAvailable is $pagesAvailable and pagesAccessControlEnabled is $pagesAccessControlEnabled', ({ pagesAvailable, pagesAccessControlEnabled, visibility }) => { - wrapper.setProps({ pagesAvailable, pagesAccessControlEnabled }); + wrapper = mountComponent({ pagesAvailable, pagesAccessControlEnabled }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'pages-settings' }).exists()).toBe(visibility === 'show'); - }); + expect(findPagesSettings().exists()).toBe(visibility === 'show'); }, ); it('should set the pages settings help path', () => { - wrapper.setProps({ pagesAvailable: true, pagesAccessControlEnabled: true }); + wrapper = mountComponent({ pagesAvailable: true, pagesAccessControlEnabled: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'pages-settings' }).props().helpPath).toBe( - defaultProps.pagesHelpPath, - ); - }); + expect(findPagesSettings().props('helpPath')).toBe(defaultProps.pagesHelpPath); }); }); describe('Email notifications', () => { it('should show the disable email notifications input if emails an be disabled', () => { - wrapper.setProps({ canDisableEmails: true }); + wrapper = mountComponent({ canDisableEmails: true }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'email-settings' }).exists()).toBe(true); - }); + expect(findEmailSettings().exists()).toBe(true); }); it('should hide the disable email notifications input if emails cannot be disabled', () => { - wrapper.setProps({ canDisableEmails: false }); + wrapper = mountComponent({ canDisableEmails: false }); - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'email-settings' }).exists()).toBe(false); - }); + expect(findEmailSettings().exists()).toBe(false); }); }); describe('Default award emojis', () => { it('should show the "Show default award emojis" input', () => { - return wrapper.vm.$nextTick(() => { - expect( - wrapper - .find('input[name="project[project_setting_attributes][show_default_award_emojis]"]') - .exists(), - ).toBe(true); - }); + wrapper = mountComponent(); + + expect(findShowDefaultAwardEmojis().exists()).toBe(true); }); }); describe('Metrics dashboard', () => { it('should show the metrics dashboard access toggle', () => { - return wrapper.vm.$nextTick(() => { - expect(wrapper.find({ ref: 'metrics-visibility-settings' }).exists()).toBe(true); - }); + wrapper = mountComponent(); + + expect(findMetricsVisibilitySettings().exists()).toBe(true); }); it('should contain help text', () => { - expect(wrapper.find({ ref: 'metrics-visibility-settings' }).props().helpText).toBe( - 'With Metrics Dashboard you can visualize this project performance metrics', + wrapper = mountComponent(); + + expect(findMetricsVisibilitySettings().props('helpText')).toBe( + "Visualize the project's performance metrics.", ); }); it.each` - scenario | selectedOption | selectedOptionLabel - ${{ visibilityLevel: visibilityOptions.PRIVATE }} | ${String(featureAccessLevel.PROJECT_MEMBERS)} | ${'Only Project Members'} - ${{ operationsAccessLevel: featureAccessLevel.NOT_ENABLED }} | ${String(featureAccessLevel.NOT_ENABLED)} | ${'Enable feature to choose access level'} + scenario | selectedOption | selectedOptionLabel + ${{ currentSettings: { visibilityLevel: visibilityOptions.PRIVATE } }} | ${String(featureAccessLevel.PROJECT_MEMBERS)} | ${'Only Project Members'} + ${{ currentSettings: { operationsAccessLevel: featureAccessLevel.NOT_ENABLED } }} | ${String(featureAccessLevel.NOT_ENABLED)} | ${'Enable feature to choose access level'} `( 'should disable the metrics visibility dropdown when #scenario', ({ scenario, selectedOption, selectedOptionLabel }) => { - wrapper = overrideCurrentSettings(scenario, {}, mount); + wrapper = mountComponent(scenario, mount); - const select = wrapper.find({ ref: 'metrics-visibility-settings' }).find('select'); + const select = findMetricsVisibilitySettings().find('select'); const option = select.find('option'); expect(select.attributes('disabled')).toBe('disabled'); @@ -556,31 +515,29 @@ describe('Settings Panel', () => { describe('Settings panel with feature flags', () => { describe('Allow edit of commit message', () => { - it('should show the allow editing of commit messages checkbox', async () => { + it('should show the allow editing of commit messages checkbox', () => { wrapper = mountComponent({ glFeatures: { allowEditingCommitMessages: true }, }); - await wrapper.vm.$nextTick(); - - expect(wrapper.find({ ref: 'allow-editing-commit-messages' }).exists()).toBe(true); + expect(findAllowEditingCommitMessages()).toBe(true); }); }); }); describe('Analytics', () => { - it('should show the analytics toggle', async () => { - await wrapper.vm.$nextTick(); + it('should show the analytics toggle', () => { + wrapper = mountComponent(); expect(findAnalyticsRow().exists()).toBe(true); }); }); describe('Operations', () => { - it('should show the operations toggle', async () => { - await wrapper.vm.$nextTick(); + it('should show the operations toggle', () => { + wrapper = mountComponent(); - expect(wrapper.find({ ref: 'operations-settings' }).exists()).toBe(true); + expect(findOperationsSettings().exists()).toBe(true); }); }); }); |