/**
* @vitest-environment jsdom
*/
/* eslint-disable vue/one-component-per-file */
import type { mastodon } from 'masto'
import { describe, expect, it, vi } from 'vitest'
import { renderToString } from 'vue/server-renderer'
import { format } from 'prettier'
import { contentToVNode } from '~/composables/content-render'
describe('content-rich', () => {
it('empty', async () => {
const { formatted } = await render('')
expect(formatted).toMatchSnapshot()
})
it('link + mention', async () => {
// https://fosstodon.org/@ayo/109383002937620723
const { formatted } = await render('Happy 🤗 we’re now using @vitest (migrated from chai+mocha) https://github.com/ayoayco/astro-reactive-library/pull/203
')
expect(formatted).toMatchSnapshot()
})
it('group mention', async () => {
const { formatted } = await render('@pilipinas
', undefined, [{ 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('Inline code with link: `https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal`
')
expect(formatted).toMatchSnapshot()
})
it('handles html within code blocks', async () => {
const { formatted } = await render('HTML block code:
```html
<span class="icon--noto icon--noto--1st-place-medal"></span>
<span class="icon--noto icon--noto--2nd-place-medal-medal"></span>
```
')
expect(formatted).toMatchSnapshot()
})
it('custom emoji', async () => {
const { formatted } = 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()
})
it('code frame', async () => {
// https://mas.to/@antfu/109396489827394721
const { formatted } = await render('Testing code block
```ts
import { useMouse, usePreferredDark } from '@vueuse/core'
// tracks mouse position
const { x, y } = useMouse()
// is the user prefers dark theme
const isDark = usePreferredDark()
```
')
expect(formatted).toMatchSnapshot()
})
it('code frame 2', async () => {
const { formatted } = await render('@antfu Testing
```ts
const a = hello
```
')
expect(formatted).toMatchSnapshot()
})
it('code frame no lang', async () => {
const { formatted } = await render('```
hello world
```
no lang
')
expect(formatted).toMatchSnapshot()
})
it('code frame empty', async () => {
const { formatted } = await render('```
```
')
expect(formatted).toMatchSnapshot()
})
})
async function render(content: string, emojis?: Record, mentions?: mastodon.v1.StatusMention[]) {
const vnode = contentToVNode(content, { emojis, mentions })
const html = (await renderToString(vnode))
.replace(//g, '')
let formatted = ''
try {
formatted = format(html, {
parser: 'html',
})
}
catch (e) {
formatted = html
}
return {
vnode,
html,
formatted,
}
}
// mocks
vi.mock('vue-router', () => {
return {
RouterLink: defineComponent((attrs) => {
return () => h('a', attrs)
}),
}
})
vi.mock('~/composables/dialog.ts', () => {
return {}
})
vi.mock('~/components/content/ContentCode.vue', () => {
return {
default: defineComponent({
props: {
code: {
type: String,
required: true,
},
lang: {
type: String,
},
},
setup(props) {
const raw = computed(() => decodeURIComponent(props.code).replace(/'/g, '\''))
return () => h('pre', { lang: props.lang }, raw.value)
},
}),
}
})
vi.mock('~/components/account/AccountHoverWrapper.vue', () => {
return {
default: defineComponent({
props: ['handle', 'class'],
setup(_, { slots }) {
return () => slots?.default?.()
},
}),
}
})