Apply frontend maintainer suggestions

ee/app/assets/javascripts/boards/components/board_add_new_column.vue

@@ -17,11 +17,7 @@ import { ListType } from '~/boards/constants';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import {
-  groupByIterationCadences,
-  getIterationTitle,
-  getIterationPeriod,
-} from 'ee/iterations/utils';
+import { groupByIterationCadences, getIterationPeriod } from 'ee/iterations/utils';
 import IterationTitle from 'ee/iterations/components/iteration_title.vue';
 
 export const listTypeInfo = {
@@ -245,7 +241,6 @@ export default {
       }
     },
 
-    getIterationTitle,
     getIterationPeriod,
   },
 };
@@ -333,12 +328,7 @@ export default {
               data-testid="new-column-iteration-item"
             >
               {{ iteration.period }}
-              <iteration-title
-                v-if="getIterationTitle(iteration)"
-                data-testid="new-column-iteration-title"
-              >
-                {{ getIterationTitle(iteration) }}
-              </iteration-title>
+              <iteration-title v-if="iteration.title" :title="iteration.title" />
             </gl-form-radio>
           </gl-dropdown-text>
         </div>
@@ -381,12 +371,7 @@ export default {
             data-testid="new-column-iteration-item"
           >
             {{ getIterationPeriod(item) }}
-            <iteration-title
-              v-if="getIterationTitle(item)"
-              data-testid="new-column-iteration-title"
-            >
-              {{ getIterationTitle(item) }}
-            </iteration-title>
+            <iteration-title v-if="item.title" :title="item.title" />
           </div>
           <div v-else class="gl-display-inline-block">
             {{ item.title }}

ee/app/assets/javascripts/iterations/components/iteration_title.vue

+<script>
+export default {
+  name: 'IterationTitle',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
 <template>
   <div class="gl-text-gray-400">
-    <slot></slot>
+    {{ title }}
   </div>
 </template>

ee/app/assets/javascripts/iterations/utils.js

@@ -13,10 +13,6 @@ export function getIterationPeriod({ startDate, dueDate }) {
   return `${start} - ${due}`;
 }
 
-export function getIterationTitle(iteration) {
-  return iteration?.title;
-}
-
 /**
  * Group a list of iterations by cadence.
  *

ee/app/assets/javascripts/sidebar/components/iteration_dropdown.vue

@@ -9,11 +9,7 @@ import {
   GlLoadingIcon,
 } from '@gitlab/ui';
 import IterationTitle from 'ee/iterations/components/iteration_title.vue';
-import {
-  groupByIterationCadences,
-  getIterationPeriod,
-  getIterationTitle,
-} from 'ee/iterations/utils';
+import { groupByIterationCadences, getIterationPeriod } from 'ee/iterations/utils';
 import { __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { iterationSelectTextMap, iterationDisplayState } from '../constants';
@@ -99,7 +95,6 @@ export default {
       this.shouldFetch = true;
     },
     getIterationPeriod,
-    getIterationTitle,
   },
 };
 </script>
@@ -128,9 +123,7 @@ export default {
         @click="onClick(iterationItem)"
       >
         {{ getIterationPeriod(iterationItem) }}
-        <iteration-title v-if="getIterationTitle(iterationItem)">
-          {{ getIterationTitle(iterationItem) }}
-        </iteration-title>
+        <iteration-title v-if="iterationItem.title" :title="iterationItem.title" />
       </gl-dropdown-item>
     </template>
     <template v-else>
@@ -147,9 +140,7 @@ export default {
           @click="onClick(iterationItem)"
         >
           {{ iterationItem.period }}
-          <iteration-title v-if="getIterationTitle(iterationItem)">
-            {{ getIterationTitle(iterationItem) }}
-          </iteration-title>
+          <iteration-title v-if="iterationItem.title" :title="iterationItem.title" />
         </gl-dropdown-item>
       </template>
     </template>

ee/app/assets/javascripts/sidebar/components/iteration_sidebar_dropdown_widget.vue

@@ -8,11 +8,7 @@ import {
 } from '@gitlab/ui';
 import SidebarDropdownWidget from 'ee/sidebar/components/sidebar_dropdown_widget.vue';
 import IterationTitle from 'ee/iterations/components/iteration_title.vue';
-import {
-  getIterationPeriod,
-  getIterationTitle,
-  groupByIterationCadences,
-} from 'ee/iterations/utils';
+import { getIterationPeriod, groupByIterationCadences } from 'ee/iterations/utils';
 import { IssuableType } from '~/issues/constants';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { IssuableAttributeType } from '../constants';
@@ -56,7 +52,6 @@ export default {
     },
     groupByIterationCadences,
     getIterationPeriod,
-    getIterationTitle,
   },
 };
 </script>
@@ -82,9 +77,7 @@ export default {
           <gl-icon name="iteration" class="gl-mr-1" />
           {{ getIterationPeriod(currentAttribute) }}
         </div>
-        <iteration-title v-if="getIterationTitle(currentAttribute)">{{
-          getIterationTitle(currentAttribute)
-        }}</iteration-title>
+        <iteration-title v-if="currentAttribute.title" :title="currentAttribute.title" />
       </gl-link>
     </template>
     <template #list="{ attributesList = [], isAttributeChecked, updateAttribute }">
@@ -106,9 +99,7 @@ export default {
           @click="updateAttribute(iteration.id)"
         >
           {{ iteration.period }}
-          <iteration-title v-if="getIterationTitle(iteration)">{{
-            getIterationTitle(iteration)
-          }}</iteration-title>
+          <iteration-title v-if="iteration.title" :title="iteration.title" />
         </gl-dropdown-item>
       </template>
     </template>

ee/spec/frontend/boards/components/board_add_new_column_spec.js

@@ -5,6 +5,7 @@ import Vuex from 'vuex';
 import BoardAddNewColumn, { listTypeInfo } from 'ee/boards/components/board_add_new_column.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import BoardAddNewColumnForm from '~/boards/components/board_add_new_column_form.vue';
+import IterationTitle from 'ee/iterations/components/iteration_title.vue';
 import { ListType } from '~/boards/constants';
 import defaultState from '~/boards/stores/state';
 import { getIterationPeriod } from 'ee/iterations/utils';
@@ -47,6 +48,7 @@ describe('BoardAddNewColumn', () => {
           BoardAddNewColumnForm,
           GlFormRadio,
           GlFormRadioGroup,
+          IterationTitle,
         },
         data() {
           return {
@@ -117,9 +119,7 @@ describe('BoardAddNewColumn', () => {
 
   const expectIterationWithoutTitle = () => {
     expect(findIterationItemAt(0).text()).toContain(getIterationPeriod(mockIterations[0]));
-    expect(findIterationItemAt(0).find("[data-testid='new-column-iteration-title']").exists()).toBe(
-      false,
-    );
+    expect(findIterationItemAt(0).findComponent(IterationTitle).exists()).toBe(false);
   };
 
   it('clicking cancel hides the form', () => {

ee/spec/frontend/iterations/components/iteration_title_spec.js

+import { shallowMount } from '@vue/test-utils';
+import IterationTitle from 'ee/iterations/components/iteration_title.vue';
+
+describe('Iterations title', () => {
+  let wrapper;
+
+  const createComponent = (propsData) => {
+    wrapper = shallowMount(IterationTitle, {
+      propsData,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('shows empty state', () => {
+    createComponent({ title: 'abc' });
+
+    expect(wrapper.html()).toHaveText('abc');
+  });
+});

ee/spec/frontend/sidebar/components/iteration_dropdown_spec.js

@@ -13,6 +13,7 @@ import IterationDropdown from 'ee/sidebar/components/iteration_dropdown.vue';
 import groupIterationsQuery from 'ee/sidebar/queries/iterations.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { getIterationPeriod } from 'ee/iterations/utils';
+import IterationTitle from 'ee/iterations/components/iteration_title.vue';
 
 Vue.use(VueApollo);
 
@@ -112,6 +113,9 @@ describe('IterationDropdown', () => {
       propsData: {
         fullPath: TEST_FULL_PATH,
       },
+      stubs: {
+        IterationTitle,
+      },
       provide: {
         glFeatures: {
           iterationCadences,
@@ -171,18 +175,8 @@ describe('IterationDropdown', () => {
     });
 
     it('shows checkable dropdown items in unchecked state', () => {
-      expect(findDropdownItems().wrappers.map((x) => x.props('isCheckItem'))).toEqual([
-        true,
-        true,
-        true,
-        true,
-      ]);
-      expect(findDropdownItems().wrappers.map((x) => x.props('isChecked'))).toEqual([
-        false,
-        false,
-        false,
-        false,
-      ]);
+      expect(findDropdownItems().wrappers.every((x) => x.props('isCheckItem'))).toBe(true);
+      expect(findDropdownItems().wrappers.every((x) => x.props('isChecked'))).toBe(false);
     });
 
     it('populates dropdown items with correct names', () => {
@@ -237,12 +231,7 @@ describe('IterationDropdown', () => {
         });
 
         it('shows item as unchecked', () => {
-          expect(findDropdownItems().wrappers.map((x) => x.props('isChecked'))).toEqual([
-            false,
-            false,
-            false,
-            false,
-          ]);
+          expect(findDropdownItems().wrappers.every((x) => x.props('isChecked'))).toBe(false);
         });
 
         it('emits event', () => {

ee/spec/frontend/sidebar/components/iteration_sidebar_dropdown_widget_spec.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import IterationSidebarDropdownWidget from 'ee/sidebar/components/iteration_sidebar_dropdown_widget.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { IssuableType } from '~/issues/constants';
 import groupIterationsQuery from 'ee/sidebar/queries/group_iterations.query.graphql';
 import projectIssueIterationQuery from 'ee/sidebar/queries/project_issue_iteration.query.graphql';
@@ -17,7 +18,7 @@ import {
   mockCurrentIterationResponse1,
   mockCurrentIterationResponse2,
 } from '../mock_data';
-import { waitForApollo, clickEdit, search } from '../helpers';
+import { clickEdit } from '../helpers';
 
 Vue.use(VueApollo);
 
@@ -57,7 +58,8 @@ describe('IterationSidebarDropdownWidget', () => {
       }),
     );
 
-    await waitForApollo();
+    jest.runOnlyPendingTimers();
+    await waitForPromises();
   };
 
   afterEach(() => {
@@ -87,7 +89,6 @@ describe('IterationSidebarDropdownWidget', () => {
       it('renders iterations', async () => {
         await createComponentWithApollo();
         await clickEdit(wrapper);
-        await search(wrapper, 'iteration');
 
         // mockIteration1 has no title
         expect(findIterationItemsTextAt(0)).toContain(getIterationPeriod(mockIteration1));
@@ -128,7 +129,6 @@ describe('IterationSidebarDropdownWidget', () => {
       it('renders iterations with cadence names', async () => {
         await createComponentWithApollo({ iterationCadences: true });
         await clickEdit(wrapper);
-        await search(wrapper, 'iteration');
 
         // mockIteration1 has no title
         expect(findIterationCadenceTitleAt(0)).toContain(mockIteration1.iterationCadence.title);

ee/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js

@@ -7,7 +7,7 @@ import {
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import SidebarDropdownWidget from 'ee/sidebar/components/sidebar_dropdown_widget.vue';
 import { IssuableAttributeType, issuableAttributesQueries } from 'ee/sidebar/constants';
@@ -16,10 +16,11 @@ import projectIssueEpicMutation from 'ee/sidebar/queries/project_issue_epic.muta
 import projectIssueEpicQuery from 'ee/sidebar/queries/project_issue_epic.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import { IssuableType } from '~/issues/constants';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import { waitForDropdown, waitForApollo, clickEdit, search } from '../helpers';
+import { clickEdit, search } from '../helpers';
 
 import {
   mockIssue,
@@ -51,7 +52,7 @@ describe('SidebarDropdownWidget', () => {
   const toggleDropdown = async () => {
     wrapper.findComponent(SidebarEditableItem).vm.$emit('open');
 
-    await waitForDropdown();
+    await waitForPromises();
   };
 
   const createComponentWithApollo = async ({
@@ -81,7 +82,8 @@ describe('SidebarDropdownWidget', () => {
       }),
     );
 
-    await waitForApollo();
+    jest.runOnlyPendingTimers();
+    await waitForPromises();
   };
 
   const createComponent = ({
@@ -257,7 +259,7 @@ describe('SidebarDropdownWidget', () => {
             });
 
             it('sends a groupEpics query with empty title and undefined in param', async () => {
-              await nextTick();
+              await waitForPromises();
 
               // Account for debouncing
               jest.runAllTimers();

ee/spec/frontend/sidebar/helpers.js

-import { nextTick } from 'vue';
 import { GlSearchBoxByType } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
@@ -11,31 +10,15 @@ const findSearchBox = (wrapper) => wrapper.findComponent(GlSearchBoxByType);
 export const search = async (wrapper, searchTerm) => {
   findSearchBox(wrapper).vm.$emit('input', searchTerm);
 
-  await nextTick();
-  jest.runAllTimers(); // Account for debouncing
-};
-
-export const waitForDropdown = async () => {
-  // BDropdown first changes its `visible` property
-  // in a requestAnimationFrame callback.
-  // It then emits `shown` event in a watcher for `visible`
-  // Hence we need both of these:
-  await waitForPromises();
-
-  await nextTick();
-};
-
-export const waitForApollo = async () => {
-  jest.runOnlyPendingTimers();
   await waitForPromises();
+  jest.runAllTimers(); // Account for debouncing
 };
 
 // Used with createComponentWithApollo which uses 'mount'
 export const clickEdit = async (wrapper) => {
   await findEditButton(wrapper).trigger('click');
 
-  await waitForDropdown(wrapper);
-
   // We should wait for attributes list to be fetched.
-  await waitForApollo();
+  jest.runAllTimers();
+  await waitForPromises();
 };