chore: migrate to nuxt-vitest

2023-01-29 14:20:37 +01:00 · 2023-01-29 14:20:37 +01:00 · 6dbf7ae74f
commit 6dbf7ae74f
parent b48b7f4c16
12 changed files with 619 additions and 102 deletions
--- a/tests/nuxt/snapshots/content-rich.test.ts.snap
+++ b/tests/nuxt/snapshots/content-rich.test.ts.snap
@ -0,0 +1,164 @@
+// Vitest Snapshot v1
+
+exports[`content-rich > block with backticks 1`] = `"<p><pre class=\\"code-block\\">[(\`number string) (\`tag string)]</pre></p>"`;
+
+exports[`content-rich > block with injected html, with a known language 1`] = `
+"<pre>
+        <code class=\\"language-js\\">
+          &lt;a href=&quot;javascript:alert(1)&quot;&gt;click me&lt;/a&gt;
+        </code>
+      </pre>
+"
+`;
+
+exports[`content-rich > block with injected html, with an unknown language 1`] = `
+"<pre>
+        <code class=\\"language-xyzzy\\">
+          &lt;a href=&quot;javascript:alert(1)&quot;&gt;click me&lt;/a&gt;
+        </code>
+      </pre>
+"
+`;
+
+exports[`content-rich > block with injected html, without language 1`] = `
+"<pre>
+        <code>
+          &lt;a href=&quot;javascript:alert(1)&quot;&gt;click me&lt;/a&gt;
+        </code>
+      </pre>
+"
+`;
+
+exports[`content-rich > code frame 1`] = `
+"<p>Testing code block</p><p></p><p><pre class=\\"code-block\\">import { useMouse, usePreferredDark } from &apos;@vueuse/core&apos;
+// tracks mouse position
+const { x, y } = useMouse()
+// is the user prefers dark theme
+const isDark = usePreferredDark()</pre></p>"
+`;
+
+exports[`content-rich > code frame 2 1`] = `
+"<p>
+  <span class=\\"h-card\\"
+    ><a
+      class=\\"u-url mention\\"
+      rel=\\"nofollow noopener noreferrer\\"
+      to=\\"/webtoo.ls/@antfu\\"
+    ></a
+  ></span>
+  Testing<br />
+  <pre class=\\"code-block\\">const a = hello</pre>
+</p>
+"
+`;
+
+exports[`content-rich > code frame empty 1`] = `"<p><pre class=\\"code-block\\"></pre><br></p>"`;
+
+exports[`content-rich > code frame no lang 1`] = `"<p><pre class=\\"code-block\\">hello world</pre><br>no lang</p>"`;
+
+exports[`content-rich > custom emoji 1`] = `
+"Daniel Roe
+<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
+  ><source
+    srcset=\\"
+      https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png
+    \\"
+    media=\\"(prefers-reduced-motion: reduce)\\" />
+  <img
+    src=\\"https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png\\"
+    alt=\\":nuxt:\\"
+/></picture>
+"
+`;
+
+exports[`content-rich > empty 1`] = `""`;
+
+exports[`content-rich > group mention > html 1`] = `
+"<p>
+  <span class=\\"h-card\\"
+    ><a
+      class=\\"u-url mention\\"
+      rel=\\"nofollow noopener noreferrer\\"
+      to=\\"//@pilipinas@lemmy.ml\\"
+    ></a
+  ></span>
+</p>
+"
+`;
+
+exports[`content-rich > handles formatting from servers 1`] = `
+"<h1>Fedi HTML Support Survey</h1>
+<p>Does the following formatting come through accurately for you?</p>
+<p></p>
+<ul>
+  <li>This is an indented bulleted list (not just asterisks).</li>
+  <li><strong>This line is bold.</strong></li>
+  <li><em>This line is italic.</em></li>
+</ul>
+<ol>
+  <li>This list...</li>
+  <li>...is numbered and indented</li>
+</ol>
+<h1>This line is larger.</h1>
+"
+`;
+
+exports[`content-rich > handles html within code blocks 1`] = `
+"<p>
+  HTML block code:<br />
+  <pre class=\\"code-block\\">
+&lt;span class=&quot;icon--noto icon--noto--1st-place-medal&quot;&gt;&lt;/span&gt;
+&lt;span class=&quot;icon--noto icon--noto--2nd-place-medal-medal&quot;&gt;&lt;/span&gt;</pre
+  >
+</p>
+"
+`;
+
+exports[`content-rich > inline code with link 1`] = `
+"<p>
+  Inline code with link:
+  <code
+    >https://api.iconify.design/noto.css?icons=1st-place-medal,2nd-place-medal</code
+  >
+</p>
+"
+`;
+
+exports[`content-rich > link + mention 1`] = `
+"<p>
+  Happy
+  <img
+    src=\\"/emojis/twemoji/1f917.svg\\"
+    alt=\\"🤗\\"
+    class=\\"iconify-emoji iconify-emoji--twemoji\\"
+  />
+  we’re now using
+  <span class=\\"h-card\\"
+    ><a
+      class=\\"u-url mention\\"
+      rel=\\"nofollow noopener noreferrer\\"
+      to=\\"/webtoo.ls/@vitest\\"
+    ></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>
+"
+`;
+
+exports[`content-rich > plain text 1`] = `
+"hello there
+"
+`;
+
+exports[`editor > transform mentions 1`] = `
+"
+@elk Hello"
+`;
--- a/tests/nuxt/snapshots/html-parse.test.ts.snap
+++ b/tests/nuxt/snapshots/html-parse.test.ts.snap
@ -0,0 +1,144 @@
+// Vitest Snapshot v1
+
+exports[`html-parse > code frame > html 1`] = `
+"<p>Testing code block</p><p></p><p><pre><code class=\\"language-ts\\">import { useMouse, usePreferredDark } from '@vueuse/core'
+// tracks mouse position
+const { x, y } = useMouse()
+// is the user prefers dark theme
+const isDark = usePreferredDark()</code></pre></p>"
+`;
+
+exports[`html-parse > code frame > text 1`] = `
+"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()
+\`\`\`"
+`;
+
+exports[`html-parse > code frame 2 > html 1`] = `
+"<p>
+  <span class=\\"h-card\\"
+    ><a
+      href=\\"https://webtoo.ls/@antfu\\"
+      class=\\"u-url mention\\"
+      rel=\\"nofollow noopener noreferrer\\"
+      target=\\"_blank\\"
+      >@<span>antfu</span></a
+    ></span
+  >
+  Testing<br />
+  <pre><code class=\\"language-ts\\">const a = hello</code></pre>
+</p>
+"
+`;
+
+exports[`html-parse > code frame 2 > text 1`] = `
+"@antfu Testing
+
+\`\`\`ts
+const a = hello
+\`\`\`"
+`;
+
+exports[`html-parse > custom emoji > html 1`] = `
+"Daniel Roe
+<picture alt=\\":nuxt:\\" class=\\"custom-emoji\\" data-emoji-id=\\"nuxt\\"
+  ><source
+    srcset=\\"
+      https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png
+    \\"
+    media=\\"(prefers-reduced-motion: reduce)\\" />
+  <img
+    src=\\"https://media.webtoo.ls/custom_emojis/images/000/000/366/original/73330dfc9dda4078.png\\"
+    alt=\\":nuxt:\\"
+/></picture>
+"
+`;
+
+exports[`html-parse > custom emoji > text 1`] = `"Daniel Roe :nuxt:"`;
+
+exports[`html-parse > emojis > html 1`] = `
+"<img
+  src=\\"/emojis/twemoji/1f1eb-1f1f7.svg\\"
+  alt=\\"🇫🇷\\"
+  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+/>
+<img
+  src=\\"/emojis/twemoji/1f468-200d-1f469-200d-1f466.svg\\"
+  alt=\\"👨‍👩‍👦\\"
+  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+/>
+<img
+  src=\\"/emojis/twemoji/1f469-200d-1f692.svg\\"
+  alt=\\"👩‍🚒\\"
+  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+/><img
+  src=\\"/emojis/twemoji/1f9d1-1f3fd-200d-1f680.svg\\"
+  alt=\\"🧑🏽‍🚀\\"
+  class=\\"iconify-emoji iconify-emoji--twemoji\\"
+/>
+"
+`;
+
+exports[`html-parse > emojis > text 1`] = `"🇫🇷 👨‍👩‍👦 👩‍🚒🧑🏽‍🚀"`;
+
+exports[`html-parse > empty > html 1`] = `""`;
+
+exports[`html-parse > empty > text 1`] = `""`;
+
+exports[`html-parse > html entities > html 1`] = `
+"<p>Hello &lt;World /&gt;.</p>
+"
+`;
+
+exports[`html-parse > html entities > text 1`] = `"Hello <World />."`;
+
+exports[`html-parse > inline markdown > html 1`] = `"<p>text <code>code</code> <b>bold</b> <em>italic</em> <del>del</del></p><p></p><p><pre><code class=\\"language-js\\">code block</code></pre></p>"`;
+
+exports[`html-parse > inline markdown > text 1`] = `
+"text \`code\` **bold** *italic* ~~del~~
+
+
+\`\`\`js
+code block
+\`\`\`"
+`;
+
+exports[`html-parse > link + mention > html 1`] = `
+"<p>
+  Happy
+  <img
+    src=\\"/emojis/twemoji/1f917.svg\\"
+    alt=\\"🤗\\"
+    class=\\"iconify-emoji iconify-emoji--twemoji\\"
+  />
+  we’re now using
+  <span class=\\"h-card\\"
+    ><a
+      href=\\"https://webtoo.ls/@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>
+"
+`;
+
+exports[`html-parse > link + mention > text 1`] = `"Happy 🤗 we’re now using @vitest (migrated from chai+mocha) https://github.com/ayoayco/astro-reactive-library/pull/203"`;
--- a/tests/nuxt/content-rich.test.ts
+++ b/tests/nuxt/content-rich.test.ts
@ -0,0 +1,306 @@
+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('<p>Happy 🤗 we’re now using <span class="h-card"><a href="https://webtoo.ls/@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()
+  })
+
+  it ('block with backticks', async () => {
+    const { formatted } = await render('<p>```<br />[(`number string) (`tag string)]<br />```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it('group mention', async () => {
+    const { formatted } = await render('<p><span class="h-card"><a href="https://lemmy.ml/c/pilipinas" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>pilipinas</span></a></span></p>', {
+      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('<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>&lt;span class="icon--noto icon--noto--1st-place-medal"&gt;&lt;/span&gt;<br>&lt;span class="icon--noto icon--noto--2nd-place-medal-medal"&gt;&lt;/span&gt;<br>```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it('handles formatting from servers', async () => {
+    const { formatted } = await render('<h1>Fedi HTML Support Survey</h1><p>Does the following formatting come through accurately for you?</p><ul><li>This is an indented bulleted list (not just asterisks).</li><li><strong>This line is bold.</strong></li><li><em>This line is italic.</em></li></ul><ol><li>This list...</li><li>...is numbered and indented</li></ol><h1>This line is larger.</h1>')
+    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('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;</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()
+  })
+
+  it('code frame 2', async () => {
+    const { formatted } = await render('<p><span class=\"h-card\"><a href=\"https://webtoo.ls/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
+  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()
+  })
+
+  it('collapse mentions', async () => {
+    const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> content <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> <span class="h-card"><a href="https://mastodon.roe.dev/@daniel" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>daniel</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@sxzz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sxzz</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@patak" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>patak</span></a></span> content</p>', {
+      collapseMentionLink: true,
+    })
+    expect(formatted).toMatchInlineSnapshot(`
+      "<p>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@elk\\"
+          ></a
+        ></span>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@elk\\"
+          ></a
+        ></span>
+        content
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@antfu\\"
+          ></a
+        ></span>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/mastodon.roe.dev/@daniel\\"
+          ></a
+        ></span>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@sxzz\\"
+          ></a
+        ></span>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@patak\\"
+          ></a
+        ></span>
+        content
+      </p>
+      "
+    `)
+  })
+
+  it('hides collapsed mentions', async () => {
+    const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> content</p>', {
+      collapseMentionLink: true,
+      inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
+    })
+    expect(formatted).toMatchInlineSnapshot(`
+      "<p>content</p>
+      "
+    `)
+  })
+
+  it('shows some collapsed mentions inline', async () => {
+    const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> content</p>', {
+      collapseMentionLink: true,
+      inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
+    })
+    expect(formatted).toMatchInlineSnapshot(`
+      "<p>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@antfu\\"
+          ></a
+        ></span>
+        content
+      </p>
+      "
+    `)
+  })
+
+  it('shows some collapsed mentions grouped', async () => {
+    const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@patak" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>patak</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@sxzz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sxzz</span></a></span>content</p>', {
+      collapseMentionLink: true,
+      inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
+    })
+    expect(formatted).toMatchInlineSnapshot(`
+      "<p>
+        <mention-group
+          ><span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@antfu\\"
+            ></a
+          ></span>
+          <span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@patak\\"
+            ></a
+          ></span>
+          <span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@sxzz\\"
+            ></a></span></mention-group
+        >content
+      </p>
+      "
+    `)
+  })
+
+  it ('block with injected html, without language', async () => {
+    const { formatted } = await render(`
+      <pre>
+        <code>
+          &lt;a href="javascript:alert(1)">click me&lt;/a>
+        </code>
+      </pre>
+    `)
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it ('block with injected html, with an unknown language', async () => {
+    const { formatted } = await render(`
+      <pre>
+        <code class="language-xyzzy">
+          &lt;a href="javascript:alert(1)">click me&lt;/a>
+        </code>
+      </pre>
+    `)
+    expect(formatted).toMatchSnapshot()
+  })
+
+  it ('block with injected html, with a known language', async () => {
+    const { formatted } = await render(`
+      <pre>
+        <code class="language-js">
+          &lt;a href="javascript:alert(1)">click me&lt;/a>
+        </code>
+      </pre>
+    `)
+    expect(formatted).toMatchSnapshot()
+  })
+})
+
+describe('editor', () => {
+  it('transform mentions', () => {
+    const ast = parseMastodonHTML('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention">@<span>elk</span></a></span> Hello</p>')
+    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() {},
+  }
+})
+
+vi.mock('~/components/content/ContentMentionGroup.vue', async () => {
+  const { defineComponent, h } = await import('vue')
+  return {
+    default: defineComponent({
+      setup(props, { slots }) {
+        return () => h('mention-group', null, { default: () => slots?.default?.() })
+      },
+    }),
+  }
+})
+
+mockComponent('AccountHoverWrapper', {
+  props: ['handle', 'class'],
+  setup(_, { slots }) {
+    return () => slots?.default?.()
+  },
+})
--- a/tests/nuxt/html-parse.test.ts
+++ b/tests/nuxt/html-parse.test.ts
@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest'
+import { format } from 'prettier'
+import { render as renderTree } from 'ultrahtml'
+import type { ContentParseOptions } from '~~/composables/content-parse'
+
+describe('html-parse', () => {
+  it('empty', async () => {
+    const { formatted, serializedText } = await render('')
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('link + mention', async () => {
+    // https://fosstodon.org/@ayo/109383002937620723
+    const { formatted, serializedText } = await render('<p>Happy 🤗 we’re now using <span class="h-card"><a href="https://webtoo.ls/@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('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('custom emoji', async () => {
+    const { formatted, serializedText } = 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('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('emojis', async () => {
+    const { formatted, serializedText } = await render('🇫🇷 👨‍👩‍👦 👩‍🚒🧑🏽‍🚀')
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('code frame', async () => {
+    // https://webtoo.ls/@antfu/109396489827394721
+    const { formatted, serializedText } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;</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('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('code frame 2', async () => {
+    const { formatted, serializedText } = await render('<p><span class=\"h-card\"><a href=\"https://webtoo.ls/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('inline markdown', async () => {
+    const { formatted, serializedText } = await render('<p>text `code` **bold** *italic* ~~del~~</p><p>```js<br />code block<br />```</p>')
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+
+  it('html entities', async () => {
+    const { formatted, serializedText } = await render('<p>Hello &lt;World /&gt;.</p>')
+    expect(formatted).toMatchSnapshot('html')
+    expect(serializedText).toMatchSnapshot('text')
+  })
+})
+
+async function render(input: string, options?: ContentParseOptions) {
+  const tree = parseMastodonHTML(input, options)
+  const html = await renderTree(tree)
+  let formatted = ''
+  const serializedText = treeToText(tree).trim()
+
+  try {
+    formatted = format(html, {
+      parser: 'html',
+    })
+  }
+  catch (e) {
+    formatted = html
+  }
+
+  return {
+    serializedText,
+    input,
+    tree,
+    html,
+    formatted,
+  }
+}
--- a/tests/nuxt/html-to-text.test.ts
+++ b/tests/nuxt/html-to-text.test.ts
@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+
+describe('html-to-text', () => {
+  it('inline code', () => {
+    expect(htmlToText('<p>text <code>code</code> inline</p>'))
+      .toMatchInlineSnapshot('"text `code` inline"')
+  })
+
+  it('code block', () => {
+    expect(htmlToText('<p>text </p><pre><code class="language-js">code</code></pre>'))
+      .toMatchInlineSnapshot(`
+      "text 
+      \`\`\`js
+      code
+      \`\`\`"
+    `)
+  })
+
+  it('bold & italic', () => {
+    expect(htmlToText('<p>text <b>bold</b> <em>italic</em></p>'))
+      .toMatchInlineSnapshot('"text **bold** *italic*"')
+  })
+})