/** * @vitest-environment jsdom */ /* eslint-disable vue/one-component-per-file */ import { describe, expect, it, vi } from 'vitest' import { renderToString } from 'vue/server-renderer' import { format } from 'prettier' 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('link + mention', async () => { // https://fosstodon.org/@ayo/109383002937620723 const { formatted } = await render('

Happy 🤗 we’re now using @vitest (migrated from chai+mocha) github.com/ayoayco/astro-react

') 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: `api.iconify.design/noto.css?ic`

') 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?

  1. This list...
  2. ...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.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() }) it('collapse metions', async () => { const { formatted } = await render('

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

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

content 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() }) }) 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', () => { return { RouterLink: defineComponent((attrs) => { return () => h('a', attrs) }), } }) vi.mock('~/composables/dialog.ts', () => { return {} }) vi.mock('shiki-es', async (importOriginal) => { const mod = await importOriginal() return { ...(mod as any), setCDN() {}, } }) vi.mock('~/components/content/ContentMentionGroup.vue', () => { return { default: defineComponent({ setup(props, { slots }) { return () => h('mention-group', null, { default: () => slots?.default?.() }) }, }), } }) vi.mock('~/components/account/AccountHoverWrapper.vue', () => { return { default: defineComponent({ props: ['handle', 'class'], setup(_, { slots }) { return () => slots?.default?.() }, }), } })