fix incoming statuses, add tests

This commit is contained in:
Nolan Lawson 2018-03-10 10:54:16 -08:00
parent 8b21505089
commit b3263e528f
9 changed files with 98 additions and 24 deletions

View file

@ -4,6 +4,7 @@ import { getTimeline } from '../_api/timelines'
import { toast } from '../_utils/toast'
import { mark, stop } from '../_utils/marks'
import { mergeArrays } from '../_utils/arrays'
import { byItemIds } from '../_utils/sorting'
const FETCH_LIMIT = 20
@ -74,39 +75,41 @@ export async function setupTimeline () {
stop('setupTimeline')
}
export async function fetchTimelineItemsOnScrollToBottom () {
let timelineName = store.get('currentTimeline')
let instanceName = store.get('currentInstance')
export async function fetchTimelineItemsOnScrollToBottom (instanceName, timelineName) {
store.setForTimeline(instanceName, timelineName, { runningUpdate: true })
await fetchTimelineItemsAndPossiblyFallBack()
store.setForTimeline(instanceName, timelineName, { runningUpdate: false })
}
export async function showMoreItemsForCurrentTimeline () {
mark('showMoreItemsForCurrentTimeline')
let instanceName = store.get('currentInstance')
let timelineName = store.get('currentTimeline')
let itemIdsToAdd = store.get('itemIdsToAdd')
export async function showMoreItemsForTimeline (instanceName, timelineName) {
mark('showMoreItemsForTimeline')
let itemIdsToAdd = store.getForTimeline(instanceName, timelineName, 'itemIdsToAdd')
itemIdsToAdd = itemIdsToAdd.sort(byItemIds).reverse()
addTimelineItemIds(instanceName, timelineName, itemIdsToAdd)
store.setForTimeline(instanceName, timelineName, {
itemIdsToAdd: [],
shouldShowHeader: false,
showHeader: false
})
stop('showMoreItemsForCurrentTimeline')
stop('showMoreItemsForTimeline')
}
export async function showMoreItemsForCurrentThread () {
mark('showMoreItemsForCurrentThread')
let instanceName = store.get('currentInstance')
let timelineName = store.get('currentTimeline')
let itemIdsToAdd = store.get('itemIdsToAdd')
// TODO: update database and do the thread merge correctly
export async function showMoreItemsForCurrentTimeline () {
return showMoreItemsForTimeline(
store.get('currentInstance'),
store.get('currentTimeline')
)
}
export async function showMoreItemsForThread (instanceName, timelineName) {
mark('showMoreItemsForThread')
let itemIdsToAdd = store.getForTimeline(instanceName, timelineName, 'itemIdsToAdd')
let timelineItemIds = store.getForTimeline(instanceName, timelineName, 'timelineItemIds')
// TODO: update database and do the thread merge correctly
timelineItemIds = timelineItemIds.concat(itemIdsToAdd)
store.setForTimeline(instanceName, timelineName, {
itemIdsToAdd: [],
timelineItemIds: timelineItemIds
})
stop('showMoreItemsForCurrentThread')
stop('showMoreItemsForThread')
}

View file

@ -1,6 +1,6 @@
<div class="more-items-header" role="alert">
<button class="primary" type="button" on:click="onClick(event)">
Click to show {{count}} more
Show {{count}} more
</button>
</div>
<style>

View file

@ -64,11 +64,12 @@
initializeTimeline,
fetchTimelineItemsOnScrollToBottom,
setupTimeline,
showMoreItemsForCurrentThread
showMoreItemsForTimeline,
showMoreItemsForThread,
showMoreItemsForCurrentTimeline
} from '../../_actions/timeline'
import LoadingPage from '../LoadingPage.html'
import { focusWithCapture, blurWithCapture } from '../../_utils/events'
import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks'
import { importPseudoVirtualList } from '../../_utils/asyncModules'
@ -178,7 +179,10 @@
this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread
return
}
fetchTimelineItemsOnScrollToBottom()
fetchTimelineItemsOnScrollToBottom(
this.get('currentInstance'),
this.get('timeline')
)
},
onScrollToTop() {
if (this.store.get('shouldShowHeader')) {
@ -202,11 +206,11 @@
let showHeader = this.store.get('showHeader')
if (timelineName.startsWith('status/')) {
// this is a thread, just insert the statuses already
showMoreItemsForCurrentThread()
showMoreItemsForThread(instanceName, timelineName)
} else if (scrollTop === 0 && !shouldShowHeader && !showHeader) {
// if the user is scrolled to the top and we're not showing the header, then
// just insert the statuses. this is "chat room mode"
showMoreItemsForCurrentTimeline()
showMoreItemsForTimeline(instanceName, timelineName)
} else {
// user hasn't scrolled to the top, show a header instead
this.store.setForTimeline(instanceName, timelineName, {shouldShowHeader: true})

View file

@ -1,4 +1,4 @@
import { toPaddedBigInt, toReversePaddedBigInt } from './utils'
import { toPaddedBigInt, toReversePaddedBigInt } from '../_utils/sorting'
import { cloneForStorage } from './helpers'
import { dbPromise, getDatabase } from './databaseLifecycle'
import {

View file

@ -12,3 +12,9 @@ export function toReversePaddedBigInt (id) {
}
return res
}
export function byItemIds (a, b) {
let aPadded = toPaddedBigInt(a)
let bPadded = toPaddedBigInt(b)
return aPadded < bPadded ? -1 : aPadded === bPadded ? 0 : 1
}

View file

@ -1,8 +1,18 @@
import { favoriteStatus } from '../routes/_api/favorite'
import fetch from 'node-fetch'
import FileApi from 'file-api'
import { users } from './users'
import { postStatus } from '../routes/_api/statuses'
global.fetch = fetch
global.File = FileApi.File
global.FormData = FileApi.FormData
export async function favoriteStatusAsAdmin (statusId) {
return favoriteStatus('localhost:3000', users.admin.accessToken, statusId)
}
export async function postAsAdmin (text) {
return postStatus('localhost:3000', users.admin.accessToken, text,
null, null, false, null, 'public')
}

View file

@ -0,0 +1,44 @@
import { foobarRole } from '../roles'
import {
getFirstVisibleStatus, getNthReplyButton, getNthStatus, getUrl, homeNavButton, notificationsNavButton,
postStatusButton, scrollContainerToTop, showMoreButton, sleep
} from '../utils'
import { postAsAdmin } from '../serverActions'
fixture`104-streaming.js`
.page`http://localhost:4002`
test('new incoming statuses show up immediately', async t => {
await t.useRole(foobarRole)
.hover(getNthStatus(0))
await postAsAdmin('hello my baby hello my honey')
await t.expect(getNthStatus(0).innerText).contains('hello my baby hello my honey')
})
test('new incoming toots show a button if scrolled down', async t => {
await t.useRole(foobarRole)
.hover(getNthStatus(0))
.hover(getNthStatus(2))
.hover(getNthStatus(4))
await postAsAdmin('hello my ragtime gal')
await postAsAdmin('send me a kiss by wire')
await sleep(4000)
await t.hover(getNthStatus(2))
.hover(getNthStatus(0))
await scrollContainerToTop()
await sleep(1000)
await t
.expect(showMoreButton.innerText).contains('Show 2 more')
await postAsAdmin("baby my heart's on fire")
await sleep(4000)
await t.expect(showMoreButton.innerText).contains('Show 3 more')
.click(showMoreButton)
await t
.expect(getNthStatus(0).innerText).contains("baby my heart's on fire")
.expect(getNthStatus(1).innerText).contains('send me a kiss by wire')
.expect(getNthStatus(2).innerText).contains('hello my ragtime gal')
.navigateTo('/')
.expect(getNthStatus(0).innerText).contains("baby my heart's on fire")
.expect(getNthStatus(1).innerText).contains('send me a kiss by wire')
.expect(getNthStatus(2).innerText).contains('hello my ragtime gal')
})

View file

@ -26,6 +26,7 @@ export const authorizeInput = $('button[type=submit]:not(.negative)')
export const logInToInstanceLink = $('a[href="/settings/instances/add"]')
export const searchInput = $('.search-input')
export const postStatusButton = $('.compose-box-button')
export const showMoreButton = $('.more-items-header button')
export const favoritesCountElement = $('.status-favs-reblogs:nth-child(3)').addCustomDOMProperties({
innerCount: el => parseInt(el.innerText, 10)
@ -35,6 +36,8 @@ export const reblogsCountElement = $('.status-favs-reblogs:nth-child(2)').addCus
innerCount: el => parseInt(el.innerText, 10)
})
export const sleep = timeout => new Promise(resolve => setTimeout(resolve, timeout))
export const getUrl = exec(() => window.location.href)
export const getActiveElementClass = exec(() =>
@ -51,6 +54,10 @@ export const getComposeSelectionStart = exec(() => composeInput().selectionStart
dependencies: { composeInput }
})
export const scrollContainerToTop = exec(() => {
document.getElementsByClassName('container')[0].scrollTop = 0
})
export const uploadKittenImage = i => (exec(() => {
let image = images[`kitten${i}`]
let blob = blobUtils.base64StringToBlob(image.data, 'image/png')