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