From 35ce2d8ccbaa25169d4fbe92b1a6334396be80c0 Mon Sep 17 00:00:00 2001 From: abhay Date: Sun, 28 Jul 2024 17:00:34 +0530 Subject: [PATCH] fix:the typescript error of the value type and the null value in the tests --- __tests__/Unit/Componets/Combobox/Combobox.test.tsx | 8 +++----- .../Componets/SkillComboBox/SkillComboBox.test.tsx | 7 +++---- __tests__/components/combobox/Combobox.test.tsx | 6 +++--- .../components/skillcombobox/SkillCombobox.test.tsx | 6 +++--- src/components/Combobox/index.tsx | 10 +++++----- src/components/SkillComboBox/index.tsx | 12 ++++++------ src/pages/endorsements/index.tsx | 11 +++++++---- 7 files changed, 30 insertions(+), 30 deletions(-) diff --git a/__tests__/Unit/Componets/Combobox/Combobox.test.tsx b/__tests__/Unit/Componets/Combobox/Combobox.test.tsx index ad03177..df9a0e8 100644 --- 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(); + render(); 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( {}} placeholder="placeholder" options={ComboboxMockData} />); + render( {}} 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(); + render(); const input = screen.getByRole('combobox'); expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed @@ -94,11 +94,9 @@ describe('Combobox Component', () => { render(
{}} placeholder="placeholder" options={ComboboxMockData} - handleAddSkill={() => {}} />
Outside Element
diff --git a/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx b/__tests__/Unit/Componets/SkillComboBox/SkillComboBox.test.tsx index c76bc42..ad93080 100644 --- 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(); + render(); 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( {}} placeholder="select skill" options={skillMockData} />); + render( {}} 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(); + render(); const input = screen.getByRole('combobox'); expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Check listbox is initially closed @@ -97,7 +97,6 @@ describe('SkillCombobox Component', () => { render(
{}} placeholder="select skill" options={skillMockData} diff --git a/__tests__/components/combobox/Combobox.test.tsx b/__tests__/components/combobox/Combobox.test.tsx index 39ed44e..25b8cbb 100644 --- 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(); + render(); 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( {}} placeholder="placeholder" options={ComboboxMockData} />); + render( {}} 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(); + render(); 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 index 5552a9c..4e1396b 100644 --- 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(); + render(); 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( {}} placeholder="select skill" options={skillMockData} />); + render( {}} 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(); + render(); 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 index 9c1c85f..f01cfe1 100644 --- 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
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 index 951de2c..542f3d4 100644 --- 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(''); const filteredSkills = query === '' @@ -30,7 +30,7 @@ const SkillCombobox = ({placeholder, options, onChange, value, handleAddSkill}:
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 index 6b3c8e1..953ed47 100644 --- 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(undefined); - const handleSkillSelect = (value) => { + const handleSkillSelect = (value : OptionTypes) => { setSelected(value); } - console.log(selected); - const handleAddSkill = () => { alert("Add skill clicked"); }