diff --git a/__tests__/form/SingleSelectWithImage.test.jsx b/__tests__/form/SingleSelectWithImage.test.jsx new file mode 100644 index 00000000..ed78f6e1 --- /dev/null +++ b/__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( + + ); + expect(getByPlaceholderText('Select')).toBeInTheDocument(); + }); + + test('displays label when provided', () => { + const { getByText } = render( + + ); + expect(getByText('Select an option')).toBeInTheDocument(); + }); + + test('shows options when input is clicked', () => { + const { getByPlaceholderText, getByText } = render( + + ); + fireEvent.click(getByPlaceholderText('Select')); + expect(getByText('Option 1')).toBeInTheDocument(); + expect(getByText('Option 2')).toBeInTheDocument(); + }); + + test('selects an option when clicked', () => { + const { getByPlaceholderText, getByText } = render( + + ); + 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( + + ); + fireEvent.click(getByPlaceholderText('Select')); + expect(getByText('No results found')).toBeInTheDocument(); + }); + + test('renders selected option correctly', () => { + const { getByPlaceholderText } = render( + + ); + expect(getByPlaceholderText('Select').value).toBe('Option 1'); + }); +}); diff --git a/app/globals.css b/app/globals.css index 766bb492..56837470 100644 --- a/app/globals.css +++ b/app/globals.css @@ -78,6 +78,10 @@ body { margin-top: 60px; } +textarea { + font-family:inherit; +} + body { overflow-y: auto; } diff --git a/components/core/husky/feedback-modal.tsx b/components/core/husky/feedback-modal.tsx deleted file mode 100644 index 91dec93d..00000000 --- a/components/core/husky/feedback-modal.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import { FormEvent, useRef, useState } from 'react'; -import Modal from '../modal'; -import { RATINGS } from '@/utils/constants'; -import TextArea from '@/components/form/text-area'; -import HiddenField from '@/components/form/hidden-field'; - -const FeedbackModal = (props: any) => { - const feedbackModalRef = props?.modalRef; - const onClose = props?.onClose; - - const ratings = [...RATINGS]; - const [ratingInfo, setRatingInfo] = useState({ - rating: 0, - comment: '', - }); - const [isDisable, setIsDisable] = useState(false); - const feedbackFormRef = useRef(null); - - const onRatingClickHandler = (rating: number) => { - setRatingInfo({ ...ratingInfo, rating }); - }; - - const onFormSubmit = async (e: FormEvent) => { - e.preventDefault(); - e.stopPropagation(); - if (!feedbackFormRef.current) { - return; - } - const formData = new FormData(feedbackFormRef.current); - for (let [key, value] of formData.entries()) { - console.log(`${key}: ${value}`); - } - // const formattedData = transformObject(Object.fromEntries(formData)); - }; - - return ( - <> - -
-
-
-
How useful was this response?
-
-
-
-
- {ratings?.map((rating: any, index: number) => ( - - ))} -
-
-
Not Valueable
-
Extremely Valueable
-
- -
-
-
Comment (Optional)
-
-