1 files changed, 45 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
index 6e97b046be2..a1e0db4d29e 100644
--- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
+++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js
@@ -9,9 +9,14 @@ import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dr
 import DropdownContents from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue';
 
 import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
+import { isInViewport } from '~/lib/utils/common_utils';
 
 import { mockConfig } from './mock_data';
 
+jest.mock('~/lib/utils/common_utils', () => ({
+  isInViewport: jest.fn().mockReturnValue(true),
+}));
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -21,6 +26,9 @@ const createComponent = (config = mockConfig, slots = {}) =>
     slots,
     store: new Vuex.Store(labelsSelectModule()),
     propsData: config,
+    stubs: {
+      'dropdown-contents': DropdownContents,
+    },
   });
 
 describe('LabelsSelectRoot', () => {
@@ -144,5 +152,42 @@ describe('LabelsSelectRoot', () => {
         expect(wrapper.find(DropdownContents).exists()).toBe(true);
       });
     });
+
+    describe('sets content direction based on viewport', () => {
+      it('does not set direction when `state.variant` is not "embedded"', () => {
+        wrapper.vm.$store.dispatch('toggleDropdownContents');
+
+        wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
+        });
+      });
+
+      describe('when `state.variant` is "embedded"', () => {
+        beforeEach(() => {
+          wrapper = createComponent({ ...mockConfig, variant: 'embedded' });
+          wrapper.vm.$store.dispatch('toggleDropdownContents');
+        });
+
+        it('set direction when out of viewport', () => {
+          isInViewport.mockImplementation(() => false);
+          wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
+
+          return wrapper.vm.$nextTick().then(() => {
+            expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
+          });
+        });
+
+        it('does not set direction when inside of viewport', () => {
+          isInViewport.mockImplementation(() => true);
+          wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
+
+          return wrapper.vm.$nextTick().then(() => {
+            expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
+          });
+        });
+      });
+    });
   });
 });