Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use Playwright assertions for autofocus #1219

Merged
merged 1 commit into from
Mar 5, 2024
Merged

Use Playwright assertions for autofocus #1219

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 12 additions & 102 deletions src/tests/functional/autofocus_tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,150 +1,65 @@
import { test } from "@playwright/test"
import { assert } from "chai"
import { hasSelector, nextBeat } from "../helpers/page"
import { expect, test } from "@playwright/test"

test.beforeEach(async ({ page }) => {
await page.goto("/src/tests/fixtures/autofocus.html")
})

test("autofocus first autofocus element on load", async ({ page }) => {
await nextBeat()
assert.ok(
await hasSelector(page, "#first-autofocus-element:focus"),
"focuses the first [autofocus] element on the page"
)
assert.notOk(
await hasSelector(page, "#second-autofocus-element:focus"),
"focuses the first [autofocus] element on the page"
)
await expect(page.locator("#first-autofocus-element")).toBeFocused()
})

test("autofocus first [autofocus] element on visit", async ({ page }) => {
await page.goto("/src/tests/fixtures/navigation.html")
await page.click("#autofocus-link")
await nextBeat()

assert.ok(
await hasSelector(page, "#first-autofocus-element:focus"),
"focuses the first [autofocus] element on the page"
)
assert.notOk(
await hasSelector(page, "#second-autofocus-element:focus"),
"focuses the first [autofocus] element on the page"
)
await expect(page.locator("#first-autofocus-element")).toBeFocused()
})

test("navigating a frame with a descendant link autofocuses [autofocus]:first-of-type", async ({ page }) => {
await page.click("#frame-inner-link")
await nextBeat()

assert.ok(
await hasSelector(page, "#frames-form-first-autofocus-element:focus"),
"focuses the first [autofocus] element in frame"
)
assert.notOk(
await hasSelector(page, "#frames-form-second-autofocus-element:focus"),
"focuses the first [autofocus] element in frame"
)
await expect(page.locator("#frames-form-first-autofocus-element")).toBeFocused()
})

test("autofocus visible [autofocus] element on visit with inert elements", async ({ page }) => {
await page.click("#autofocus-inert-link")
await nextBeat()

assert.notOk(
await hasSelector(page, "#dialog-autofocus-element:focus"),
"autofocus element is ignored in a closed dialog"
)
assert.notOk(
await hasSelector(page, "#details-autofocus-element:focus"),
"autofocus element is ignored in a closed details"
)
assert.notOk(
await hasSelector(page, "#hidden-autofocus-element:focus"),
"autofocus element is ignored in a hidden div"
)
assert.notOk(
await hasSelector(page, "#inert-autofocus-element:focus"),
"autofocus element is ignored in an inert div"
)
assert.notOk(
await hasSelector(page, "#disabled-autofocus-element:focus"),
"autofocus element is ignored when disabled"
)
assert.ok(
await hasSelector(page, "#visible-autofocus-element:focus"),
"focuses the visible [autofocus] element on the page"
)
await expect(page.locator("#visible-autofocus-element")).toBeFocused()
})

test("navigating a frame with a link targeting the frame autofocuses [autofocus]:first-of-type", async ({
page
}) => {
await page.click("#frame-outer-link")
await nextBeat()

assert.ok(
await hasSelector(page, "#frames-form-first-autofocus-element:focus"),
"focuses the first [autofocus] element in frame"
)
assert.notOk(
await hasSelector(page, "#frames-form-second-autofocus-element:focus"),
"focuses the first [autofocus] element in frame"
)
await expect(page.locator("#frames-form-first-autofocus-element")).toBeFocused()
})

test("navigating a frame with a turbo-frame targeting the frame autofocuses [autofocus]:first-of-type", async ({
page
}) => {
await page.click("#drives-frame-target-link")
await nextBeat()

assert.ok(
await hasSelector(page, "#frames-form-first-autofocus-element:focus"),
"focuses the first [autofocus] element in frame"
)
assert.notOk(
await hasSelector(page, "#frames-form-second-autofocus-element:focus"),
"focuses the first [autofocus] element in frame"
)
await expect(page.locator("#frames-form-first-autofocus-element")).toBeFocused()
})

test("receiving a Turbo Stream message with an [autofocus] element when the activeElement is the document", async ({ page }) => {
await page.evaluate(() => {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur()
}
document.activeElement.blur()
window.Turbo.renderStreamMessage(`
<turbo-stream action="append" targets="body">
<template><input id="autofocus-from-stream" autofocus></template>
</turbo-stream>
`)
})
await nextBeat()

assert.ok(
await hasSelector(page, "#autofocus-from-stream:focus"),
"focuses the [autofocus] element in from the turbo-stream"
)
await expect(page.locator("#autofocus-from-stream")).toBeFocused()
})

test("autofocus from a Turbo Stream message does not leak a placeholder [id]", async ({ page }) => {
await page.evaluate(() => {
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur()
}
document.activeElement.blur()
window.Turbo.renderStreamMessage(`
<turbo-stream action="append" targets="body">
<template><div id="container-from-stream"><input autofocus></div></template>
</turbo-stream>
`)
})
await nextBeat()

assert.ok(
await hasSelector(page, "#container-from-stream input:focus"),
"focuses the [autofocus] element in from the turbo-stream"
)
await expect(page.locator("#container-from-stream input")).toBeFocused()
})

test("receiving a Turbo Stream message with an [autofocus] element when an element within the document has focus", async ({ page }) => {
Expand All @@ -155,10 +70,5 @@ test("receiving a Turbo Stream message with an [autofocus] element when an eleme
</turbo-stream>
`)
})
await nextBeat()

assert.ok(
await hasSelector(page, "#first-autofocus-element:focus"),
"focuses the first [autofocus] element on the page"
)
await expect(page.locator("#first-autofocus-element")).toBeFocused()
})
Loading