feat/husky-sidepanel: Fixed dropdown issue

__tests__/form/SingleSelectWithImage.test.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import SingleSelectWithImage from '../../components/form/single-select-with-image';
+import '@testing-library/jest-dom';
+
+describe('SingleSelectWithImage Component', () => {
+  const mockOptions = [
+    { id: 1, name: 'Option 1', icon: 'icon1.png' },
+    { id: 2, name: 'Option 2', icon: 'icon2.png' },
+  ];
+
+  const mockOnItemSelect = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders with default props', () => {
+    const { getByPlaceholderText } = render(
+      <SingleSelectWithImage
+        options={mockOptions}
+        selectedOption={null}
+        onItemSelect={mockOnItemSelect}
+        uniqueKey="id"
+        displayKey="name"
+        defaultIcon="default.png"
+        id="single-select"
+      />
+    );
+    expect(getByPlaceholderText('Select')).toBeInTheDocument();
+  });
+
+  test('displays label when provided', () => {
+    const { getByText } = render(
+      <SingleSelectWithImage
+        options={mockOptions}
+        selectedOption={null}
+        onItemSelect={mockOnItemSelect}
+        uniqueKey="id"
+        displayKey="name"
+        defaultIcon="default.png"
+        label="Select an option"
+        id="single-select"
+      />
+    );
+    expect(getByText('Select an option')).toBeInTheDocument();
+  });
+
+  test('shows options when input is clicked', () => {
+    const { getByPlaceholderText, getByText } = render(
+      <SingleSelectWithImage
+        options={mockOptions}
+        selectedOption={null}
+        onItemSelect={mockOnItemSelect}
+        uniqueKey="id"
+        displayKey="name"
+        defaultIcon="default.png"
+        id="single-select"
+      />
+    );
+    fireEvent.click(getByPlaceholderText('Select'));
+    expect(getByText('Option 1')).toBeInTheDocument();
+    expect(getByText('Option 2')).toBeInTheDocument();
+  });
+
+  test('selects an option when clicked', () => {
+    const { getByPlaceholderText, getByText } = render(
+      <SingleSelectWithImage
+        options={mockOptions}
+        selectedOption={null}
+        onItemSelect={mockOnItemSelect}
+        uniqueKey="id"
+        displayKey="name"
+        defaultIcon="default.png"
+        id="single-select"
+      />
+    );
+    fireEvent.click(getByPlaceholderText('Select'));
+    fireEvent.click(getByText('Option 1'));
+    expect(mockOnItemSelect).toHaveBeenCalledWith(mockOptions[0]);
+  });
+
+  test('shows no results message when filtered options are empty', () => {
+    const { getByPlaceholderText, getByText } = render(
+      <SingleSelectWithImage
+        options={[]}
+        selectedOption={null}
+        onItemSelect={mockOnItemSelect}
+        uniqueKey="id"
+        displayKey="name"
+        defaultIcon="default.png"
+        id="single-select"
+      />
+    );
+    fireEvent.click(getByPlaceholderText('Select'));
+    expect(getByText('No results found')).toBeInTheDocument();
+  });
+
+  test('renders selected option correctly', () => {
+    const { getByPlaceholderText } = render(
+      <SingleSelectWithImage
+        options={mockOptions}
+        selectedOption={mockOptions[0]}
+        onItemSelect={mockOnItemSelect}
+        uniqueKey="id"
+        displayKey="name"
+        defaultIcon="default.png"
+        id="single-select"
+      />
+    );
+    expect(getByPlaceholderText('Select').value).toBe('Option 1');
+  });
+});

components/core/husky/husky-ask-prompts.tsx

@@ -82,6 +82,7 @@ function HuskyAskPrompts({ suggestionTopicSelected, onPromptItemClicked }: Husky
                 uniqueKey="name"
                 displayKey="name"
                 iconKey="logo"
+                arrowImgUrl="/icons/arrow-blue-down.svg"
               />
             )}
             {filteredPrompts.length === 0 && <p className="hap__sgs__list__empty">No results found</p>}

components/form/single-select-with-image.tsx

@@ -103,7 +103,7 @@ const SingleSelectWithImage: React.FC<SingleSelectWithImageProps> = ({
             onKeyDown={onKeyDown}
             readOnly
           />
-          {arrowImgUrl && <img onClick={onSearchFocus} className="select__arrowimg" src={arrowImgUrl} width="10" height="7" alt="arrow down" />}
+          {arrowImgUrl && <img onClick={onSearchFocus} className="select__arrowimg" src={arrowImgUrl}  alt="arrow down" />}
           {showOptions && (
             <ul className="select__options">
               {filteredOptions?.map((option) => (

components/page/home/husky-discover.tsx

@@ -2,12 +2,11 @@
 
 import { useHuskyAnalytics } from '@/analytics/husky.analytics';
 import HuskyAi from '@/components/core/husky/husky-ai';
-import HuskyChat from '@/components/core/husky/husy-chat';
 import PageLoader from '@/components/core/page-loader';
 import {  } from '@/services/husky.service';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import cookies from 'js-cookie'
-import { Suspense, use, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import { getHuskyResponseBySlug, incrementHuskyViewCount } from '@/services/home.service';
 

jest.config.ts

@@ -0,0 +1,18 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)