From 0fe831fe40a728e8fa2c199ae3cf01b76bb34dd4 Mon Sep 17 00:00:00 2001
From: meteorlxy <meteor.lxy@foxmail.com>
Date: Tue, 10 Sep 2024 11:27:05 +0800
Subject: [PATCH] test(e2e): add vue-components cases

---
 e2e/docs/.vuepress/client.ts                         |  6 +++++-
 .../components/ComponentForMarkdownGlobal.vue        |  5 +++++
 .../components/ComponentForMarkdownImport.vue        |  5 +++++
 e2e/docs/markdown/vue-components.md                  |  8 ++++++++
 e2e/tests/markdown/vue-components.spec.ts            | 12 ++++++++++++
 5 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 e2e/docs/.vuepress/components/ComponentForMarkdownGlobal.vue
 create mode 100644 e2e/docs/.vuepress/components/ComponentForMarkdownImport.vue
 create mode 100644 e2e/tests/markdown/vue-components.spec.ts

diff --git a/e2e/docs/.vuepress/client.ts b/e2e/docs/.vuepress/client.ts
index bd262cd6a5..46267b488c 100644
--- a/e2e/docs/.vuepress/client.ts
+++ b/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')
   },
diff --git a/e2e/docs/.vuepress/components/ComponentForMarkdownGlobal.vue b/e2e/docs/.vuepress/components/ComponentForMarkdownGlobal.vue
new file mode 100644
index 0000000000..c275380f70
--- /dev/null
+++ b/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>
diff --git a/e2e/docs/.vuepress/components/ComponentForMarkdownImport.vue b/e2e/docs/.vuepress/components/ComponentForMarkdownImport.vue
new file mode 100644
index 0000000000..7108c4a426
--- /dev/null
+++ b/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>
diff --git a/e2e/docs/markdown/vue-components.md b/e2e/docs/markdown/vue-components.md
index e69de29bb2..c038c08795 100644
--- a/e2e/docs/markdown/vue-components.md
+++ b/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>
diff --git a/e2e/tests/markdown/vue-components.spec.ts b/e2e/tests/markdown/vue-components.spec.ts
new file mode 100644
index 0000000000..f33b1dbc68
--- /dev/null
+++ b/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',
+  )
+})