Pinafore-Web-Client-Frontend/tests/spec/025-shortcuts-status.js

253 lines
8.2 KiB
JavaScript
Raw Permalink Normal View History

feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
import {
closeDialogButton,
composeModalInput,
getNthFavoritedLabel,
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
getNthStatus,
getNthStatusContent,
getNthStatusMediaImg,
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
getNthStatusSensitiveMediaButton,
getNthStatusSpoiler,
getUrl,
modalDialog,
scrollToStatus,
isNthStatusActive,
getActiveElementRectTop,
scrollToTop,
isActiveStatusPinned,
getFirstModalMedia,
getNthStatusAccountLink,
getNthStatusAccountLinkSelector,
focus, getNthComposeReplyInput, getActiveElementId, getActiveElementClassList
} from '../utils'
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
import { homeTimeline } from '../fixtures'
import { loginAsFoobar } from '../roles'
import { Selector as $ } from 'testcafe'
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
fixture`025-shortcuts-status.js`
.page`http://localhost:4002`
async function activateStatus (t, idx) {
2019-08-03 22:49:37 +02:00
const timeout = 20000
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
for (let i = 0; i <= idx; i++) {
await t.expect(getNthStatus(1 + i).exists).ok({ timeout })
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j')
.expect(isNthStatusActive(1 + i)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
}
}
test('Shortcut j/k change the active status', async t => {
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(1).exists).ok({ timeout: 30000 })
.expect(isNthStatusActive(1)()).notOk()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j')
.expect(isNthStatusActive(1)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j')
.expect(isNthStatusActive(2)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j')
.expect(isNthStatusActive(3)()).ok()
.pressKey('j')
.expect(isNthStatusActive(4)()).ok()
.pressKey('k')
.expect(isNthStatusActive(3)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('k')
.expect(isNthStatusActive(2)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('k')
.expect(isNthStatusActive(1)()).ok()
.expect(isNthStatusActive(2)()).notOk()
.expect(isNthStatusActive(3)()).notOk()
.expect(isNthStatusActive(4)()).notOk()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
})
test('Shortcut j goes to the first visible status', async t => {
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
await scrollToStatus(t, 11)
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
await t
.expect(getNthStatus(11).exists).ok({ timeout: 30000 })
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j')
.expect(getActiveElementRectTop()).gte(0)
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
})
test('Shortcut o opens active status, backspace goes back', async t => {
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(3).exists).ok({ timeout: 30000 })
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j') // activates status 0
.pressKey('j') // activates status 1
.pressKey('j') // activates status 2
.expect(isNthStatusActive(3)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('o')
.expect(getUrl()).contains('/statuses/')
.pressKey('Backspace')
.expect(isNthStatusActive(3)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
})
test('Shortcut x shows/hides spoilers', async t => {
2019-08-03 22:49:37 +02:00
const idx = homeTimeline.findIndex(_ => _.spoiler === 'kitten CW')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
await activateStatus(t, idx)
await t
.expect(isNthStatusActive(1 + idx)()).ok()
.expect(getNthStatusSpoiler(1 + idx).innerText).contains('kitten CW')
.expect(getNthStatusContent(1 + idx).hasClass('shown')).notOk()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('x')
.expect(getNthStatusContent(1 + idx).hasClass('shown')).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('x')
.expect(getNthStatusContent(1 + idx).hasClass('shown')).notOk()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
})
test('Shortcut y shows/hides sensitive image, i opens', async t => {
2019-08-03 22:49:37 +02:00
const idx = homeTimeline.findIndex(_ => _.content === "here's a secret kitten")
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
await activateStatus(t, idx)
await t
.expect(isNthStatusActive(1 + idx)()).ok()
.expect(getNthStatusSensitiveMediaButton(1 + idx).exists).ok()
.expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^blob:http:\/\/localhost/)
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('y')
.expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^http:\/\//)
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('y')
.expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^blob:http:\/\/localhost/)
.pressKey('i')
.expect(getFirstModalMedia().getAttribute('alt')).eql('kitten')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
})
test('Shortcut f toggles favorite status', async t => {
2019-08-03 22:49:37 +02:00
const idx = homeTimeline.findIndex(_ => _.content === 'this is unlisted')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(1 + idx).exists).ok({ timeout: 30000 })
.expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('j '.repeat(idx + 1))
.expect(isNthStatusActive(1 + idx)()).ok()
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('f')
.expect(getNthFavoritedLabel(1 + idx)).eql('Unfavorite')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
.pressKey('f')
.expect(getNthFavoritedLabel(1 + idx)).eql('Favorite')
feat: Add support for keyboard shortcuts (#870) * Add support for keyboard shortcuts. This change introduces a Shortcut component for defining global keyboard shortcuts from whichever component makes more sense. This change also adds an initial set of navigation shortcuts: - Backspace to leave a modal dialog or to go back - g t to go to the federated timeline - g f to go to the favorite page - g h to go to the home page - g n to go to the notification page - g c to go to the community page - s to go to the search page These shortcuts are loaded asynchronously from _layout.html In modal dialogs, shortcuts are also modal, to avoid strange or overly complex behavior. This is implemented by grouping shortcuts into scopes, and activating a separate 'modal' scope when entering a modal dialog, so a separate set of shortcuts can be enabled in modal dialog. Modal dialogs can be exited by pressing 'Backspace'. * Navigate up/down lists using keyboard shortcuts. This change introduces keyboard shortcuts for navigating in lists and virtual lists. j or arrow up selects the next element, k or arrow down, the previous element. Selecting an element scrolls the list up and down, as necessary. This change also allows directing keyboard shortcuts to the active element and defines the following shortcuts, for the active status: - f to favorite or unfavorite it - b to boost or unboost it - r to reply to it - o to open its thread - x to toggle the display of a CW - y to toggle the display of sensitive medias This works by defining a keyboard shortcut scope for each list element. A new component, ScrollListShortcuts, keeps track of the active element, based on list or virtual list elements and redirects shortcuts to the active element's scope. ScrollListShortcuts keeps the active element in the current realm of the store, so the active element is restored when going back to the list. * Typing h or ? displays the list of available keyboard shortcuts. This change introduces a new modal dialog that documents the list of available shortcuts.
2019-01-13 19:03:29 +01:00
})
test('Shortcut p toggles profile', async t => {
2019-08-03 22:49:37 +02:00
const idx = homeTimeline.findIndex(_ => _.content === 'pinned toot 1')
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(1 + idx).exists).ok({ timeout: 30000 })
.pressKey('j '.repeat(idx + 1))
.expect(isNthStatusActive(1 + idx)()).ok()
.pressKey('p')
.expect(getUrl()).contains('/accounts/3')
})
test('Shortcut m toggles mention', async t => {
2019-08-03 22:49:37 +02:00
const idx = homeTimeline.findIndex(_ => _.content === 'pinned toot 1')
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(1 + idx).exists).ok({ timeout: 30000 })
.pressKey('j '.repeat(idx + 1))
.expect(isNthStatusActive(1 + idx)()).ok()
.pressKey('m')
.expect(composeModalInput.value).eql('@quux ')
.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, 3)
await t
.click(getNthStatus(3))
.expect(getUrl()).contains('/statuses')
await scrollToStatus(t, 1)
await scrollToTop()
await t
.expect(getNthStatus(1).exists).ok({ timeout: 30000 })
.expect(isNthStatusActive(1)()).notOk()
.pressKey('j')
.expect(isNthStatusActive(1)()).ok()
.pressKey('j')
.expect(isNthStatusActive(2)()).ok()
.pressKey('j')
.expect(isNthStatusActive(3)()).ok()
.pressKey('j')
.expect(isNthStatusActive(4)()).ok()
.pressKey('k')
.expect(isNthStatusActive(3)()).ok()
.pressKey('k')
.expect(isNthStatusActive(2)()).ok()
.pressKey('k')
.expect(isNthStatusActive(1)()).ok()
.expect(isNthStatusActive(2)()).notOk()
.expect(isNthStatusActive(3)()).notOk()
.expect(isNthStatusActive(4)()).notOk()
})
test('Shortcut j/k change the active status on pinned statuses', async t => {
await loginAsFoobar(t)
await t
.click($('a').withText('quux'))
.expect(getUrl()).contains('/accounts')
await t
.expect(getNthStatus(1).exists).ok({ timeout: 30000 })
.expect(isNthStatusActive(1)()).notOk()
.pressKey('j')
.expect(isNthStatusActive(1)()).ok()
.expect(isActiveStatusPinned()).eql(true)
.pressKey('j')
.expect(isNthStatusActive(2)()).ok()
.expect(isActiveStatusPinned()).eql(true)
.pressKey('j')
.expect(isNthStatusActive(1)()).ok()
.expect(isActiveStatusPinned()).eql(false)
.pressKey('j')
.expect(isNthStatusActive(2)()).ok()
.expect(isActiveStatusPinned()).eql(false)
.pressKey('k')
.expect(isNthStatusActive(1)()).ok()
.expect(isActiveStatusPinned()).eql(false)
.pressKey('k')
.expect(isNthStatusActive(2)()).ok()
.expect(isActiveStatusPinned()).eql(true)
.pressKey('k')
.expect(isNthStatusActive(1)()).ok()
.expect(isActiveStatusPinned()).eql(true)
})
test('Shortcut down makes next status active when focused inside of a status', async t => {
await loginAsFoobar(t)
await t
.expect(getNthStatusAccountLink(1).exists).ok()
await focus(getNthStatusAccountLinkSelector(1))()
await t
.pressKey('down')
.expect(isNthStatusActive(2)()).ok()
})
test('Press r to reply, press Esc to close reply', async t => {
await loginAsFoobar(t)
await t
.expect(getNthStatus(1).exists).ok()
await activateStatus(t, 0)
const id = await getActiveElementId()
await t
.expect(getNthComposeReplyInput(1).exists).notOk()
.pressKey('r')
.expect(getNthComposeReplyInput(1).exists).ok()
.expect(getActiveElementClassList()).contains('compose-box-input')
.pressKey('esc')
.expect(getNthComposeReplyInput(1).exists).notOk()
.expect(getActiveElementId()).eql(id)
})