add focus test

This commit is contained in:
Nolan Lawson 2018-02-21 09:26:22 -08:00
parent 4d88723cb4
commit 9b316665b6
3 changed files with 45 additions and 14 deletions

View file

@ -1,19 +1,13 @@
import { Selector as $ } from 'testcafe'
import { getNthStatus } from '../utils'
import { closeDialogButton, getNthStatus, modalDialogContents, scrollToStatus } 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))
.hover(getNthStatus(6))
.hover(getNthStatus(7))
.expect(getNthStatus(7).find('.status-media img').exists).notOk()
await scrollToStatus(t, 7)
await t.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))
.hover(getNthStatus(6))
.hover(getNthStatus(7))
.hover(getNthStatus(9))
.expect(modalDialogContents.exists).notOk()
await scrollToStatus(t, 9)
await t.expect(modalDialogContents.exists).notOk()
.click(getNthStatus(9).find('.play-video-button'))
.expect(modalDialogContents.exists).ok()
.click(closeDialogButton)

25
tests/spec/10-focus.js Normal file
View file

@ -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')
})

View file

@ -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))
}