Files
tolaria/tests/smoke/note-width-modes.spec.ts
2026-04-29 22:41:05 +02:00

92 lines
4.0 KiB
TypeScript

import { test, expect, type Page } from '@playwright/test'
import fs from 'fs'
import path from 'path'
import { createFixtureVaultCopy, openFixtureVault, removeFixtureVaultCopy } from '../helpers/fixtureVault'
import { executeCommand, openCommandPalette } from './helpers'
let tempVaultDir: string
function alphaProjectPath(vaultPath: string): string {
return path.join(vaultPath, 'project', 'alpha-project.md')
}
function plainNotePath(vaultPath: string): string {
return path.join(vaultPath, 'plain-width-note.md')
}
async function openNote(page: Page, title: string) {
await page.getByTestId('note-list-container').getByText(title, { exact: true }).click()
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5_000 })
}
async function executePaletteCommand(page: Page, label: string) {
await openCommandPalette(page)
await executeCommand(page, label)
}
async function expectWideModeHasUnboundedWidth(page: Page) {
const metrics = await page.locator('.editor-content-width--wide').evaluate((root) => {
const wrapper = root.querySelector<HTMLElement>('.editor-content-wrapper')
const editor = root.querySelector<HTMLElement>('.bn-editor')
if (!wrapper || !editor) throw new Error('Wide editor layout was not rendered')
const wrapperStyle = window.getComputedStyle(wrapper)
const editorStyle = window.getComputedStyle(editor)
const wrapperRect = wrapper.getBoundingClientRect()
const editorRect = editor.getBoundingClientRect()
const wrapperPaddingLeft = Number.parseFloat(wrapperStyle.paddingLeft)
const wrapperPaddingRight = Number.parseFloat(wrapperStyle.paddingRight)
return {
wrapperMaxWidth: wrapperStyle.maxWidth,
wrapperPaddingLeft,
wrapperPaddingRight,
editorMaxWidth: editorStyle.maxWidth,
editorPaddingLeft: Number.parseFloat(editorStyle.paddingLeft),
editorPaddingRight: Number.parseFloat(editorStyle.paddingRight),
editorWidth: editorRect.width,
wrapperContentWidth: wrapperRect.width - wrapperPaddingLeft - wrapperPaddingRight,
}
})
expect(metrics.wrapperMaxWidth).toBe('none')
expect(metrics.wrapperPaddingLeft).toBeGreaterThanOrEqual(16)
expect(metrics.wrapperPaddingRight).toBeGreaterThanOrEqual(16)
expect(metrics.editorMaxWidth).toBe('none')
expect(metrics.editorPaddingLeft).toBe(0)
expect(metrics.editorPaddingRight).toBe(0)
expect(metrics.editorWidth).toBeGreaterThan(900)
expect(Math.abs(metrics.editorWidth - metrics.wrapperContentWidth)).toBeLessThan(2)
}
test.beforeEach(async ({ page }, testInfo) => {
testInfo.setTimeout(60_000)
await page.setViewportSize({ width: 1920, height: 1080 })
tempVaultDir = createFixtureVaultCopy()
fs.writeFileSync(plainNotePath(tempVaultDir), '# Plain Width Note\n\nNo frontmatter here.\n')
await openFixtureVault(page, tempVaultDir)
})
test.afterEach(() => {
removeFixtureVaultCopy(tempVaultDir)
})
test('note width modes persist only when frontmatter already exists', async ({ page }) => {
await openNote(page, 'Alpha Project')
await expect(page.locator('.editor-content-width--normal')).toBeVisible({ timeout: 5_000 })
await page.getByRole('button', { name: 'Switch to wide note width' }).click()
await expect(page.locator('.editor-content-width--wide')).toBeVisible({ timeout: 5_000 })
await expectWideModeHasUnboundedWidth(page)
await expect.poll(() => fs.readFileSync(alphaProjectPath(tempVaultDir), 'utf8')).toMatch(/_width:\s+"?wide"?/)
await executePaletteCommand(page, 'Use Normal Note Width')
await expect(page.locator('.editor-content-width--normal')).toBeVisible({ timeout: 5_000 })
await expect.poll(() => fs.readFileSync(alphaProjectPath(tempVaultDir), 'utf8')).toMatch(/_width:\s+"?normal"?/)
await openNote(page, 'Plain Width Note')
await page.getByRole('button', { name: 'Switch to wide note width' }).click()
await expect(page.locator('.editor-content-width--wide')).toBeVisible({ timeout: 5_000 })
expect(fs.readFileSync(plainNotePath(tempVaultDir), 'utf8')).toBe('# Plain Width Note\n\nNo frontmatter here.\n')
})