Test the diffs app showing collapsed files warning

spec/frontend/diffs/components/app_spec.js

@@ -9,6 +9,7 @@ import NoChanges from '~/diffs/components/no_changes.vue';
 import DiffFile from '~/diffs/components/diff_file.vue';
 import CompareVersions from '~/diffs/components/compare_versions.vue';
 import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
+import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
 import CommitWidget from '~/diffs/components/commit_widget.vue';
 import TreeList from '~/diffs/components/tree_list.vue';
 import { INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '~/diffs/constants';
@@ -22,6 +23,10 @@ const TEST_ENDPOINT = `${TEST_HOST}/diff/endpoint`;
 const COMMIT_URL = '[BASE URL]/OLD';
 const UPDATED_COMMIT_URL = '[BASE URL]/NEW';
 
+function getCollapsedFilesWarning(wrapper) {
+  return wrapper.find(CollapsedFilesWarning);
+}
+
 describe('diffs/components/app', () => {
   const oldMrTabs = window.mrTabs;
   let store;
@@ -668,6 +673,8 @@ describe('diffs/components/app', () => {
       );
     });
 
+    describe('warnings', () => {
+      describe('hidden files', () => {
         it('should render hidden files warning if render overflow warning is present', () => {
           createComponent({}, ({ state }) => {
             state.diffs.renderOverflowWarning = true;
@@ -687,6 +694,31 @@ describe('diffs/components/app', () => {
             }),
           );
         });
+      });
+
+      describe('collapsed files', () => {
+        it('should render the collapsed files warning if there are any collapsed files', () => {
+          createComponent({}, ({ state }) => {
+            state.diffs.diffFiles = [{ viewer: { collapsed: true } }];
+          });
+
+          expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true);
+        });
+
+        it('should not render the collapsed files warning if the user has dismissed the alert already', async () => {
+          createComponent({}, ({ state }) => {
+            state.diffs.diffFiles = [{ viewer: { collapsed: true } }];
+          });
+
+          expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true);
+
+          wrapper.vm.collapsedWarningDismissed = true;
+          await wrapper.vm.$nextTick();
+
+          expect(getCollapsedFilesWarning(wrapper).exists()).toBe(false);
+        });
+      });
+    });
 
     it('should display commit widget if store has a commit', () => {
       createComponent({}, () => {

spec/frontend/diffs/components/collapsed_files_warning_spec.js

+import Vuex from 'vuex';
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import createStore from '~/diffs/store/modules';
+import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue';
+import { CENTERED_LIMITED_CONTAINER_CLASSES } from '~/diffs/constants';
+
+const propsData = {
+  limited: true,
+  mergeable: true,
+  resolutionPath: 'a-path',
+};
+const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' ');
+
+function getAlertActionButton(wrapper) {
+  return wrapper.find('.gl-alert-actions button.gl-alert-action:first-child').element;
+}
+
+function getAlertCloseButton(wrapper) {
+  return wrapper.find('[data-testid="close-icon"]').element.parentNode;
+}
+
+describe('CollapsedFilesWarning', () => {
+  const localVue = createLocalVue();
+  let store;
+  let wrapper;
+
+  localVue.use(Vuex);
+
+  const createComponent = (props = {}, { full } = { full: false }) => {
+    const mounter = full ? mount : shallowMount;
+    store = new Vuex.Store({
+      modules: {
+        diffs: createStore(),
+      },
+    });
+
+    wrapper = mounter(CollapsedFilesWarning, {
+      propsData: { ...propsData, ...props },
+      localVue,
+      store,
+    });
+  };
+
+  afterEach(() => {
+    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(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);
+  });
+
+  it('dismisses the component when the alert "x" is clicked', () => {
+    createComponent({}, { full: true });
+
+    expect(wrapper.vm.isDismissed).toBe(false);
+
+    getAlertCloseButton(wrapper).click();
+
+    expect(wrapper.vm.isDismissed).toBe(true);
+  });
+
+  it('triggers the expandAllFiles action when the alert action button is clicked', () => {
+    createComponent({}, { full: true });
+
+    jest.spyOn(wrapper.vm.$store, 'dispatch').mockReturnValue(undefined);
+
+    getAlertActionButton(wrapper).click();
+
+    expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith('diffs/expandAllFiles', undefined);
+  });
+});