Merge branch 'tor/defect/duplicate-collapse-banners-single-file-mr' into 'master'

Don't display the collapsed files warning banner when there is only one file

See merge request gitlab-org/gitlab!65359

app/assets/javascripts/diffs/components/collapsed_files_warning.vue

 <script>
 import { GlAlert, GlButton } from '@gitlab/ui';
+import { mapState } from 'vuex';
 
 import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '../constants';
 import eventHub from '../event_hub';
@@ -27,11 +28,15 @@ export default {
     };
   },
   computed: {
+    ...mapState('diffs', ['diffFiles']),
     containerClasses() {
       return {
         [CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited,
       };
     },
+    shouldDisplay() {
+      return !this.isDismissed && this.diffFiles.length > 1;
+    },
   },
 
   methods: {
@@ -48,7 +53,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="!isDismissed" data-testid="root" :class="containerClasses" class="col-12">
+  <div v-if="shouldDisplay" data-testid="root" :class="containerClasses" class="col-12">
     <gl-alert
       :dismissible="true"
       :title="__('Some changes are not shown')"

spec/frontend/diffs/components/collapsed_files_warning_spec.js

 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
 import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '~/diffs/constants';
 import eventHub from '~/diffs/event_hub';
 import createStore from '~/diffs/store/modules';
 
+import file from '../mock_data/diff_file';
+
 const propsData = {
   limited: true,
   mergeable: true,
@@ -12,6 +15,13 @@ const propsData = {
 };
 const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' ');
 
+async function files(store, count) {
+  const copies = Array(count).fill(file);
+  store.state.diffs.diffFiles.push(...copies);
+
+  return nextTick();
+}
+
 describe('CollapsedFilesWarning', () => {
   const localVue = createLocalVue();
   let store;
@@ -42,48 +52,63 @@ describe('CollapsedFilesWarning', () => {
     wrapper.destroy();
   });
 
-  it.each`
-    limited  | containerClasses
-    ${true}  | ${limitedClasses}
-    ${false} | ${[]}
-  `(
-    'has the correct container classes when limited is $limited',
-    ({ limited, containerClasses }) => {
-      createComponent({ limited });
-
-      expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses));
-    },
-  );
-
-  it.each`
-    present  | dismissed
-    ${false} | ${true}
-    ${true}  | ${false}
-  `('toggles the alert when dismissed is $dismissed', ({ present, dismissed }) => {
-    createComponent({ dismissed });
-
-    expect(wrapper.find('[data-testid="root"]').exists()).toBe(present);
-  });
+  describe('when there is more than one file', () => {
+    it.each`
+      limited  | containerClasses
+      ${true}  | ${limitedClasses}
+      ${false} | ${[]}
+    `(
+      'has the correct container classes when limited is $limited',
+      async ({ limited, containerClasses }) => {
+        createComponent({ limited });
+        await files(store, 2);
+
+        expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses));
+      },
+    );
 
-  it('dismisses the component when the alert "x" is clicked', async () => {
-    createComponent({}, { full: true });
+    it.each`
+      present  | dismissed
+      ${false} | ${true}
+      ${true}  | ${false}
+    `('toggles the alert when dismissed is $dismissed', async ({ present, dismissed }) => {
+      createComponent({ dismissed });
+      await files(store, 2);
 
-    expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(present);
+    });
 
-    getAlertCloseButton().element.click();
+    it('dismisses the component when the alert "x" is clicked', async () => {
+      createComponent({}, { full: true });
+      await files(store, 2);
 
-    await wrapper.vm.$nextTick();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
 
-    expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
-  });
+      getAlertCloseButton().element.click();
 
-  it(`emits the \`${EVT_EXPAND_ALL_FILES}\` event when the alert action button is clicked`, () => {
-    createComponent({}, { full: true });
+      await wrapper.vm.$nextTick();
 
-    jest.spyOn(eventHub, '$emit');
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
+    });
 
-    getAlertActionButton().vm.$emit('click');
+    it(`emits the \`${EVT_EXPAND_ALL_FILES}\` event when the alert action button is clicked`, async () => {
+      createComponent({}, { full: true });
+      await files(store, 2);
 
-    expect(eventHub.$emit).toHaveBeenCalledWith(EVT_EXPAND_ALL_FILES);
+      jest.spyOn(eventHub, '$emit');
+
+      getAlertActionButton().vm.$emit('click');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith(EVT_EXPAND_ALL_FILES);
+    });
+  });
+
+  describe('when there is a single file', () => {
+    it('should not display', async () => {
+      createComponent();
+      await files(store, 1);
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(false);
+    });
   });
 });