Add tests for the events a diff file might emit

spec/frontend/diffs/components/diff_file_spec.js

@@ -2,6 +2,7 @@ import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
 import createDiffsStore from '~/diffs/store/modules';
+import createNotesStore from '~/notes/stores/modules';
 import diffFileMockDataReadable from '../mock_data/diff_file';
 import diffFileMockDataUnreadable from '../mock_data/diff_file_unreadable';
 
@@ -10,9 +11,13 @@ import DiffFileHeaderComponent from '~/diffs/components/diff_file_header.vue';
 import DiffContentComponent from '~/diffs/components/diff_content.vue';
 
 import eventHub from '~/diffs/event_hub';
+import {
+  EVT_EXPAND_ALL_FILES,
+  EVT_PERF_MARK_DIFF_FILES_END,
+  EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN,
+} from '~/diffs/constants';
 
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
-import { EVT_EXPAND_ALL_FILES } from '~/diffs/constants';
 
 function changeViewer(store, index, { automaticallyCollapsed, manuallyCollapsed, name }) {
   const file = store.state.diffs.diffFiles[index];
@@ -58,12 +63,13 @@ function markFileToBeRendered(store, index = 0) {
   });
 }
 
-function createComponent({ file }) {
+function createComponent({ file, first = false, last = false }) {
   const localVue = createLocalVue();
 
   localVue.use(Vuex);
 
   const store = new Vuex.Store({
+    ...createNotesStore(),
     modules: {
       diffs: createDiffsStore(),
     },
@@ -78,6 +84,8 @@ function createComponent({ file }) {
       file,
       canCurrentUserFork: false,
       viewDiffsFileByFile: false,
+      isFirstFile: first,
+      isLastFile: last,
     },
   });
 
@@ -117,6 +125,72 @@ describe('DiffFile', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('bus events', () => {
+    beforeEach(() => {
+      jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
+    });
+
+    describe('during mount', () => {
+      it.each`
+        first    | last     | events                                                                 | file
+        ${false} | ${false} | ${[]}                                                                  | ${{ inlineLines: [], parallelLines: [], readableText: true }}
+        ${true}  | ${true}  | ${[]}                                                                  | ${{ inlineLines: [], parallelLines: [], readableText: true }}
+        ${true}  | ${false} | ${[EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN]}                               | ${false}
+        ${false} | ${true}  | ${[EVT_PERF_MARK_DIFF_FILES_END]}                                      | ${false}
+        ${true}  | ${true}  | ${[EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN, EVT_PERF_MARK_DIFF_FILES_END]} | ${false}
+      `(
+        'emits the events $events based on the file and its position ({ first: $first, last: $last }) among all files',
+        async ({ file, first, last, events }) => {
+          if (file) {
+            forceHasDiff({ store, ...file });
+          }
+
+          ({ wrapper, store } = createComponent({
+            file: store.state.diffs.diffFiles[0],
+            first,
+            last,
+          }));
+
+          await wrapper.vm.$nextTick();
+
+          expect(eventHub.$emit).toHaveBeenCalledTimes(events.length);
+          events.forEach(event => {
+            expect(eventHub.$emit).toHaveBeenCalledWith(event);
+          });
+        },
+      );
+    });
+
+    describe('after loading the diff', () => {
+      it('indicates that it loaded the file', async () => {
+        forceHasDiff({ store, inlineLines: [], parallelLines: [], readableText: true });
+        ({ wrapper, store } = createComponent({
+          file: store.state.diffs.diffFiles[0],
+          first: true,
+          last: true,
+        }));
+
+        jest.spyOn(wrapper.vm, 'loadCollapsedDiff').mockResolvedValue(getReadableFile());
+        jest.spyOn(window, 'requestIdleCallback').mockImplementation(fn => fn());
+
+        makeFileAutomaticallyCollapsed(store);
+
+        await wrapper.vm.$nextTick(); // Wait for store updates to flow into the component
+
+        toggleFile(wrapper);
+
+        await wrapper.vm.$nextTick(); // Wait for the load to resolve
+        await wrapper.vm.$nextTick(); // Wait for the idleCallback
+        await wrapper.vm.$nextTick(); // Wait for nextTick inside postRender
+
+        expect(eventHub.$emit).toHaveBeenCalledTimes(2);
+        expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN);
+        expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_DIFF_FILES_END);
+      });
+    });
   });
 
   describe('template', () => {