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 */
|
2023-01-08 06:21:09 +00:00
|
|
|
|
import type { mastodon } from 'masto'
|
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'
|
2022-11-25 08:25:56 +00:00
|
|
|
|
|
2022-11-25 13:21:02 +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 🤗 we’re 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()
|
|
|
|
|
})
|
|
|
|
|
|
2023-01-11 16:24:13 +00:00
|
|
|
|
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><span class="icon--noto icon--noto--1st-place-medal"></span><br><span class="icon--noto icon--noto--2nd-place-medal-medal"></span><br>```</p>')
|
|
|
|
|
expect(formatted).toMatchSnapshot()
|
|
|
|
|
})
|
|
|
|
|
|
2022-11-25 08:56:14 +00:00
|
|
|
|
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('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from '@vueuse/core'</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()
|
|
|
|
|
})
|
2022-12-02 02:19:31 +00:00
|
|
|
|
|
|
|
|
|
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()
|
|
|
|
|
})
|
2022-11-25 08:56:14 +00:00
|
|
|
|
})
|
|
|
|
|
|
2023-01-08 06:21:09 +00:00
|
|
|
|
async function render(content: string, emojis?: Record<string, mastodon.v1.CustomEmoji>) {
|
2022-12-17 21:01:20 +00:00
|
|
|
|
const vnode = contentToVNode(content, { emojis })
|
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(/'/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
|
|
|
|
|
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?.()
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
}
|
|
|
|
|
})
|