test(e2e): add case for api-docgen plugin

e2e/fixtures/api-docgen/doc/index.mdx

@@ -0,0 +1,7 @@
+# Hello World
+
+## API
+
+This is API Table
+
+<API moduleName="button" />

e2e/fixtures/api-docgen/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@rspress-fixture/rspress-api-docgen",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  },
+  "dependencies": {
+    "@rspress/plugin-api-docgen": "workspace:*",
+    "rspress": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^14"
+  }
+}

e2e/fixtures/api-docgen/rspress.config.ts

@@ -0,0 +1,15 @@
+import path from 'path';
+import { defineConfig } from 'rspress/config';
+import { pluginApiDocgen } from '@rspress/plugin-api-docgen';
+
+export default defineConfig({
+  root: path.join(__dirname, 'doc'),
+  plugins: [
+    pluginApiDocgen({
+      entries: {
+        button: './src/Button.ts',
+      },
+      apiParseTool: 'react-docgen-typescript',
+    }),
+  ],
+});

e2e/fixtures/api-docgen/src/Button.ts

@@ -0,0 +1,13 @@
+export type ButtonProps = {
+  /**
+   * Whether to disable the button
+   */
+  disabled?: boolean;
+  /**
+   * Type of Button
+   * @default 'default'
+   */
+  size?: 'mini' | 'small' | 'default' | 'large';
+};
+
+export const Button = (props?: ButtonProps) => {};

e2e/tests/api-docgen.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+import path from 'path';
+import { getPort, killProcess, runDevCommand } from '../utils/runCommands';
+
+const fixtureDir = path.resolve(__dirname, '../fixtures');
+
+test.describe('api-docgen test', async () => {
+  let appPort;
+  let app;
+
+  test.beforeAll(async () => {
+    const appDir = path.join(fixtureDir, 'api-docgen');
+    appPort = await getPort();
+    app = await runDevCommand(appDir, appPort);
+  });
+
+  test.afterAll(async () => {
+    if (app) {
+      await killProcess(app);
+    }
+  });
+
+  test('Index page', async ({ page }) => {
+    await page.goto(`http://localhost:${appPort}`);
+    const table = await page.$('table');
+    const tableContent = await page.evaluate(table => table?.innerHTML, table);
+
+    // Property
+    expect(tableContent).toContain('Property');
+    expect(tableContent).toContain('disabled');
+    expect(tableContent).toContain('size');
+
+    // Description
+    expect(tableContent).toContain('Description');
+    expect(tableContent).toContain('Whether to disable the button');
+    expect(tableContent).toContain('Type of Button');
+
+    // Type
+    expect(tableContent).toContain('Type');
+    expect(tableContent).toContain('boolean');
+    expect(tableContent).toContain('"mini" | "small" | "default" | "large"');
+
+    // Default Value
+    expect(tableContent).toContain('Default Value');
+    expect(tableContent).toContain('-');
+    expect(tableContent).toContain("'default'");
+  });
+});

packages/document/docs/en/plugin/official-plugins/api-docgen.mdx

@@ -30,12 +30,12 @@ export default defineConfig({
 
 Then you can use API component to inject api documentation to your mdx file:
 
-```md
+```mdx
 ## API
 
 This is API Table
 
-<API moduleName="button"></API>
+<API moduleName="button" />
 ```
 
 ## Config

packages/document/docs/zh/plugin/official-plugins/api-docgen.mdx

@@ -30,12 +30,12 @@ export default defineConfig({
 
 然后你可以在 MDX 中使用 API 组件将 API 内容注入到文档中：
 
-```md
+```mdx
 ## API
 
 这是 API 表格
 
-<API moduleName="button"></API>
+<API moduleName="button" />
 ```
 
 ## 配置