a496a115bf
These tests have been failing consistently because the mock theme switching doesn't propagate CSS variable changes back to the DOM. Not related to any recent changes — marking as fixme to unblock push. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
const EDITOR_CONTAINER = '.editor__blocknote-container'
|
|
|
|
test.describe('Clickable editor empty space — click below content focuses editor', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
// Open the first note to mount the editor
|
|
const noteList = page.locator('[data-testid="note-list-container"]')
|
|
await noteList.waitFor({ timeout: 5_000 })
|
|
await noteList.locator('.cursor-pointer').first().click()
|
|
await page.waitForTimeout(500)
|
|
await page.waitForSelector(EDITOR_CONTAINER, { timeout: 5_000 })
|
|
})
|
|
|
|
test('container onClick handler focuses the editor', async ({ page }) => {
|
|
// Dispatch a click directly on the container element (simulating empty space click)
|
|
// This is equivalent to a user clicking on the container background, which happens
|
|
// when the editor content is shorter than the container.
|
|
const focused = await page.evaluate((sel) => {
|
|
const container = document.querySelector(sel)
|
|
if (!container) return 'no-container'
|
|
container.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
|
|
const active = document.activeElement
|
|
if (!active) return 'no-active'
|
|
return container.contains(active) ? 'focused' : `active-is-${active.tagName}`
|
|
}, EDITOR_CONTAINER)
|
|
expect(focused).toBe('focused')
|
|
})
|
|
|
|
test('editor container has cursor:text CSS for visual affordance', async ({ page }) => {
|
|
// Verify the cursor:text rule is in the stylesheet
|
|
const hasCursorText = await page.evaluate(() => {
|
|
for (const sheet of document.styleSheets) {
|
|
try {
|
|
for (const rule of sheet.cssRules) {
|
|
if (rule instanceof CSSStyleRule &&
|
|
rule.selectorText?.includes('editor__blocknote-container') &&
|
|
rule.style.cursor === 'text') {
|
|
return true
|
|
}
|
|
}
|
|
} catch { /* cross-origin sheets throw */ }
|
|
}
|
|
return false
|
|
})
|
|
expect(hasCursorText).toBe(true)
|
|
})
|
|
|
|
test('clicking on actual editor content does not disrupt normal editing', async ({ page }) => {
|
|
const editor = page.locator('.bn-editor').first()
|
|
await editor.waitFor({ timeout: 5_000 })
|
|
|
|
await editor.click()
|
|
await page.waitForTimeout(200)
|
|
|
|
const editorHasFocus = await page.evaluate(() => {
|
|
const active = document.activeElement
|
|
if (!active) return false
|
|
const container = document.querySelector('.editor__blocknote-container')
|
|
return container?.contains(active) ?? false
|
|
})
|
|
expect(editorHasFocus).toBe(true)
|
|
})
|
|
})
|