elk/tests/content-rich.test.ts

216 lines
8.7 KiB
TypeScript
Raw Normal View History

2022-12-05 04:59:04 +00:00
/**
* @vitest-environment jsdom
*/
2022-12-01 15:42:03 +00:00
/* eslint-disable vue/one-component-per-file */
2022-11-25 08:56:14 +00:00
import { describe, expect, it, vi } from 'vitest'
2022-11-25 08:25:56 +00:00
import { renderToString } from 'vue/server-renderer'
2022-11-25 08:56:14 +00:00
import { format } from 'prettier'
2022-12-13 14:03:30 +00:00
import { contentToVNode } from '~/composables/content-render'
2023-01-13 00:08:56 +00:00
import type { ContentParseOptions } from '~~/composables/content-parse'
2022-11-25 08:25:56 +00:00
describe('content-rich', () => {
2022-11-25 08:56:14 +00:00
it('empty', async () => {
const { formatted } = await render('')
expect(formatted).toMatchSnapshot()
})
it('link + mention', async () => {
// https://fosstodon.org/@ayo/109383002937620723
const { formatted } = 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()
})
it ('block with backticks', async () => {
const { formatted } = await render('<p>```<br />[(`number string) (`tag string)]<br />```</p>')
expect(formatted).toMatchSnapshot()
})
it('group mention', async () => {
2023-01-13 00:08:56 +00:00
const { formatted } = await render('<p><span class="h-card"><a href="https://lemmy.ml/c/pilipinas" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>pilipinas</span></a></span></p>', {
mentions: [{ id: '', username: 'pilipinas', url: 'https://lemmy.ml/c/pilipinas', acct: 'pilipinas@lemmy.ml' }],
})
expect(formatted).toMatchSnapshot('html')
})
it('inline code with link', async () => {
const { formatted } = await render('<p>Inline code with link: `<a href="https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal" target="_blank" rel="nofollow noopener noreferrer" class="status-link unhandled-link" title="https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal"><span class="invisible">https://</span><span class="ellipsis">api.iconify.design/noto.css?ic</span><span class="invisible">ons=1st-place-medal,2nd-place-medal</span></a>`</p>')
expect(formatted).toMatchSnapshot()
})
it('handles html within code blocks', async () => {
const { formatted } = await render('<p>HTML block code:<br>```html<br>&lt;span class="icon--noto icon--noto--1st-place-medal"&gt;&lt;/span&gt;<br>&lt;span class="icon--noto icon--noto--2nd-place-medal-medal"&gt;&lt;/span&gt;<br>```</p>')
expect(formatted).toMatchSnapshot()
})
it('handles formatting from servers', async () => {
const { formatted } = await render('<h1>Fedi HTML Support Survey</h1><p>Does the following formatting come through accurately for you?</p><ul><li>This is an indented bulleted list (not just asterisks).</li><li><strong>This line is bold.</strong></li><li><em>This line is italic.</em></li></ul><ol><li>This list...</li><li>...is numbered and indented</li></ol><h1>This line is larger.</h1>')
expect(formatted).toMatchSnapshot()
})
2022-11-25 08:56:14 +00:00
it('custom emoji', async () => {
const { formatted } = await render('Daniel Roe :nuxt:', {
2023-01-13 00:08:56 +00:00
emojis: {
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,
},
2022-11-25 08:56:14 +00:00
},
})
expect(formatted).toMatchSnapshot()
})
it('code frame', async () => {
// https://mas.to/@antfu/109396489827394721
const { formatted } = 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()
})
2022-11-27 06:16:02 +00:00
it('code frame 2', async () => {
const { formatted } = 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()
})
it('code frame no lang', async () => {
const { formatted } = await render('<p>```<br />hello world<br />```<br />no lang</p>')
expect(formatted).toMatchSnapshot()
})
it('code frame empty', async () => {
const { formatted } = await render('<p>```<br /><br />```<br /></p>')
expect(formatted).toMatchSnapshot()
})
2023-01-13 00:08:56 +00:00
it('collapse metions', async () => {
const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> content <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> <span class="h-card"><a href="https://mastodon.roe.dev/@daniel" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>daniel</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@sxzz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sxzz</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@patak" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>patak</span></a></span> content</p>', {
collapseMentionLink: true,
})
expect(formatted).toMatchInlineSnapshot(`
"<p>
<mention-group
><span class=\\"h-card\\"
><a
class=\\"u-url mention\\"
rel=\\"nofollow noopener noreferrer\\"
to=\\"/m.webtoo.ls/@elk\\"
></a
></span>
<span class=\\"h-card\\"
><a
class=\\"u-url mention\\"
rel=\\"nofollow noopener noreferrer\\"
to=\\"/m.webtoo.ls/@elk\\"
></a></span></mention-group
>content
<span class=\\"h-card\\"
><a
class=\\"u-url mention\\"
rel=\\"nofollow noopener noreferrer\\"
to=\\"/m.webtoo.ls/@antfu\\"
></a
></span>
<span class=\\"h-card\\"
><a
class=\\"u-url mention\\"
rel=\\"nofollow noopener noreferrer\\"
to=\\"/mastodon.roe.dev/@daniel\\"
></a
></span>
<span class=\\"h-card\\"
><a
class=\\"u-url mention\\"
rel=\\"nofollow noopener noreferrer\\"
to=\\"/m.webtoo.ls/@sxzz\\"
></a
></span>
<span class=\\"h-card\\"
><a
class=\\"u-url mention\\"
rel=\\"nofollow noopener noreferrer\\"
to=\\"/m.webtoo.ls/@patak\\"
></a
></span>
content
</p>
"
`)
})
2022-11-25 08:56:14 +00:00
})
2023-01-13 00:08:56 +00:00
async function render(content: string, options?: ContentParseOptions) {
const vnode = contentToVNode(content, options)
2022-11-25 08:25:56 +00:00
const html = (await renderToString(vnode))
.replace(/<!--[\[\]]-->/g, '')
2022-11-27 06:16:02 +00:00
let formatted = ''
try {
formatted = format(html, {
parser: 'html',
})
}
catch (e) {
formatted = html
}
2022-11-25 08:56:14 +00:00
2022-11-25 08:25:56 +00:00
return {
vnode,
html,
2022-11-25 08:56:14 +00:00
formatted,
2022-11-25 08:25:56 +00:00
}
}
2022-11-25 08:56:14 +00:00
// mocks
vi.mock('vue-router', () => {
return {
RouterLink: defineComponent((attrs) => {
return () => h('a', attrs)
}),
}
})
2022-12-13 14:03:30 +00:00
vi.mock('~/composables/dialog.ts', () => {
return {}
})
vi.mock('~/components/content/ContentCode.vue', () => {
2022-11-25 08:56:14 +00:00
return {
default: defineComponent({
props: {
code: {
type: String,
required: true,
},
lang: {
type: String,
},
},
setup(props) {
const raw = computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
return () => h('pre', { lang: props.lang }, raw.value)
},
}),
}
2022-11-25 08:25:56 +00:00
})
2022-11-30 07:08:10 +00:00
2023-01-13 00:08:56 +00:00
vi.mock('~/components/content/ContentMentionGroup.vue', () => {
return {
default: defineComponent({
setup(props, { slots }) {
return () => h('mention-group', null, { default: () => slots?.default?.() })
},
}),
}
})
2022-12-13 14:03:30 +00:00
vi.mock('~/components/account/AccountHoverWrapper.vue', () => {
2022-11-30 07:08:10 +00:00
return {
default: defineComponent({
2022-12-13 14:03:30 +00:00
props: ['handle', 'class'],
2022-11-30 07:08:10 +00:00
setup(_, { slots }) {
return () => slots?.default?.()
},
}),
}
})