From d3c8af6aa9ddfc6f51e412f3860c9d3c7b3c632a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 26 Mar 2026 15:46:02 +0800
Subject: [PATCH] chore: tests

---
 .../start-tab/file-explorer-intro.spec.tsx    | 50 +++++++++++++++++++
 .../workflow/skill/start-tab/index.spec.tsx   |  8 ++-
 2 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/workflow/skill/start-tab/file-explorer-intro.spec.tsx

diff --git a/web/app/components/workflow/skill/start-tab/file-explorer-intro.spec.tsx b/web/app/components/workflow/skill/start-tab/file-explorer-intro.spec.tsx
new file mode 100644
index 0000000000..d6673c466f
--- /dev/null
+++ b/web/app/components/workflow/skill/start-tab/file-explorer-intro.spec.tsx
@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import FileExplorerIntro from './file-explorer-intro'
+
+vi.mock('react-i18next', () => ({
+  Trans: ({ i18nKey, ns, components }: {
+    i18nKey: string
+    ns?: string
+    components?: Record<string, ReactNode>
+  }) => (
+    <span data-i18n-key={ns ? `${ns}.${i18nKey}` : i18nKey}>
+      <span>Manage uploaded files here</span>
+      {components?.mention}
+      <span>to reference them in prompts.</span>
+    </span>
+  ),
+}))
+
+describe('FileExplorerIntro', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render translated intro copy with the injected mention chip', () => {
+      render(<FileExplorerIntro />)
+
+      expect(screen.getByText('Manage uploaded files here')).toBeInTheDocument()
+      expect(screen.getByText('to reference them in prompts.')).toBeInTheDocument()
+      expect(screen.getByText('@')).toBeInTheDocument()
+      expect(screen.getByText('Manage uploaded files here').parentElement).toHaveAttribute('data-i18n-key', 'workflow.skill.startTab.fileExplorerIntro')
+    })
+  })
+
+  describe('Presentation', () => {
+    it('should render the intro as a bordered hint bar', () => {
+      const { container } = render(<FileExplorerIntro />)
+
+      expect(container.firstChild).toHaveClass('px-6', 'pb-4', 'pt-4')
+      expect(container.querySelector('p')).toHaveClass(
+        'flex',
+        'h-8',
+        'items-center',
+        'rounded-md',
+        'border',
+        'border-text-accent-secondary',
+      )
+    })
+  })
+})
diff --git a/web/app/components/workflow/skill/start-tab/index.spec.tsx b/web/app/components/workflow/skill/start-tab/index.spec.tsx
index 7d00992ff0..c3769ab00a 100644
--- a/web/app/components/workflow/skill/start-tab/index.spec.tsx
+++ b/web/app/components/workflow/skill/start-tab/index.spec.tsx
@@ -55,13 +55,17 @@ describe('StartTabContent', () => {
     it('should render create/import actions and template list when mounted', () => {
       const { container } = render(<StartTabContent />)
 
-      expect(screen.getByText('skill.startTab.fileExplorerIntro')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.createBlankSkill/i })).toBeInTheDocument()
+      const intro = screen.getByText('skill.startTab.fileExplorerIntro')
+      const createButton = screen.getByRole('button', { name: /workflow\.skill\.startTab\.createBlankSkill/i })
+
+      expect(intro).toBeInTheDocument()
+      expect(createButton).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /workflow\.skill\.startTab\.importSkill/i })).toBeInTheDocument()
       expect(screen.getByRole('textbox')).toBeInTheDocument()
       expect(screen.getByText('workflow.skill.startTab.templatesTitle')).toBeInTheDocument()
       expect(screen.getByRole('region', { name: 'workflow.skill.startTab.templatesTitle' })).toBeInTheDocument()
       expect(screen.getAllByRole('button', { name: /workflow\.skill\.startTab\.useThisSkill/i }).length).toBeGreaterThan(0)
+      expect(intro.compareDocumentPosition(createButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
       expect(container.firstChild).toHaveClass('flex', 'h-full', 'min-h-0', 'w-full', 'bg-components-panel-bg')
     })
   })