fix(Accordion): add key on divider items

Refs: CDS-204 (#300)
zextras · May 2, 2024 · 1e2c053 · 1e2c053
1 parent f7e338a
commit 1e2c053
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 49 deletions.
diff --git a/src/components/layout/Divider.tsx b/src/components/layout/Divider.tsx
@@ -28,7 +28,7 @@ const Divider = React.forwardRef<HTMLDivElement, Partial<DividerProps>>(function
 	{ color = 'gray2', ...rest },
 	ref
 ) {
-	return <DividerEl ref={ref} color={color} {...rest} />;
+	return <DividerEl ref={ref} color={color} data-testid={'divider'} {...rest} />;
 });
 
 export { Divider, DividerProps };
diff --git a/src/components/navigation/Accordion.md b/src/components/navigation/Accordion.md
@@ -30,12 +30,16 @@ const items = [
 		label: 'Accordion Label',
 		onClick: () => alert('root'),
     onOpen: () => console.log('open'),
-		onClose: () => console.log('close'),items: [
+		onClose: () => console.log('close'),
+    items: [
       {
         id: '1',
         label: 'One Accordion',
         onClick: () => alert(1)
       },
+      {
+				divider: true
+      },
       {
         id: '2',
         label: 'Two Accordion',

diff --git a/src/components/navigation/Accordion.test.tsx b/src/components/navigation/Accordion.test.tsx
@@ -9,15 +9,15 @@ import React from 'react';
 import { faker } from '@faker-js/faker';
 import { waitFor } from '@testing-library/react';
 
-import { Accordion, AccordionItem, AccordionItemType } from './Accordion';
+import { Accordion, AccordionItem, AccordionItemType, AccordionProps } from './Accordion';
 import { setup, screen, within } from '../../test-utils';
 import { ICONS, SELECTORS } from '../../testUtils/constants';
 import { Button } from '../basic/Button';
 import { TIMERS } from '../constants';
 
 describe('Accordion', () => {
 	test('Render root level Accordion items', () => {
-		const { container } = setup(
+		setup(
 			<Accordion
 				items={[
 					{ id: 'first', label: 'First', icon: 'Activity' },
@@ -27,52 +27,64 @@ describe('Accordion', () => {
 				]}
 			/>
 		);
-		expect(container).toHaveTextContent('FirstSecondThirdFourth');
+		expect(screen.getByText('First')).toBeVisible();
+		expect(screen.getByText('Second')).toBeVisible();
+		expect(screen.getByText('Third')).toBeVisible();
+		expect(screen.getByText('Fourth')).toBeVisible();
 	});
 
-	test('Render deep level Accordion items', () => {
-		const { container } = setup(
-			<Accordion
-				items={[
+	it('should render but not show nested level item if parents are closed', () => {
+		const items = [
+			{
+				id: 'first',
+				label: 'first',
+				items: [
 					{
-						id: 'first',
-						icon: 'Activity',
-						items: [
-							{
-								id: 'second',
-								icon: 'Activity',
-								items: [
-									{
-										id: 'third',
-										icon: 'Activity',
-										items: [
-											{
-												id: 'fourth',
-												icon: 'Activity',
-												items: [
-													{
-														id: 'fifth',
-														icon: 'Activity',
-														items: [
-															{
-																id: 'sixth',
-																icon: 'Activity',
-																items: [{ id: 'seventh', icon: 'Activity', label: 'Deep' }]
-															}
-														]
-													}
-												]
-											}
-										]
-									}
-								]
-							}
-						]
+						id: 'second',
+						label: 'second'
 					}
-				]}
-			/>
-		);
-		expect(container).toHaveTextContent('Deep');
+				]
+			}
+		];
+		setup(<Accordion items={items} />);
+		expect(screen.getByText('second')).toBeInTheDocument();
+		expect(screen.getByText('second')).not.toBeVisible();
+	});
+
+	it('should show nested level item when parent is expanded', async () => {
+		const items = [
+			{
+				id: 'first',
+				label: 'first',
+				items: [
+					{
+						id: 'second',
+						label: 'second'
+					}
+				]
+			}
+		];
+		const { user } = setup(<Accordion items={items} />);
+		// click on chevron icon expand the accordion item
+		await user.click(screen.getByTestId(ICONS.accordionItemOpenAction));
+		await waitFor(() => expect(screen.getByText(/second/i)).toBeVisible());
+	});
+
+	it('should show nested level item when parent is set as open', () => {
+		const items = [
+			{
+				id: 'first',
+				label: 'first',
+				items: [
+					{
+						id: 'second',
+						label: 'second'
+					}
+				]
+			}
+		];
+		setup(<Accordion items={items} openIds={['first']} />);
+		expect(screen.getByText(/second/i)).toBeVisible();
 	});
 
 	test('Render customized Accordion', () => {
@@ -305,4 +317,10 @@ describe('Accordion', () => {
 			}
 		);
 	});
+
+	it('should render a divider item', () => {
+		const items: AccordionProps['items'] = [{ divider: true }];
+		setup(<Accordion items={items} />);
+		expect(screen.getByTestId(SELECTORS.divider)).toBeVisible();
+	});
 });
diff --git a/src/components/navigation/Accordion.tsx b/src/components/navigation/Accordion.tsx
@@ -109,7 +109,7 @@ type AccordionItemType = {
 	onClose?: (e: React.SyntheticEvent | KeyboardEvent) => void;
 };
 
-type AccordionDivider = { divider: true };
+type AccordionDivider = { divider: true; key?: string };
 
 interface AccordionRootProps extends ContainerProps {
 	level: number;
@@ -283,7 +283,7 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(function Acco
 		>
 			{map(items, (item, index) =>
 				isDivider(item) ? (
-					<Divider color="gray2" />
+					<Divider color="gray2" key={item.key ?? `divider-${index}`} />
 				) : (
 					<AccordionRoot
 						key={item.id ?? item.label ?? index}

diff --git a/src/testUtils/constants.ts b/src/testUtils/constants.ts
@@ -32,5 +32,6 @@ export const SELECTORS = {
 	chip: 'chip',
 	tooltip: 'tooltip',
 	progressBar: 'progress-bar',
-	snackbar: 'snackbar'
+	snackbar: 'snackbar',
+	divider: 'divider'
 };