pinafore/tests/spec/010-focus.js

import {
  getNthStatus, scrollToStatus, closeDialogButton, modalDialogContents, getActiveElementClass, goBack, getUrl,
  goBackButton, getActiveElementInnerText, getNthReplyButton, getActiveElementInsideNthStatus, focus,
  getNthStatusSelector, getActiveElementTagName
} from '../utils'
import { loginAsFoobar } from '../roles'
import { Selector as $ } from 'testcafe'
import { indexWhere } from '../../src/routes/_utils/arrays'
import { homeTimeline } from '../fixtures'

fixture`010-focus.js`
  .page`http://localhost:4002`

test('modal preserves focus', async t => {
  await loginAsFoobar(t)

  let idx = indexWhere(homeTimeline, _ => _.content === "here's a video")

  await scrollToStatus(t, idx)
  // explicitly hover-focus-click
  await t.hover($(`${getNthStatusSelector(idx)} .play-video-button`))
  await focus(`${getNthStatusSelector(idx)} .play-video-button`)()
  await t.click($(`${getNthStatusSelector(idx)} .play-video-button`))
    .click(closeDialogButton)
    .expect(modalDialogContents.exists).notOk()
    .expect(getActiveElementClass()).contains('play-video-button')
    .expect(getActiveElementInsideNthStatus()).eql(idx.toString())
})

test('timeline preserves focus', async t => {
  await loginAsFoobar(t)
  // explicitly hover-focus-click
  await t.hover(getNthStatus(0))
  await focus(getNthStatusSelector(0))()
  await t.click(getNthStatus(0))
    .expect(getUrl()).contains('/statuses/')

  await goBack()
  await t.expect(getUrl()).eql('http://localhost:4002/')
    .expect(getActiveElementClass()).contains('status-article status-in-timeline')
    .expect(getActiveElementInsideNthStatus()).eql('0')
})

test('timeline link preserves focus', async t => {
  await loginAsFoobar(t)
  await t
    .expect(getNthStatus(0).exists).ok({ timeout: 20000 })
    .click($(`${getNthStatusSelector(0)} .status-header a`))
    .expect(getUrl()).contains('/accounts/')
    .click(goBackButton)
    .expect(getUrl()).eql('http://localhost:4002/')
    .expect(getNthStatus(0).exists).ok()
    .expect(getActiveElementInnerText()).eql('admin')
    .click($(`${getNthStatusSelector(0)} .status-sidebar`))
    .expect(getUrl()).contains('/accounts/')
    .click(goBackButton)
    .expect(getUrl()).eql('http://localhost:4002/')
    .expect(getActiveElementClass()).contains('status-sidebar')
    .expect(getActiveElementInsideNthStatus()).eql('0')
})

test('notification timeline preserves focus', async t => {
  await loginAsFoobar(t)
  await t
    .navigateTo('/notifications')
  await scrollToStatus(t, 5)
  await t.click($(`${getNthStatusSelector(5)} .status-header a`))
    .expect(getUrl()).contains('/accounts/')
    .click(goBackButton)
    .expect(getUrl()).eql('http://localhost:4002/notifications')
    .expect(getNthStatus(0).exists).ok()
    .expect(getActiveElementInnerText()).eql('quux')
    .expect(getActiveElementInsideNthStatus()).eql('5')
})

// TODO: this test is really flakey in CI for some reason
test.skip('thread preserves focus', async t => {
  await loginAsFoobar(t)
  await t
    .navigateTo('/accounts/3')
    .hover(getNthStatus(0))
  await scrollToStatus(t, 2)
  await t.click(getNthStatus(2))
    .expect(getUrl()).contains('/statuses/')
    .click($(`${getNthStatusSelector(24)} .status-sidebar`))
    .expect(getUrl()).contains('/accounts/')
    .click(goBackButton)
    .expect(getUrl()).contains('/statuses/')
    .expect(getNthStatus(24).exists).ok()
    .expect(getActiveElementClass()).contains('status-sidebar')
    .expect(getActiveElementInsideNthStatus()).eql('24')
    .hover(getNthStatus(23))
    .click(getNthStatus(23))
    .expect($(`${getNthStatusSelector(23)} .status-absolute-date`).exists).ok()
  await goBack()
  await t.expect($(`${getNthStatusSelector(24)} .status-absolute-date`).exists).ok()
    .expect(getActiveElementClass()).contains('status-article status-in-timeline')
    .expect(getActiveElementInsideNthStatus()).eql('23')
})

test('reply preserves focus and moves focus to the text input', async t => {
  await loginAsFoobar(t)
  await t
    .expect(getNthStatus(1).exists).ok({ timeout: 20000 })
    .click(getNthReplyButton(1))
    .expect(getActiveElementClass()).contains('compose-box-input')
})

test('focus main content element on index page load', async t => {
  await t.expect(getActiveElementTagName()).match(/body/i)
})