chore(@clayui/autocomplete): LPD-55597 Add infinite scrolling tests

Author: limaagabriel

packages/clay-autocomplete/src/__tests__/IncrementalInteractions.tsx

@@ -4,7 +4,7 @@
  */
 
 import ClayAutocomplete from '..';
-import {cleanup, fireEvent, render} from '@testing-library/react';
+import {cleanup, fireEvent, render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -753,4 +753,118 @@ describe('Autocomplete incremental interactions', () => {
 			expect(onClickMock).toHaveBeenCalled();
 		});
 	});
+
+	describe('Infinite scrolling interactions', () => {
+		it('calls onLoadMore when last item is active using keyboard', async () => {
+			const onLoadMoreMock = jest.fn();
+
+			const {getByRole} = render(
+				<ClayAutocomplete onLoadMore={onLoadMoreMock}>
+					{Array(20)
+						.fill(0)
+						.map((_, index) => (
+							<ClayAutocomplete.Item
+								key={index}
+								textValue={`Item ${index + 1}`}
+							>
+								Item {index + 1}
+							</ClayAutocomplete.Item>
+						))}
+				</ClayAutocomplete>
+			);
+
+			const input = getByRole('combobox');
+
+			userEvent.click(input);
+
+			expect(onLoadMoreMock).not.toHaveBeenCalled();
+
+			userEvent.type(input, '{arrowup}');
+
+			await waitFor(() => {
+				expect(onLoadMoreMock).toHaveBeenCalled();
+			});
+		});
+
+		it('announces the initial amount of items', async () => {
+			const itemsCount = 5;
+
+			const {getAllByRole, getByRole} = render(
+				<ClayAutocomplete>
+					{Array(itemsCount)
+						.fill(0)
+						.map((_, index) => (
+							<ClayAutocomplete.Item
+								key={index}
+								textValue={`Item ${index + 1}`}
+							>
+								Item {index + 1}
+							</ClayAutocomplete.Item>
+						))}
+				</ClayAutocomplete>
+			);
+
+			const combobox = getByRole('combobox');
+
+			userEvent.click(combobox);
+
+			userEvent.type(combobox, '{arrowdown}');
+
+			const [announcer] = getAllByRole('log');
+
+			await waitFor(() => {
+				expect(announcer?.innerHTML).toContain(
+					`${itemsCount} items loaded. Reach the last item to load more.`
+				);
+			});
+		});
+
+		it('announces when more items are loaded', async () => {
+			const initialCount = 10;
+			const batchLoadCount = 20;
+			const onLoadMoreMock = jest.fn().mockImplementation(() => {
+				return new Promise<void>((resolve) => {
+					setTimeout(() => {
+						resolve();
+					}, 500);
+				});
+			});
+
+			const {getAllByRole, getByRole} = render(
+				<ClayAutocomplete
+					batchLoadCount={batchLoadCount}
+					onLoadMore={onLoadMoreMock}
+				>
+					{Array(initialCount)
+						.fill(0)
+						.map((_, index) => (
+							<ClayAutocomplete.Item
+								key={index}
+								textValue={`Item ${index + 1}`}
+							>
+								Item {index + 1}
+							</ClayAutocomplete.Item>
+						))}
+				</ClayAutocomplete>
+			);
+
+			const input = getByRole('combobox');
+
+			userEvent.click(input);
+
+			userEvent.type(input, '{arrowup}');
+
+			const [announcer] = getAllByRole('log');
+
+			await waitFor(() => {
+				expect(announcer?.innerHTML).toContain(
+					`Loading ${batchLoadCount} more items.`
+				);
+
+				expect(announcer?.innerHTML).toContain(
+					`${initialCount} items loaded.`
+				);
+			});
+		});
+	});
 });

packages/clay-autocomplete/src/useInfiniteScrolling.tsx

@@ -109,7 +109,7 @@ export function useInfiniteScrolling({
 			lastCountAnnounced.current = null;
 
 			lastPositionBeforeLoad.current = menuRef.current?.scrollTop ?? null;
-			menuRef.current?.scrollTo({
+			menuRef.current?.scrollTo?.({
 				top: menuRef.current?.scrollHeight,
 			});
 		}
@@ -137,7 +137,7 @@ export function useInfiniteScrolling({
 				isInitialLoadAnnouncementPending.current = false;
 
 				if (lastPositionBeforeLoad.current !== null) {
-					menuRef.current?.scrollTo({
+					menuRef.current?.scrollTo?.({
 						top: lastPositionBeforeLoad.current,
 					});
 
@@ -196,7 +196,7 @@ export function useInfiniteScrolling({
 
 	const InfiniteScrollingTrigger = useCallback(
 		() =>
-			isInfiniteScrollingEnabled ? (
+			isInfiniteScrollingEnabled && window.IntersectionObserver ? (
 				<div aria-hidden="true" className="pt-2" ref={triggerRef}>
 					{isLoading && (
 						<LoadingIndicator className="mb-2" size="sm" />