test(e2e): add vue-components cases

Author: meteorlxy

e2e/docs/.vuepress/client.ts

@@ -1,11 +1,15 @@
 import { defineClientConfig } from 'vuepress/client'
+import ComponentForMarkdownGlobal from './components/ComponentForMarkdownGlobal.vue'
 import RootComponentFromUserConfig from './components/RootComponentFromUserConfig.vue'
 
 // static imported styles file
 import '@vuepress-e2e/style-exports/foo.css'
 
 export default defineClientConfig({
-  async enhance() {
+  async enhance({ app }) {
+    // register global components
+    app.component('ComponentForMarkdownGlobal', ComponentForMarkdownGlobal)
+
     // dynamic imported styles file
     await import('@vuepress-e2e/style-exports')
   },

e2e/docs/.vuepress/components/ComponentForMarkdownGlobal.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="component-for-markdown-global">
+    <p>component for markdown global</p>
+  </div>
+</template>

e2e/docs/.vuepress/components/ComponentForMarkdownImport.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="component-for-markdown-import">
+    <p>component for markdown import</p>
+  </div>
+</template>

e2e/docs/markdown/vue-components.md

@@ -0,0 +1,8 @@
+<ComponentForMarkdownGlobal />
+
+<ComponentForMarkdownImport />
+
+<script setup>
+// TODO: relative path import?
+import ComponentForMarkdownImport from '@source/.vuepress/components/ComponentForMarkdownImport.vue';
+</script>

e2e/tests/markdown/vue-components.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test'
+
+test('should render vue components correctly', async ({ page }) => {
+  await page.goto('markdown/vue-components.html')
+
+  await expect(page.locator('.component-for-markdown-global p')).toHaveText(
+    'component for markdown global',
+  )
+  await expect(page.locator('.component-for-markdown-import p')).toHaveText(
+    'component for markdown import',
+  )
+})