Added test suits for multiple file (#2796)

openmetadata-ui/src/main/resources/ui/src/pages/AddWebhookPage/AddWebhookPage.test.tsx

@@ -0,0 +1,37 @@
+import { findByTestId, findByText, render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import AddWebhookPage from './AddWebhookPage.component';
+
+jest.mock('../../components/containers/PageContainerV1', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: ReactNode }) => (
+      <div data-testid="PageContainerV1">{children}</div>
+    ));
+});
+
+jest.mock('../../components/AddWebhook/AddWebhook', () => {
+  return jest.fn().mockImplementation(() => <div>AddWebhookComponent</div>);
+});
+
+jest.mock('../../axiosAPIs/webhookAPI', () => ({
+  addWebhook: jest.fn(),
+}));
+
+describe('Test AddWebhookPage component', () => {
+  it('AddWebhookPage component should render properly', async () => {
+    const { container } = render(<AddWebhookPage />, {
+      wrapper: MemoryRouter,
+    });
+
+    const PageContainerV1 = await findByTestId(container, 'PageContainerV1');
+    const AddWebhookComponent = await findByText(
+      container,
+      /AddWebhookComponent/i
+    );
+
+    expect(PageContainerV1).toBeInTheDocument();
+    expect(AddWebhookComponent).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/TopicDetails/TopicDetailsPage.test.tsx

@@ -0,0 +1,37 @@
+import { findByText, render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import TopicDetailsPageComponent from './TopicDetailsPage.component';
+
+jest.mock('../../components/TopicDetails/TopicDetails.component', () => {
+  return jest.fn().mockReturnValue(<div>TopicDetails.component</div>);
+});
+
+jest.mock('../../axiosAPIs/topicsAPI', () => ({
+  addFollower: jest.fn(),
+  getTopicByFqn: jest.fn().mockImplementation(() => Promise.resolve()),
+  patchTopicDetails: jest.fn(),
+  removeFollower: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  useParams: jest
+    .fn()
+    .mockReturnValue({ topicFQN: 'sample_kafka.sales', tab: 'schema' }),
+  useHistory: jest.fn(),
+}));
+
+describe('Test TopicDetailsPage component', () => {
+  it('TopicDetailsPage component should render properly', async () => {
+    const { container } = render(<TopicDetailsPageComponent />, {
+      wrapper: MemoryRouter,
+    });
+
+    const topicDetailComponent = await findByText(
+      container,
+      /TopicDetails.component/i
+    );
+
+    expect(topicDetailComponent).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPage.test.tsx

@@ -0,0 +1,34 @@
+import { findByTestId, findByText, render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import UserListPage from './UserListPage';
+
+jest.mock('../../components/containers/PageContainerV1', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: ReactNode }) => (
+      <div data-testid="PageContainerV1">{children}</div>
+    ));
+});
+
+jest.mock('../../components/UserList/UserList', () => {
+  return jest.fn().mockImplementation(() => <div>UserListComponent</div>);
+});
+
+jest.mock('../../axiosAPIs/teamsAPI', () => ({
+  getTeams: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+describe('Test UserListPage component', () => {
+  it('UserListPage component should render properly', async () => {
+    const { container } = render(<UserListPage />, {
+      wrapper: MemoryRouter,
+    });
+
+    const PageContainerV1 = await findByTestId(container, 'PageContainerV1');
+    const UserListComponent = await findByText(container, 'UserListComponent');
+
+    expect(PageContainerV1).toBeInTheDocument();
+    expect(UserListComponent).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/WebhooksPage/WebhooksPage.test.tsx

@@ -0,0 +1,35 @@
+import { findByTestId, findByText, render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import WebhooksPage from './WebhooksPage.component';
+
+jest.mock('../../components/containers/PageContainerV1', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: ReactNode }) => (
+      <div data-testid="PageContainerV1">{children}</div>
+    ));
+});
+
+jest.mock('../../components/Webhooks/Webhooks', () => {
+  return jest.fn().mockImplementation(() => <div>WebhooksComponent</div>);
+});
+
+jest.mock('../../axiosAPIs/webhookAPI', () => ({
+  deleteWebhook: jest.fn(),
+  getWebhooks: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+describe('Test WebhooksPage component', () => {
+  it('WebhooksPage component should render properly', async () => {
+    const { container } = render(<WebhooksPage />, {
+      wrapper: MemoryRouter,
+    });
+
+    const PageContainerV1 = await findByTestId(container, 'PageContainerV1');
+    const WebhooksComponent = await findByText(container, /WebhooksComponent/i);
+
+    expect(PageContainerV1).toBeInTheDocument();
+    expect(WebhooksComponent).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.test.tsx

@@ -0,0 +1,42 @@
+import { findAllByTestId, findByTestId, render } from '@testing-library/react';
+import React, { ReactNode } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { LOGIN_SLIDE } from '../../constants/login.const';
+import LoginCarousel from './LoginCarousel';
+
+jest.mock('react-slick', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: ReactNode }) => (
+      <div data-testid="react-slick">{children}</div>
+    ));
+});
+
+describe('Test LoginCarousel component', () => {
+  it('LoginCarousel component should render properly', async () => {
+    const { container } = render(<LoginCarousel />, {
+      wrapper: MemoryRouter,
+    });
+
+    const reactSlick = await findByTestId(container, 'react-slick');
+    const carouselContainer = await findByTestId(
+      container,
+      'carousel-container'
+    );
+    const sliderContainer = await findAllByTestId(
+      container,
+      'slider-container'
+    );
+    const descriptions = await findAllByTestId(
+      container,
+      'carousel-slide-description'
+    );
+
+    expect(reactSlick).toBeInTheDocument();
+    expect(carouselContainer).toBeInTheDocument();
+    expect(sliderContainer.length).toBe(LOGIN_SLIDE.length);
+    expect(descriptions.map((d) => d.textContent)).toEqual(
+      LOGIN_SLIDE.map((d) => d.description)
+    );
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/login/LoginCarousel.tsx

@@ -21,15 +21,17 @@ import {
 
 const LoginCarousel = () => {
   return (
-    <div style={{ width: '85%' }}>
+    <div data-testid="carousel-container" style={{ width: '85%' }}>
       <Slider {...LOGIN_SLIDER_SETTINGS}>
         {LOGIN_SLIDE.map((data) => (
-          <div key={uniqueId()}>
+          <div data-testid="slider-container" key={uniqueId()}>
             <div>
               <img alt="slider" className="tw-w-full" src={data.image} />
             </div>
             <div className="tw-mt-24 tw-mb-11">
-              <p className="tw-text-center tw-w-5/6 tw-mx-auto tw-font-medium tw-text-white tw-text-xl">
+              <p
+                className="tw-text-center tw-w-5/6 tw-mx-auto tw-font-medium tw-text-white tw-text-xl"
+                data-testid="carousel-slide-description">
                 {data.description}
               </p>
             </div>

openmetadata-ui/src/main/resources/ui/src/pages/tags/Form.test.tsx

@@ -14,8 +14,8 @@ jest.mock('../../components/common/editor/MarkdownWithPreview', () => {
   return jest.fn().mockReturnValue(<div>MarkdownWithPreview component</div>);
 });
 
-describe('Test RolesPage component', () => {
-  it('RolesPage component should render properly', async () => {
+describe('Test TagsPage form component', () => {
+  it('Form component should render properly', async () => {
     const { container } = render(
       <Form initialData={mockInitialData} saveData={mockFunction} />,
       {

openmetadata-ui/src/main/resources/ui/src/pages/teams/Form.test.tsx

@@ -0,0 +1,41 @@
+import { findByTestId, findByText, render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import Form from './Form';
+
+const mockFunction = jest.fn();
+
+jest.mock('../../components/common/editor/MarkdownWithPreview', () => {
+  return jest.fn().mockReturnValue(<div>MarkdownWithPreview component</div>);
+});
+
+describe('Test TeamsPage Form component', () => {
+  it('Form component should render properly', async () => {
+    const { container } = render(
+      <Form
+        initialData={{
+          id: '',
+          name: '',
+          displayName: '',
+          description: '',
+          href: '',
+          users: [],
+          owns: [],
+        }}
+        saveData={mockFunction}
+      />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+
+    const name = await findByTestId(container, 'name');
+    const displayName = await findByTestId(container, 'displayName');
+
+    expect(name).toBeInTheDocument();
+    expect(displayName).toBeInTheDocument();
+    expect(
+      await findByText(container, /MarkdownWithPreview component/i)
+    ).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/teams/Form.tsx

@@ -87,6 +87,7 @@ const Form: React.FC<FormProp> = forwardRef(
               <input
                 autoComplete="off"
                 className="tw-form-inputs tw-px-3 tw-py-1"
+                data-testid="name"
                 name="name"
                 placeholder="Name"
                 type="text"
@@ -102,6 +103,7 @@ const Form: React.FC<FormProp> = forwardRef(
               <input
                 autoComplete="off"
                 className="tw-form-inputs tw-px-3 tw-py-1"
+                data-testid="displayName"
                 name="displayName"
                 placeholder="Display name"
                 type="text"

openmetadata-ui/src/main/resources/ui/src/pages/tour-page/TourPage.test.tsx

@@ -0,0 +1,51 @@
+import { findByText, render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { CurrentTourPageType } from '../../enums/tour.enum';
+import TourPageComponent from './TourPage.component';
+
+jest.mock('../../components/nav-bar/NavBar', () => {
+  return jest.fn().mockReturnValue(<div>NavBarComponent</div>);
+});
+
+jest.mock('../../components/tour/Tour', () => {
+  return jest.fn().mockReturnValue(<div>TourComponent</div>);
+});
+
+jest.mock('../../components/MyData/MyData.component', () => {
+  return jest.fn().mockReturnValue(<div>MyDataComponent</div>);
+});
+
+jest.mock('../../components/MyData/MyData.component', () => {
+  return jest.fn().mockReturnValue(<div>MyDataComponent</div>);
+});
+
+jest.mock('../../components/Explore/Explore.component', () => {
+  return jest.fn().mockReturnValue(<div>ExploreComponent</div>);
+});
+
+jest.mock('../../components/DatasetDetails/DatasetDetails.component', () => {
+  return jest.fn().mockReturnValue(<div>DatasetDetailsComponent</div>);
+});
+
+jest.mock('../../AppState', () => {
+  return jest.fn().mockReturnValue({
+    isTourOpen: false,
+    currentTourPage: CurrentTourPageType.MY_DATA_PAGE,
+    activeTabforTourDatasetPage: 1,
+  });
+});
+
+describe('Test TourPage component', () => {
+  it('TourPage component should render properly', async () => {
+    const { container } = render(<TourPageComponent />, {
+      wrapper: MemoryRouter,
+    });
+
+    const navBar = await findByText(container, /NavBarComponent/i);
+    const TourComponent = await findByText(container, /NavBarComponent/i);
+
+    expect(navBar).toBeInTheDocument();
+    expect(TourComponent).toBeInTheDocument();
+  });
+});