feat(test): e2e

.github/workflows/e2e.yml

@@ -0,0 +1,37 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, develop, feature/e2e ]
+  pull_request:
+    branches: [ main, develop, feature/e2e ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4.0.0
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build vitepress-openapi
+        run: pnpm build
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 30

.gitignore

@@ -7,3 +7,9 @@ docs/.vitepress/cache
 docs/.vitepress/.temp
 types
 .idea
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/dev/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.temp
+cache
+.idea
+.vscode

e2e/dev/docs/.vitepress/config.ts

@@ -0,0 +1,67 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitepress'
+import { useSidebar } from 'vitepress-openapi'
+import spec from '../../public/openapi.json'
+
+const sidebar = useSidebar({
+  spec,
+  // Optionally, you can specify a link prefix for all generated sidebar items.
+  linkPrefix: '/operations/',
+})
+
+// refer https://vitepress.dev/reference/site-config for details
+export default defineConfig({
+  lang: 'en-US',
+  title: 'VitePress OpenAPI',
+  description: 'Generate documentation from OpenAPI specifications.',
+
+  themeConfig: {
+    nav: [{ text: 'API Reference', link: '/introduction' }],
+
+    sidebar: [
+      {
+        text: 'By Tags',
+        items: [
+          {
+            text: 'Introduction',
+            link: '/introduction',
+          },
+          ...sidebar.itemsByTags(),
+        ],
+      },
+      {
+        text: 'By Operations',
+        items: [
+          ...sidebar.generateSidebarGroups(),
+        ],
+      },
+      {
+        text: 'By Paths',
+        items: [
+          ...sidebar.itemsByPaths(),
+        ],
+      },
+      {
+        text: 'One Page',
+        items: [
+          { text: 'One Page', link: '/one-page' },
+          { text: 'Without Sidebar', link: '/without-sidebar' },
+        ],
+      },
+    ],
+  },
+
+  vite: {
+    resolve: {
+      alias: {
+        ...(process.env.NODE_ENV === 'production'
+          ? {}
+          : {
+              'vitepress-openapi/client': fileURLToPath(new URL('../../../../src/client', import.meta.url)),
+              'vitepress-openapi/dist/style.css': fileURLToPath(new URL('../../../../dist/style.css', import.meta.url)),
+              'vitepress-openapi': fileURLToPath(new URL('../../../../src/index', import.meta.url)),
+            }),
+      },
+    },
+  },
+})

e2e/dev/docs/.vitepress/theme/index.ts

@@ -0,0 +1,18 @@
+import DefaultTheme from 'vitepress/theme';
+import type { Theme } from 'vitepress';
+
+import { theme, useOpenapi } from 'vitepress-openapi/client';
+import 'vitepress-openapi/dist/style.css';
+import spec from '../../../public/openapi.json'
+
+export default {
+  ...DefaultTheme,
+  async enhanceApp({ app, router, siteData }) {
+    const openapi = useOpenapi({
+      spec,
+      config: {},
+    });
+
+    theme.enhanceApp({ app, openapi });
+  },
+} satisfies Theme;

e2e/dev/docs/index.md

@@ -0,0 +1,14 @@
+---
+layout: home
+
+hero:
+  name: "VitePress OpenAPI"
+  tagline: "Generate documentation from OpenAPI specifications."
+  actions:
+    - theme: brand
+      text: API Reference
+      link: /introduction
+    - theme: alt
+      text: Documentation
+      link: https://vitepress-openapi.vercel.app/
+---

e2e/dev/docs/introduction.md

@@ -0,0 +1,7 @@
+---
+title: vitepress-openapi
+---
+
+<OAInfo />
+
+<OAServers />

e2e/dev/docs/one-page.md

@@ -0,0 +1,12 @@
+---
+aside: false
+title: vitepress-openapi
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { isDark } = useData()
+</script>
+
+<OASpec :isDark="isDark" />

e2e/dev/docs/operations/[operationId].md

@@ -0,0 +1,17 @@
+---
+aside: false
+outline: false
+title: vitepress-openapi
+---
+
+<script setup lang="ts">
+import { useRoute, useData } from 'vitepress'
+
+const route = useRoute()
+
+const { isDark } = useData()
+
+const operationId = route.data.params.operationId
+</script>
+
+<OAOperation :operationId="operationId" :isDark="isDark" />

e2e/dev/docs/operations/[operationId].paths.js

@@ -0,0 +1,17 @@
+import { usePaths } from 'vitepress-openapi'
+import spec from '../../public/openapi.json'
+
+export default {
+    paths() {
+        return usePaths({ spec })
+            .getPathsByVerbs()
+            .map(({ operationId, summary }) => {
+                return {
+                    params: {
+                        operationId,
+                        pageTitle: `${summary} - vitepress-openapi`,
+                    },
+                }
+            })
+    },
+}

e2e/dev/docs/tags/[tag].md

@@ -0,0 +1,17 @@
+---
+aside: false
+outline: false
+title: vitepress-openapi
+---
+
+<script setup lang="ts">
+import { useRoute, useData } from 'vitepress'
+
+const route = useRoute()
+
+const { isDark } = useData()
+
+const tag = route.data.params.tag
+</script>
+
+<OASpec :tags="[tag]" :isDark="isDark" hide-info hide-servers hide-paths-summary />

e2e/dev/docs/tags/[tag].paths.js

@@ -0,0 +1,17 @@
+import { usePaths } from 'vitepress-openapi'
+import spec from '../../public/openapi.json'
+
+export default {
+    paths() {
+        return usePaths({ spec })
+            .getTags()
+            .map(({ name }) => {
+                return {
+                    params: {
+                        tag: name,
+                        pageTitle: `${name} - vitepress-openapi`,
+                    },
+                }
+            })
+    },
+}

e2e/dev/docs/without-sidebar.md

@@ -0,0 +1,14 @@
+---
+sidebar: false
+aside: true
+outline: [1, 2]
+title: vitepress-openapi
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import spec from '../public/openapi.json'
+const { isDark } = useData()
+</script>
+
+<OASpec :spec="spec" :isDark="isDark" />

e2e/dev/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev docs",
+    "build": "vitepress build docs",
+    "preview": "vitepress preview docs",
+    "start": "vitepress dev docs"
+  },
+  "devDependencies": {
+    "vitepress": "^1.6.3",
+    "vitepress-openapi": "workspace:*"
+  }
+}