Merge branch '327738-create-and-delete-options-should-remain-visible-in-vs-dropdown' into 'master'

Create and Delete options should remain visible in VS dropdown

See merge request gitlab-org/gitlab!74683

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

@@ -4,7 +4,6 @@ import {
   GlButton,
   GlDropdown,
   GlDropdownItem,
-  GlDropdownDivider,
   GlModal,
   GlModalDirective,
   GlSprintf,
@@ -34,7 +33,6 @@ export default {
     GlButton,
     GlDropdown,
     GlDropdownItem,
-    GlDropdownDivider,
     GlModal,
     GlSprintf,
     ValueStreamForm,
@@ -155,7 +153,7 @@ export default {
         @click="onSelect(id)"
         >{{ streamName }}</gl-dropdown-item
       >
-      <gl-dropdown-divider />
+      <template #footer>
         <gl-dropdown-item
           v-gl-modal-directive="'value-stream-form-modal'"
           data-testid="create-value-stream"
@@ -176,6 +174,7 @@ export default {
             <template #name>{{ selectedValueStreamName }}</template>
           </gl-sprintf>
         </gl-dropdown-item>
+      </template>
     </gl-dropdown>
     <gl-button
       v-else

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

 import { GlDropdown } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import ValueStreamSelect from 'ee/analytics/cycle_analytics/components/value_stream_select.vue';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
@@ -38,9 +38,9 @@ describe('ValueStreamSelect', () => {
       },
     });
 
-  const createComponent = ({ data = {}, initialState = {} } = {}) =>
+  const createComponent = ({ data = {}, initialState = {}, mountFn = shallowMount } = {}) =>
     extendedWrapper(
-      shallowMount(ValueStreamSelect, {
+      mountFn(ValueStreamSelect, {
         localVue,
         store: fakeStore({ initialState }),
         data() {
@@ -59,13 +59,21 @@ describe('ValueStreamSelect', () => {
   const findModal = (modal) => wrapper.find(`[data-testid="${modal}-value-stream-modal"]`);
   const submitModal = (modal) => findModal(modal).vm.$emit('primary', mockEvent);
   const findSelectValueStreamDropdown = () => wrapper.findComponent(GlDropdown);
-  const findSelectValueStreamDropdownOptions = (_wrapper) => findDropdownItemText(_wrapper);
+  const findSelectValueStreamDropdownOptions = () => findDropdownItemText(wrapper);
   const findCreateValueStreamButton = () => wrapper.findByTestId('create-value-stream-button');
   const findEditValueStreamButton = () => wrapper.findByTestId('edit-value-stream');
   const findDeleteValueStreamButton = () => wrapper.findByTestId('delete-value-stream');
 
+  afterEach(() => {
+    unmockTracking();
+    wrapper.destroy();
+  });
+
+  describe('with value streams available', () => {
+    describe('default behaviour', () => {
       beforeEach(() => {
         wrapper = createComponent({
+          mountFn: mount,
           initialState: {
             valueStreams,
           },
@@ -73,12 +81,6 @@ describe('ValueStreamSelect', () => {
         trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
       });
 
-  afterEach(() => {
-    unmockTracking();
-    wrapper.destroy();
-  });
-
-  describe('with value streams available', () => {
       it('does not display the create value stream button', () => {
         expect(findCreateValueStreamButton().exists()).toBe(false);
       });
@@ -93,10 +95,12 @@ describe('ValueStreamSelect', () => {
           expect(opts).toContain(vs);
         });
       });
+    });
 
     describe('with a selected value stream', () => {
       beforeEach(() => {
         wrapper = createComponent({
+          mountFn: mount,
           initialState: {
             valueStreams,
             selectedValueStream: {
@@ -189,6 +193,8 @@ describe('ValueStreamSelect', () => {
           },
         });
 
+        trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
         submitModal('delete');
       });