From b3263e528fa8f7dc7ea76c045ef2ae3f24c331ff Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 10 Mar 2018 10:54:16 -0800
Subject: [PATCH] fix incoming statuses, add tests

---
 routes/_actions/timeline.js                   | 35 ++++++++-------
 routes/_components/timeline/MoreHeader.html   |  2 +-
 routes/_components/timeline/Timeline.html     | 14 +++---
 routes/_database/timelines.js                 |  2 +-
 routes/_static/media.js                       |  2 +-
 .../{_database/utils.js => _utils/sorting.js} |  6 +++
 tests/serverActions.js                        | 10 +++++
 tests/spec/104-streaming.js                   | 44 +++++++++++++++++++
 tests/utils.js                                |  7 +++
 9 files changed, 98 insertions(+), 24 deletions(-)
 rename routes/{_database/utils.js => _utils/sorting.js} (66%)
 create mode 100644 tests/spec/104-streaming.js

diff --git a/routes/_actions/timeline.js b/routes/_actions/timeline.js
index 403181fe..2b087519 100644
--- a/routes/_actions/timeline.js
+++ b/routes/_actions/timeline.js
@@ -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')
 }
diff --git a/routes/_components/timeline/MoreHeader.html b/routes/_components/timeline/MoreHeader.html
index 2c86e9cc..fc6079aa 100644
--- a/routes/_components/timeline/MoreHeader.html
+++ b/routes/_components/timeline/MoreHeader.html
@@ -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>
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 1e4dc746..e8747d66 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -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})
diff --git a/routes/_database/timelines.js b/routes/_database/timelines.js
index 119996a8..ec103891 100644
--- a/routes/_database/timelines.js
+++ b/routes/_database/timelines.js
@@ -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 {
diff --git a/routes/_static/media.js b/routes/_static/media.js
index 3d9d762e..81ede6e3 100644
--- a/routes/_static/media.js
+++ b/routes/_static/media.js
@@ -2,4 +2,4 @@ export const DEFAULT_MEDIA_WIDTH = 300
 export const DEFAULT_MEDIA_HEIGHT = 200
 
 export const ONE_TRANSPARENT_PIXEL =
-  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
\ No newline at end of file
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
diff --git a/routes/_database/utils.js b/routes/_utils/sorting.js
similarity index 66%
rename from routes/_database/utils.js
rename to routes/_utils/sorting.js
index 060e8e74..6f0289c7 100644
--- a/routes/_database/utils.js
+++ b/routes/_utils/sorting.js
@@ -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
+}
diff --git a/tests/serverActions.js b/tests/serverActions.js
index 3bb98fdc..c19ca85b 100644
--- a/tests/serverActions.js
+++ b/tests/serverActions.js
@@ -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')
+}
diff --git a/tests/spec/104-streaming.js b/tests/spec/104-streaming.js
new file mode 100644
index 00000000..d9bba27d
--- /dev/null
+++ b/tests/spec/104-streaming.js
@@ -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')
+})
diff --git a/tests/utils.js b/tests/utils.js
index ebbad0f1..b54f9327 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -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')