1 files changed, 94 insertions, 51 deletions

diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 1a95f586344..57e3a93c6f4 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -28,8 +28,14 @@ describe('diffs/components/app', () => {
   let wrapper;
   let mock;
 
-  function createComponent(props = {}, extendStore = () => {}) {
+  function createComponent(props = {}, extendStore = () => {}, provisions = {}) {
     const localVue = createLocalVue();
+    const provide = {
+      ...provisions,
+      glFeatures: {
+        ...(provisions.glFeatures || {}),
+      },
+    };
 
     localVue.use(Vuex);
 
@@ -52,6 +58,7 @@ describe('diffs/components/app', () => {
         showSuggestPopover: true,
         ...props,
       },
+      provide,
       store,
       methods: {
         isLatestVersion() {
@@ -82,7 +89,10 @@ describe('diffs/components/app', () => {
     window.mrTabs = oldMrTabs;
 
     // reset component
-    wrapper.destroy();
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
 
     mock.restore();
   });
@@ -455,76 +465,109 @@ describe('diffs/components/app', () => {
   });
 
   describe('keyboard shortcut navigation', () => {
-    const mappings = {
-      '[': -1,
-      k: -1,
-      ']': +1,
-      j: +1,
-    };
-    let spy;
+    let spies = [];
+    let jumpSpy;
+    let moveSpy;
+
+    function setup(componentProps, featureFlags) {
+      createComponent(
+        componentProps,
+        ({ state }) => {
+          state.diffs.commit = { id: 'SHA123' };
+        },
+        { glFeatures: { mrCommitNeighborNav: true, ...featureFlags } },
+      );
+
+      moveSpy = jest.spyOn(wrapper.vm, 'moveToNeighboringCommit').mockImplementation(() => {});
+      jumpSpy = jest.fn();
+      spies = [jumpSpy, moveSpy];
+      wrapper.setMethods({
+        jumpToFile: jumpSpy,
+      });
+    }
 
     describe('visible app', () => {
-      beforeEach(() => {
-        spy = jest.fn();
+      it.each`
+        key    | name                         | spy  | args                           | featureFlags
+        ${'['} | ${'jumpToFile'}              | ${0} | ${[-1]}                        | ${{}}
+        ${'k'} | ${'jumpToFile'}              | ${0} | ${[-1]}                        | ${{}}
+        ${']'} | ${'jumpToFile'}              | ${0} | ${[+1]}                        | ${{}}
+        ${'j'} | ${'jumpToFile'}              | ${0} | ${[+1]}                        | ${{}}
+        ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'previous' }]} | ${{ mrCommitNeighborNav: true }}
+        ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${[{ direction: 'next' }]}     | ${{ mrCommitNeighborNav: true }}
+      `(
+        'calls `$name()` with correct parameters whenever the "$key" key is pressed',
+        ({ key, spy, args, featureFlags }) => {
+          setup({ shouldShow: true }, featureFlags);
 
-        createComponent({
-          shouldShow: true,
-        });
-        wrapper.setMethods({
-          jumpToFile: spy,
-        });
-      });
+          return wrapper.vm.$nextTick().then(() => {
+            expect(spies[spy]).not.toHaveBeenCalled();
+
+            Mousetrap.trigger(key);
+
+            expect(spies[spy]).toHaveBeenCalledWith(...args);
+          });
+        },
+      );
+
+      it.each`
+        key    | name                         | spy  | featureFlags
+        ${'x'} | ${'moveToNeighboringCommit'} | ${1} | ${{ mrCommitNeighborNav: false }}
+        ${'c'} | ${'moveToNeighboringCommit'} | ${1} | ${{ mrCommitNeighborNav: false }}
+      `(
+        'does not call `$name()` even when the correct key is pressed if the feature flag is disabled',
+        ({ key, spy, featureFlags }) => {
+          setup({ shouldShow: true }, featureFlags);
 
-      it.each(Object.keys(mappings))(
-        'calls `jumpToFile()` with correct parameter whenever pre-defined %s is pressed',
-        key => {
           return wrapper.vm.$nextTick().then(() => {
-            expect(spy).not.toHaveBeenCalled();
+            expect(spies[spy]).not.toHaveBeenCalled();
 
             Mousetrap.trigger(key);
 
-            expect(spy).toHaveBeenCalledWith(mappings[key]);
+            expect(spies[spy]).not.toHaveBeenCalled();
           });
         },
       );
 
-      it('does not call `jumpToFile()` when unknown key is pressed', done => {
-        wrapper.vm
-          .$nextTick()
-          .then(() => {
-            Mousetrap.trigger('d');
+      it.each`
+        key    | name                         | spy  | allowed
+        ${'d'} | ${'jumpToFile'}              | ${0} | ${['[', ']', 'j', 'k']}
+        ${'r'} | ${'moveToNeighboringCommit'} | ${1} | ${['x', 'c']}
+      `(
+        `does not call \`$name()\` when a key that is not one of \`$allowed\` is pressed`,
+        ({ key, spy }) => {
+          setup({ shouldShow: true }, { mrCommitNeighborNav: true });
 
-            expect(spy).not.toHaveBeenCalled();
-          })
-          .then(done)
-          .catch(done.fail);
-      });
+          return wrapper.vm.$nextTick().then(() => {
+            Mousetrap.trigger(key);
+
+            expect(spies[spy]).not.toHaveBeenCalled();
+          });
+        },
+      );
     });
 
-    describe('hideen app', () => {
+    describe('hidden app', () => {
       beforeEach(() => {
-        spy = jest.fn();
+        setup({ shouldShow: false }, { mrCommitNeighborNav: true });
 
-        createComponent({
-          shouldShow: false,
-        });
-        wrapper.setMethods({
-          jumpToFile: spy,
+        return wrapper.vm.$nextTick().then(() => {
+          Mousetrap.reset();
         });
       });
 
-      it('stops calling `jumpToFile()` when application is hidden', done => {
-        wrapper.vm
-          .$nextTick()
-          .then(() => {
-            Object.keys(mappings).forEach(key => {
-              Mousetrap.trigger(key);
+      it.each`
+        key    | name                         | spy
+        ${'['} | ${'jumpToFile'}              | ${0}
+        ${'k'} | ${'jumpToFile'}              | ${0}
+        ${']'} | ${'jumpToFile'}              | ${0}
+        ${'j'} | ${'jumpToFile'}              | ${0}
+        ${'x'} | ${'moveToNeighboringCommit'} | ${1}
+        ${'c'} | ${'moveToNeighboringCommit'} | ${1}
+      `('stops calling `$name()` when the app is hidden', ({ key, spy }) => {
+        Mousetrap.trigger(key);
 
-              expect(spy).not.toHaveBeenCalled();
-            });
-          })
-          .then(done)
-          .catch(done.fail);
+        expect(spies[spy]).not.toHaveBeenCalled();
       });
     });
   });