test: add e2e test

e2e/docs/.vuepress/theme/client/components/MarkdownContentHooks.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import {
+  onContentBeforeUnmount,
+  onContentChange,
+  onContentMounted,
+  useRoutePath,
+} from 'vuepress/client'
+
+const mounted = ref('')
+const beforeUnmount = ref('')
+
+const mountedCount = ref(0)
+const changedCount = ref(0)
+
+const routePath = useRoutePath()
+
+watch(routePath, () => {
+  changedCount.value = 0
+})
+
+onContentMounted(() => {
+  mounted.value = routePath.value
+  mountedCount.value++
+})
+
+onContentChange(() => {
+  changedCount.value++
+})
+
+onContentBeforeUnmount(() => {
+  beforeUnmount.value = mounted.value
+})
+</script>
+
+<template>
+  <div class="markdown-content-hooks">
+    <p class="markdown-content-mounted">
+      mounted: {{ mounted }} {{ mountedCount }}
+    </p>
+    <p class="markdown-content-before-unmount">
+      beforeUnmount: {{ beforeUnmount }}
+    </p>
+    <p class="markdown-content-change">changedCount: {{ changedCount }}</p>
+  </div>
+</template>

e2e/docs/.vuepress/theme/client/layouts/Layout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Content, useSiteData } from 'vuepress/client'
+import MarkdownContentHooks from '../components/MarkdownContentHooks.vue'
 
 const siteData = useSiteData()
 </script>
@@ -18,6 +19,8 @@ const siteData = useSiteData()
     <main class="e2e-theme-content">
       <Content />
     </main>
+
+    <MarkdownContentHooks />
   </div>
 </template>
 

e2e/docs/content-hooks/content.md

@@ -0,0 +1,3 @@
+## title
+
+content

e2e/tests/content-hooks.spec.ts

@@ -0,0 +1,70 @@
+import { expect, test } from '@playwright/test'
+import { IS_DEV } from '../utils/env'
+import { readSourceMarkdown, writeSourceMarkdown } from '../utils/source'
+
+let changeCount = 0
+
+const updateMarkdownContent = async (): Promise<void> => {
+  changeCount++
+  const content = await readSourceMarkdown('content-hooks/content.md')
+  await writeSourceMarkdown(
+    'content-hooks/content.md',
+    `${content}\n\nUpdated content`,
+  )
+}
+
+const restoreMarkdownContent = async (): Promise<void> => {
+  changeCount = 0
+  await writeSourceMarkdown('content-hooks/content.md', '## title\n\ncontent\n')
+}
+
+if (IS_DEV) {
+  test.beforeEach(async () => {
+    await restoreMarkdownContent()
+  })
+  test.afterEach(async () => {
+    await restoreMarkdownContent()
+  })
+}
+
+test('should call content mounted hook', async ({ page }) => {
+  const mountedLocator = page.locator(
+    '.markdown-content-hooks .markdown-content-mounted',
+  )
+  await page.goto('content-hooks/content.html')
+
+  await expect(mountedLocator).toHaveText(
+    'mounted: /content-hooks/content.html 1',
+  )
+
+  // update content but mounted hook should not be called twice
+  await updateMarkdownContent()
+  await expect(mountedLocator).toHaveText(
+    'mounted: /content-hooks/content.html 1',
+  )
+})
+
+test('should call content change hook', async ({ page }) => {
+  const changeLocator = page.locator(
+    '.markdown-content-hooks .markdown-content-change',
+  )
+  await page.goto('content-hooks/content.html')
+
+  await updateMarkdownContent()
+  await expect(changeLocator).toHaveText(`changedCount: ${changeCount}`) // 1
+
+  await updateMarkdownContent()
+  await expect(changeLocator).toHaveText(`changedCount: ${changeCount}`) // 2
+})
+
+test('should call content before unmount hook', async ({ page }) => {
+  const beforeUnmountLocator = page.locator(
+    '.markdown-content-hooks .markdown-content-before-unmount',
+  )
+  await page.goto('content-hooks/content.html')
+  await page.locator('.e2e-theme-nav a[href="/"]').click()
+
+  await expect(beforeUnmountLocator).toHaveText(
+    'beforeUnmount: /content-hooks/content.html',
+  )
+})