import { beforeEach, 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/test-utils/runtime' import { contentToVNode } from '~/composables/content-render' import type { ContentParseOptions } from '~/composables/content-parse' beforeEach(() => { publicServer.value = useRuntimeConfig().public.defaultServer }) 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)]
```
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>
```
Does the following formatting come through accurately for you?
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()
```
@antfu Testing
```ts
const a = hello
```
```
hello world
```
no lang
```
```
@elk @elk content @antfu @daniel @sxzz @patak content
', { collapseMentionLink: true, }) expect(formatted).toMatchSnapshot() }) 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).toMatchSnapshot() }) it('shows some collapsed mentions inline', async () => { const { formatted } = await render('', { collapseMentionLink: true, inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status, }) expect(formatted).toMatchSnapshot() }) it('shows some collapsed mentions grouped', async () => { const { formatted } = await render('@elk @antfu @patak @sxzzcontent
', { collapseMentionLink: true, inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status, }) expect(formatted).toMatchSnapshot() }) 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()
})
it ('hashtag adds bdi', async () => {
const { formatted } = await render(`
Testing bdi is added #turkey
`) expect(formatted).toMatchSnapshot() }) // REVIEW: there is something wrong with this test in the rendered output, missing bdi content, ultrahtml parses it correctly it ('hashtag doesn\'t add 2 bdi', async () => { const { formatted } = await render(`Testing bdi not added #turkey
`) expect(formatted).toMatchSnapshot() }) it ('root p includes dir="auto" attr when mixed content', async () => { const { formatted } = await render(`هذا اختبار جديد 🐦🐤 @bebatjof
أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت ترجمة الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها. 🐦🐤 ;). كما أن النموذج الخاص بـ 0 يحتاج إلى إصلاح #turkey #العربية .
This is a new test 🐦🐤 @bebatjof
I like how the arabic dual form is supported. The last one is mistranslated and I'm trying to find how to fix it. 🐦🐤 ;). Also, the form for 0 needs to be fixed #turkey #العربية .
@bebatjof هذا اختبار:
أنا أحب الطريقة التي يتم بها دعم النموذج المزدوج العربي. تمت ترجمة الكلمة الأخيرة بشكل خاطئ وأحاول العثور على كيفية إصلاحها. أيضًا، يجب إصلاح نموذج 0.
This is a test:
I like how the arabic dual form is supported. The last one is mistranslated and I'm trying to find how to fix it. Also, the form for 0 needs to be fixed.
@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 = await format(html, { parser: 'html', }) } catch { formatted = html } return { vnode, html, formatted, } } // mocks vi.mock('vue-router', async () => { const { defineComponent, h } = await import('vue') return { RouterLink: defineComponent({ setup(props, { slots }) { return () => h('a', props, { default: () => slots?.default?.() }) }, }), } }) vi.mock('@vueuse/shared', async () => { const vueuseShared = await import('@vueuse/shared') // mock pausableWatch and watchPausable: vitest process hangs from time to time return { ...vueuseShared, pausableWatch: () => { return { stop: () => {}, pause: () => {}, resume: () => {}, isActive: readonly(ref(true)), } }, watchPausable: () => { return { stop: () => {}, pause: () => {}, resume: () => {}, isActive: readonly(ref(true)), } }, } }) mockComponent('ContentMentionGroup', { setup(props, { slots }) { return () => h('mention-group', null, { default: () => slots?.default?.() }) }, }) mockComponent('AccountHoverWrapper', { props: ['handle', 'class'], setup(_, { slots }) { return () => slots?.default?.() }, })