8739805f99
Some checks failed
Auto-update PR branches / Update open PR branches (push) Has been cancelled
CI / Frontend Static Quality Checks (push) Has been cancelled
CI / Frontend Tests & Coverage (push) Has been cancelled
CI / Rust Tests & Quality Checks (push) Has been cancelled
CI / Linux build verification (push) Has been cancelled
Release (Alpha) / Compute alpha version (push) Has been cancelled
Release (Alpha) / Build release artifacts (push) Has been cancelled
Release (Alpha) / GitHub Release (alpha) (push) Has been cancelled
Release (Alpha) / Update docs and release pages (push) Has been cancelled
Deploy docs / Build VitePress site (push) Has been cancelled
Deploy docs / Deploy to GitHub Pages (push) Has been cancelled
100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import { expect, test, type Locator } from '@playwright/test'
|
|
import fs from 'fs'
|
|
import path from 'path'
|
|
import {
|
|
createFixtureVaultCopy,
|
|
openFixtureVault,
|
|
removeFixtureVaultCopy,
|
|
} from '../helpers/fixtureVault'
|
|
|
|
const CODE_NOTE_RELATIVE_PATH = path.join('note', 'code-block-theme.md')
|
|
const CODE_NOTE_TITLE = 'Code Block Theme'
|
|
|
|
function writeCodeThemeFixtureNote(tempVaultDir: string) {
|
|
const notePath = path.join(tempVaultDir, CODE_NOTE_RELATIVE_PATH)
|
|
fs.mkdirSync(path.dirname(notePath), { recursive: true })
|
|
fs.writeFileSync(notePath, `---
|
|
Is A: Note
|
|
Status: Active
|
|
---
|
|
|
|
# ${CODE_NOTE_TITLE}
|
|
|
|
Inline \`const answer = 42\` should stay on the lighter inline chip.
|
|
|
|
\`\`\`ts
|
|
function paint(answer: number) {
|
|
return answer + 42
|
|
}
|
|
|
|
console.log(paint(1))
|
|
\`\`\`
|
|
`)
|
|
}
|
|
|
|
async function backgroundColor(locator: Locator) {
|
|
return locator.evaluate((element) => getComputedStyle(element).backgroundColor)
|
|
}
|
|
|
|
async function textColor(locator: Locator) {
|
|
return locator.evaluate((element) => getComputedStyle(element).color)
|
|
}
|
|
|
|
async function tokenColors(locator: Locator) {
|
|
return locator.evaluateAll((elements) => (
|
|
Array.from(new Set(elements.map((element) => getComputedStyle(element).color)))
|
|
))
|
|
}
|
|
|
|
test.describe('Editor code block theme', () => {
|
|
let tempVaultDir: string
|
|
|
|
test.beforeEach(() => {
|
|
tempVaultDir = createFixtureVaultCopy()
|
|
writeCodeThemeFixtureNote(tempVaultDir)
|
|
})
|
|
|
|
test.afterEach(() => {
|
|
removeFixtureVaultCopy(tempVaultDir)
|
|
})
|
|
|
|
test('fenced code blocks follow the active theme while inline code stays muted', async ({ page }) => {
|
|
await openFixtureVault(page, tempVaultDir)
|
|
const noteList = page.locator('[data-testid="note-list-container"]')
|
|
const noteItem = noteList.getByText(CODE_NOTE_TITLE, { exact: true })
|
|
await expect(noteItem).toBeVisible({ timeout: 10_000 })
|
|
await noteItem.click()
|
|
|
|
const inlineCode = page
|
|
.locator('[data-content-type="paragraph"] [data-style-type="code"], [data-content-type="paragraph"] code')
|
|
.first()
|
|
const codeBlock = page.locator('.bn-block-content[data-content-type="codeBlock"]').first()
|
|
const fencedCode = codeBlock.locator('pre code').first()
|
|
const highlightedToken = codeBlock.locator('.shiki').first()
|
|
const highlightedTokens = codeBlock.locator('.shiki')
|
|
|
|
await expect(codeBlock).toBeVisible({ timeout: 10_000 })
|
|
await expect(inlineCode).toBeVisible({ timeout: 10_000 })
|
|
await expect(fencedCode).toBeVisible()
|
|
|
|
await expect.poll(() => backgroundColor(inlineCode)).toBe('rgb(240, 240, 239)')
|
|
await expect.poll(() => backgroundColor(fencedCode)).toBe('rgba(0, 0, 0, 0)')
|
|
await expect.poll(() => textColor(fencedCode)).toBe('rgb(55, 53, 47)')
|
|
const lightCodeBlockBackground = await backgroundColor(codeBlock)
|
|
const lightTokenColors = await tokenColors(highlightedTokens)
|
|
expect(lightTokenColors.length).toBeGreaterThan(0)
|
|
|
|
await page.getByTestId('status-theme-mode').click()
|
|
await expect.poll(() => backgroundColor(codeBlock)).toBe('rgb(22, 22, 22)')
|
|
await expect.poll(() => textColor(fencedCode)).toBe('rgb(255, 255, 255)')
|
|
await expect.poll(() => tokenColors(highlightedTokens)).not.toEqual(lightTokenColors)
|
|
const darkTokenColors = await tokenColors(highlightedTokens)
|
|
|
|
await page.getByTestId('status-theme-mode').click()
|
|
await expect.poll(() => backgroundColor(codeBlock)).toBe(lightCodeBlockBackground)
|
|
await expect.poll(() => textColor(fencedCode)).toBe('rgb(55, 53, 47)')
|
|
await expect.poll(() => tokenColors(highlightedTokens)).not.toEqual(darkTokenColors)
|
|
await expect(highlightedToken).toBeVisible()
|
|
})
|
|
})
|