- [[wikilinks]] rendered as styled blue text with brackets hidden - Brackets revealed when cursor is on the wikilink line (reveal-on-focus) - Clicking a wikilink opens the linked note in a new tab - Navigation matches by title or alias (case-insensitive) - Uses CM6 Facet to pass navigation callback to widget DOM listeners - Add Playwright test verifying wikilink styling and click navigation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import { test } from '@playwright/test'
|
|
|
|
test('capture app screenshot for review', async ({ page }) => {
|
|
await page.goto('/')
|
|
// Wait for mock data to load
|
|
await page.waitForTimeout(500)
|
|
await page.screenshot({ path: 'test-results/app-screenshot.png', fullPage: true })
|
|
})
|
|
|
|
test('capture editor with note selected', async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Click the first note in the list
|
|
await page.click('.note-list__item')
|
|
await page.waitForTimeout(300)
|
|
|
|
await page.screenshot({ path: 'test-results/editor-screenshot.png', fullPage: true })
|
|
})
|
|
|
|
test('live preview: headings styled, syntax hidden', async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Click a note to load it
|
|
await page.click('.note-list__item')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Screenshot showing live preview (headings styled, syntax hidden)
|
|
await page.screenshot({ path: 'test-results/live-preview.png', fullPage: true })
|
|
})
|
|
|
|
test('tab bar: multiple tabs open and close', async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Click first note
|
|
await page.click('.note-list__item')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Debug: screenshot after first click
|
|
await page.screenshot({ path: 'test-results/tabs-debug-1.png', fullPage: true })
|
|
|
|
// Check if other items are visible
|
|
const items = await page.locator('.note-list__item').count()
|
|
console.log(`Note list items visible after first click: ${items}`)
|
|
|
|
// Click second item if available
|
|
if (items >= 2) {
|
|
await page.locator('.note-list__item').nth(1).click({ timeout: 5000 })
|
|
await page.waitForTimeout(500)
|
|
}
|
|
|
|
if (items >= 3) {
|
|
await page.locator('.note-list__item').nth(2).click({ timeout: 5000 })
|
|
await page.waitForTimeout(500)
|
|
}
|
|
|
|
await page.screenshot({ path: 'test-results/tabs-screenshot.png', fullPage: true })
|
|
})
|
|
|
|
test('frontmatter hidden from editor view', async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Click a note that has frontmatter
|
|
await page.click('.note-list__item')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Frontmatter should be hidden — editor starts with content, not ---
|
|
await page.screenshot({ path: 'test-results/frontmatter-hidden.png', fullPage: true })
|
|
})
|
|
|
|
test('wikilinks: rendered as styled elements and clickable', async ({ page }) => {
|
|
await page.goto('/')
|
|
await page.waitForTimeout(500)
|
|
|
|
// Open "Manage Sponsorships" which contains [[Matteo Cellini]] wikilink
|
|
await page.locator('.note-list__item', { hasText: 'Manage Sponsorships' }).click()
|
|
await page.waitForTimeout(500)
|
|
|
|
// Screenshot showing wikilink rendered as styled text
|
|
await page.screenshot({ path: 'test-results/wikilinks-styled.png', fullPage: true })
|
|
|
|
// Click the wikilink to navigate — use mouse.click to fire real mousedown
|
|
const wikilink = page.locator('.cm-wikilink', { hasText: 'Matteo Cellini' })
|
|
const box = await wikilink.boundingBox()
|
|
if (box) {
|
|
await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2)
|
|
await page.waitForTimeout(500)
|
|
// Should now have a new tab for Matteo Cellini
|
|
await page.screenshot({ path: 'test-results/wikilinks-navigated.png', fullPage: true })
|
|
}
|
|
})
|