diff options
Diffstat (limited to 'spec/frontend/ide/components/ide_side_bar_spec.js')
-rw-r--r-- | spec/frontend/ide/components/ide_side_bar_spec.js | 44 |
1 files changed, 36 insertions, 8 deletions
diff --git a/spec/frontend/ide/components/ide_side_bar_spec.js b/spec/frontend/ide/components/ide_side_bar_spec.js index 86e4e8d8f89..72e9463945b 100644 --- a/spec/frontend/ide/components/ide_side_bar_spec.js +++ b/spec/frontend/ide/components/ide_side_bar_spec.js @@ -1,10 +1,12 @@ import { mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { GlSkeletonLoading } from '@gitlab/ui'; +import waitForPromises from 'helpers/wait_for_promises'; import { createStore } from '~/ide/stores'; import IdeSidebar from '~/ide/components/ide_side_bar.vue'; import IdeTree from '~/ide/components/ide_tree.vue'; import RepoCommitSection from '~/ide/components/repo_commit_section.vue'; +import IdeReview from '~/ide/components/ide_review.vue'; import { leftSidebarViews } from '~/ide/constants'; import { projectData } from '../mock_data'; @@ -15,11 +17,12 @@ describe('IdeSidebar', () => { let wrapper; let store; - function createComponent() { + function createComponent({ view = leftSidebarViews.edit.name } = {}) { store = createStore(); store.state.currentProjectId = 'abcproject'; store.state.projects.abcproject = projectData; + store.state.currentActivityView = view; return mount(IdeSidebar, { store, @@ -48,22 +51,46 @@ describe('IdeSidebar', () => { expect(wrapper.findAll(GlSkeletonLoading)).toHaveLength(3); }); - describe('activityBarComponent', () => { - it('renders tree component', () => { + 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); - it('renders commit component', async () => { - wrapper = createComponent(); + store.state.currentActivityView = leftSidebarViews.review.name; + await waitForPromises(); + await wrapper.vm.$nextTick(); - store.state.currentActivityView = leftSidebarViews.commit.name; + expect(wrapper.find(IdeTree).exists()).toBe(false); + expect(wrapper.find(IdeReview).exists()).toBe(true); + expect(wrapper.find(RepoCommitSection).exists()).toBe(false); + store.state.currentActivityView = leftSidebarViews.commit.name; + await waitForPromises(); await wrapper.vm.$nextTick(); + expect(wrapper.find(IdeTree).exists()).toBe(false); + expect(wrapper.find(IdeReview).exists()).toBe(false); expect(wrapper.find(RepoCommitSection).exists()).toBe(true); }); + it.each` + view | tree | review | commit + ${leftSidebarViews.edit.name} | ${true} | ${false} | ${false} + ${leftSidebarViews.review.name} | ${false} | ${true} | ${false} + ${leftSidebarViews.commit.name} | ${false} | ${false} | ${true} + `('renders correct panels for $view', async ({ view, tree, review, commit } = {}) => { + wrapper = createComponent({ + view, + }); + await waitForPromises(); + await wrapper.vm.$nextTick(); + + expect(wrapper.find(IdeTree).exists()).toBe(tree); + expect(wrapper.find(IdeReview).exists()).toBe(review); + expect(wrapper.find(RepoCommitSection).exists()).toBe(commit); + }); }); it('keeps the current activity view components alive', async () => { @@ -72,7 +99,7 @@ describe('IdeSidebar', () => { const ideTreeComponent = wrapper.find(IdeTree).element; store.state.currentActivityView = leftSidebarViews.commit.name; - + await waitForPromises(); await wrapper.vm.$nextTick(); expect(wrapper.find(IdeTree).exists()).toBe(false); @@ -80,6 +107,7 @@ describe('IdeSidebar', () => { store.state.currentActivityView = leftSidebarViews.edit.name; + await waitForPromises(); await wrapper.vm.$nextTick(); // reference to the elements remains the same, meaning the components were kept alive |