fix: fix keyboard shortcuts on thread (#1031)

* fix: fix keyboard shortcuts on thread

fixes #1029

* fix test
This commit is contained in:
Nolan Lawson 2019-02-22 20:35:13 -08:00 committed by GitHub
parent e16c312788
commit 11e918dd50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 5 deletions

View file

@ -15,7 +15,7 @@
export default { export default {
data: () => ({ data: () => ({
scope: 'global', scope: 'global',
itemToKey: (item) => item.key, itemToKey: (item) => item,
keyToElement: (key) => { keyToElement: (key) => {
return document.querySelector(`[shortcut-key=${JSON.stringify(key)}]`) return document.querySelector(`[shortcut-key=${JSON.stringify(key)}]`)
}, },

View file

@ -18,8 +18,7 @@
{/if} {/if}
</div> </div>
</VirtualListContainer> </VirtualListContainer>
<ScrollListShortcuts items={$visibleItems} <ScrollListShortcuts items={visibleItemKeys} />
itemToKey={(visibleItem) => visibleItem.key} />
<style> <style>
.virtual-list { .virtual-list {
position: relative; position: relative;
@ -111,7 +110,8 @@
}, },
scrollTop: ({ $scrollTop }) => $scrollTop, scrollTop: ({ $scrollTop }) => $scrollTop,
// TODO: bug in svelte store, shouldn't need to do this // TODO: bug in svelte store, shouldn't need to do this
allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight allVisibleItemsHaveHeight: ({ $allVisibleItemsHaveHeight }) => $allVisibleItemsHaveHeight,
visibleItemKeys: ({ $visibleItems }) => ($visibleItems || []).map(_ => _.key)
}, },
methods: { methods: {
observe, observe,

View file

@ -9,11 +9,12 @@ import {
getNthStatusSpoiler, getNthStatusSpoiler,
getUrl, modalDialog, getUrl, modalDialog,
scrollToStatus, scrollToStatus,
isNthStatusActive, getActiveElementRectTop isNthStatusActive, getActiveElementRectTop, scrollToTop
} from '../utils' } from '../utils'
import { homeTimeline } from '../fixtures' import { homeTimeline } from '../fixtures'
import { loginAsFoobar } from '../roles' import { loginAsFoobar } from '../roles'
import { indexWhere } from '../../src/routes/_utils/arrays' import { indexWhere } from '../../src/routes/_utils/arrays'
import { Selector as $ } from 'testcafe'
fixture`025-shortcuts-status.js` fixture`025-shortcuts-status.js`
.page`http://localhost:4002` .page`http://localhost:4002`
@ -150,3 +151,35 @@ test('Shortcut m toggles mention', async t => {
.click(closeDialogButton) .click(closeDialogButton)
.expect(modalDialog.exists).notOk() .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()
})