From 11e918dd50a6fed53eba06d58dc7316872dd3240 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 22 Feb 2019 20:35:13 -0800
Subject: [PATCH] fix: fix keyboard shortcuts on thread (#1031)

* fix: fix keyboard shortcuts on thread

fixes #1029

* fix test
---
 .../shortcut/ScrollListShortcuts.html         |  2 +-
 .../_components/virtualList/VirtualList.html  |  6 ++--
 tests/spec/025-shortcuts-status.js            | 35 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/routes/_components/shortcut/ScrollListShortcuts.html b/src/routes/_components/shortcut/ScrollListShortcuts.html
index f4b2346..d8fa93f 100644
--- a/src/routes/_components/shortcut/ScrollListShortcuts.html
+++ b/src/routes/_components/shortcut/ScrollListShortcuts.html
@@ -15,7 +15,7 @@
   export default {
     data: () => ({
       scope: 'global',
-      itemToKey: (item) => item.key,
+      itemToKey: (item) => item,
       keyToElement: (key) => {
         return document.querySelector(`[shortcut-key=${JSON.stringify(key)}]`)
       },
diff --git a/src/routes/_components/virtualList/VirtualList.html b/src/routes/_components/virtualList/VirtualList.html
index 1dd3675..dd515fd 100644
--- a/src/routes/_components/virtualList/VirtualList.html
+++ b/src/routes/_components/virtualList/VirtualList.html
@@ -18,8 +18,7 @@
     {/if}
   </div>
 </VirtualListContainer>
-<ScrollListShortcuts items={$visibleItems}
-                     itemToKey={(visibleItem) => visibleItem.key} />
+<ScrollListShortcuts items={visibleItemKeys} />
 <style>
   .virtual-list {
     position: relative;
@@ -111,7 +110,8 @@
       },
       scrollTop: ({ $scrollTop }) => $scrollTop,
       // TODO: bug in svelte store, shouldn't need to do this
-      allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight
+      allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight,
+      visibleItemKeys: ({ $visibleItems }) => ($visibleItems || []).map(_ => _.key)
     },
     methods: {
       observe,
diff --git a/tests/spec/025-shortcuts-status.js b/tests/spec/025-shortcuts-status.js
index 7728ae0..24909bb 100644
--- a/tests/spec/025-shortcuts-status.js
+++ b/tests/spec/025-shortcuts-status.js
@@ -9,11 +9,12 @@ import {
   getNthStatusSpoiler,
   getUrl, modalDialog,
   scrollToStatus,
-  isNthStatusActive, getActiveElementRectTop
+  isNthStatusActive, getActiveElementRectTop, scrollToTop
 } from '../utils'
 import { homeTimeline } from '../fixtures'
 import { loginAsFoobar } from '../roles'
 import { indexWhere } from '../../src/routes/_utils/arrays'
+import { Selector as $ } from 'testcafe'
 
 fixture`025-shortcuts-status.js`
   .page`http://localhost:4002`
@@ -150,3 +151,35 @@ test('Shortcut m toggles mention', async t => {
     .click(closeDialogButton)
     .expect(modalDialog.exists).notOk()
 })
+
+test('Shortcut j/k change the active status on a thread', async t => {
+  await loginAsFoobar(t)
+  await t
+    .click($('a').withText('quux'))
+  await scrollToStatus(t, 2)
+  await t
+    .click(getNthStatus(2))
+    .expect(getUrl()).contains('/statuses')
+  await scrollToStatus(t, 0)
+  await scrollToTop()
+  await t
+    .expect(getNthStatus(0).exists).ok({ timeout: 30000 })
+    .expect(isNthStatusActive(0)()).notOk()
+    .pressKey('j')
+    .expect(isNthStatusActive(0)()).ok()
+    .pressKey('j')
+    .expect(isNthStatusActive(1)()).ok()
+    .pressKey('j')
+    .expect(isNthStatusActive(2)()).ok()
+    .pressKey('j')
+    .expect(isNthStatusActive(3)()).ok()
+    .pressKey('k')
+    .expect(isNthStatusActive(2)()).ok()
+    .pressKey('k')
+    .expect(isNthStatusActive(1)()).ok()
+    .pressKey('k')
+    .expect(isNthStatusActive(0)()).ok()
+    .expect(isNthStatusActive(1)()).notOk()
+    .expect(isNthStatusActive(2)()).notOk()
+    .expect(isNthStatusActive(3)()).notOk()
+})