NEXT: Resolve Unit Tests - Part 2 (#2814)

skeletonlabs · Aug 15, 2024 · 8735a49 · 8735a49
1 parent 91d040e
commit 8735a49
Show file tree

Hide file tree

Showing 8 changed files with 348 additions and 274 deletions.
diff --git a/.changeset/strong-tables-whisper.md b/.changeset/strong-tables-whisper.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton-react": patch
+---
+
+Resolved regressions in the following test cases: progress ring, ratings, segment control, switch, and tabs
diff --git a/packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.test.tsx b/packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.test.tsx
@@ -10,24 +10,54 @@ describe('<ProgressRing>', () => {
 		expect(component).toBeInTheDocument();
 	});
 
-	it('should render the component with a value and max', () => {
+	it('should render the component with a value and max props', () => {
 		const value = 50;
 		const max = 100;
 		const { getByTestId } = render(<ProgressRing value={value} max={max} />);
 		const component = getByTestId('progress-ring');
 		expect(component).toBeInTheDocument();
 	});
 
-	it('should render the component with a default child', () => {
+	it('should render the value percentage text', () => {
 		const value = 50;
 		const max = 100;
-		const defaultChildText = 'TestChild';
+		const { getByTestId } = render(<ProgressRing value={value} max={max} />);
+		const component = getByTestId('progress-ring-label');
+		expect(component).toHaveTextContent(`${value}%`);
+	});
+
+	it('should render the component with child content', () => {
+		const value = 50;
+		const max = 100;
+		const childContent = 'TestChild';
 		const { getByText } = render(
 			<ProgressRing value={value} max={max}>
-				{defaultChildText}
+				{childContent}
 			</ProgressRing>
 		);
-		const text = getByText(defaultChildText);
+		const text = getByText(childContent);
 		expect(text).toBeInTheDocument();
 	});
+
+	it('should render in indeterminate mode', () => {
+		const { getByTestId } = render(<ProgressRing value={null} />);
+		const componentRoot = getByTestId('progress-ring');
+		const componentSvg = getByTestId('progress-ring-svg');
+		expect(componentRoot.dataset.state).toBe('indeterminate');
+		expect(componentSvg).toHaveClass('animate-spin');
+	});
+
+	it('should render base classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(<ProgressRing base={testClass} />);
+		const component = getByTestId('progress-ring');
+		expect(component).toHaveClass(testClass);
+	});
+
+	it('should render arbitrary classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(<ProgressRing classes={testClass} />);
+		const component = getByTestId('progress-ring');
+		expect(component).toHaveClass(testClass);
+	});
 });
diff --git a/packages/skeleton-react/src/lib/components/Rating/Rating.test.tsx b/packages/skeleton-react/src/lib/components/Rating/Rating.test.tsx
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { Rating } from './Rating.js';
+
+describe('<Rating>', () => {
+	it('should render the component', () => {
+		const { getByTestId } = render(<Rating />);
+		const component = getByTestId('rating');
+		expect(component).toBeInTheDocument();
+	});
+
+	it('should render with a value', () => {
+		const testValue = 14;
+		const { getByTestId } = render(<Rating value={testValue} />);
+		const input = getByTestId('rating-input');
+		expect(input.getAttribute('value')).eq(`${testValue}`);
+	});
+
+	it('should render with custom iconEmpty', () => {
+		const testIconEmpty = 'testIconEmpty';
+		const { getAllByTestId } = render(<Rating value={0} iconEmpty={testIconEmpty} />);
+		const elementIcons = getAllByTestId('rating-item');
+		expect(elementIcons[0]).toHaveTextContent(testIconEmpty);
+	});
+
+	it('should render with custom iconHalf', () => {
+		const testIconHalf = 'testIconHalf';
+		const { getAllByTestId } = render(<Rating value={0.5} iconHalf={testIconHalf} allowHalf />);
+		const elementIcons = getAllByTestId('rating-item');
+		expect(elementIcons[0]).toHaveTextContent(testIconHalf);
+	});
+
+	it('should render with custom iconFull', () => {
+		const testIconFull = 'testIconFull';
+		const { getAllByTestId } = render(<Rating value={1} iconFull={testIconFull} />);
+		const elementIcons = getAllByTestId('rating-item');
+		expect(elementIcons[0]).toHaveTextContent(testIconFull);
+	});
+
+	it('should render base classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(<Rating base={testClass} />);
+		const component = getByTestId('rating');
+		expect(component).toHaveClass(testClass);
+	});
+
+	it('should render arbitrary classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(<Rating classes={testClass} />);
+		const component = getByTestId('rating');
+		expect(component).toHaveClass(testClass);
+	});
+});
diff --git a/packages/skeleton-react/src/lib/components/Rating/Rating.tsx b/packages/skeleton-react/src/lib/components/Rating/Rating.tsx
@@ -65,8 +65,9 @@ export const Rating: FC<RatingProps> = ({
 				className={`${controlBase} ${controlGap} ${rxInteractive} ${rxReadOnly} ${rxDisabled} ${controlClasses}`}
 				data-testid="rating-control"
 			>
-				{api.items.map((index) => {
-					const itemState = api.getItemState({ index });
+				{/* FIXME: `item` is causing React key error; is not unique on re-render? */}
+				{api.items.map((item) => {
+					const itemState = api.getItemState({ index: item });
 					const icon = (() => {
 						if (!itemState.highlighted) {
 							return iconEmpty;
@@ -79,7 +80,7 @@ export const Rating: FC<RatingProps> = ({
 					return (
 						<>
 							{/* Item */}
-							<span key={index} {...api.getItemProps({ index })} className={`${itemBase} ${itemClasses}`} data-testid="rating-item">
+							<span key={item} {...api.getItemProps({ index: item })} className={`${itemBase} ${itemClasses}`} data-testid="rating-item">
 								{icon}
 							</span>
 						</>

diff --git a/packages/skeleton-react/src/lib/components/Segment/Segment.test.tsx b/packages/skeleton-react/src/lib/components/Segment/Segment.test.tsx
@@ -27,15 +27,46 @@ describe('<Segment>', () => {
 		expect(component.getAttribute('class')).toContain(testClasses);
 	});
 
-	it('should render children', () => {
-		const testTextContent = 'testTextContent';
+	it('should render in the disabled state', () => {
 		const { getByTestId } = render(
-			<Segment name="align" value="0">
-				<Segment.Item value="0">{testTextContent}</Segment.Item>
+			<Segment name="align" value="0" disabled>
+				<Segment.Item value="0">TestItem1</Segment.Item>
 			</Segment>
 		);
 		const component = getByTestId('segment');
-		expect(component).toHaveTextContent(testTextContent);
+		expect(component.dataset.disabled).toBeDefined();
+	});
+
+	it('should render in the read-only state', () => {
+		const { getByTestId } = render(
+			<Segment name="align" value="0" readOnly>
+				<Segment.Item value="0">TestItem1</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment');
+		expect(component).toHaveClass('pointer-events-none');
+	});
+
+	it('should render base classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(
+			<Segment name="align" value="0" base={testClass}>
+				<Segment.Item value="0">TestItem1</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment');
+		expect(component).toHaveClass(testClass);
+	});
+
+	it('should render arbitrary classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(
+			<Segment name="align" value="0" classes={testClass}>
+				<Segment.Item value="0">TestItem1</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment');
+		expect(component).toHaveClass(testClass);
 	});
 });
 
@@ -52,7 +83,7 @@ describe('<Segment.Item>', () => {
 		expect(component).toBeInTheDocument();
 	});
 
-	it('should render children', () => {
+	it('should render custom child content', () => {
 		const testTextContent = 'testTextContent';
 		const { getByTestId } = render(
 			<Segment name="align" value="0">
@@ -63,37 +94,63 @@ describe('<Segment.Item>', () => {
 		expect(component).toHaveTextContent(testTextContent);
 	});
 
-	// FIXME: resolve after Zag migration
-
-	// it('should render the component in the unchecked state', () => {
-	// 	const { getByTestId } = render(
-	// 		<Segment.Item name="bar" value="bar">
-	// 			Foo
-	// 		</Segment.Item>
-	// 	);
-	// 	const component = getByTestId('segment-item');
-	// 	const ariaSelected = component.getAttribute('aria-selected');
-	// 	expect(ariaSelected).toBeFalsy;
-	// });
-
-	// it('should render the component in the checked state', () => {
-	// 	const { getByTestId } = render(
-	// 		<Segment.Item name="foo" value="foo">
-	// 			Foo
-	// 		</Segment.Item>
-	// 	);
-	// 	const component = getByTestId('segment-item');
-	// 	const ariaSelected = component.getAttribute('aria-selected');
-	// 	expect(ariaSelected).toBeTruthy;
-	// });
-
-	// it('should render the component in the disabled state', () => {
-	// 	const { getByTestId } = render(
-	// 		<Segment.Item name="test" value="foo" disabled>
-	// 			Foo
-	// 		</Segment.Item>
-	// 	);
-	// 	const component = getByTestId('segment-item');
-	// 	expect(component).toHaveAttribute('disabled');
-	// });
+	it('should render in the unchecked state', () => {
+		const { getByTestId } = render(
+			<Segment name="align" value="1">
+				<Segment.Item value="0">TestItem1</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment-item');
+		const ariaSelected = component.getAttribute('aria-selected');
+		expect(ariaSelected).toBeFalsy;
+	});
+
+	it('should render in the checked state', () => {
+		const { getByTestId } = render(
+			<Segment name="align" value="1">
+				<Segment.Item value="0">TestItem1</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment-item');
+		const ariaSelected = component.getAttribute('aria-selected');
+		expect(ariaSelected).toBeTruthy;
+	});
+
+	it('should render in the disabled state', () => {
+		const { getByTestId } = render(
+			<Segment name="align" value="0">
+				<Segment.Item value="0" disabled>
+					TestItem1
+				</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment-item-input');
+		expect(component).toHaveAttribute('disabled');
+	});
+
+	it('should render base classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(
+			<Segment name="align" value="0">
+				<Segment.Item value="0" base={testClass}>
+					TestItem1
+				</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment-item');
+		expect(component).toHaveClass(testClass);
+	});
+
+	it('should render arbitrary classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(
+			<Segment name="align" value="0">
+				<Segment.Item value="0" classes={testClass}>
+					TestItem1
+				</Segment.Item>
+			</Segment>
+		);
+		const component = getByTestId('segment-item');
+		expect(component).toHaveClass(testClass);
+	});
 });
diff --git a/packages/skeleton-react/src/lib/components/Switch/Switch.test.tsx b/packages/skeleton-react/src/lib/components/Switch/Switch.test.tsx
@@ -12,16 +12,14 @@ describe('<Switch>', () => {
 
 	it('should render the component in the off state', () => {
 		const { getByTestId } = render(<Switch name="test" checked={false} />);
-		const component = getByTestId('switch');
-		const ariaChecked = component.getAttribute('aria-checked');
-		expect(ariaChecked).toBeFalsy;
+		const component = getByTestId('switch-input');
+		expect(component).not.toHaveAttribute('checked');
 	});
 
 	it('should render the component in the on state', () => {
 		const { getByTestId } = render(<Switch name="test" checked={true} />);
-		const component = getByTestId('switch');
-		const ariaChecked = component.getAttribute('aria-checked');
-		expect(ariaChecked).toBeTruthy;
+		const component = getByTestId('switch-input');
+		expect(component).toHaveAttribute('checked');
 	});
 
 	it('should render the component with an inactive icon', () => {
@@ -42,14 +40,27 @@ describe('<Switch>', () => {
 
 	it('should render the component in the disabled state', () => {
 		const { getByTestId } = render(<Switch name="test" disabled />);
-		const component = getByTestId('switch-control');
-		expect(component).toHaveClass('opacity-50');
-		expect(component).toHaveClass('cursor-not-allowed');
+		const component = getByTestId('switch-input');
+		expect(component).toHaveAttribute('disabled');
 	});
 
 	it('should render the component in the compact mode', () => {
 		const { getByTestId } = render(<Switch name="test" compact />);
 		const component = getByTestId('switch-control');
 		expect(component).toHaveClass('aspect-square');
 	});
+
+	it('should render base classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(<Switch name="test" base={testClass} />);
+		const component = getByTestId('switch');
+		expect(component).toHaveClass(testClass);
+	});
+
+	it('should render arbitrary classes on root', () => {
+		const testClass = 'bg-green-500';
+		const { getByTestId } = render(<Switch name="test" classes={testClass} />);
+		const component = getByTestId('switch');
+		expect(component).toHaveClass(testClass);
+	});
 });