diff --git a/src/components/AccordionItem.spec.tsx b/src/components/AccordionItem.spec.tsx index 30eb3e4..49f0099 100644 --- a/src/components/AccordionItem.spec.tsx +++ b/src/components/AccordionItem.spec.tsx @@ -1,7 +1,8 @@ -import { cleanup, render } from '@testing-library/react'; +import { cleanup, render, fireEvent } from '@testing-library/react'; import * as React from 'react'; import { default as Accordion } from './Accordion'; import AccordionItem from './AccordionItem'; +import AccordionItemButton from './AccordionItemButton'; enum UUIDS { FOO = 'FOO', @@ -74,4 +75,29 @@ describe('AccordionItem', () => { expect(getByText('Hello World')).toBeTruthy(); }); }); + + describe('uuid prop', () => { + it('keeps the uuid as 0 even though its falsy', () => { + const testId = 'el-with-zero-uuid'; + const zero = 0; + let selected: (string | number)[] = []; + const { getByTestId } = render( + { + selected = latestSelected; + }} + > + + + Click me + + + , + ); + + fireEvent.click(getByTestId(testId)); + + expect(selected).toEqual([zero]); + }); + }); }); diff --git a/src/components/AccordionItem.tsx b/src/components/AccordionItem.tsx index 35ad7df..3f593a2 100644 --- a/src/components/AccordionItem.tsx +++ b/src/components/AccordionItem.tsx @@ -24,7 +24,7 @@ const AccordionItem = ({ ...rest }: Props): JSX.Element => { const [instanceUuid] = useState(nextUuid()); - const uuid = customUuid || instanceUuid; + const uuid = customUuid ?? instanceUuid; const renderChildren = (itemContext: ItemContext): JSX.Element => { const { expanded } = itemContext; @@ -39,7 +39,7 @@ const AccordionItem = ({ ); }; - assertValidHtmlId(uuid); + assertValidHtmlId(uuid.toString()); if (rest.id) { assertValidHtmlId(rest.id); } diff --git a/src/components/ItemContext.tsx b/src/components/ItemContext.tsx index 0e109db..42d9379 100644 --- a/src/components/ItemContext.tsx +++ b/src/components/ItemContext.tsx @@ -11,7 +11,7 @@ import { Consumer as AccordionContextConsumer, } from './AccordionContext'; -export type UUID = string; +export type UUID = string | number; type ProviderProps = { children?: React.ReactNode;