From 51934118695caeb2830fc609ee64711c03d83f38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E8=B5=B7?=
 <14288992+timestart@user.noreply.gitee.com>
Date: Wed, 21 May 2025 21:00:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?test(LLMSelector):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=A8=A1=E6=8B=9F=E8=A1=8C=E4=B8=BA=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../biz/LLMSelector/LLMSelector.stories.tsx   | 78 ++++++++++++++++++-
 1 file changed, 75 insertions(+), 3 deletions(-)

diff --git a/components/biz/LLMSelector/LLMSelector.stories.tsx b/components/biz/LLMSelector/LLMSelector.stories.tsx
index 4465b194..2f57627e 100644
--- a/components/biz/LLMSelector/LLMSelector.stories.tsx
+++ b/components/biz/LLMSelector/LLMSelector.stories.tsx
@@ -3,6 +3,7 @@ import { useState } from "react"
 import { AIProvider } from "@/lib/config/ai-providers"
 import { LLMSelector } from "."
 import { LLMOption } from "./interface"
+import { within, userEvent, expect } from "@storybook/test"
 
 const meta: Meta<typeof LLMSelector> = {
   title: "biz/LLMSelector",
@@ -56,6 +57,41 @@ export const Basic: Story = {
     initialData: mockLLMOptions,
     placeholder: "Select an LLM model",
   },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    // 步骤 1: 查找并点击下拉框
+    await step("Open dropdown", async () => {
+      const selectButton = canvas.getByRole("combobox")
+      await userEvent.click(selectButton)
+    })
+
+    // 步骤 2: 等待下拉菜单渲染并选择选项
+    await step("Select option", async () => {
+      // 使用 getByRole 查找选项列表
+      await new Promise(resolve => setTimeout(resolve, 500)) // 增加等待时间
+
+      // 查找下拉列表中的所有选项
+      const options = document.querySelectorAll('[role="option"]')
+      const gpt4Option = Array.from(options).find(option =>
+        option.textContent?.includes("GPT-4o"),
+      )
+
+      if (!gpt4Option) {
+        throw new Error("GPT-4o option not found")
+      }
+
+      await userEvent.click(gpt4Option)
+    })
+
+    // 步骤 3: 验证选择结果
+    await step("Verify selection", async () => {
+      const selectButton = canvas.getByRole("combobox")
+      // 使用正则表达式进行更灵活的文本匹配
+      const hasGPT4Text = selectButton.textContent?.match(/GPT-4o/i)
+      expect(hasGPT4Text).toBeTruthy()
+    })
+  },
 }
 
 // With initial selection
@@ -65,6 +101,11 @@ export const WithSelection: Story = {
     selectedProvider: "openai",
     selectedModel: "gpt-4o",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const selectButton = canvas.getByRole("combobox")
+    expect(selectButton.textContent?.includes("GPT-4o")).toBeTruthy()
+  },
 }
 
 // Disabled state
@@ -73,6 +114,11 @@ export const Disabled: Story = {
     initialData: mockLLMOptions,
     disabled: true,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const selectButton = canvas.getByRole("combobox")
+    expect(selectButton.hasAttribute("disabled")).toBeTruthy()
+  },
 }
 
 // Interactive example with state
@@ -95,12 +141,38 @@ export const Interactive: Story = {
         <div className="p-4 bg-muted rounded-md text-sm">
           <p>
             <strong>Selected Provider:</strong> {provider || "None"}
-          </p>
+          </p >
           <p>
             <strong>Selected Model:</strong> {model || "None"}
-          </p>
+          </p >
         </div>
       </div>
     )
   },
-}
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // 1. 先验证下拉框是否存在
+    const selectButton = canvas.getByRole("combobox")
+    expect(selectButton).toBeTruthy()
+
+    // 2. 点击打开下拉框
+    await userEvent.click(selectButton)
+
+    // 3. 等待并选择选项
+    await new Promise(resolve => setTimeout(resolve, 500))
+
+    const options = document.querySelectorAll('[role="option"]')
+    const gpt4Option = Array.from(options).find(option =>
+      option.textContent?.includes("GPT-4o"),
+    )
+
+    if (gpt4Option) {
+      await userEvent.click(gpt4Option)
+    }
+
+    // 5. 验证选择后的显示文本
+    await new Promise(resolve => setTimeout(resolve, 100))
+    expect(selectButton.textContent).toContain("GPT-4o")
+  },
+}
\ No newline at end of file

From 3560acaaf88e52a56658f49f34338426d19b82ca Mon Sep 17 00:00:00 2001
From: esclipse <regretn@163.com>
Date: Sat, 31 May 2025 19:49:17 +0800
Subject: [PATCH 2/2] fix: update storybook config for ESM compatibility and
 set minimum Node.js version

---
 .storybook/main.ts | 5 ++++-
 package.json       | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index ea601bca..cabea784 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,4 +1,7 @@
-import path from "path"
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const config = {
   stories: [
diff --git a/package.json b/package.json
index 385298e7..db7f8df3 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "description": "AI-Powered Component Code Generator For Every Frontend Engineer",
+  "engines": {
+    "node": ">=22.7.0"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -111,4 +114,4 @@
     "typescript": "^5",
     "playwright": "^1.51.1"
   }
-}
+}
\ No newline at end of file