From ac93a3a7ceb30cbb5d6a7341dcab297b95b28dec Mon Sep 17 00:00:00 2001
From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com>
Date: Thu, 24 Mar 2022 01:09:37 +0530
Subject: [PATCH] test #3539: Add unit tests for Glossary (#3621)

* test #3539: Add unit tests for Glossary
---
 .../AddGlossary/AddGlossary.component.tsx     |   4 +-
 .../AddGlossary/AddGlossary.interface.ts      |   6 +-
 .../AddGlossary/AddGlossary.test.tsx          |  93 +++++++++++++
 .../AddGlossaryTerm.component.tsx             |   6 +-
 .../AddGlossaryTerm/AddGlossaryTerm.test.tsx  | 101 ++++++++++++++
 .../src/components/Glossary/Glossary.test.tsx | 127 ++++++++++++++++++
 .../GlossaryDetails.component.tsx             |   4 +-
 .../GlossaryDetails/GlossaryDetails.test.tsx  |  87 ++++++++++++
 .../GlossaryTerms/GlossaryTerms.test.tsx      |  93 +++++++++++++
 .../GlossaryTermsV1.component.tsx             |   4 +-
 .../resources/ui/src/mocks/Glossary.mock.ts   |  85 ++++++++++++
 .../AddGlossary/AddGlossaryPage.test.tsx      |  50 +++++++
 .../AddGlossaryTermPage.component.tsx         |   6 +-
 .../AddGlossaryTermPage.test.tsx              |  58 ++++++++
 .../pages/GlossaryPage/GlossaryPage.test.tsx  |  13 ++
 .../ui/src/router/AuthenticatedAppRouter.tsx  |   2 +-
 16 files changed, 725 insertions(+), 14 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/mocks/Glossary.mock.ts
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.test.tsx
 rename openmetadata-ui/src/main/resources/ui/src/{components => pages}/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx (95%)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.test.tsx

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
index c54988e2e76..05bccd8fd48 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
@@ -148,7 +148,7 @@ const AddGlossary = ({
             className={classNames('tw-w-16 tw-h-10', {
               'tw-opacity-40': !allowAccess,
             })}
-            data-testid="save-webhook"
+            data-testid="save-glossary"
             size="regular"
             theme="primary"
             variant="contained"
@@ -183,7 +183,7 @@ const AddGlossary = ({
       layout={PageLayoutType['2ColRTL']}
       rightPanel={fetchRightPanel()}>
       <h6 className="tw-heading tw-text-base">{header}</h6>
-      <div className="tw-pb-3">
+      <div className="tw-pb-3" data-testid="add-glossary">
         <Field>
           <label className="tw-block tw-form-label" htmlFor="name">
             {requiredField('Name:')}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.interface.ts
index 14b3b48a0f2..0672daa1d64 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.interface.ts
@@ -5,9 +5,9 @@ export interface AddGlossaryProps {
   header: string;
   saveState?: LoadingState;
   allowAccess?: boolean;
-  isTagLoading: boolean;
-  tagList: string[];
+  isTagLoading?: boolean;
+  tagList?: string[];
   onCancel: () => void;
   onSave: (data: CreateGlossary) => void;
-  fetchTags: () => void;
+  fetchTags?: () => void;
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.test.tsx
new file mode 100644
index 00000000000..fc065972a5d
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.test.tsx
@@ -0,0 +1,93 @@
+/*
+ *  Copyright 2021 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, getByTestId, render } from '@testing-library/react';
+import { LoadingState } from 'Models';
+import React from 'react';
+import AddGlossary from './AddGlossary.component';
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../axiosAPIs/glossaryAPI', () => ({
+  addGlossaries: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+const mockOnCancel = jest.fn();
+const mockOnSave = jest.fn();
+
+const mockProps = {
+  header: 'Header',
+  allowAccess: true,
+  saveState: 'initial' as LoadingState,
+  onCancel: mockOnCancel,
+  onSave: mockOnSave,
+};
+
+describe('Test AddGlossary component', () => {
+  it('AddGlossary component should render', () => {
+    const { container } = render(<AddGlossary {...mockProps} />);
+
+    const addGlossaryForm = getByTestId(container, 'add-glossary');
+
+    expect(addGlossaryForm).toBeInTheDocument();
+  });
+
+  it('should be able to cancel', () => {
+    const { container } = render(<AddGlossary {...mockProps} />);
+
+    const cancelButton = getByTestId(container, 'cancel-glossary');
+
+    expect(cancelButton).toBeInTheDocument();
+
+    fireEvent.click(
+      cancelButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(mockOnCancel).toBeCalled();
+  });
+
+  it('should be able to save', () => {
+    const { container } = render(<AddGlossary {...mockProps} />);
+
+    const nameInput = getByTestId(container, 'name');
+    const saveButton = getByTestId(container, 'save-glossary');
+
+    expect(saveButton).toBeInTheDocument();
+
+    fireEvent.change(nameInput, { target: { value: 'Test Glossary' } });
+
+    fireEvent.click(
+      saveButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(mockOnSave).toBeCalled();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx
index 1674c571dae..84270f57e45 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx
@@ -260,7 +260,7 @@ const AddGlossaryTerm = ({
             className={classNames('tw-w-16 tw-h-10', {
               'tw-opacity-40': !allowAccess,
             })}
-            data-testid="save-webhook"
+            data-testid="save-glossary-term"
             size="regular"
             theme="primary"
             variant="contained"
@@ -295,7 +295,7 @@ const AddGlossaryTerm = ({
       layout={PageLayoutType['2ColRTL']}
       rightPanel={fetchRightPanel()}>
       <h6 className="tw-heading tw-text-base">Add Glossary Term</h6>
-      <div className="tw-pb-3">
+      <div className="tw-pb-3" data-testid="add-glossary-term">
         <Field>
           <label className="tw-block tw-form-label" htmlFor="name">
             {requiredField('Name:')}
@@ -475,7 +475,7 @@ const AddGlossaryTerm = ({
 
         <Field className="tw-flex tw-justify-end">
           <Button
-            data-testid="cancel-glossary"
+            data-testid="cancel-glossary-term"
             size="regular"
             theme="primary"
             variant="text"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.test.tsx
new file mode 100644
index 00000000000..de668ccbc9a
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.test.tsx
@@ -0,0 +1,101 @@
+/*
+ *  Copyright 2021 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, getByTestId, render } from '@testing-library/react';
+import { LoadingState } from 'Models';
+import React from 'react';
+import {
+  mockedGlossaries,
+  mockedGlossaryTerms,
+} from '../../mocks/Glossary.mock';
+import AddGlossaryTerm from './AddGlossaryTerm.component';
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../axiosAPIs/glossaryAPI', () => ({
+  addGlossaries: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+const mockOnCancel = jest.fn();
+const mockOnSave = jest.fn();
+
+const mockProps = {
+  allowAccess: true,
+  glossaryData: mockedGlossaries[0],
+  parentGlossaryData: mockedGlossaryTerms[0],
+  saveState: 'initial' as LoadingState,
+  onCancel: mockOnCancel,
+  onSave: mockOnSave,
+};
+
+describe('Test AddGlossaryTerm component', () => {
+  it('AddGlossaryTerm component should render', async () => {
+    const { container } = render(<AddGlossaryTerm {...mockProps} />);
+
+    const addGlossaryTermForm = await getByTestId(
+      container,
+      'add-glossary-term'
+    );
+
+    expect(addGlossaryTermForm).toBeInTheDocument();
+  });
+
+  it('should be able to cancel', () => {
+    const { container } = render(<AddGlossaryTerm {...mockProps} />);
+
+    const cancelButton = getByTestId(container, 'cancel-glossary-term');
+
+    expect(cancelButton).toBeInTheDocument();
+
+    fireEvent.click(
+      cancelButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(mockOnCancel).toBeCalled();
+  });
+
+  it('should be able to save', () => {
+    const { container } = render(<AddGlossaryTerm {...mockProps} />);
+
+    const nameInput = getByTestId(container, 'name');
+    const saveButton = getByTestId(container, 'save-glossary-term');
+
+    expect(saveButton).toBeInTheDocument();
+
+    fireEvent.change(nameInput, { target: { value: 'Test Glossary Term' } });
+
+    fireEvent.click(
+      saveButton,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+
+    expect(mockOnSave).toBeCalled();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx
new file mode 100644
index 00000000000..3f2f10d81e1
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx
@@ -0,0 +1,127 @@
+/*
+ *  Copyright 2021 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 {
+  findByText,
+  getByTestId,
+  queryByText,
+  render,
+} from '@testing-library/react';
+import { LoadingState } from 'Models';
+import React from 'react';
+import { mockedAssetData, mockedGlossaries } from '../../mocks/Glossary.mock';
+import GlossaryV1 from './GlossaryV1.component';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+  useParams: jest.fn().mockReturnValue({
+    glossaryName: 'GlossaryName',
+  }),
+}));
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../components/GlossaryDetails/GlossaryDetails.component', () => {
+  return jest.fn().mockReturnValue(<>Glossary-Details component</>);
+});
+
+jest.mock('../../components/GlossaryTerms/GlossaryTermsV1.component', () => {
+  return jest.fn().mockReturnValue(<>Glossary-Term component</>);
+});
+
+const mockProps = {
+  assetData: mockedAssetData,
+  deleteStatus: 'initial' as LoadingState,
+  isSearchResultEmpty: false,
+  isHasAccess: true,
+  glossaryList: mockedGlossaries,
+  selectedKey: 'Mock Glossary',
+  expandedKey: ['Mock Glossary'],
+  loadingKey: [],
+  handleExpandedKey: jest.fn(),
+  searchText: '',
+  selectedData: mockedGlossaries[0],
+  isGlossaryActive: true,
+  isChildLoading: false,
+  handleSelectedData: jest.fn(),
+  handleAddGlossaryClick: jest.fn(),
+  handleAddGlossaryTermClick: jest.fn(),
+  handleGlossaryTermUpdate: jest.fn(),
+  updateGlossary: jest.fn(),
+  handleChildLoading: jest.fn(),
+  handleSearchText: jest.fn(),
+  onGlossaryDelete: jest.fn(),
+  onGlossaryTermDelete: jest.fn(),
+  onAssetPaginate: jest.fn(),
+  onRelatedTermClick: jest.fn(),
+};
+
+describe('Test Glossary component', () => {
+  it('Should render Glossary header', () => {
+    const { container } = render(<GlossaryV1 {...mockProps} />);
+
+    const header = getByTestId(container, 'header');
+
+    expect(header).toBeInTheDocument();
+  });
+
+  it('Should render Glossary-details', async () => {
+    const { container } = render(<GlossaryV1 {...mockProps} />);
+
+    const glossaryDetails = await findByText(
+      container,
+      /Glossary-Details component/i
+    );
+
+    const glossaryTerm = await queryByText(
+      container,
+      /Glossary-Term component/i
+    );
+
+    expect(glossaryDetails).toBeInTheDocument();
+    expect(glossaryTerm).not.toBeInTheDocument();
+  });
+
+  it('Should render Glossary-term', async () => {
+    const { container } = render(
+      <GlossaryV1
+        {...mockProps}
+        isGlossaryActive={false}
+        selectedData={mockedGlossaries[0].children[0]}
+      />
+    );
+
+    const glossaryTerm = await findByText(
+      container,
+      /Glossary-Term component/i
+    );
+
+    const glossaryDetails = await queryByText(
+      container,
+      /Glossary-Details component/i
+    );
+
+    expect(glossaryTerm).toBeInTheDocument();
+    expect(glossaryDetails).not.toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
index 9094ec4ba79..1ed6193b38c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.component.tsx
@@ -228,7 +228,9 @@ const GlossaryDetails = ({ isHasAccess, glossary, updateGlossary }: props) => {
   };
 
   return (
-    <div className="tw-w-full tw-h-full tw-flex tw-flex-col">
+    <div
+      className="tw-w-full tw-h-full tw-flex tw-flex-col"
+      data-testid="glossary-details">
       <div className="tw-mb-3 tw-flex tw-items-center">
         {(glossary.owner?.displayName || glossary.owner?.name) && (
           <div className="tw-inline-block tw-mr-2">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx
new file mode 100644
index 00000000000..d6ba78d6130
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryDetails/GlossaryDetails.test.tsx
@@ -0,0 +1,87 @@
+/*
+ *  Copyright 2021 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 { findByText, getByTestId, render } from '@testing-library/react';
+import React from 'react';
+import { mockedGlossaries } from '../../mocks/Glossary.mock';
+import GlossaryDetails from './GlossaryDetails.component';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+  useParams: jest.fn().mockReturnValue({
+    glossaryName: 'GlossaryName',
+  }),
+}));
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../components/tags-container/tags-container', () => {
+  return jest.fn().mockReturnValue(<>Tags-container component</>);
+});
+
+jest.mock('../../components/common/description/Description', () => {
+  return jest.fn().mockReturnValue(<>Description component</>);
+});
+
+jest.mock('../../components/common/non-admin-action/NonAdminAction', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: React.ReactNode }) => (
+      <>{children}</>
+    ));
+});
+
+const mockProps = {
+  glossary: mockedGlossaries[0],
+  isHasAccess: true,
+  updateGlossary: jest.fn(),
+};
+
+describe('Test Glossary-details component', () => {
+  it('Should render Glossary-details component', () => {
+    const { container } = render(<GlossaryDetails {...mockProps} />);
+
+    const glossaryDetails = getByTestId(container, 'glossary-details');
+
+    expect(glossaryDetails).toBeInTheDocument();
+  });
+
+  it('Should render Tags-container', async () => {
+    const { container } = render(<GlossaryDetails {...mockProps} />);
+
+    const tagsContainer = await findByText(
+      container,
+      /Tags-container component/i
+    );
+
+    expect(tagsContainer).toBeInTheDocument();
+  });
+
+  it('Should render Description', async () => {
+    const { container } = render(<GlossaryDetails {...mockProps} />);
+
+    const description = await findByText(container, /Description component/i);
+
+    expect(description).toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx
new file mode 100644
index 00000000000..04f22b33b47
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTerms.test.tsx
@@ -0,0 +1,93 @@
+/*
+ *  Copyright 2021 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 { findByText, getByTestId, render } from '@testing-library/react';
+import React from 'react';
+import {
+  mockedAssetData,
+  mockedGlossaryTerms,
+} from '../../mocks/Glossary.mock';
+import GlossaryTerms from './GlossaryTermsV1.component';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+  useParams: jest.fn().mockReturnValue({
+    glossaryName: 'GlossaryName',
+  }),
+}));
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../components/tags-container/tags-container', () => {
+  return jest.fn().mockReturnValue(<>Tags-container component</>);
+});
+
+jest.mock('../../components/common/description/Description', () => {
+  return jest.fn().mockReturnValue(<>Description component</>);
+});
+
+jest.mock('../../components/common/non-admin-action/NonAdminAction', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }: { children: React.ReactNode }) => (
+      <>{children}</>
+    ));
+});
+
+const mockProps = {
+  assetData: mockedAssetData,
+  isHasAccess: true,
+  glossaryTerm: mockedGlossaryTerms[0],
+  handleGlossaryTermUpdate: jest.fn(),
+  onAssetPaginate: jest.fn(),
+  onRelatedTermClick: jest.fn(),
+};
+
+describe('Test Glossary-term component', () => {
+  it('Should render Glossary-term component', () => {
+    const { container } = render(<GlossaryTerms {...mockProps} />);
+
+    const glossaryTerm = getByTestId(container, 'glossary-term');
+
+    expect(glossaryTerm).toBeInTheDocument();
+  });
+
+  it('Should render Tags-container', async () => {
+    const { container } = render(<GlossaryTerms {...mockProps} />);
+
+    const tagsContainer = await findByText(
+      container,
+      /Tags-container component/i
+    );
+
+    expect(tagsContainer).toBeInTheDocument();
+  });
+
+  it('Should render Description', async () => {
+    const { container } = render(<GlossaryTerms {...mockProps} />);
+
+    const description = await findByText(container, /Description component/i);
+
+    expect(description).toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
index a65da3e052c..a3d75d9b9cc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
@@ -372,7 +372,9 @@ const GlossaryTermsV1 = ({
   };
 
   return (
-    <div className="tw-w-full tw-h-full tw-flex tw-flex-col">
+    <div
+      className="tw-w-full tw-h-full tw-flex tw-flex-col"
+      data-testid="glossary-term">
       <div className="tw-flex tw-gap-5 tw-mb-2">
         <div className="tw-font-medium">Synonyms</div>
         <div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/mocks/Glossary.mock.ts b/openmetadata-ui/src/main/resources/ui/src/mocks/Glossary.mock.ts
new file mode 100644
index 00000000000..3176a2178a0
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/mocks/Glossary.mock.ts
@@ -0,0 +1,85 @@
+/*
+ *  Copyright 2021 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 { Status } from '../generated/entity/data/glossaryTerm';
+
+export const mockedAssetData = {
+  currPage: 1,
+  data: [],
+  total: 0,
+};
+
+export const mockedGlossaryTerms = [
+  {
+    id: 'a5a97523-2229-41e5-abbe-65f61a534c34',
+    name: 'Clothing',
+    displayName: 'Clothing',
+    description: '',
+    fullyQualifiedName: 'Business Glossary.Clothing',
+    synonyms: [],
+    glossary: {
+      id: 'mocked-glossary-id',
+      type: 'glossary',
+      name: 'Mock Glossary',
+      description: '',
+      displayName: 'Mock Glossary',
+      deleted: false,
+    },
+    children: [],
+    relatedTerms: [],
+    references: [],
+    version: 1.3,
+    updatedAt: 1647931273177,
+    updatedBy: 'anonymous',
+    reviewers: [
+      {
+        deleted: false,
+        displayName: 'Mocked User',
+        id: 'mocked-user-id',
+        name: 'mocked_user',
+        type: 'user',
+      },
+    ],
+    tags: [],
+    changeDescription: {
+      fieldsAdded: [],
+      fieldsUpdated: [],
+      fieldsDeleted: [],
+      previousVersion: 1,
+    },
+    status: 'Draft' as Status,
+    deleted: false,
+  },
+];
+
+export const mockedGlossaries = [
+  {
+    children: mockedGlossaryTerms,
+    deleted: false,
+    displayName: 'Mocked Glossary',
+    id: 'mocked-glossary-id',
+    name: 'Mock Glossary',
+    owner: {
+      deleted: false,
+      displayName: 'Mocked User',
+      id: 'mocked-user-id',
+      name: 'mocked_user',
+      type: 'user',
+    },
+    reviewers: [],
+    tags: [],
+    updatedAt: 1234567890,
+    updatedBy: 'mocked_user',
+    version: 0.1,
+  },
+];
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.test.tsx
new file mode 100644
index 00000000000..aea5d5f1924
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossary/AddGlossaryPage.test.tsx
@@ -0,0 +1,50 @@
+/*
+ *  Copyright 2021 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 { findByText, render } from '@testing-library/react';
+import React from 'react';
+import AddGlossaryPage from './AddGlossaryPage.component';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+}));
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../components/AddGlossary/AddGlossary.component', () => {
+  return jest.fn().mockReturnValue(<div>AddGlossary.component</div>);
+});
+
+jest.mock('../../axiosAPIs/glossaryAPI', () => ({
+  addGlossaries: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+describe('Test AddGlossary component page', () => {
+  it('AddGlossary component page should render', async () => {
+    const { container } = render(<AddGlossaryPage />);
+
+    const addGlossary = await findByText(container, /AddGlossary.component/i);
+
+    expect(addGlossary).toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
similarity index 95%
rename from openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
rename to openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
index 7cf1299b21a..4ead0be73f3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.component.tsx
@@ -21,6 +21,9 @@ import {
   getGlossariesByName,
   getGlossaryTermByFQN,
 } from '../../axiosAPIs/glossaryAPI';
+import AddGlossaryTerm from '../../components/AddGlossaryTerm/AddGlossaryTerm.component';
+import PageContainerV1 from '../../components/containers/PageContainerV1';
+import Loader from '../../components/Loader/Loader';
 import { getGlossaryPath } from '../../constants/constants';
 import { CreateGlossaryTerm } from '../../generated/api/data/createGlossaryTerm';
 import { Glossary } from '../../generated/entity/data/glossary';
@@ -28,9 +31,6 @@ import { GlossaryTerm } from '../../generated/entity/data/glossaryTerm';
 import { useAuth } from '../../hooks/authHooks';
 import useToastContext from '../../hooks/useToastContext';
 import jsonData from '../../jsons/en';
-import AddGlossaryTerm from '../AddGlossaryTerm/AddGlossaryTerm.component';
-import PageContainerV1 from '../containers/PageContainerV1';
-import Loader from '../Loader/Loader';
 
 const AddGlossaryTermPage = () => {
   const { glossaryName, glossaryTermsFQN } =
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.test.tsx
new file mode 100644
index 00000000000..94195ebc009
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddGlossaryTermPage/AddGlossaryTermPage.test.tsx
@@ -0,0 +1,58 @@
+/*
+ *  Copyright 2021 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 { findByText, render } from '@testing-library/react';
+import React from 'react';
+import AddGlossaryTermPage from './AddGlossaryTermPage.component';
+
+jest.mock('react-router-dom', () => ({
+  useHistory: jest.fn(),
+  useParams: jest.fn().mockReturnValue({
+    glossaryName: 'GlossaryName',
+  }),
+}));
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+jest.mock('../../components/AddGlossaryTerm/AddGlossaryTerm.component', () => {
+  return jest.fn().mockReturnValue(<div>AddGlossaryTerm.component</div>);
+});
+
+jest.mock('../../axiosAPIs/glossaryAPI', () => ({
+  addGlossaryTerm: jest.fn().mockImplementation(() => Promise.resolve()),
+  getGlossariesByName: jest.fn().mockImplementation(() => Promise.resolve()),
+  getGlossaryTermByFQN: jest.fn().mockImplementation(() => Promise.resolve()),
+}));
+
+describe('Test AddGlossaryTerm component page', () => {
+  it('AddGlossaryTerm component page should render', async () => {
+    const { container } = render(<AddGlossaryTermPage />);
+
+    const addGlossaryTerm = await findByText(
+      container,
+      /AddGlossaryTerm.component/i
+    );
+
+    expect(addGlossaryTerm).toBeInTheDocument();
+  });
+});
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPage.test.tsx
index f7b311addb4..82ef86c143f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPage.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/GlossaryPage/GlossaryPage.test.tsx
@@ -1,3 +1,16 @@
+/*
+ *  Copyright 2021 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 { findByText, render } from '@testing-library/react';
 import React from 'react';
 import GlossaryPageV1 from './GlossaryPageV1.component';
diff --git a/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
index 6b74f4b41bf..68224642075 100644
--- a/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
@@ -16,10 +16,10 @@ import React, { FunctionComponent } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import AppState from '../AppState';
 import { useAuthContext } from '../auth-provider/AuthProvider';
-import AddGlossaryTermPage from '../components/AddGlossaryTermPage/AddGlossaryTermPage.component';
 import { ROUTES } from '../constants/constants';
 import { useAuth } from '../hooks/authHooks';
 import AddGlossaryPage from '../pages/AddGlossary/AddGlossaryPage.component';
+import AddGlossaryTermPage from '../pages/AddGlossaryTermPage/AddGlossaryTermPage.component';
 import AddWebhookPage from '../pages/AddWebhookPage/AddWebhookPage.component';
 import CreateUserPage from '../pages/CreateUserPage/CreateUserPage.component';
 import DashboardDetailsPage from '../pages/DashboardDetailsPage/DashboardDetailsPage.component';