fix:the typescript error of the value type and the null value in the …

…tests
Real-Dev-Squad · Jul 28, 2024 · 35ce2d8 · 35ce2d8
1 parent ea48500
commit 35ce2d8
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 30 deletions.
diff --git a/__tests__/Unit/Componets/Combobox/Combobox.test.tsx b/__tests__/Unit/Componets/Combobox/Combobox.test.tsx
@@ -35,7 +35,7 @@ describe('Combobox Component', () => {
 
   it('Select a value from the combobox list', async() => {
     const onChangeMock = jest.fn();
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock} value={null} />);
+    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock}/>);
     const button = screen.getByRole('button');
 
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
@@ -55,7 +55,7 @@ describe('Combobox Component', () => {
   });
 
    it('filters the options based on input value', async () => {
-      render(<ComboboxDropdown value="" onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
+      render(<ComboboxDropdown onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
       expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
       const button = screen.getByRole('button');
       fireEvent.click(button);
@@ -73,7 +73,7 @@ describe('Combobox Component', () => {
 
   it('Display No Results option when no options are present', async() => {
 
-    render(<ComboboxDropdown options={ComboboxMockData}  placeholder="placeholder" value={null} />);
+    render(<ComboboxDropdown options={ComboboxMockData}  placeholder="placeholder"/>);
     const input = screen.getByRole('combobox');
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
 
@@ -94,11 +94,9 @@ describe('Combobox Component', () => {
     render(
       <div>
       <ComboboxDropdown
-        value={null}
         onChange={() => {}}
         placeholder="placeholder"
         options={ComboboxMockData}
-        handleAddSkill={() => {}}
       />
       <div data-testid="outside-element">Outside Element</div>
     </div>

diff --git a/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx b/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx
@@ -35,7 +35,7 @@ describe('SkillCombobox Component', () => {
 
   it('Select a value from the combobox list', async() => {
     const onChangeMock = jest.fn();
-    render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} value={null} />);
+    render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} />);
     const button = screen.getByRole('button');
 
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
@@ -55,7 +55,7 @@ describe('SkillCombobox Component', () => {
   });
 
    it('filters the options based on input value', async () => {
-      render(<SkillCombobox value="" onChange={() => {}} placeholder="select skill" options={skillMockData} />);
+      render(<SkillCombobox onChange={() => {}} placeholder="select skill" options={skillMockData} />);
       expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
       const button = screen.getByRole('button');
       fireEvent.click(button);
@@ -75,7 +75,7 @@ describe('SkillCombobox Component', () => {
 
     const handleAddSkill = jest.fn();
 
-    render(<SkillCombobox options={skillMockData}  placeholder="select skill" value={null} handleAddSkill={handleAddSkill}/>);
+    render(<SkillCombobox options={skillMockData}  placeholder="select skill" handleAddSkill={handleAddSkill}/>);
     const input = screen.getByRole('combobox');
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
 
@@ -97,7 +97,6 @@ describe('SkillCombobox Component', () => {
     render(
       <div>
       <SkillCombobox
-        value={null}
         onChange={() => {}}
         placeholder="select skill"
         options={skillMockData}

diff --git a/__tests__/components/combobox/Combobox.test.tsx b/__tests__/components/combobox/Combobox.test.tsx
@@ -45,7 +45,7 @@ describe('Combobox Component', () => {
 
   it('Select a value from the combobox list', async() => {
     const onChangeMock = jest.fn();
-    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock} value={null} />);
+    render(<ComboboxDropdown options={ComboboxMockData} placeholder="placeholder" onChange={onChangeMock} />);
     const button = screen.getByRole('button');
 
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
@@ -65,7 +65,7 @@ describe('Combobox Component', () => {
   });
 
    it('filters the options based on input value', async () => {
-      render(<ComboboxDropdown value="" onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
+      render(<ComboboxDropdown  onChange={() => {}} placeholder="placeholder" options={ComboboxMockData} />);
       expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
       const button = screen.getByRole('button');
       fireEvent.click(button);
@@ -83,7 +83,7 @@ describe('Combobox Component', () => {
 
   it('Display No Results option when no options are present', async() => {
 
-    render(<ComboboxDropdown options={ComboboxMockData}  placeholder="placeholder" value={null}/>);
+    render(<ComboboxDropdown options={ComboboxMockData}  placeholder="placeholder"/>);
     const input = screen.getByRole('combobox');
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
 

diff --git a/__tests__/components/skillcombobox/SkillCombobox.test.tsx b/__tests__/components/skillcombobox/SkillCombobox.test.tsx
@@ -44,7 +44,7 @@ describe('SkillCombobox Component', () => {
 
   it('Select a value from the combobox list', async() => {
     const onChangeMock = jest.fn();
-    render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} value={null} />);
+    render(<SkillCombobox options={skillMockData} placeholder="select skill" onChange={onChangeMock} />);
     const button = screen.getByRole('button');
 
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
@@ -64,7 +64,7 @@ describe('SkillCombobox Component', () => {
   });
 
    it('filters the options based on input value', async () => {
-      render(<SkillCombobox value="" onChange={() => {}} placeholder="select skill" options={skillMockData} />);
+      render(<SkillCombobox onChange={() => {}} placeholder="select skill" options={skillMockData} />);
       expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); 
       const button = screen.getByRole('button');
       fireEvent.click(button);
@@ -83,7 +83,7 @@ describe('SkillCombobox Component', () => {
   it('Display Add new Skill option when no options are present', async() => {
 
 
-    render(<SkillCombobox options={skillMockData}  placeholder="select skill" value={null}/>);
+    render(<SkillCombobox options={skillMockData}  placeholder="select skill"/>);
     const input = screen.getByRole('combobox');
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed
 

diff --git a/src/components/Combobox/index.tsx b/src/components/Combobox/index.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { Combobox, Transition } from '@headlessui/react';
-import React, { useState, FC, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 type OptionTypes = {
   id: number;
@@ -9,12 +9,12 @@ type OptionTypes = {
 
 type ComboboxProps = {
     options: OptionTypes[];
-    value: OptionTypes;
-    onChange: (value: OptionTypes) => void;
+    value?: OptionTypes;
+    onChange?: (value: OptionTypes) => void;
     placeholder?: string;
 }
 
-const ComboboxDropdown: FC = ({placeholder, options, value, onChange}: ComboboxProps) => {
+const ComboboxDropdown = ({options, value, onChange, placeholder}: ComboboxProps) => {
   const [query, setQuery] = useState('');
 
   const filteredOptions =
@@ -29,7 +29,7 @@ const ComboboxDropdown: FC = ({placeholder, options, value, onChange}: ComboboxP
       <div className="relative">
           <Combobox.Input
             className="border rounded-lg border-blue bg-black/5 font-normal py-2.5 px-4 text-sm/6 h-11 w-64 focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
-            displayValue={(option) => option?.name}
+            displayValue={(option: OptionTypes) => option?.name}
             onChange={(event) => setQuery(event.target.value)}
             placeholder={placeholder}
           />

diff --git a/src/components/SkillComboBox/index.tsx b/src/components/SkillComboBox/index.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { Combobox, Transition } from '@headlessui/react';
-import React, { useState, FC, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 type OptionTypes = {
   id: number;
@@ -10,13 +10,13 @@ type OptionTypes = {
 type ComboboxProps = {
     placeholder: string;
     options: OptionTypes[];
-    onChange: (value: OptionTypes) => void; 
-    value: OptionTypes;
-    handleAddSkill: () => void;
+    onChange?: (value: OptionTypes) => void; 
+    value?: OptionTypes;
+    handleAddSkill?: () => void;
 }
 
 const SkillCombobox = ({placeholder, options, onChange, value, handleAddSkill}: ComboboxProps) => {
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState<string>('');
 
   const filteredSkills =
     query === ''
@@ -30,7 +30,7 @@ const SkillCombobox = ({placeholder, options, onChange, value, handleAddSkill}:
       <div className="relative">
           <Combobox.Input
             className="border rounded-lg border-blue bg-black/5 font-normal py-2.5 px-4 text-sm/6 h-11 w-64 focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25"
-            displayValue={(option) => option?.skill}
+            displayValue={(option: OptionTypes) => option?.skill}
             onChange={(event) => setQuery(event.target.value)}
             placeholder={placeholder}
           />

diff --git a/src/pages/endorsements/index.tsx b/src/pages/endorsements/index.tsx
@@ -6,16 +6,19 @@ import SkillLabel from "@/components/SkillLabel";
 import { endorsementsListsMock, skillMockData } from "../../../__mocks__/endorsements";
 import SkillCombobox from "@/components/SkillComboBox";
 
+type OptionTypes = {
+    id: number;
+    skill: string;
+};
+
 const Endorsements: FC = () => {
 
-    const [selected, setSelected] = useState(null);
+    const [selected, setSelected] = useState<OptionTypes | undefined>(undefined);
 
-    const handleSkillSelect = (value) => {
+    const handleSkillSelect = (value : OptionTypes) => {
           setSelected(value);
     }
 
-    console.log(selected);
-
     const handleAddSkill = () => {
           alert("Add skill clicked");
     }