Fixed SortBy component test cases #2173 (#2180)

* fixed SortBy component testcases

* fixed bot suggestions

* Update code

---------

Co-authored-by: Arkadii Yakovets <[email protected]>

Author: Adarsh0427

frontend/__tests__/unit/components/SortBy.test.tsx

@@ -22,29 +22,31 @@ describe('<SortBy />', () => {
     await act(async () => {
       render(<SortBy {...defaultProps} />)
     })
-    const select = screen.getByLabelText('Sort By :')
-    expect(select).toBeInTheDocument()
-    expect(select).toHaveValue('name')
+    const sortButton = screen.getByRole('button', { name: /Sort By/ })
+    expect(sortButton).toBeInTheDocument()
+    const selectedOption = screen.getByText('Name', { selector: '[data-slot="value"]' })
+    expect(selectedOption).toBeInTheDocument()
   })
 
   it('renders all options and selects the correct one', async () => {
     await act(async () => {
       render(<SortBy {...defaultProps} />)
     })
-    const select = screen.getByLabelText('Sort By :')
-    expect(select).toHaveValue('name')
-    // The dropdown options aren't directly visible in the DOM
-    // We're checking for the selected value instead
-    const selectedOption = screen.getByText('Name', { selector: '[data-slot="value"]' })
-    expect(selectedOption).toBeInTheDocument()
+    const sortButton = screen.getByRole('button', { name: /Sort By/ })
+    await act(async () => {
+      sortButton.click()
+    })
+    expect(await screen.findByRole('option', { name: 'Name' })).toBeInTheDocument()
+    expect(await screen.findByRole('option', { name: 'Date' })).toBeInTheDocument()
   })
 
   it('calls onSortChange when a different option is selected', async () => {
     await act(async () => {
       render(<SortBy {...defaultProps} />)
     })
     await act(async () => {
-      fireEvent.change(screen.getByLabelText('Sort By :'), { target: { value: 'date' } })
+      const hiddenSelect = screen.getByRole('combobox', { hidden: true })
+      fireEvent.change(hiddenSelect, { target: { value: 'date' } })
     })
     expect(defaultProps.onSortChange).toHaveBeenCalledWith('date')
   })
@@ -83,12 +85,13 @@ describe('<SortBy />', () => {
     await act(async () => {
       render(<SortBy {...defaultProps} />)
     })
-    const select = screen.getByLabelText('Sort By :')
-    expect(select.tagName).toBe('SELECT')
+    const hiddenSelect = screen.getByRole('combobox', { hidden: true })
+    expect(hiddenSelect.tagName).toBe('SELECT')
 
     // Use getAllByText to handle multiple elements with same text
-    const containers = screen.getAllByText('Sort By :')
-    const container = containers[0].closest('div')
+    const sortButton = screen.getByRole('button', { name: /Sort By/ })
+    const container = sortButton.closest('div')
     expect(container).toBeInTheDocument()
+    expect(hiddenSelect).toHaveAccessibleName(/Sort By/)
   })
 })

frontend/package.json

@@ -23,22 +23,21 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^3.0.1",
+    "@fortawesome/react-fontawesome": "^3.0.2",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@heroui/button": "^2.2.24",
-    "@heroui/modal": "^2.2.21",
-    "@heroui/react": "^2.8.2",
-    "@heroui/select": "^2.4.25",
-    "@heroui/skeleton": "^2.2.15",
-    "@heroui/system": "^2.4.20",
-    "@heroui/theme": "^2.4.20",
-    "@heroui/toast": "^2.0.14",
-    "@heroui/tooltip": "^2.2.21",
+    "@heroui/button": "^2.2.25",
+    "@heroui/modal": "^2.2.22",
+    "@heroui/react": "^2.8.3",
+    "@heroui/select": "^2.4.26",
+    "@heroui/skeleton": "^2.2.16",
+    "@heroui/system": "^2.4.21",
+    "@heroui/theme": "^2.4.21",
+    "@heroui/toast": "^2.0.15",
+    "@heroui/tooltip": "^2.2.22",
     "@next/eslint-plugin-next": "^15.5.2",
     "@next/third-parties": "^15.5.2",
-    "@sentry/nextjs": "^10.8.0",
+    "@sentry/nextjs": "^10.9.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/leaflet.markercluster": "^1.5.5",
     "@types/lodash": "^4.17.20",
     "apexcharts": "^5.3.4",
     "class-variance-authority": "^0.7.1",
@@ -84,14 +83,14 @@
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
     "@types/leaflet": "^1.9.20",
-    "@types/leaflet.markercluster": "^1.5.5",
+    "@types/leaflet.markercluster": "^1.5.6",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.18.0",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "@types/react-gtm-module": "^2.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.41.0",
-    "@typescript-eslint/parser": "^8.41.0",
+    "@typescript-eslint/eslint-plugin": "^8.42.0",
+    "@typescript-eslint/parser": "^8.42.0",
     "eslint": "^9.34.0",
     "eslint-config-next": "^15.5.2",
     "eslint-config-prettier": "^10.1.8",
@@ -106,7 +105,7 @@
     "import-in-the-middle": "^1.14.2",
     "jest": "^29.7.0",
     "jest-axe": "^10.0.0",
-    "jest-environment-jsdom": "^30.1.1",
+    "jest-environment-jsdom": "^30.1.2",
     "open": "^10.2.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
@@ -116,7 +115,7 @@
     "ts-jest": "^29.4.1",
     "ts-node": "^10.9.2",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.41.0",
+    "typescript-eslint": "^8.42.0",
     "util": "^0.12.5"
   },
   "engines": {