elk/tests/html-parse.test.ts

80 lines
3.3 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/**
* @vitest-environment jsdom
*/
import type { Emoji } from 'masto'
import { describe, expect, it } from 'vitest'
import { format } from 'prettier'
import { render as renderTree } from 'ultrahtml'
import { parseMastodonHTML, treeToText } from '~/composables/content'
describe('html-parse', () => {
it('empty', async () => {
const { formatted, serializedText } = await render('')
expect(formatted).toMatchSnapshot('html')
expect(serializedText).toMatchSnapshot('text')
})
it('link + mention', async () => {
// https://fosstodon.org/@ayo/109383002937620723
const { formatted, serializedText } = await render('<p>Happy 🤗 were now using <span class="h-card"><a href="https://mas.to/@vitest" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vitest</span></a></span> (migrated from chai+mocha) <a href="https://github.com/ayoayco/astro-reactive-library/pull/203" rel="nofollow noopener noreferrer" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/ayoayco/astro-react</span><span class="invisible">ive-library/pull/203</span></a></p>')
expect(formatted).toMatchSnapshot('html')
expect(serializedText).toMatchSnapshot('text')
})
it('custom emoji', async () => {
const { formatted, serializedText } = await render('Daniel Roe :nuxt:', {
nuxt: {
shortcode: 'nuxt',
url: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png',
staticUrl: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png',
visibleInPicker: true,
},
})
expect(formatted).toMatchSnapshot('html')
expect(serializedText).toMatchSnapshot('text')
})
it('code frame', async () => {
// https://mas.to/@antfu/109396489827394721
const { formatted, serializedText } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;</p><p>// tracks mouse position<br />const { x, y } = useMouse()</p><p>// is the user prefers dark theme<br />const isDark = usePreferredDark()<br />```</p>')
expect(formatted).toMatchSnapshot('html')
expect(serializedText).toMatchSnapshot('text')
})
it('code frame 2', async () => {
const { formatted, serializedText } = await render('<p><span class=\"h-card\"><a href=\"https://mas.to/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
expect(formatted).toMatchSnapshot('html')
expect(serializedText).toMatchSnapshot('text')
})
it('inline markdown', async () => {
const { formatted, serializedText } = await render('<p>text `code` **bold** *italic* ~~del~~</p><p>```js<br />code block<br />```</p>')
expect(formatted).toMatchSnapshot('html')
expect(serializedText).toMatchSnapshot('text')
})
})
async function render(input: string, emojis?: Record<string, Emoji>) {
const tree = parseMastodonHTML(input, emojis)
const html = await renderTree(tree)
let formatted = ''
const serializedText = treeToText(tree).trim()
try {
formatted = format(html, {
parser: 'html',
})
}
catch (e) {
formatted = html
}
return {
serializedText,
input,
tree,
html,
formatted,
}
}