diff --git a/src/components/App/SideBar/Relevance/__tests__/index.tsx b/src/components/App/SideBar/Relevance/__tests__/index.tsx
new file mode 100644
index 000000000..b0e091dd9
--- /dev/null
+++ b/src/components/App/SideBar/Relevance/__tests__/index.tsx
@@ -0,0 +1,124 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import React from 'react'
+import { Relevance } from '..'
+import { useAppStore } from '../../../../../stores/useAppStore'
+import { useDataStore, useFilteredNodes } from '../../../../../stores/useDataStore'
+
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation((query) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+})
+
+jest.mock('react', () => ({
+ ...jest.requireActual('react'),
+ useRef: jest.fn(() => ({ current: { scrollTo: jest.fn() } })),
+}))
+
+jest.mock('@mui/material', () => ({
+ ...jest.requireActual('@mui/material'),
+ // eslint-disable-next-line react/button-has-type
+ Button: jest.fn(({ children, onClick }) => ),
+}))
+
+jest.mock('~/stores/useDataStore', () => ({
+ useDataStore: jest.fn(),
+ useFilteredNodes: jest.fn(),
+}))
+
+jest.mock('~/stores/useAppStore', () => ({
+ useAppStore: jest.fn(),
+}))
+
+const mockedUseDataStore = useDataStore as jest.MockedFunction
+const mockedUseAppStore = useAppStore as jest.MockedFunction
+
+const mockedUseFilterNodes = useFilteredNodes as jest.MockedFunction
+
+describe('test Relevance Component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks()
+
+ mockedUseAppStore.mockImplementation(() => [
+ jest.fn().mockImplementation((selcetedNode) => selcetedNode),
+ jest.fn().mockImplementation((timeStamp) => timeStamp),
+ ])
+
+ mockedUseDataStore.mockImplementation(() => [false, jest.fn().mockImplementation((relevance) => relevance)])
+ })
+
+ it('asserts that loadMore button is hidden when is filteredNodes is empty', () => {
+ mockedUseFilterNodes.mockReturnValue([])
+
+ const { getByText } = render()
+
+ expect(() => getByText('Load More')).toThrow() // error is throw since load more button is not found
+ })
+
+ it('asserts that pagination button is displayed only when required', () => {
+ mockedUseFilterNodes.mockReturnValue(new Array(59).fill(mockedFilterNodes).flat())
+
+ const { getByText } = render()
+
+ expect(getByText('Load More')).toBeInTheDocument()
+ })
+
+ it('asserts that 10 nodes are initial rendered', () => {
+ const { container } = render()
+
+ expect(container.querySelectorAll('.episode-wrapper').length).toBe(10)
+ })
+
+ it('asserts that pagination functions properly', () => {
+ mockedUseFilterNodes.mockReturnValue(new Array(20).fill(mockedFilterNodes).flat())
+
+ const { getByText, container } = render()
+
+ expect(container.querySelectorAll('.episode-wrapper').length).toBe(10)
+
+ expect(getByText('Load More')).toBeInTheDocument()
+
+ fireEvent.click(getByText('Load More'))
+
+ ;(async () => {
+ await waitFor(() => {
+ expect(container.querySelectorAll('.episode-wrapper').length).toBe(20)
+ expect(getByText('Load More')).not.toBeInTheDocument()
+ })
+ })()
+ })
+})
+
+export const mockedFilterNodes = [
+ {
+ x: 0,
+ y: 0,
+ z: 0,
+ label: '',
+ id: '1',
+ date: 1707448321,
+ name: 'Olaoluwa Osuntokun',
+ node_type: 'tweet',
+ posted_by: {
+ name: 'Olaoluwa Osuntokun',
+ ref_id: 'bade588f-b241-4408-bef4-936ba6197518',
+ twitter_handle: 'roasbeef',
+ },
+ profile_picture: 'https://pbs.twimg.com/profile_images/862769307847086080/NjfDzNYu_normal.jpg',
+ ref_id: '72df6eb2-d82e-4791-b83e-815032b9642d',
+ text: '@Ethan_Heilman hehe in case it wasn\'t clear, I meant that: ascribing rarity to sats is totally arbitrary, casey literally "made it up"\n\nevery sat is rare, and there are no rare sats\n\n¯\\_(ツ)_/¯',
+ topics: ['Rarity', 'Arbitrariness', 'Sats'],
+ tweet_id: '1755791635122938240',
+ twitter_handle: 'roasbeef',
+ verified: false,
+ },
+]
diff --git a/src/components/App/SideBar/Relevance/index.tsx b/src/components/App/SideBar/Relevance/index.tsx
index fb66b52b9..f1e720ea4 100644
--- a/src/components/App/SideBar/Relevance/index.tsx
+++ b/src/components/App/SideBar/Relevance/index.tsx
@@ -96,18 +96,18 @@ const _Relevance = ({ isSearchResult }: Props) => {
})}
-
+ {hasNext && (
+
+ )}
>