diff --git a/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx b/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx index dc34e73e0..71d1c9f29 100644 --- a/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx +++ b/app/soapbox/features/feed-filtering/__tests__/feed-carousel.test.tsx @@ -8,7 +8,7 @@ import { render, screen, waitFor } from '../../../jest/test-helpers'; import FeedCarousel from '../feed-carousel'; jest.mock('../../../hooks/useDimensions', () => ({ - useDimensions: () => [{ scrollWidth: 190 }, null, { width: 100 }], + useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }], })); (window as any).ResizeObserver = class ResizeObserver { @@ -21,27 +21,6 @@ jest.mock('../../../hooks/useDimensions', () => ({ describe('', () => { let store: any; - describe('with "carousel" disabled', () => { - beforeEach(() => { - store = { - instance: { - version: '2.7.2 (compatible; Pleroma 2.4.52-1337-g4779199e.gleasonator+soapbox)', - pleroma: ImmutableMap({ - metadata: ImmutableMap({ - features: [], - }), - }), - }, - }; - }); - - it('should render nothing', () => { - render(, undefined, store); - - expect(screen.queryAllByTestId('feed-carousel')).toHaveLength(0); - }); - }); - describe('with "carousel" enabled', () => { beforeEach(() => { store = { @@ -167,15 +146,15 @@ describe('', () => { render(, undefined, store); await waitFor(() => { - expect(screen.getByTestId('next-page')).toBeInTheDocument(); - expect(screen.queryAllByTestId('prev-page')).toHaveLength(0); + expect(screen.getByTestId('prev-page')).toHaveAttribute('disabled'); + expect(screen.getByTestId('next-page')).not.toHaveAttribute('disabled'); }); await user.click(screen.getByTestId('next-page')); await waitFor(() => { - expect(screen.getByTestId('prev-page')).toBeInTheDocument(); - expect(screen.queryAllByTestId('next-page')).toHaveLength(0); + expect(screen.getByTestId('prev-page')).not.toHaveAttribute('disabled'); + expect(screen.getByTestId('next-page')).toHaveAttribute('disabled'); }); }); }); diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx index 23f417959..27b23a503 100644 --- a/app/soapbox/features/feed-filtering/feed-carousel.tsx +++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx @@ -83,7 +83,7 @@ const CarouselItem = React.forwardRef(( }); const FeedCarousel = () => { - const { data: avatars, isFetching, isError } = useCarouselAvatars(); + const { data: avatars, isFetching, isFetched, isError } = useCarouselAvatars(); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [_ref, setContainerRef, { width }] = useDimensions(); @@ -141,6 +141,10 @@ const FeedCarousel = () => { ); } + if (isFetched && avatars.length === 0) { + return null; + } + return (