diff options
Diffstat (limited to 'spec/frontend/pages')
10 files changed, 204 insertions, 212 deletions
diff --git a/spec/frontend/pages/dashboard/todos/index/todos_spec.js b/spec/frontend/pages/dashboard/todos/index/todos_spec.js index 3a9b59f291c..03aed7454e3 100644 --- a/spec/frontend/pages/dashboard/todos/index/todos_spec.js +++ b/spec/frontend/pages/dashboard/todos/index/todos_spec.js @@ -1,5 +1,4 @@ import MockAdapter from 'axios-mock-adapter'; -import $ from 'jquery'; import { loadHTMLFixture, resetHTMLFixture } from 'helpers/fixtures'; import waitForPromises from 'helpers/wait_for_promises'; import '~/lib/utils/common_utils'; @@ -54,22 +53,28 @@ describe('Todos', () => { let metakeyEvent; beforeEach(() => { - metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); + metakeyEvent = new MouseEvent('click', { ctrlKey: true }); windowOpenSpy = jest.spyOn(window, 'open').mockImplementation(() => {}); }); it('opens the todo url in another tab', () => { const todoLink = todoItem.dataset.url; - $('.todos-list .todo').trigger(metakeyEvent); + document.querySelectorAll('.todos-list .todo').forEach((el) => { + el.dispatchEvent(metakeyEvent); + }); expect(visitUrl).not.toHaveBeenCalled(); expect(windowOpenSpy).toHaveBeenCalledWith(todoLink, '_blank'); }); it('run native funcionality when avatar is clicked', () => { - $('.todos-list a').on('click', (e) => e.preventDefault()); - $('.todos-list img').trigger(metakeyEvent); + document.querySelectorAll('.todos-list a').forEach((el) => { + el.addEventListener('click', (e) => e.preventDefault()); + }); + document.querySelectorAll('.todos-list img').forEach((el) => { + el.dispatchEvent(metakeyEvent); + }); expect(visitUrl).not.toHaveBeenCalled(); expect(windowOpenSpy).not.toHaveBeenCalled(); @@ -88,7 +93,7 @@ describe('Todos', () => { .onDelete(path) .replyOnce(200, { count: TEST_COUNT_BIG, done_count: TEST_DONE_COUNT_BIG }); onToggleSpy = jest.fn(); - $(document).on('todo:toggle', onToggleSpy); + document.addEventListener('todo:toggle', onToggleSpy); // Act el.click(); @@ -98,7 +103,13 @@ describe('Todos', () => { }); it('dispatches todo:toggle', () => { - expect(onToggleSpy).toHaveBeenCalledWith(expect.anything(), TEST_COUNT_BIG); + expect(onToggleSpy).toHaveBeenCalledWith( + expect.objectContaining({ + detail: { + count: TEST_COUNT_BIG, + }, + }), + ); }); it('updates pending text', () => { diff --git a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js index efbfd83a071..2a0fde45384 100644 --- a/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js +++ b/spec/frontend/pages/projects/forks/new/components/fork_form_spec.js @@ -400,10 +400,6 @@ describe('ForkForm component', () => { ); }; - beforeEach(() => { - setupComponent(); - }); - const selectedMockNamespaceIndex = 1; const namespaceId = MOCK_NAMESPACES_RESPONSE[selectedMockNamespaceIndex].id; @@ -425,10 +421,14 @@ describe('ForkForm component', () => { it('does not make POST request', async () => { jest.spyOn(axios, 'post'); + setupComponent(); + expect(axios.post).not.toHaveBeenCalled(); }); it('does not redirect the current page', async () => { + setupComponent(); + await submitForm(); expect(urlUtility.redirectTo).not.toHaveBeenCalled(); @@ -452,13 +452,10 @@ describe('ForkForm component', () => { }); describe('with valid form', () => { - beforeEach(() => { - fillForm(); - }); - it('make POST request with project param', async () => { jest.spyOn(axios, 'post'); + setupComponent(); await submitForm(); const { @@ -486,6 +483,7 @@ describe('ForkForm component', () => { const webUrl = `new/fork-project`; jest.spyOn(axios, 'post').mockResolvedValue({ data: { web_url: webUrl } }); + setupComponent(); await submitForm(); expect(urlUtility.redirectTo).toHaveBeenCalledWith(webUrl); @@ -496,6 +494,7 @@ describe('ForkForm component', () => { jest.spyOn(axios, 'post').mockRejectedValue(dummyError); + setupComponent(); await submitForm(); expect(urlUtility.redirectTo).not.toHaveBeenCalled(); diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap index 005b8968383..aab78c99190 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap +++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_spec.js.snap @@ -85,8 +85,6 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > @@ -105,7 +103,8 @@ exports[`Learn GitLab renders correctly 1`] = ` </svg> Invite your colleagues - + + <!----> </span> <!----> @@ -114,8 +113,6 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > @@ -133,8 +130,9 @@ exports[`Learn GitLab renders correctly 1`] = ` /> </svg> - Create or import a repository - + Create a repository + + <!----> </span> <!----> @@ -143,23 +141,23 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Set up CI/CD" - href="http://example.com/" - target="_self" - > - - Set up CI/CD - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="set_up_your_first_project_s_ci_cd" + href="http://example.com/" + target="_self" + > + Set up your first project's CI/CD + </a> + + <!----> + </div> <!----> </div> @@ -167,24 +165,24 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Start a free Ultimate trial" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Start a free Ultimate trial - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="start_a_free_trial_of_gitlab_ultimate" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + Start a free trial of GitLab Ultimate + </a> + + <!----> + </div> <!----> </div> @@ -193,30 +191,30 @@ exports[`Learn GitLab renders correctly 1`] = ` class="gl-mb-4" > <div - class="gl-font-style-italic gl-text-gray-500" - data-testid="trial-only" - > - - Trial only - - </div> - - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Add code owners" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Add code owners - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="add_code_owners" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + Add code owners + </a> + + <span + class="gl-font-style-italic gl-text-gray-500" + data-testid="trial-only" + > + + - Included in trial + + </span> + </div> <!----> </div> @@ -225,30 +223,30 @@ exports[`Learn GitLab renders correctly 1`] = ` class="gl-mb-4" > <div - class="gl-font-style-italic gl-text-gray-500" - data-testid="trial-only" - > - - Trial only - - </div> - - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Add merge request approval" - href="http://example.com/" - rel="noopener noreferrer" - target="_blank" - > - - Add merge request approval - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="enable_require_merge_approvals" + href="http://example.com/" + rel="noopener noreferrer" + target="_blank" + > + Enable require merge approvals + </a> + + <span + class="gl-font-style-italic gl-text-gray-500" + data-testid="trial-only" + > + + - Included in trial + + </span> + </div> <!----> </div> @@ -290,23 +288,23 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Create an issue" - href="http://example.com/" - target="_self" - > - - Create an issue - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="create_an_issue" + href="http://example.com/" + target="_self" + > + Create an issue + </a> + + <!----> + </div> <!----> </div> @@ -314,23 +312,23 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Submit a merge request" - href="http://example.com/" - target="_self" - > - - Submit a merge request - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="submit_a_merge_request_mr" + href="http://example.com/" + target="_self" + > + Submit a merge request (MR) + </a> + + <!----> + </div> <!----> </div> @@ -372,24 +370,24 @@ exports[`Learn GitLab renders correctly 1`] = ` <div class="gl-mb-4" > - <!----> - <div class="flex align-items-center" > - <a - class="gl-link" - data-testid="uncompleted-learn-gitlab-link" - data-track-action="click_link" - data-track-label="Run a Security scan using CI/CD" - href="https://docs.gitlab.com/ee/foobar/" - rel="noopener noreferrer" - target="_blank" - > - - Run a Security scan using CI/CD - - </a> + <div> + <a + class="gl-link" + data-testid="uncompleted-learn-gitlab-link" + data-track-action="click_link" + data-track-label="run_a_security_scan_using_ci_cd" + href="https://docs.gitlab.com/ee/foobar/" + rel="noopener noreferrer" + target="_blank" + > + Run a Security scan using CI/CD + </a> + + <!----> + </div> <!----> </div> diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js deleted file mode 100644 index ad4bc826a9d..00000000000 --- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_info_card_spec.js +++ /dev/null @@ -1,57 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import LearnGitlabInfoCard from '~/pages/projects/learn_gitlab/components/learn_gitlab_info_card.vue'; - -const defaultProps = { - title: 'Create Repository', - description: 'Some description', - actionLabel: 'Create Repository now', - url: 'https://example.com', - completed: false, - svg: 'https://example.com/illustration.svg', -}; - -describe('Learn GitLab Info Card', () => { - let wrapper; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - const createWrapper = (props = {}) => { - wrapper = shallowMount(LearnGitlabInfoCard, { - propsData: { ...defaultProps, ...props }, - }); - }; - - it('renders no icon when not completed', () => { - createWrapper({ completed: false }); - - expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(false); - }); - - it('renders the completion icon when completed', () => { - createWrapper({ completed: true }); - - expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true); - }); - - it('renders no trial only when it is not required', () => { - createWrapper(); - - expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false); - }); - - it('renders trial only when trial is required', () => { - createWrapper({ trialRequired: true }); - - expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(true); - }); - - it('renders completion icon when completed a trial-only feature', () => { - createWrapper({ trialRequired: true, completed: true }); - - expect(wrapper.find('[data-testid="trial-only"]').exists()).toBe(false); - expect(wrapper.find('[data-testid="completed-icon"]').exists()).toBe(true); - }); -}); diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js index d9aff37f703..897cbf5eaa4 100644 --- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js +++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_link_spec.js @@ -119,7 +119,7 @@ describe('Learn GitLab Section Link', () => { findUncompletedLink().trigger('click'); expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', { - label: 'Run a Security scan using CI/CD', + label: 'run_a_security_scan_using_ci_cd', }); unmockTracking(); @@ -164,7 +164,7 @@ describe('Learn GitLab Section Link', () => { triggerEvent(openInviteMembesrModalLink().element); expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_link', { - label: 'Invite your colleagues', + label: 'invite_your_colleagues', property: 'Growth::Activation::Experiment::InviteForHelpContinuousOnboarding', }); @@ -203,7 +203,7 @@ describe('Learn GitLab Section Link', () => { videoTutorialLink().trigger('click'); expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_video_link', { - label: 'Add code owners', + label: 'add_code_owners', property: 'Growth::Conversion::Experiment::LearnGitLab', context: { data: { diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_trial_card_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_trial_card_spec.js new file mode 100644 index 00000000000..6ab57e31fed --- /dev/null +++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_trial_card_spec.js @@ -0,0 +1,12 @@ +import { shallowMount } from '@vue/test-utils'; +import IncludedInTrialIndicator from '~/pages/projects/learn_gitlab/components/included_in_trial_indicator.vue'; + +describe('Learn GitLab Trial Card', () => { + it('renders correctly', () => { + const wrapper = shallowMount(IncludedInTrialIndicator); + + expect(wrapper.text()).toEqual('- Included in trial'); + + wrapper.destroy(); + }); +}); diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js index d5b4b3c22d8..99df5b58d90 100644 --- a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js +++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js @@ -31,10 +31,10 @@ describe('Interval Pattern Input Component', () => { wrapper.findAll('input[type="radio"]').wrappers.find((x) => x.element.checked); const findIcon = () => wrapper.findComponent(GlIcon); const findSelectedRadioKey = () => findSelectedRadio()?.attributes('data-testid'); - const selectEveryDayRadio = () => findEveryDayRadio().trigger('click'); - const selectEveryWeekRadio = () => findEveryWeekRadio().trigger('click'); - const selectEveryMonthRadio = () => findEveryMonthRadio().trigger('click'); - const selectCustomRadio = () => findCustomRadio().trigger('click'); + const selectEveryDayRadio = () => findEveryDayRadio().setChecked(true); + const selectEveryWeekRadio = () => findEveryWeekRadio().setChecked(true); + const selectEveryMonthRadio = () => findEveryMonthRadio().setChecked(true); + const selectCustomRadio = () => findCustomRadio().setChecked(true); const createWrapper = (props = {}, data = {}) => { if (wrapper) { 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 46f83ac89e5..85660d09baa 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 @@ -51,6 +51,7 @@ const defaultProps = { requestCveAvailable: true, confirmationPhrase: 'my-fake-project', showVisibilityConfirmModal: false, + membersPagePath: '/my-fake-project/-/project_members', }; const FEATURE_ACCESS_LEVEL_ANONYMOUS = 30; @@ -59,7 +60,7 @@ describe('Settings Panel', () => { let wrapper; const mountComponent = ( - { currentSettings = {}, glFeatures = {}, ...customProps } = {}, + { currentSettings = {}, glFeatures = {}, stubs = {}, ...customProps } = {}, mountFn = shallowMount, ) => { const propsData = { @@ -76,6 +77,7 @@ describe('Settings Panel', () => { ...glFeatures, }, }, + stubs, }); }; @@ -176,7 +178,7 @@ describe('Settings Panel', () => { ); it('should set the visibility level description based upon the selected visibility level', () => { - wrapper = mountComponent(); + wrapper = mountComponent({ stubs: { GlSprintf } }); findProjectVisibilityLevelInput().setValue(visibilityOptions.INTERNAL); diff --git a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js index 365bb878485..108f816fe01 100644 --- a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js +++ b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js @@ -7,8 +7,10 @@ import { renderGFM } from '~/pages/shared/wikis/render_gfm_facade'; import axios from '~/lib/utils/axios_utils'; import httpStatus from '~/lib/utils/http_status'; import waitForPromises from 'helpers/wait_for_promises'; +import { handleLocationHash } from '~/lib/utils/common_utils'; jest.mock('~/pages/shared/wikis/render_gfm_facade'); +jest.mock('~/lib/utils/common_utils'); describe('pages/shared/wikis/components/wiki_content', () => { const PATH = '/test'; @@ -76,6 +78,12 @@ describe('pages/shared/wikis/components/wiki_content', () => { expect(renderGFM).toHaveBeenCalledWith(wrapper.element); }); + + it('handles hash after render', async () => { + await nextTick(); + + expect(handleLocationHash).toHaveBeenCalled(); + }); }); describe('when loading content fails', () => { diff --git a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js index d7f8dc3c98e..a5db10d106d 100644 --- a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js +++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js @@ -1,12 +1,14 @@ import { nextTick } from 'vue'; -import { GlAlert, GlButton } from '@gitlab/ui'; +import { GlAlert, GlButton, GlFormInput, GlFormGroup } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; import { mockTracking } from 'helpers/tracking_helper'; +import { stubComponent } from 'helpers/stub_component'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; import ContentEditor from '~/content_editor/components/content_editor.vue'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import WikiForm from '~/pages/shared/wikis/components/wiki_form.vue'; import { CONTENT_EDITOR_LOADED_ACTION, @@ -37,6 +39,7 @@ describe('WikiForm', () => { const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link'); const findContentEditor = () => wrapper.findComponent(ContentEditor); const findClassicEditor = () => wrapper.findComponent(MarkdownField); + const findLocalStorageSync = () => wrapper.find(LocalStorageSync); const setFormat = (value) => { const format = findFormat(); @@ -103,6 +106,9 @@ describe('WikiForm', () => { MarkdownField, GlAlert, GlButton, + LocalStorageSync: stubComponent(LocalStorageSync), + GlFormInput, + GlFormGroup, }, }), ); @@ -128,7 +134,7 @@ describe('WikiForm', () => { `( 'updates the commit message to $message when title is $title and persisted=$persisted', async ({ title, message, persisted }) => { - createWrapper({ persisted }); + createWrapper({ persisted, mountFn: mount }); await findTitle().setValue(title); @@ -137,7 +143,7 @@ describe('WikiForm', () => { ); it('sets the commit message to "Update My page" when the page first loads when persisted', async () => { - createWrapper({ persisted: true }); + createWrapper({ persisted: true, mountFn: mount }); await nextTick(); @@ -157,7 +163,7 @@ describe('WikiForm', () => { ${'asciidoc'} | ${false} | ${'hides'} ${'org'} | ${false} | ${'hides'} `('$action preview in the markdown field when format is $format', async ({ format, enabled }) => { - createWrapper(); + createWrapper({ mountFn: mount }); await setFormat(format); @@ -254,7 +260,7 @@ describe('WikiForm', () => { `( "when title='$title', content='$content', then the button is $buttonState'", async ({ title, content, disabledAttr }) => { - createWrapper(); + createWrapper({ mountFn: mount }); await findTitle().setValue(title); await findContent().setValue(content); @@ -291,7 +297,7 @@ describe('WikiForm', () => { describe('toggle editing mode control', () => { beforeEach(() => { - createWrapper(); + createWrapper({ mountFn: mount }); }); it.each` @@ -330,6 +336,19 @@ describe('WikiForm', () => { }); }); + describe('markdown editor type persistance', () => { + it('loads content editor by default if it is persisted in local storage', async () => { + expect(findClassicEditor().exists()).toBe(true); + expect(findContentEditor().exists()).toBe(false); + + // enable content editor + await findLocalStorageSync().vm.$emit('input', true); + + expect(findContentEditor().exists()).toBe(true); + expect(findClassicEditor().exists()).toBe(false); + }); + }); + describe('when content editor is active', () => { let mockContentEditor; @@ -374,7 +393,7 @@ describe('WikiForm', () => { }); describe('wiki content editor', () => { - describe('clicking "use new editor": editor fails to load', () => { + describe('clicking "Edit rich text": editor fails to load', () => { beforeEach(async () => { createWrapper({ mountFn: mount }); mock.onPost(/preview-markdown/).reply(400); @@ -401,7 +420,7 @@ describe('WikiForm', () => { }); }); - describe('clicking "use new editor": editor loads successfully', () => { + describe('clicking "Edit rich text": editor loads successfully', () => { beforeEach(async () => { createWrapper({ persisted: true, mountFn: mount }); |