add tests

openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/AvatarCarousel.test.tsx

@@ -0,0 +1,88 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import AvatarCarousel from './AvatarCarousel';
+
+jest.mock('../../Suggestions/SuggestionsProvider/SuggestionsProvider', () => ({
+  useSuggestionsContext: jest.fn().mockImplementation(() => ({
+    suggestions: [
+      {
+        id: '1',
+        description: 'Test suggestion',
+        createdBy: { id: '1', name: 'Avatar 1', type: 'user' },
+        entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
+      },
+      {
+        id: '2',
+        description: 'Test suggestion',
+        createdBy: { id: '2', name: 'Avatar 2', type: 'user' },
+        entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
+      },
+    ],
+    allSuggestionsUsers: [
+      { id: '1', name: 'Avatar 1', type: 'user' },
+      { id: '2', name: 'Avatar 2', type: 'user' },
+    ],
+    acceptRejectSuggestion: jest.fn(),
+    onUpdateActiveUser: jest.fn(),
+  })),
+  __esModule: true,
+  default: 'SuggestionsProvider',
+}));
+
+jest.mock('../ProfilePicture/ProfilePicture', () =>
+  jest
+    .fn()
+    .mockImplementation(({ name }) => (
+      <span data-testid="mocked-profile-picture">{name}</span>
+    ))
+);
+
+jest.mock('../../../rest/suggestionsAPI', () => ({
+  getSuggestionsList: jest.fn().mockImplementation(() =>
+    Promise.resolve([
+      {
+        id: '1',
+        description: 'Test suggestion',
+        createdBy: { id: '1', name: 'Avatar 1', type: 'user' },
+        entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
+      },
+      {
+        id: '2',
+        description: 'Test suggestion',
+        createdBy: { id: '1', name: 'Avatar 2', type: 'user' },
+        entityLink: '<#E::table::sample_data.ecommerce_db.shopify.dim_address>',
+      },
+    ])
+  ),
+}));
+
+describe('AvatarCarousel', () => {
+  it('renders without crashing', () => {
+    render(<AvatarCarousel />);
+
+    expect(screen.getByText(/Avatar 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Avatar 2/i)).toBeInTheDocument();
+    expect(screen.getByTestId('prev-slide')).toBeDisabled();
+  });
+
+  it('disables the next button when on the last slide', () => {
+    render(<AvatarCarousel />);
+    const nextButton = screen.getByTestId('next-slide');
+    fireEvent.click(nextButton);
+    fireEvent.click(nextButton);
+
+    expect(nextButton).toBeDisabled();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/common/AvatarCarousel/AvatarCarousel.tsx

@@ -12,7 +12,7 @@
  */
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, Carousel } from 'antd';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSuggestionsContext } from '../../Suggestions/SuggestionsProvider/SuggestionsProvider';
 import UserPopOverCard from '../PopOverCard/UserPopOverCard';
 import ProfilePicture from '../ProfilePicture/ProfilePicture';
@@ -35,22 +35,27 @@ const AvatarCarousel = () => {
     (index: number) => {
       const activeUser = avatarList[index];
       onUpdateActiveUser(activeUser);
-      setCurrentSlide(index);
     },
     [avatarList]
   );
 
+  useEffect(() => {
+    onProfileClick(currentSlide);
+  }, [currentSlide]);
+
   return (
     <div className="avatar-carousel-container d-flex items-center">
       <Button
         className="carousel-arrow"
+        data-testid="prev-slide"
+        disabled={avatarList.length <= 1 || currentSlide <= 0}
         icon={<LeftOutlined />}
         size="small"
         type="text"
         onClick={prevSlide}
       />
       <Carousel
-        beforeChange={(_, to) => onProfileClick(to)}
+        afterChange={(current) => setCurrentSlide(current)}
         dots={false}
         slidesToShow={avatarList.length < 3 ? avatarList.length : 3}>
         {avatarList.map((avatar, index) => (
@@ -59,7 +64,7 @@ const AvatarCarousel = () => {
               currentSlide === index ? 'active' : ''
             }`}
             key={index}
-            onClick={() => onProfileClick(index)}>
+            onClick={() => setCurrentSlide(index)}>
             <UserPopOverCard className="" userName={avatar?.name ?? ''}>
               <span>
                 <ProfilePicture name={avatar.name ?? ''} width="28" />
@@ -70,6 +75,10 @@ const AvatarCarousel = () => {
       </Carousel>
       <Button
         className="carousel-arrow"
+        data-testid="next-slide"
+        disabled={
+          avatarList.length <= 1 || currentSlide === avatarList.length - 1
+        }
         icon={<RightOutlined />}
         size="small"
         type="text"