add focus test

tests/spec/08-status-media.js

@@ -1,19 +1,13 @@
-import { Selector as $ } from 'testcafe'
+import { closeDialogButton, getNthStatus, modalDialogContents, scrollToStatus } from '../utils'
-import { getNthStatus } from '../utils'
 import { foobarRole } from '../roles'
 
-const modalDialogContents = $('.modal-dialog-contents')
-const closeDialogButton = $('.close-dialog-button')
-
 fixture`08-status-media.js`
   .page`http://localhost:4002`
 
 test('shows sensitive images and videos', async t => {
   await t.useRole(foobarRole)
-    .hover(getNthStatus(3))
+  await scrollToStatus(t, 7)
-    .hover(getNthStatus(6))
+  await t.expect(getNthStatus(7).find('.status-media img').exists).notOk()
-    .hover(getNthStatus(7))
-    .expect(getNthStatus(7).find('.status-media img').exists).notOk()
     .click(getNthStatus(7).find('.status-sensitive-media-button'))
     .expect(getNthStatus(7).find('.status-media img').getAttribute('alt')).eql('kitten')
     .expect(getNthStatus(7).find('.status-media img').hasAttribute('src')).ok()
@@ -25,11 +19,8 @@ test('shows sensitive images and videos', async t => {
 
 test('click and close image and video modals', async t => {
   await t.useRole(foobarRole)
-    .hover(getNthStatus(3))
+  await scrollToStatus(t, 9)
-    .hover(getNthStatus(6))
+  await t.expect(modalDialogContents.exists).notOk()
-    .hover(getNthStatus(7))
-    .hover(getNthStatus(9))
-    .expect(modalDialogContents.exists).notOk()
     .click(getNthStatus(9).find('.play-video-button'))
     .expect(modalDialogContents.exists).ok()
     .click(closeDialogButton)

tests/spec/10-focus.js

@@ -0,0 +1,25 @@
+import {
+  getNthStatus, scrollToStatus, closeDialogButton, modalDialogContents, getActiveElementClass, goBack, getUrl
+} from '../utils'
+import { foobarRole } from '../roles'
+
+fixture`09-threads.js`
+  .page`http://localhost:4002`
+
+test('modal preserves focus', async t => {
+  await t.useRole(foobarRole)
+  await scrollToStatus(t, 9)
+  await t.click(getNthStatus(9).find('.play-video-button'))
+    .click(closeDialogButton)
+    .expect(modalDialogContents.exists).notOk()
+    .expect(getActiveElementClass()).eql('play-video-button')
+})
+
+test('timeline preserves focus', async t => {
+  await t.useRole(foobarRole)
+    .click(getNthStatus(0))
+    .expect(getUrl()).contains('/statuses/99549266679020981')
+
+  await goBack()
+  await t.expect(getActiveElementClass()).eql('status-article status-in-timeline')
+})

tests/utils.js

@@ -3,9 +3,17 @@ import { ClientFunction as exec, Selector as $ } from 'testcafe'
 export const settingsButton = $('nav a[aria-label=Settings]')
 export const instanceInput = $('#instanceInput')
 export const addInstanceButton = $('.add-new-instance button')
+export const modalDialogContents = $('.modal-dialog-contents')
+export const closeDialogButton = $('.close-dialog-button')
 
 export const getUrl = exec(() => window.location.href)
 
+export const getActiveElementClass = exec(() =>
+  document.activeElement ? document.activeElement.getAttribute('class') : ''
+)
+
+export const goBack = exec(() => window.history.back())
+
 export function getNthStatus (n) {
   return $(`[aria-hidden="false"] > article[aria-posinset="${n}"]`)
 }
@@ -58,3 +66,10 @@ export async function scrollToBottomOfTimeline (t) {
     lastSize = newSize
   }
 }
+
+export async function scrollToStatus (t, n) {
+  for (let i = 0; i < n; i += 2) {
+    await t.hover(getNthStatus(n))
+  }
+  await t.hover(getNthStatus(n))
+}