fix: fix keyboard shortcuts on thread (#1031)

* fix: fix keyboard shortcuts on thread

fixes #1029

* fix test

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)}]`)
       },

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,

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()
+})