From 678a40d4626ac7b2b833a179c0bcca963ff0cfed Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.ai>
Date: Mon, 29 Dec 2025 16:55:30 +0800
Subject: [PATCH] test: update unit tests for SortDropdown and Uploading
 components to handle edge cases and clarify upload success criteria

---
 .../steps/uploading.spec.tsx                  | 10 ++++++--
 .../marketplace/sort-dropdown/index.spec.tsx  | 24 ++++++++++++-------
 .../marketplace/sort-dropdown/index.tsx       |  2 +-
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.spec.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.spec.tsx
index 18c6af8880..577fcf4197 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.spec.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.spec.tsx
@@ -172,7 +172,13 @@ describe('Uploading', () => {
       })
     })
 
-    it('should call onPackageUploaded when package upload succeeds (no error message)', async () => {
+    // NOTE: The uploadFile API has an unconventional contract where it always rejects.
+    // Success vs failure is determined by whether response.message exists:
+    // - If response.message exists → treated as failure (calls onFailed)
+    // - If response.message is absent → treated as success (calls onPackageUploaded/onBundleUploaded)
+    // This explains why we use mockRejectedValue for "success" scenarios below.
+
+    it('should call onPackageUploaded when upload rejects without error message (success case)', async () => {
       const mockResult = {
         unique_identifier: 'test-uid',
         manifest: createMockManifest(),
@@ -198,7 +204,7 @@ describe('Uploading', () => {
       })
     })
 
-    it('should call onBundleUploaded when bundle upload succeeds (no error message)', async () => {
+    it('should call onBundleUploaded when upload rejects without error message (success case)', async () => {
       const mockDependencies = createMockDependencies()
       mockUploadFile.mockRejectedValue({
         response: mockDependencies,
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx
index 35858268d8..1bc52568f9 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx
@@ -452,25 +452,31 @@ describe('SortDropdown', () => {
   // Edge Cases Tests
   // ================================
   describe('Edge Cases', () => {
-    it('should handle unknown sortBy value gracefully', () => {
+    // The component falls back to the first option (Most Popular) when sort values are invalid
+
+    it('should fallback to default option when sortBy is unknown', () => {
       mockSort = { sortBy: 'unknown_field', sortOrder: 'DESC' }
 
-      // This may cause an error or undefined behavior
-      // Component uses find() which returns undefined for non-matching
-      expect(() => render(<SortDropdown />)).toThrow()
+      render(<SortDropdown />)
+
+      // Should fallback to first option "Most Popular"
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
     })
 
-    it('should handle empty sortBy value', () => {
+    it('should fallback to default option when sortBy is empty', () => {
       mockSort = { sortBy: '', sortOrder: 'DESC' }
 
-      expect(() => render(<SortDropdown />)).toThrow()
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
     })
 
-    it('should handle unknown sortOrder value', () => {
+    it('should fallback to default option when sortOrder is unknown', () => {
       mockSort = { sortBy: 'install_count', sortOrder: 'UNKNOWN' }
 
-      // No matching option, selectedOption will be undefined
-      expect(() => render(<SortDropdown />)).toThrow()
+      render(<SortDropdown />)
+
+      expect(screen.getByText('Most Popular')).toBeInTheDocument()
     })
 
     it('should render correctly when handleSortChange is a no-op', () => {
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index 6f4f154dda..a1f6631735 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -44,7 +44,7 @@ const SortDropdown = ({
   const sort = useMarketplaceContext(v => v.sort)
   const handleSortChange = useMarketplaceContext(v => v.handleSortChange)
   const [open, setOpen] = useState(false)
-  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder)!
+  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder) ?? options[0]
 
   return (
     <PortalToFollowElem