import { describe, expect, it, vi } from 'vitest' import { renderToString } from 'vue/server-renderer' import { format } from 'prettier' import type { mastodon } from 'masto' import { mockComponent } from 'nuxt-vitest/utils' import { contentToVNode } from '~/composables/content-render' import type { ContentParseOptions } from '~/composables/content-parse' describe('content-rich', () => { it('empty', async () => { const { formatted } = await render('') expect(formatted).toMatchSnapshot() }) it('plain text', async () => { const { formatted } = await render('hello there', { collapseMentionLink: true }) 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 ('block with backticks', async () => { const { formatted } = await render('

```
[(`number string) (`tag string)]
```

') expect(formatted).toMatchSnapshot() }) it('group mention', async () => { const { formatted } = await render('

@pilipinas

', { 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('

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('handles formatting from servers', async () => { const { formatted } = await render('

Fedi HTML Support Survey

Does the following formatting come through accurately for you?

This is an indented bulleted list (not just asterisks).
This line is bold.
This line is italic.

This list...
...is numbered and indented

This line is larger.

') expect(formatted).toMatchSnapshot() }) it('custom emoji', async () => { const { formatted } = await render('Daniel Roe :nuxt:', { emojis: { nuxt: { shortcode: 'nuxt', url: 'https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png', staticUrl: 'https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png', visibleInPicker: true, }, }, }) expect(formatted).toMatchSnapshot() }) it('code frame', async () => { // https://webtoo.ls/@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() }) it('collapse mentions', async () => { const { formatted } = await render('

@elk @elk content @antfu @daniel @sxzz @patak content

', { collapseMentionLink: true, }) expect(formatted).toMatchInlineSnapshot(` "

content content

" `) }) it('hides collapsed mentions', async () => { const { formatted } = await render('

@elk content

', { collapseMentionLink: true, inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status, }) expect(formatted).toMatchInlineSnapshot(` "

content

" `) }) it('shows some collapsed mentions inline', async () => { const { formatted } = await render('

@elk @antfu content

content

" `) }) it('shows some collapsed mentions grouped', async () => { const { formatted } = await render('

@elk @antfu @patak @sxzzcontent

content

" `) }) it ('block with injected html, without language', async () => { const { formatted } = await render(`

        
          <a href="javascript:alert(1)">click me</a>

`) expect(formatted).toMatchSnapshot() }) it ('block with injected html, with an unknown language', async () => { const { formatted } = await render(`

        
          <a href="javascript:alert(1)">click me</a>

`) expect(formatted).toMatchSnapshot() }) it ('block with injected html, with a known language', async () => { const { formatted } = await render(`

        
          <a href="javascript:alert(1)">click me</a>

`) expect(formatted).toMatchSnapshot() }) }) describe('editor', () => { it('transform mentions', () => { const ast = parseMastodonHTML('

@elk Hello

') const transformed = treeToText(ast) expect(transformed).toMatchSnapshot() }) }) async function render(content: string, options?: ContentParseOptions) { const vnode = contentToVNode(content, options) 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', async () => { const { defineComponent, h } = await import('vue') return { RouterLink: defineComponent((attrs) => { return () => h('a', attrs) }), } }) vi.mock('shiki-es', async (importOriginal) => { const mod = await importOriginal() return { ...(mod as any), setCDN() {}, } }) mockComponent('ContentMentionGroup', { setup(props, { slots }) { return () => h('mention-group', null, { default: () => slots?.default?.() }) }, }) mockComponent('AccountHoverWrapper', { props: ['handle', 'class'], setup(_, { slots }) { return () => slots?.default?.() }, })