Add kbd shortcuts for discussion navigation

Add keyboard shortcuts `p` and `n` to navigate duscussions.

2 files changed, 125 insertions, 0 deletions

diff --git a/spec/frontend/notes/components/discussion_keyboard_navigator_spec.js b/spec/frontend/notes/components/discussion_keyboard_navigator_spec.js
new file mode 100644
index 00000000000..6d50713999d
--- /dev/null
+++ b/spec/frontend/notes/components/discussion_keyboard_navigator_spec.js
@@ -0,0 +1,77 @@
+/* global Mousetrap */
+import 'mousetrap';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import DiscussionKeyboardNavigator from '~/notes/components/discussion_keyboard_navigator.vue';
+import notesModule from '~/notes/stores/modules';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const NEXT_ID = 'abc123';
+const PREV_ID = 'def456';
+const NEXT_DIFF_ID = 'abc123_diff';
+const PREV_DIFF_ID = 'def456_diff';
+
+describe('notes/components/discussion_keyboard_navigator', () => {
+  let storeOptions;
+  let wrapper;
+  let store;
+
+  const createComponent = (options = {}) => {
+    store = new Vuex.Store(storeOptions);
+
+    wrapper = shallowMount(DiscussionKeyboardNavigator, {
+      localVue,
+      store,
+      ...options,
+    });
+
+    wrapper.vm.jumpToDiscussion = jest.fn();
+  };
+
+  beforeEach(() => {
+    const notes = notesModule();
+
+    notes.getters.nextUnresolvedDiscussionId = () => (currId, isDiff) =>
+      isDiff ? NEXT_DIFF_ID : NEXT_ID;
+    notes.getters.previousUnresolvedDiscussionId = () => (currId, isDiff) =>
+      isDiff ? PREV_DIFF_ID : PREV_ID;
+
+    storeOptions = {
+      modules: {
+        notes,
+      },
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    storeOptions = null;
+    store = null;
+  });
+
+  describe.each`
+    isDiffView | expectedNextId  | expectedPrevId
+    ${true}    | ${NEXT_DIFF_ID} | ${PREV_DIFF_ID}
+    ${false}   | ${NEXT_ID}      | ${PREV_ID}
+  `('when isDiffView is $isDiffView', ({ isDiffView, expectedNextId, expectedPrevId }) => {
+    beforeEach(() => {
+      createComponent({ propsData: { isDiffView } });
+    });
+
+    it('calls jumpToNextDiscussion when pressing `n`', () => {
+      Mousetrap.trigger('n');
+
+      expect(wrapper.vm.jumpToDiscussion).toHaveBeenCalledWith(expectedNextId);
+      expect(wrapper.vm.currentDiscussionId).toEqual(expectedNextId);
+    });
+
+    it('calls jumpToPreviousDiscussion when pressing `p`', () => {
+      Mousetrap.trigger('p');
+
+      expect(wrapper.vm.jumpToDiscussion).toHaveBeenCalledWith(expectedPrevId);
+      expect(wrapper.vm.currentDiscussionId).toEqual(expectedPrevId);
+    });
+  });
+});
diff --git a/spec/javascripts/notes/stores/getters_spec.js b/spec/javascripts/notes/stores/getters_spec.js
index c3ed079e33b..71dcba114a9 100644
--- a/spec/javascripts/notes/stores/getters_spec.js
+++ b/spec/javascripts/notes/stores/getters_spec.js
@@ -256,6 +256,54 @@ describe('Getters Notes Store', () => {
     });
   });
 
+  describe('previousUnresolvedDiscussionId', () => {
+    describe('with unresolved discussions', () => {
+      const localGetters = {
+        unresolvedDiscussionsIdsOrdered: () => ['123', '456', '789'],
+      };
+
+      it('with bogus returns falsey', () => {
+        expect(getters.previousUnresolvedDiscussionId(state, localGetters)('bogus')).toBe('456');
+      });
+
+      [
+        { id: '123', expected: '789' },
+        { id: '456', expected: '123' },
+        { id: '789', expected: '456' },
+      ].forEach(({ id, expected }) => {
+        it(`with ${id}, returns previous value`, () => {
+          expect(getters.previousUnresolvedDiscussionId(state, localGetters)(id)).toBe(expected);
+        });
+      });
+    });
+
+    describe('with 1 unresolved discussion', () => {
+      const localGetters = {
+        unresolvedDiscussionsIdsOrdered: () => ['123'],
+      };
+
+      it('with bogus returns id', () => {
+        expect(getters.previousUnresolvedDiscussionId(state, localGetters)('bogus')).toBe('123');
+      });
+
+      it('with match, returns value', () => {
+        expect(getters.previousUnresolvedDiscussionId(state, localGetters)('123')).toEqual('123');
+      });
+    });
+
+    describe('with 0 unresolved discussions', () => {
+      const localGetters = {
+        unresolvedDiscussionsIdsOrdered: () => [],
+      };
+
+      it('returns undefined', () => {
+        expect(
+          getters.previousUnresolvedDiscussionId(state, localGetters)('bogus'),
+        ).toBeUndefined();
+      });
+    });
+  });
+
   describe('firstUnresolvedDiscussionId', () => {
     const localGetters = {
       unresolvedDiscussionsIdsByDate: ['123', '456'],