pinafore/tests/spec/010-focus.js
Nolan Lawson 48a1bd47b3
refactor(themes): use CSS specificity order for themes (#684)
The point of this PR is to make it easier to implement scrollbars (#683).

With this PR, the themes move from a body tag-based system (e.g. `body.theme-scarlet`) to a system where they simply declare global CSS and we use CSS specificity order to give us the right theme.
2018-11-24 00:41:36 -08:00

109 lines
4.1 KiB
JavaScript

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 '../../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')
})
test('thread preserves focus', async t => {
await loginAsFoobar(t)
await t
.navigateTo('/accounts/3')
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')
.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)
})