Added test for stage nav item tooltip

Moves the test for the stage name tooltip
from rspec to jest now that we are using
GlTooltip component

Remove extra flex-row class

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_nav_item.vue

@@ -57,7 +57,7 @@ export default {
       return this.canEdit && this.isHover;
     },
     openMenuClasses() {
-      return this.menuOpen ? 'd-flex flex-row justify-content-end' : '';
+      return this.menuOpen ? 'd-flex justify-content-end' : '';
     },
   },
   mounted() {

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -741,22 +741,6 @@ describe 'Group Value Stream Analytics', :js do
             expect(nav).not_to have_text(custom_stage_name)
           end
         end
-
-        context 'custom stage with a long name' do
-          let(:bad_custom_stage_name) { 'This is a very very very long stage name that will break the ui' }
-          let(:params) { { name: bad_custom_stage_name, start_event_identifier: start_event_identifier, end_event_identifier: end_event_identifier } }
-
-          before do
-            create_custom_stage
-            select_group
-
-            expect(page).to have_text bad_custom_stage_name
-          end
-
-          it 'will have a tooltip for the stage' do
-            expect(page.find(".stage-nav")).to have_css "span[title='#{bad_custom_stage_name}']"
-          end
-        end
       end
     end
 

ee/spec/frontend/analytics/cycle_analytics/components/stage_nav_item_spec.js

 // NOTE: more tests will be added in https://gitlab.com/gitlab-org/gitlab/issues/121613
+import { GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import StageNavItem from 'ee/analytics/cycle_analytics/components/stage_nav_item.vue';
 import { approximateDuration } from '~/lib/utils/datetime_utility';
@@ -7,13 +8,14 @@ describe('StageNavItem', () => {
   const title = 'Rad stage';
   const median = 50;
 
-  function createComponent(props) {
+  function createComponent({ props = {}, opts = {} } = {}) {
     return shallowMount(StageNavItem, {
       propsData: {
         title,
         value: median,
         ...props,
       },
+      ...opts,
     });
   }
 
@@ -26,7 +28,7 @@ describe('StageNavItem', () => {
   });
 
   it('with no median value', () => {
-    wrapper = createComponent({ value: null });
+    wrapper = createComponent({ props: { value: null } });
     expect(findStageMedian().text()).toEqual('Not enough data');
   });
 
@@ -43,4 +45,31 @@ describe('StageNavItem', () => {
       expect(findStageTitle().text()).toEqual(title);
     });
   });
+
+  describe('with a really long name', () => {
+    const longTitle = 'This is a very long stage name that is intended to break the ui';
+
+    beforeEach(() => {
+      wrapper = createComponent({
+        props: { title: longTitle },
+        opts: {
+          data() {
+            return { isTitleOverflowing: true };
+          },
+          methods: {
+            // making tbis a noop so it wont toggle 'isTitleOverflowing' on mount
+            checkIfTitleOverflows: () => {},
+          },
+        },
+      });
+    });
+
+    it('renders the tooltip', () => {
+      expect(wrapper.find(GlTooltip).exists()).toBe(true);
+    });
+
+    it('tooltip has the correct stage title', () => {
+      expect(wrapper.find(GlTooltip).text()).toBe(longTitle);
+    });
+  });
 });