diff options
Diffstat (limited to 'spec/frontend/ide/components')
40 files changed, 259 insertions, 246 deletions
diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js index 39fe2c7e723..a97e883a8bf 100644 --- a/spec/frontend/ide/components/activity_bar_spec.js +++ b/spec/frontend/ide/components/activity_bar_spec.js @@ -1,86 +1,82 @@ -import Vue, { nextTick } from 'vue'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; +import { GlBadge } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import ActivityBar from '~/ide/components/activity_bar.vue'; import { leftSidebarViews } from '~/ide/constants'; import { createStore } from '~/ide/stores'; -describe('IDE activity bar', () => { - const Component = Vue.extend(ActivityBar); - let vm; +describe('IDE ActivityBar component', () => { + let wrapper; let store; - const findChangesBadge = () => vm.$el.querySelector('.badge'); + const findChangesBadge = () => wrapper.findComponent(GlBadge); - beforeEach(() => { + const mountComponent = (state) => { store = createStore(); - - Vue.set(store.state.projects, 'abcproject', { - web_url: 'testing', + store.replaceState({ + ...store.state, + projects: { abcproject: { web_url: 'testing' } }, + currentProjectId: 'abcproject', + ...state, }); - Vue.set(store.state, 'currentProjectId', 'abcproject'); - vm = createComponentWithStore(Component, store); - }); + wrapper = shallowMount(ActivityBar, { store }); + }; afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('updateActivityBarView', () => { beforeEach(() => { - jest.spyOn(vm, 'updateActivityBarView').mockImplementation(() => {}); - - vm.$mount(); + mountComponent(); + jest.spyOn(wrapper.vm, 'updateActivityBarView').mockImplementation(() => {}); }); it('calls updateActivityBarView with edit value on click', () => { - vm.$el.querySelector('.js-ide-edit-mode').click(); + wrapper.find('.js-ide-edit-mode').trigger('click'); - expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name); + expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.edit.name); }); it('calls updateActivityBarView with commit value on click', () => { - vm.$el.querySelector('.js-ide-commit-mode').click(); + wrapper.find('.js-ide-commit-mode').trigger('click'); - expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name); + expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.commit.name); }); it('calls updateActivityBarView with review value on click', () => { - vm.$el.querySelector('.js-ide-review-mode').click(); + wrapper.find('.js-ide-review-mode').trigger('click'); - expect(vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.review.name); + expect(wrapper.vm.updateActivityBarView).toHaveBeenCalledWith(leftSidebarViews.review.name); }); }); describe('active item', () => { - beforeEach(() => { - vm.$mount(); - }); - it('sets edit item active', () => { - expect(vm.$el.querySelector('.js-ide-edit-mode').classList).toContain('active'); + mountComponent(); + + expect(wrapper.find('.js-ide-edit-mode').classes()).toContain('active'); }); - it('sets commit item active', async () => { - vm.$store.state.currentActivityView = leftSidebarViews.commit.name; + it('sets commit item active', () => { + mountComponent({ currentActivityView: leftSidebarViews.commit.name }); - await nextTick(); - expect(vm.$el.querySelector('.js-ide-commit-mode').classList).toContain('active'); + expect(wrapper.find('.js-ide-commit-mode').classes()).toContain('active'); }); }); describe('changes badge', () => { it('is rendered when files are staged', () => { - store.state.stagedFiles = [{ path: '/path/to/file' }]; - vm.$mount(); + mountComponent({ stagedFiles: [{ path: '/path/to/file' }] }); - expect(findChangesBadge()).toBeTruthy(); - expect(findChangesBadge().textContent.trim()).toBe('1'); + expect(findChangesBadge().exists()).toBe(true); + expect(findChangesBadge().text()).toBe('1'); }); it('is not rendered when no changes are present', () => { - vm.$mount(); - expect(findChangesBadge()).toBeFalsy(); + mountComponent(); + + expect(findChangesBadge().exists()).toBe(false); }); }); }); diff --git a/spec/frontend/ide/components/branches/item_spec.js b/spec/frontend/ide/components/branches/item_spec.js index 271d0600e16..3dbd1210916 100644 --- a/spec/frontend/ide/components/branches/item_spec.js +++ b/spec/frontend/ide/components/branches/item_spec.js @@ -44,8 +44,8 @@ describe('IDE branch item', () => { }); it('renders branch name and timeago', () => { expect(wrapper.text()).toContain(TEST_BRANCH.name); - expect(wrapper.find(Timeago).props('time')).toBe(TEST_BRANCH.committedDate); - expect(wrapper.find(GlIcon).exists()).toBe(false); + expect(wrapper.findComponent(Timeago).props('time')).toBe(TEST_BRANCH.committedDate); + expect(wrapper.findComponent(GlIcon).exists()).toBe(false); }); it('renders link to branch', () => { @@ -60,6 +60,6 @@ describe('IDE branch item', () => { it('renders icon if is not active', () => { createComponent({ isActive: true }); - expect(wrapper.find(GlIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlIcon).exists()).toBe(true); }); }); diff --git a/spec/frontend/ide/components/branches/search_list_spec.js b/spec/frontend/ide/components/branches/search_list_spec.js index b6e3274153a..bbde45d700f 100644 --- a/spec/frontend/ide/components/branches/search_list_spec.js +++ b/spec/frontend/ide/components/branches/search_list_spec.js @@ -47,7 +47,7 @@ describe('IDE branches search list', () => { it('renders loading icon when `isLoading` is true', () => { createComponent({ isLoading: true }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('renders branches not found when search is not empty and branches list is empty', async () => { @@ -61,7 +61,7 @@ describe('IDE branches search list', () => { describe('with branches', () => { it('renders list', () => { createComponent({ branches }); - const items = wrapper.findAll(Item); + const items = wrapper.findAllComponents(Item); expect(items.length).toBe(branches.length); }); @@ -69,7 +69,7 @@ describe('IDE branches search list', () => { it('renders check next to active branch', () => { const activeBranch = 'regular'; createComponent({ branches }, activeBranch); - const items = wrapper.findAll(Item).filter((w) => w.props('isActive')); + const items = wrapper.findAllComponents(Item).filter((w) => w.props('isActive')); expect(items.length).toBe(1); expect(items.at(0).props('item').name).toBe(activeBranch); diff --git a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js index d77e8e3d04c..f6d5833edee 100644 --- a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js @@ -26,8 +26,8 @@ describe('IDE commit editor header', () => { }); }; - const findDiscardModal = () => wrapper.find({ ref: 'discardModal' }); - const findDiscardButton = () => wrapper.find({ ref: 'discardButton' }); + const findDiscardModal = () => wrapper.findComponent({ ref: 'discardModal' }); + const findDiscardButton = () => wrapper.findComponent({ ref: 'discardButton' }); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js index 28f62a9775a..a8ee81afa0b 100644 --- a/spec/frontend/ide/components/commit_sidebar/form_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js @@ -58,7 +58,7 @@ describe('IDE commit form', () => { }); const findForm = () => wrapper.find('form'); const submitForm = () => findForm().trigger('submit'); - const findCommitMessageInput = () => wrapper.find(CommitMessageField); + const findCommitMessageInput = () => wrapper.findComponent(CommitMessageField); const setCommitMessageInput = (val) => findCommitMessageInput().vm.$emit('input', val); const findDiscardDraftButton = () => wrapper.find('[data-testid="discard-draft"]'); @@ -302,7 +302,7 @@ describe('IDE commit form', () => { ${() => createCodeownersCommitError('test message')} | ${{ actionPrimary: { text: 'Create new branch' } }} ${createUnexpectedCommitError} | ${{ actionPrimary: null }} `('opens error modal if commitError with $error', async ({ createError, props }) => { - const modal = wrapper.find(GlModal); + const modal = wrapper.findComponent(GlModal); modal.vm.show = jest.fn(); const error = createError(); @@ -343,7 +343,7 @@ describe('IDE commit form', () => { await nextTick(); - wrapper.find(GlModal).vm.$emit('ok'); + wrapper.findComponent(GlModal).vm.$emit('ok'); await waitForPromises(); diff --git a/spec/frontend/ide/components/error_message_spec.js b/spec/frontend/ide/components/error_message_spec.js index 17568158131..204d39de741 100644 --- a/spec/frontend/ide/components/error_message_spec.js +++ b/spec/frontend/ide/components/error_message_spec.js @@ -105,7 +105,7 @@ describe('IDE error message component', () => { findActionButton().trigger('click'); await nextTick(); - expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(true); resolveAction(); }); @@ -113,7 +113,7 @@ describe('IDE error message component', () => { findActionButton().trigger('click'); await actionMock(); await nextTick(); - expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(false); }); }); }); diff --git a/spec/frontend/ide/components/file_templates/dropdown_spec.js b/spec/frontend/ide/components/file_templates/dropdown_spec.js index e54b322b9db..ee90d87357c 100644 --- a/spec/frontend/ide/components/file_templates/dropdown_spec.js +++ b/spec/frontend/ide/components/file_templates/dropdown_spec.js @@ -94,7 +94,7 @@ describe('IDE file templates dropdown component', () => { it('shows loader when isLoading is true', () => { createComponent({ props: defaultAsyncProps, state: { isLoading: true } }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('renders templates', () => { diff --git a/spec/frontend/ide/components/ide_file_row_spec.js b/spec/frontend/ide/components/ide_file_row_spec.js index baf3d7cca9d..aa66224fa19 100644 --- a/spec/frontend/ide/components/ide_file_row_spec.js +++ b/spec/frontend/ide/components/ide_file_row_spec.js @@ -39,8 +39,8 @@ describe('Ide File Row component', () => { wrapper = null; }); - const findFileRowExtra = () => wrapper.find(FileRowExtra); - const findFileRow = () => wrapper.find(FileRow); + const findFileRowExtra = () => wrapper.findComponent(FileRowExtra); + const findFileRow = () => wrapper.findComponent(FileRow); const hasDropdownOpen = () => findFileRowExtra().props('dropdownOpen'); it('fileRow component has listeners', async () => { diff --git a/spec/frontend/ide/components/ide_project_header_spec.js b/spec/frontend/ide/components/ide_project_header_spec.js index fc39651c661..d0636352a3f 100644 --- a/spec/frontend/ide/components/ide_project_header_spec.js +++ b/spec/frontend/ide/components/ide_project_header_spec.js @@ -3,6 +3,7 @@ import IDEProjectHeader from '~/ide/components/ide_project_header.vue'; import ProjectAvatar from '~/vue_shared/components/project_avatar.vue'; const mockProject = { + id: 1, name: 'test proj', avatar_url: 'https://gitlab.com', path_with_namespace: 'path/with-namespace', @@ -30,6 +31,7 @@ describe('IDE project header', () => { it('renders ProjectAvatar with correct props', () => { expect(findProjectAvatar().props()).toMatchObject({ + projectId: mockProject.id, projectName: mockProject.name, projectAvatarUrl: mockProject.avatar_url, }); diff --git a/spec/frontend/ide/components/ide_review_spec.js b/spec/frontend/ide/components/ide_review_spec.js index 13d20761263..0759f957374 100644 --- a/spec/frontend/ide/components/ide_review_spec.js +++ b/spec/frontend/ide/components/ide_review_spec.js @@ -42,7 +42,7 @@ describe('IDE review mode', () => { let inititializeSpy; beforeEach(async () => { - inititializeSpy = jest.spyOn(wrapper.find(IdeReview).vm, 'initialize'); + inititializeSpy = jest.spyOn(wrapper.findComponent(IdeReview).vm, 'initialize'); store.state.viewer = 'editor'; await wrapper.vm.reactivate(); @@ -85,7 +85,7 @@ describe('IDE review mode', () => { }); it('renders edit dropdown', () => { - expect(wrapper.find(EditorModeDropdown).exists()).toBe(true); + expect(wrapper.findComponent(EditorModeDropdown).exists()).toBe(true); }); it('renders merge request link & IID', async () => { diff --git a/spec/frontend/ide/components/ide_side_bar_spec.js b/spec/frontend/ide/components/ide_side_bar_spec.js index 4469c3fc901..4784d6c516f 100644 --- a/spec/frontend/ide/components/ide_side_bar_spec.js +++ b/spec/frontend/ide/components/ide_side_bar_spec.js @@ -47,32 +47,32 @@ describe('IdeSidebar', () => { await nextTick(); - expect(wrapper.findAll(GlSkeletonLoader)).toHaveLength(3); + expect(wrapper.findAllComponents(GlSkeletonLoader)).toHaveLength(3); }); describe('deferred rendering components', () => { it('fetches components on demand', async () => { wrapper = createComponent(); - expect(wrapper.find(IdeTree).exists()).toBe(true); - expect(wrapper.find(IdeReview).exists()).toBe(false); - expect(wrapper.find(RepoCommitSection).exists()).toBe(false); + expect(wrapper.findComponent(IdeTree).exists()).toBe(true); + expect(wrapper.findComponent(IdeReview).exists()).toBe(false); + expect(wrapper.findComponent(RepoCommitSection).exists()).toBe(false); store.state.currentActivityView = leftSidebarViews.review.name; await waitForPromises(); await nextTick(); - expect(wrapper.find(IdeTree).exists()).toBe(false); - expect(wrapper.find(IdeReview).exists()).toBe(true); - expect(wrapper.find(RepoCommitSection).exists()).toBe(false); + expect(wrapper.findComponent(IdeTree).exists()).toBe(false); + expect(wrapper.findComponent(IdeReview).exists()).toBe(true); + expect(wrapper.findComponent(RepoCommitSection).exists()).toBe(false); store.state.currentActivityView = leftSidebarViews.commit.name; await waitForPromises(); await nextTick(); - expect(wrapper.find(IdeTree).exists()).toBe(false); - expect(wrapper.find(IdeReview).exists()).toBe(false); - expect(wrapper.find(RepoCommitSection).exists()).toBe(true); + expect(wrapper.findComponent(IdeTree).exists()).toBe(false); + expect(wrapper.findComponent(IdeReview).exists()).toBe(false); + expect(wrapper.findComponent(RepoCommitSection).exists()).toBe(true); }); it.each` view | tree | review | commit @@ -86,23 +86,23 @@ describe('IdeSidebar', () => { await waitForPromises(); await nextTick(); - expect(wrapper.find(IdeTree).exists()).toBe(tree); - expect(wrapper.find(IdeReview).exists()).toBe(review); - expect(wrapper.find(RepoCommitSection).exists()).toBe(commit); + expect(wrapper.findComponent(IdeTree).exists()).toBe(tree); + expect(wrapper.findComponent(IdeReview).exists()).toBe(review); + expect(wrapper.findComponent(RepoCommitSection).exists()).toBe(commit); }); }); it('keeps the current activity view components alive', async () => { wrapper = createComponent(); - const ideTreeComponent = wrapper.find(IdeTree).element; + const ideTreeComponent = wrapper.findComponent(IdeTree).element; store.state.currentActivityView = leftSidebarViews.commit.name; await waitForPromises(); await nextTick(); - expect(wrapper.find(IdeTree).exists()).toBe(false); - expect(wrapper.find(RepoCommitSection).exists()).toBe(true); + expect(wrapper.findComponent(IdeTree).exists()).toBe(false); + expect(wrapper.findComponent(RepoCommitSection).exists()).toBe(true); store.state.currentActivityView = leftSidebarViews.edit.name; @@ -110,6 +110,6 @@ describe('IdeSidebar', () => { await nextTick(); // reference to the elements remains the same, meaning the components were kept alive - expect(wrapper.find(IdeTree).element).toEqual(ideTreeComponent); + expect(wrapper.findComponent(IdeTree).element).toEqual(ideTreeComponent); }); }); diff --git a/spec/frontend/ide/components/ide_sidebar_nav_spec.js b/spec/frontend/ide/components/ide_sidebar_nav_spec.js index 2ea0c250794..80e8aba4072 100644 --- a/spec/frontend/ide/components/ide_sidebar_nav_spec.js +++ b/spec/frontend/ide/components/ide_sidebar_nav_spec.js @@ -8,12 +8,12 @@ import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; const TEST_TABS = [ { title: 'Lorem', - icon: 'angle-up', + icon: 'chevron-lg-up', views: [{ name: 'lorem-1' }, { name: 'lorem-2' }], }, { title: 'Ipsum', - icon: 'angle-down', + icon: 'chevron-lg-down', views: [{ name: 'ipsum-1' }, { name: 'ipsum-2' }], }, ]; @@ -55,7 +55,7 @@ describe('ide/components/ide_sidebar_nav', () => { ariaLabel: button.attributes('aria-label'), classes: button.classes(), qaSelector: button.attributes('data-qa-selector'), - icon: button.find(GlIcon).props('name'), + icon: button.findComponent(GlIcon).props('name'), tooltip: getBinding(button.element, 'tooltip').value, }; }); diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js index 9172c69b10e..48c670757a2 100644 --- a/spec/frontend/ide/components/ide_spec.js +++ b/spec/frontend/ide/components/ide_spec.js @@ -82,7 +82,7 @@ describe('WebIDE', () => { await waitForPromises(); - expect(wrapper.find(ErrorMessage).exists()).toBe(exists); + expect(wrapper.findComponent(ErrorMessage).exists()).toBe(exists); }, ); }); diff --git a/spec/frontend/ide/components/ide_status_bar_spec.js b/spec/frontend/ide/components/ide_status_bar_spec.js index 17a5aa17b1f..e6e0ebaf1e8 100644 --- a/spec/frontend/ide/components/ide_status_bar_spec.js +++ b/spec/frontend/ide/components/ide_status_bar_spec.js @@ -1,8 +1,8 @@ +import { mount } from '@vue/test-utils'; import _ from 'lodash'; -import Vue, { nextTick } from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import IdeStatusBar from '~/ide/components/ide_status_bar.vue'; +import IdeStatusMR from '~/ide/components/ide_status_mr.vue'; import { rightSidebarViews } from '~/ide/constants'; import { createStore } from '~/ide/stores'; import { projectData } from '../mock_data'; @@ -13,42 +13,48 @@ const TEST_MERGE_REQUEST_URL = `${TEST_HOST}merge-requests/${TEST_MERGE_REQUEST_ jest.mock('~/lib/utils/poll'); -describe('ideStatusBar', () => { - let store; - let vm; +describe('IdeStatusBar component', () => { + let wrapper; + + const findMRStatus = () => wrapper.findComponent(IdeStatusMR); + + const mountComponent = (state = {}) => { + const store = createStore(); + store.replaceState({ + ...store.state, + currentBranchId: 'main', + currentProjectId: TEST_PROJECT_ID, + projects: { + ...store.state.projects, + [TEST_PROJECT_ID]: _.clone(projectData), + }, + ...state, + }); - const createComponent = () => { - vm = createComponentWithStore(Vue.extend(IdeStatusBar), store).$mount(); + wrapper = mount(IdeStatusBar, { store }); }; - const findMRStatus = () => vm.$el.querySelector('.js-ide-status-mr'); - - beforeEach(() => { - store = createStore(); - store.state.currentProjectId = TEST_PROJECT_ID; - store.state.projects[TEST_PROJECT_ID] = _.clone(projectData); - store.state.currentBranchId = 'main'; - }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); describe('default', () => { - beforeEach(() => { - createComponent(); - }); - it('triggers a setInterval', () => { - expect(vm.intervalId).not.toBe(null); + mountComponent(); + + expect(wrapper.vm.intervalId).not.toBe(null); }); it('renders the statusbar', () => { - expect(vm.$el.className).toBe('ide-status-bar'); + mountComponent(); + + expect(wrapper.classes()).toEqual(['ide-status-bar']); }); describe('commitAgeUpdate', () => { beforeEach(() => { - jest.spyOn(vm, 'commitAgeUpdate').mockImplementation(() => {}); + mountComponent(); + jest.spyOn(wrapper.vm, 'commitAgeUpdate').mockImplementation(() => {}); }); afterEach(() => { @@ -56,70 +62,82 @@ describe('ideStatusBar', () => { }); it('gets called every second', () => { - expect(vm.commitAgeUpdate).not.toHaveBeenCalled(); + expect(wrapper.vm.commitAgeUpdate).not.toHaveBeenCalled(); jest.advanceTimersByTime(1000); - expect(vm.commitAgeUpdate.mock.calls.length).toEqual(1); + expect(wrapper.vm.commitAgeUpdate.mock.calls).toHaveLength(1); jest.advanceTimersByTime(1000); - expect(vm.commitAgeUpdate.mock.calls.length).toEqual(2); + expect(wrapper.vm.commitAgeUpdate.mock.calls).toHaveLength(2); }); }); describe('getCommitPath', () => { it('returns the path to the commit details', () => { - expect(vm.getCommitPath('abc123de')).toBe('/commit/abc123de'); + mountComponent(); + + expect(wrapper.vm.getCommitPath('abc123de')).toBe('/commit/abc123de'); }); }); describe('pipeline status', () => { - it('opens right sidebar on clicking icon', async () => { - jest.spyOn(vm, 'openRightPane').mockImplementation(() => {}); - Vue.set(vm.$store.state.pipelines, 'latestPipeline', { - details: { - status: { - text: 'success', - details_path: 'test', - icon: 'status_success', + it('opens right sidebar on clicking icon', () => { + const pipelines = { + latestPipeline: { + details: { + status: { + text: 'success', + details_path: 'test', + icon: 'status_success', + }, + }, + commit: { + author_gravatar_url: 'www', }, }, - commit: { - author_gravatar_url: 'www', - }, - }); + }; + mountComponent({ pipelines }); + jest.spyOn(wrapper.vm, 'openRightPane').mockImplementation(() => {}); - await nextTick(); - vm.$el.querySelector('.ide-status-pipeline button').click(); + wrapper.find('button').trigger('click'); - expect(vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines); + expect(wrapper.vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines); }); }); it('does not show merge request status', () => { - expect(findMRStatus()).toBe(null); + mountComponent(); + + expect(findMRStatus().exists()).toBe(false); }); }); describe('with merge request in store', () => { beforeEach(() => { - store.state.projects[TEST_PROJECT_ID].mergeRequests = { - [TEST_MERGE_REQUEST_ID]: { - web_url: TEST_MERGE_REQUEST_URL, - references: { - short: `!${TEST_MERGE_REQUEST_ID}`, + const state = { + currentMergeRequestId: TEST_MERGE_REQUEST_ID, + projects: { + [TEST_PROJECT_ID]: { + ..._.clone(projectData), + mergeRequests: { + [TEST_MERGE_REQUEST_ID]: { + web_url: TEST_MERGE_REQUEST_URL, + references: { + short: `!${TEST_MERGE_REQUEST_ID}`, + }, + }, + }, }, }, }; - store.state.currentMergeRequestId = TEST_MERGE_REQUEST_ID; - - createComponent(); + mountComponent(state); }); it('shows merge request status', () => { - expect(findMRStatus().textContent.trim()).toEqual(`Merge request !${TEST_MERGE_REQUEST_ID}`); - expect(findMRStatus().querySelector('a').href).toEqual(TEST_MERGE_REQUEST_URL); + expect(findMRStatus().text()).toBe(`Merge request !${TEST_MERGE_REQUEST_ID}`); + expect(findMRStatus().find('a').attributes('href')).toBe(TEST_MERGE_REQUEST_URL); }); }); }); diff --git a/spec/frontend/ide/components/ide_status_list_spec.js b/spec/frontend/ide/components/ide_status_list_spec.js index 371fbc6becd..0b54e8b6afb 100644 --- a/spec/frontend/ide/components/ide_status_list_spec.js +++ b/spec/frontend/ide/components/ide_status_list_spec.js @@ -25,7 +25,7 @@ describe('ide/components/ide_status_list', () => { let store; let wrapper; - const findLink = () => wrapper.find(GlLink); + const findLink = () => wrapper.findComponent(GlLink); const createComponent = (options = {}) => { store = new Vuex.Store({ getters: { @@ -98,6 +98,6 @@ describe('ide/components/ide_status_list', () => { it('renders terminal sync status', () => { createComponent(); - expect(wrapper.find(TerminalSyncStatusSafe).exists()).toBe(true); + expect(wrapper.findComponent(TerminalSyncStatusSafe).exists()).toBe(true); }); }); diff --git a/spec/frontend/ide/components/ide_status_mr_spec.js b/spec/frontend/ide/components/ide_status_mr_spec.js index 0526d4653f8..0b9111c0e2a 100644 --- a/spec/frontend/ide/components/ide_status_mr_spec.js +++ b/spec/frontend/ide/components/ide_status_mr_spec.js @@ -14,8 +14,8 @@ describe('ide/components/ide_status_mr', () => { propsData: props, }); }; - const findIcon = () => wrapper.find(GlIcon); - const findLink = () => wrapper.find(GlLink); + const findIcon = () => wrapper.findComponent(GlIcon); + const findLink = () => wrapper.findComponent(GlLink); afterEach(() => { wrapper.destroy(); diff --git a/spec/frontend/ide/components/ide_tree_spec.js b/spec/frontend/ide/components/ide_tree_spec.js index 8465ef9f5f3..f00017a2736 100644 --- a/spec/frontend/ide/components/ide_tree_spec.js +++ b/spec/frontend/ide/components/ide_tree_spec.js @@ -41,7 +41,7 @@ describe('IdeTree', () => { let inititializeSpy; beforeEach(async () => { - inititializeSpy = jest.spyOn(wrapper.find(IdeTree).vm, 'initialize'); + inititializeSpy = jest.spyOn(wrapper.findComponent(IdeTree).vm, 'initialize'); store.state.viewer = 'diff'; await wrapper.vm.reactivate(); diff --git a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js index d632a34266a..5eb66f75978 100644 --- a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js +++ b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js @@ -27,7 +27,7 @@ describe('IDE job log scroll button', () => { beforeEach(() => createComponent({ direction })); it('returns proper icon name', () => { - expect(wrapper.find(GlIcon).props('name')).toBe(icon); + expect(wrapper.findComponent(GlIcon).props('name')).toBe(icon); }); it('returns proper title', () => { diff --git a/spec/frontend/ide/components/jobs/list_spec.js b/spec/frontend/ide/components/jobs/list_spec.js index cb2c9f8f04f..b4c7eb51781 100644 --- a/spec/frontend/ide/components/jobs/list_spec.js +++ b/spec/frontend/ide/components/jobs/list_spec.js @@ -58,29 +58,29 @@ describe('IDE stages list', () => { it('renders loading icon when no stages & loading', () => { createComponent({ loading: true, stages: [] }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('renders stages components for each stage', () => { createComponent({ stages }); - expect(wrapper.findAll(Stage).length).toBe(stages.length); + expect(wrapper.findAllComponents(Stage).length).toBe(stages.length); }); it('triggers fetchJobs action when stage emits fetch event', () => { createComponent({ stages }); - wrapper.find(Stage).vm.$emit('fetch'); + wrapper.findComponent(Stage).vm.$emit('fetch'); expect(storeActions.fetchJobs).toHaveBeenCalled(); }); it('triggers toggleStageCollapsed action when stage emits toggleCollapsed event', () => { createComponent({ stages }); - wrapper.find(Stage).vm.$emit('toggleCollapsed'); + wrapper.findComponent(Stage).vm.$emit('toggleCollapsed'); expect(storeActions.toggleStageCollapsed).toHaveBeenCalled(); }); it('triggers setDetailJob action when stage emits clickViewLog event', () => { createComponent({ stages }); - wrapper.find(Stage).vm.$emit('clickViewLog'); + wrapper.findComponent(Stage).vm.$emit('clickViewLog'); expect(storeActions.setDetailJob).toHaveBeenCalled(); }); diff --git a/spec/frontend/ide/components/jobs/stage_spec.js b/spec/frontend/ide/components/jobs/stage_spec.js index f158c59cd32..1d5e5743a4d 100644 --- a/spec/frontend/ide/components/jobs/stage_spec.js +++ b/spec/frontend/ide/components/jobs/stage_spec.js @@ -18,8 +18,8 @@ describe('IDE pipeline stage', () => { }, }; - const findHeader = () => wrapper.find({ ref: 'cardHeader' }); - const findJobList = () => wrapper.find({ ref: 'jobList' }); + const findHeader = () => wrapper.findComponent({ ref: 'cardHeader' }); + const findJobList = () => wrapper.findComponent({ ref: 'jobList' }); const createComponent = (props) => { wrapper = shallowMount(Stage, { @@ -45,7 +45,7 @@ describe('IDE pipeline stage', () => { stage: { ...defaultProps.stage, isLoading: true, jobs: [] }, }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('emits toggleCollaped event with stage id when clicking header', async () => { @@ -60,7 +60,7 @@ describe('IDE pipeline stage', () => { it('emits clickViewLog entity with job', async () => { const [job] = defaultProps.stage.jobs; createComponent(); - wrapper.findAll(Item).at(0).vm.$emit('clickViewLog', job); + wrapper.findAllComponents(Item).at(0).vm.$emit('clickViewLog', job); await nextTick(); expect(wrapper.emitted().clickViewLog[0][0]).toBe(job); }); diff --git a/spec/frontend/ide/components/merge_requests/list_spec.js b/spec/frontend/ide/components/merge_requests/list_spec.js index 583671a0af6..ea6e2741a85 100644 --- a/spec/frontend/ide/components/merge_requests/list_spec.js +++ b/spec/frontend/ide/components/merge_requests/list_spec.js @@ -14,7 +14,7 @@ describe('IDE merge requests list', () => { let fetchMergeRequestsMock; const findSearchTypeButtons = () => wrapper.findAll('button'); - const findTokenedInput = () => wrapper.find(TokenedInput); + const findTokenedInput = () => wrapper.findComponent(TokenedInput); const createComponent = (state = {}) => { const { mergeRequests = {}, ...restOfState } = state; @@ -63,7 +63,7 @@ describe('IDE merge requests list', () => { it('renders loading icon when merge request is loading', () => { createComponent({ mergeRequests: { isLoading: true } }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('renders no search results text when search is not empty', async () => { @@ -107,8 +107,8 @@ describe('IDE merge requests list', () => { it('renders list', () => { createComponent(defaultStateWithMergeRequests); - expect(wrapper.findAll(Item).length).toBe(1); - expect(wrapper.find(Item).props('item')).toBe( + expect(wrapper.findAllComponents(Item).length).toBe(1); + expect(wrapper.findComponent(Item).props('item')).toBe( defaultStateWithMergeRequests.mergeRequests.mergeRequests[0], ); }); diff --git a/spec/frontend/ide/components/new_dropdown/index_spec.js b/spec/frontend/ide/components/new_dropdown/index_spec.js index 19dcd9569b3..747c099db33 100644 --- a/spec/frontend/ide/components/new_dropdown/index_spec.js +++ b/spec/frontend/ide/components/new_dropdown/index_spec.js @@ -1,70 +1,66 @@ -import Vue, { nextTick } from 'vue'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import newDropdown from '~/ide/components/new_dropdown/index.vue'; +import { mount } from '@vue/test-utils'; +import NewDropdown from '~/ide/components/new_dropdown/index.vue'; +import Button from '~/ide/components/new_dropdown/button.vue'; import { createStore } from '~/ide/stores'; describe('new dropdown component', () => { - let store; - let vm; - - beforeEach(() => { - store = createStore(); - - const component = Vue.extend(newDropdown); - - vm = createComponentWithStore(component, store, { - branch: 'main', - path: '', - mouseOver: false, - type: 'tree', + let wrapper; + + const findAllButtons = () => wrapper.findAllComponents(Button); + + const mountComponent = () => { + const store = createStore(); + store.state.currentProjectId = 'abcproject'; + store.state.path = ''; + store.state.trees['abcproject/mybranch'] = { tree: [] }; + + wrapper = mount(NewDropdown, { + store, + propsData: { + branch: 'main', + path: '', + mouseOver: false, + type: 'tree', + }, }); + }; - vm.$store.state.currentProjectId = 'abcproject'; - vm.$store.state.path = ''; - vm.$store.state.trees['abcproject/mybranch'] = { - tree: [], - }; - - vm.$mount(); - - jest.spyOn(vm.$refs.newModal, 'open').mockImplementation(() => {}); + beforeEach(() => { + mountComponent(); + jest.spyOn(wrapper.vm.$refs.newModal, 'open').mockImplementation(() => {}); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); it('renders new file, upload and new directory links', () => { - const buttons = vm.$el.querySelectorAll('.dropdown-menu button'); - - expect(buttons[0].textContent.trim()).toBe('New file'); - expect(buttons[1].textContent.trim()).toBe('Upload file'); - expect(buttons[2].textContent.trim()).toBe('New directory'); + expect(findAllButtons().at(0).text()).toBe('New file'); + expect(findAllButtons().at(1).text()).toBe('Upload file'); + expect(findAllButtons().at(2).text()).toBe('New directory'); }); describe('createNewItem', () => { it('opens modal for a blob when new file is clicked', () => { - vm.$el.querySelectorAll('.dropdown-menu button')[0].click(); + findAllButtons().at(0).trigger('click'); - expect(vm.$refs.newModal.open).toHaveBeenCalledWith('blob', ''); + expect(wrapper.vm.$refs.newModal.open).toHaveBeenCalledWith('blob', ''); }); it('opens modal for a tree when new directory is clicked', () => { - vm.$el.querySelectorAll('.dropdown-menu button')[2].click(); + findAllButtons().at(2).trigger('click'); - expect(vm.$refs.newModal.open).toHaveBeenCalledWith('tree', ''); + expect(wrapper.vm.$refs.newModal.open).toHaveBeenCalledWith('tree', ''); }); }); describe('isOpen', () => { it('scrolls dropdown into view', async () => { - jest.spyOn(vm.$refs.dropdownMenu, 'scrollIntoView').mockImplementation(() => {}); - - vm.isOpen = true; + jest.spyOn(wrapper.vm.$refs.dropdownMenu, 'scrollIntoView').mockImplementation(() => {}); - await nextTick(); + await wrapper.setProps({ isOpen: true }); - expect(vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({ + expect(wrapper.vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', }); }); @@ -72,11 +68,11 @@ describe('new dropdown component', () => { describe('delete entry', () => { it('calls delete action', () => { - jest.spyOn(vm, 'deleteEntry').mockImplementation(() => {}); + jest.spyOn(wrapper.vm, 'deleteEntry').mockImplementation(() => {}); - vm.$el.querySelectorAll('.dropdown-menu button')[4].click(); + findAllButtons().at(4).trigger('click'); - expect(vm.deleteEntry).toHaveBeenCalledWith(''); + expect(wrapper.vm.deleteEntry).toHaveBeenCalledWith(''); }); }); }); diff --git a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js index 7f2ee0fe7d9..1d38231a767 100644 --- a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js +++ b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js @@ -27,7 +27,7 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => { }); }; - const findSidebarNav = () => wrapper.find(IdeSidebarNav); + const findSidebarNav = () => wrapper.findComponent(IdeSidebarNav); beforeEach(() => { store = createStore(); diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js index d12acd6dc4c..4555f519bc2 100644 --- a/spec/frontend/ide/components/panes/right_spec.js +++ b/spec/frontend/ide/components/panes/right_spec.js @@ -37,7 +37,7 @@ describe('ide/components/panes/right.vue', () => { it('is always shown', () => { createComponent(); - expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( + expect(wrapper.findComponent(CollapsibleSidebar).props('extensionTabs')).toEqual( expect.arrayContaining([ expect.objectContaining({ show: true, @@ -65,7 +65,7 @@ describe('ide/components/panes/right.vue', () => { createComponent(); - expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( + expect(wrapper.findComponent(CollapsibleSidebar).props('extensionTabs')).toEqual( expect.arrayContaining([ expect.objectContaining({ show: true, @@ -90,7 +90,7 @@ describe('ide/components/panes/right.vue', () => { store.state.terminal.isVisible = true; await nextTick(); - expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( + expect(wrapper.findComponent(CollapsibleSidebar).props('extensionTabs')).toEqual( expect.arrayContaining([ expect.objectContaining({ show: true, @@ -103,7 +103,7 @@ describe('ide/components/panes/right.vue', () => { it('hides terminal tab when not visible', () => { store.state.terminal.isVisible = false; - expect(wrapper.find(CollapsibleSidebar).props('extensionTabs')).toEqual( + expect(wrapper.findComponent(CollapsibleSidebar).props('extensionTabs')).toEqual( expect.arrayContaining([ expect.objectContaining({ show: false, diff --git a/spec/frontend/ide/components/pipelines/empty_state_spec.js b/spec/frontend/ide/components/pipelines/empty_state_spec.js index f7409fc36be..31081e8f9d5 100644 --- a/spec/frontend/ide/components/pipelines/empty_state_spec.js +++ b/spec/frontend/ide/components/pipelines/empty_state_spec.js @@ -32,7 +32,7 @@ describe('~/ide/components/pipelines/empty_state.vue', () => { }); it('renders empty state', () => { - expect(wrapper.find(GlEmptyState).props()).toMatchObject({ + expect(wrapper.findComponent(GlEmptyState).props()).toMatchObject({ title: EmptyState.i18n.title, description: EmptyState.i18n.description, primaryButtonText: EmptyState.i18n.primaryButtonText, diff --git a/spec/frontend/ide/components/pipelines/list_spec.js b/spec/frontend/ide/components/pipelines/list_spec.js index 8a3606e27eb..545924c9c11 100644 --- a/spec/frontend/ide/components/pipelines/list_spec.js +++ b/spec/frontend/ide/components/pipelines/list_spec.js @@ -99,7 +99,7 @@ describe('IDE pipelines list', () => { }, ); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); }); it('renders loading state', () => { @@ -111,7 +111,7 @@ describe('IDE pipelines list', () => { }, ); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); }); @@ -128,7 +128,7 @@ describe('IDE pipelines list', () => { it('renders empty state when no latestPipeline', () => { createComponent({}, { ...defaultPipelinesLoadedState, latestPipeline: null }); - expect(wrapper.find(EmptyState).exists()).toBe(true); + expect(wrapper.findComponent(EmptyState).exists()).toBe(true); expect(wrapper.element).toMatchSnapshot(); }); @@ -144,7 +144,7 @@ describe('IDE pipelines list', () => { it('renders ci icon', () => { createComponent({}, withLatestPipelineState); - expect(wrapper.find(CiIcon).exists()).toBe(true); + expect(wrapper.findComponent(CiIcon).exists()).toBe(true); }); it('renders pipeline data', () => { @@ -158,7 +158,7 @@ describe('IDE pipelines list', () => { const isLoadingJobs = true; createComponent({}, { ...withLatestPipelineState, stages, isLoadingJobs }); - const jobProps = wrapper.findAll(GlTab).at(0).find(JobsList).props(); + const jobProps = wrapper.findAllComponents(GlTab).at(0).findComponent(JobsList).props(); expect(jobProps.stages).toBe(stages); expect(jobProps.loading).toBe(isLoadingJobs); }); @@ -169,7 +169,7 @@ describe('IDE pipelines list', () => { const isLoadingJobs = true; createComponent({}, { ...withLatestPipelineState, isLoadingJobs }); - const jobProps = wrapper.findAll(GlTab).at(1).find(JobsList).props(); + const jobProps = wrapper.findAllComponents(GlTab).at(1).findComponent(JobsList).props(); expect(jobProps.stages).toBe(failedStages); expect(jobProps.loading).toBe(isLoadingJobs); }); diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js index 426fbd5c04c..cf768114e70 100644 --- a/spec/frontend/ide/components/preview/clientside_spec.js +++ b/spec/frontend/ide/components/preview/clientside_spec.js @@ -396,7 +396,7 @@ describe('IDE clientside preview', () => { wrapper.setData({ loading: true }); await nextTick(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); }); diff --git a/spec/frontend/ide/components/preview/navigator_spec.js b/spec/frontend/ide/components/preview/navigator_spec.js index a199f4704f7..9c4f825ccf5 100644 --- a/spec/frontend/ide/components/preview/navigator_spec.js +++ b/spec/frontend/ide/components/preview/navigator_spec.js @@ -37,13 +37,13 @@ describe('IDE clientside preview navigator', () => { }); it('renders loading icon by default', () => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('removes loading icon when done event is fired', async () => { listenHandler({ type: 'done' }); await nextTick(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); }); it('does not count visiting same url multiple times', async () => { diff --git a/spec/frontend/ide/components/repo_commit_section_spec.js b/spec/frontend/ide/components/repo_commit_section_spec.js index db4181395d3..d3312358402 100644 --- a/spec/frontend/ide/components/repo_commit_section_spec.js +++ b/spec/frontend/ide/components/repo_commit_section_spec.js @@ -77,8 +77,10 @@ describe('RepoCommitSection', () => { }); it('renders no changes text', () => { - expect(wrapper.find(EmptyState).text().trim()).toContain('No changes'); - expect(wrapper.find(EmptyState).find('img').attributes('src')).toBe(TEST_NO_CHANGES_SVG); + expect(wrapper.findComponent(EmptyState).text().trim()).toContain('No changes'); + expect(wrapper.findComponent(EmptyState).find('img').attributes('src')).toBe( + TEST_NO_CHANGES_SVG, + ); }); }); @@ -111,7 +113,7 @@ describe('RepoCommitSection', () => { }); it('does not show empty state', () => { - expect(wrapper.find(EmptyState).exists()).toBe(false); + expect(wrapper.findComponent(EmptyState).exists()).toBe(false); }); }); @@ -157,7 +159,7 @@ describe('RepoCommitSection', () => { }); it('does not show empty state', () => { - expect(wrapper.find(EmptyState).exists()).toBe(false); + expect(wrapper.findComponent(EmptyState).exists()).toBe(false); }); }); @@ -167,7 +169,7 @@ describe('RepoCommitSection', () => { beforeEach(async () => { createComponent(); - inititializeSpy = jest.spyOn(wrapper.find(RepoCommitSection).vm, 'initialize'); + inititializeSpy = jest.spyOn(wrapper.findComponent(RepoCommitSection).vm, 'initialize'); store.state.viewer = 'diff'; await wrapper.vm.reactivate(); diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js index 7a0bcda1b7a..9921d8cba18 100644 --- a/spec/frontend/ide/components/repo_editor_spec.js +++ b/spec/frontend/ide/components/repo_editor_spec.js @@ -145,8 +145,7 @@ describe('RepoEditor', () => { jest.clearAllMocks(); // create a new model each time, otherwise tests conflict with each other // because of same model being used in multiple tests - // eslint-disable-next-line no-undef - monaco.editor.getModels().forEach((model) => model.dispose()); + monacoEditor.getModels().forEach((model) => model.dispose()); wrapper.destroy(); wrapper = null; }); @@ -212,7 +211,7 @@ describe('RepoEditor', () => { it('renders markdown for tempFile', async () => { findPreviewTab().vm.$emit('click'); await waitForPromises(); - expect(wrapper.find(ContentViewer).html()).toContain(dummyFile.text.content); + expect(wrapper.findComponent(ContentViewer).html()).toContain(dummyFile.text.content); }); describe('when file changes to non-markdown file', () => { diff --git a/spec/frontend/ide/components/repo_tab_spec.js b/spec/frontend/ide/components/repo_tab_spec.js index b16fd8f80ba..b26edc5a85b 100644 --- a/spec/frontend/ide/components/repo_tab_spec.js +++ b/spec/frontend/ide/components/repo_tab_spec.js @@ -19,7 +19,7 @@ describe('RepoTab', () => { let store; let router; - const findTab = () => wrapper.find(GlTabStub); + const findTab = () => wrapper.findComponent(GlTabStub); function createComponent(propsData) { wrapper = mount(RepoTab, { @@ -164,7 +164,7 @@ describe('RepoTab', () => { await wrapper.find('.multi-file-tab-close').trigger('click'); - expect(tab.opened).toBeFalsy(); + expect(tab.opened).toBe(false); expect(wrapper.vm.$store.state.changedFiles).toHaveLength(1); }); @@ -180,7 +180,7 @@ describe('RepoTab', () => { await wrapper.find('.multi-file-tab-close').trigger('click'); - expect(tab.opened).toBeFalsy(); + expect(tab.opened).toBe(false); }); }); }); diff --git a/spec/frontend/ide/components/resizable_panel_spec.js b/spec/frontend/ide/components/resizable_panel_spec.js index 55b9423aba8..fe2a128c9c8 100644 --- a/spec/frontend/ide/components/resizable_panel_spec.js +++ b/spec/frontend/ide/components/resizable_panel_spec.js @@ -35,7 +35,7 @@ describe('~/ide/components/resizable_panel', () => { store, }); }; - const findResizer = () => wrapper.find(PanelResizer); + const findResizer = () => wrapper.findComponent(PanelResizer); const findInlineStyle = () => wrapper.element.style.cssText; const createInlineStyle = (width) => `width: ${width}px;`; diff --git a/spec/frontend/ide/components/shared/commit_message_field_spec.js b/spec/frontend/ide/components/shared/commit_message_field_spec.js index f4f9b95b233..94da06f4cb2 100644 --- a/spec/frontend/ide/components/shared/commit_message_field_spec.js +++ b/spec/frontend/ide/components/shared/commit_message_field_spec.js @@ -79,7 +79,7 @@ describe('CommitMessageField', () => { await fillText(text); expect(findHighlightsText().text()).toEqual(text); - expect(findHighlightsMark().text()).toBeFalsy(); + expect(findHighlightsMark().text()).toBe(''); }); it('highlights characters over 50 length', async () => { diff --git a/spec/frontend/ide/components/terminal/empty_state_spec.js b/spec/frontend/ide/components/terminal/empty_state_spec.js index 57c816747aa..15fb0fe9013 100644 --- a/spec/frontend/ide/components/terminal/empty_state_spec.js +++ b/spec/frontend/ide/components/terminal/empty_state_spec.js @@ -46,7 +46,7 @@ describe('IDE TerminalEmptyState', () => { }, }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('when not loading, does not show loading icon', () => { @@ -56,7 +56,7 @@ describe('IDE TerminalEmptyState', () => { }, }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); }); describe('when valid', () => { @@ -71,7 +71,7 @@ describe('IDE TerminalEmptyState', () => { }, }); - button = wrapper.find(GlButton); + button = wrapper.findComponent(GlButton); }); it('shows button', () => { @@ -100,7 +100,7 @@ describe('IDE TerminalEmptyState', () => { }, }); - expect(wrapper.find(GlButton).props('disabled')).toBe(true); - expect(wrapper.find(GlAlert).html()).toContain(TEST_HTML_MESSAGE); + expect(wrapper.findComponent(GlButton).props('disabled')).toBe(true); + expect(wrapper.findComponent(GlAlert).html()).toContain(TEST_HTML_MESSAGE); }); }); diff --git a/spec/frontend/ide/components/terminal/session_spec.js b/spec/frontend/ide/components/terminal/session_spec.js index 6a70ddb46a8..7e4a56b0610 100644 --- a/spec/frontend/ide/components/terminal/session_spec.js +++ b/spec/frontend/ide/components/terminal/session_spec.js @@ -38,7 +38,7 @@ describe('IDE TerminalSession', () => { }); }; - const findButton = () => wrapper.find(GlButton); + const findButton = () => wrapper.findComponent(GlButton); beforeEach(() => { state = { @@ -60,7 +60,7 @@ describe('IDE TerminalSession', () => { it('shows terminal', () => { factory(); - expect(wrapper.find(Terminal).props()).toEqual({ + expect(wrapper.findComponent(Terminal).props()).toEqual({ terminalPath: TEST_TERMINAL_PATH, status: RUNNING, }); diff --git a/spec/frontend/ide/components/terminal/terminal_controls_spec.js b/spec/frontend/ide/components/terminal/terminal_controls_spec.js index 71ec0dca89d..c18934f0f3b 100644 --- a/spec/frontend/ide/components/terminal/terminal_controls_spec.js +++ b/spec/frontend/ide/components/terminal/terminal_controls_spec.js @@ -12,7 +12,7 @@ describe('IDE TerminalControls', () => { ...options, }); - buttons = wrapper.findAll(ScrollButton); + buttons = wrapper.findAllComponents(ScrollButton); }; it('shows an up and down scroll button', () => { diff --git a/spec/frontend/ide/components/terminal/terminal_spec.js b/spec/frontend/ide/components/terminal/terminal_spec.js index afc49e22c83..4da3e1910e9 100644 --- a/spec/frontend/ide/components/terminal/terminal_spec.js +++ b/spec/frontend/ide/components/terminal/terminal_spec.js @@ -68,7 +68,7 @@ describe('IDE Terminal', () => { it(`shows when starting (${status})`, () => { factory({ status }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); expect(wrapper.find('.top-bar').text()).toBe('Starting...'); }); }); @@ -76,7 +76,7 @@ describe('IDE Terminal', () => { it(`shows when stopping`, () => { factory({ status: STOPPING }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); expect(wrapper.find('.top-bar').text()).toBe('Stopping...'); }); @@ -84,7 +84,7 @@ describe('IDE Terminal', () => { it('hides when not loading', () => { factory({ status }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); expect(wrapper.find('.top-bar').text()).toBe(''); }); }); @@ -107,23 +107,23 @@ describe('IDE Terminal', () => { }); it('is visible if terminal is created', () => { - expect(wrapper.find(TerminalControls).exists()).toBe(true); + expect(wrapper.findComponent(TerminalControls).exists()).toBe(true); }); it('scrolls glterminal on scroll-up', () => { - wrapper.find(TerminalControls).vm.$emit('scroll-up'); + wrapper.findComponent(TerminalControls).vm.$emit('scroll-up'); expect(wrapper.vm.glterminal.scrollToTop).toHaveBeenCalled(); }); it('scrolls glterminal on scroll-down', () => { - wrapper.find(TerminalControls).vm.$emit('scroll-down'); + wrapper.findComponent(TerminalControls).vm.$emit('scroll-down'); expect(wrapper.vm.glterminal.scrollToBottom).toHaveBeenCalled(); }); it('has props set', () => { - expect(wrapper.find(TerminalControls).props()).toEqual({ + expect(wrapper.findComponent(TerminalControls).props()).toEqual({ canScrollUp: false, canScrollDown: false, }); @@ -133,7 +133,7 @@ describe('IDE Terminal', () => { wrapper.setData({ canScrollUp: true, canScrollDown: true }); return nextTick().then(() => { - expect(wrapper.find(TerminalControls).props()).toEqual({ + expect(wrapper.findComponent(TerminalControls).props()).toEqual({ canScrollUp: true, canScrollDown: true, }); diff --git a/spec/frontend/ide/components/terminal/view_spec.js b/spec/frontend/ide/components/terminal/view_spec.js index 49f9513d2ac..57c8da9f5b7 100644 --- a/spec/frontend/ide/components/terminal/view_spec.js +++ b/spec/frontend/ide/components/terminal/view_spec.js @@ -66,7 +66,7 @@ describe('IDE TerminalView', () => { it('renders empty state', async () => { await factory(); - expect(wrapper.find(TerminalEmptyState).props()).toEqual({ + expect(wrapper.findComponent(TerminalEmptyState).props()).toEqual({ helpPath: TEST_HELP_PATH, illustrationPath: TEST_SVG_PATH, ...getters.allCheck(), @@ -79,7 +79,7 @@ describe('IDE TerminalView', () => { expect(actions.startSession).not.toHaveBeenCalled(); expect(actions.hideSplash).not.toHaveBeenCalled(); - wrapper.find(TerminalEmptyState).vm.$emit('start'); + wrapper.findComponent(TerminalEmptyState).vm.$emit('start'); expect(actions.startSession).toHaveBeenCalled(); expect(actions.hideSplash).toHaveBeenCalled(); @@ -89,7 +89,7 @@ describe('IDE TerminalView', () => { state.isShowSplash = false; await factory(); - expect(wrapper.find(TerminalEmptyState).exists()).toBe(false); - expect(wrapper.find(TerminalSession).exists()).toBe(true); + expect(wrapper.findComponent(TerminalEmptyState).exists()).toBe(false); + expect(wrapper.findComponent(TerminalSession).exists()).toBe(true); }); }); diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js index f921037d744..5b1502cc190 100644 --- a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js +++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js @@ -34,13 +34,13 @@ describe('ide/components/terminal_sync/terminal_sync_status_safe', () => { }); it('renders terminal sync status', () => { - expect(wrapper.find(TerminalSyncStatus).exists()).toBe(true); + expect(wrapper.findComponent(TerminalSyncStatus).exists()).toBe(true); }); }); describe('without terminal sync module', () => { it('does not render terminal sync status', () => { - expect(wrapper.find(TerminalSyncStatus).exists()).toBe(false); + expect(wrapper.findComponent(TerminalSyncStatus).exists()).toBe(false); }); }); }); diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js index 3a326b08fff..147235abc8e 100644 --- a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js +++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js @@ -78,19 +78,19 @@ describe('ide/components/terminal_sync/terminal_sync_status', () => { if (!icon) { it('does not render icon', () => { - expect(wrapper.find(GlIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlIcon).exists()).toBe(false); }); it('renders loading icon', () => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); } else { it('renders icon', () => { - expect(wrapper.find(GlIcon).props('name')).toEqual(icon); + expect(wrapper.findComponent(GlIcon).props('name')).toEqual(icon); }); it('does not render loading icon', () => { - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); }); } }); |