From e06242e19b562c6157df19b0483ac1e65d7e1461 Mon Sep 17 00:00:00 2001
From: kevkevin <oapallikunnel@gmail.com>
Date: Tue, 19 Dec 2023 23:38:24 -0600
Subject: [PATCH] feat: added component tests for leaderboardItem and Button

---
 frontend/app/jest.config.json                 |  2 +-
 .../app/src/components/common/Button.spec.tsx | 39 +++++++++++++++++++
 .../leaderboardItem/LeaerboardItem.spec.tsx   | 39 +++++++++++++++++++
 .../src/leaderboard/leaderboardItem/index.tsx | 12 +++---
 .../app/src/leaderboard/userInfo/index.tsx    |  8 ++--
 5 files changed, 89 insertions(+), 11 deletions(-)
 create mode 100644 frontend/app/src/components/common/Button.spec.tsx
 create mode 100644 frontend/app/src/leaderboard/leaderboardItem/LeaerboardItem.spec.tsx

diff --git a/frontend/app/jest.config.json b/frontend/app/jest.config.json
index 00e95cdcc..dab767644 100644
--- a/frontend/app/jest.config.json
+++ b/frontend/app/jest.config.json
@@ -27,7 +27,7 @@
       "lines": 0
     },
     "./src/leaderboard/": {
-      "lines": 16
+      "lines": 46
     },
     "./src/pages/": {
       "lines": 0
diff --git a/frontend/app/src/components/common/Button.spec.tsx b/frontend/app/src/components/common/Button.spec.tsx
new file mode 100644
index 000000000..3375a42a4
--- /dev/null
+++ b/frontend/app/src/components/common/Button.spec.tsx
@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import nock from 'nock';
+import React from 'react';
+import { setupStore } from '../../__test__/__mockData__/setupStore';
+import { user } from '../../__test__/__mockData__/user';
+import { mockUsehistory } from '../../__test__/__mockFn__/useHistory';
+import Button from './Button';
+
+beforeAll(() => {
+  nock.disableNetConnect();
+  setupStore();
+  mockUsehistory();
+});
+
+/**
+ * @jest-environment jsdom
+ */
+describe('Button Component', () => {
+  nock(user.url).get('/person/id/1').reply(200, {});
+  test('display text and click button', async () => {
+    const queryByTextValue = "queryByText"
+    const mockOnClick = jest.fn()
+
+    render(<Button id={"1"} icon={""} height={10} width={10} disabled={false} color={"green"} leadingIcon={""} text={queryByTextValue} onClick={mockOnClick}/>);
+
+    //Expect text to be there
+    expect(screen.queryByText(queryByTextValue)).toBeInTheDocument();
+    
+    await userEvent.click(
+      screen.getByText(queryByTextValue),
+    )
+
+    //If we click on text it should register click
+    expect(mockOnClick).toHaveBeenCalledTimes(1)
+  });
+});
+
diff --git a/frontend/app/src/leaderboard/leaderboardItem/LeaerboardItem.spec.tsx b/frontend/app/src/leaderboard/leaderboardItem/LeaerboardItem.spec.tsx
new file mode 100644
index 000000000..eec493aad
--- /dev/null
+++ b/frontend/app/src/leaderboard/leaderboardItem/LeaerboardItem.spec.tsx
@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import nock from 'nock';
+import React from 'react';
+import { setupStore } from '../../__test__/__mockData__/setupStore';
+import { user } from '../../__test__/__mockData__/user';
+import { mockUsehistory } from '../../__test__/__mockFn__/useHistory';
+import { LeaerboardItem } from './index';
+
+beforeAll(() => {
+  nock.disableNetConnect();
+  setupStore();
+  mockUsehistory();
+});
+
+/**
+ * @jest-environment jsdom
+ */
+describe('LeaerboardItem Component', () => {
+  const owner_pubkey = "123456789"
+  nock(user.url).get(`/person/id/1`).reply(200, {});
+  nock(user.url).get(`/person/${owner_pubkey}`).reply(200, {});
+  test('display leaderboard item with correct info', async () => {
+    const mockOnClick = jest.fn()
+    const convertedDollarAmount = "1 000"
+    const props = { owner_pubkey: owner_pubkey, total_sats_earned: 1000, position: 1, total_bounties_completed: 1 }
+
+    const leaderboardItemRender = render(<LeaerboardItem key={0} {...props} />);
+
+    //Expect converted dollar amount to be there
+    expect(screen.queryByText(convertedDollarAmount)).toBeInTheDocument();
+    expect(screen.queryByText("SAT")).toBeInTheDocument();
+    expect(screen.queryByText(`#${props.position}`)).toBeInTheDocument();
+    //expect(screen.queryByText(owner_pubkey)).toBeInTheDocument();
+  });
+});
+
+
diff --git a/frontend/app/src/leaderboard/leaderboardItem/index.tsx b/frontend/app/src/leaderboard/leaderboardItem/index.tsx
index f512d087f..3b5431458 100644
--- a/frontend/app/src/leaderboard/leaderboardItem/index.tsx
+++ b/frontend/app/src/leaderboard/leaderboardItem/index.tsx
@@ -1,12 +1,12 @@
 import { EuiText } from '@elastic/eui';
-import { PriceOuterContainer } from 'components/common';
-import { colors } from 'config';
-import { DollarConverter } from 'helpers';
-import { UserInfo } from 'leaderboard/userInfo';
-import { LeaderItem } from 'leaderboard/store';
-
 import React from 'react';
 import styled from 'styled-components';
+import { PriceOuterContainer } from '../../components/common';
+import { colors } from '../../config';
+import { DollarConverter } from '../../helpers';
+import { UserInfo } from '../userInfo';
+import { LeaderItem } from '../store';
+
 
 const ItemContainer = styled.div`
   --position-gutter: 3rem;
diff --git a/frontend/app/src/leaderboard/userInfo/index.tsx b/frontend/app/src/leaderboard/userInfo/index.tsx
index 52cde3a96..5dbb600ce 100644
--- a/frontend/app/src/leaderboard/userInfo/index.tsx
+++ b/frontend/app/src/leaderboard/userInfo/index.tsx
@@ -1,13 +1,13 @@
 import { EuiAvatar, EuiText } from '@elastic/eui';
 import MaterialIcon from '@material/react-material-icon';
-import { colors } from 'config';
 import { observer } from 'mobx-react-lite';
-import ConnectCard from 'people/utils/ConnectCard';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useStores } from 'store';
-import { Person } from 'store/main';
 import styled from 'styled-components';
+import { colors } from '../../config';
+import ConnectCard from '../../people/utils/ConnectCard';
+import { useStores } from '../../store';
+import { Person } from '../../store/main';
 const UserItemContainer = styled.div`
   display: flex;
   gap: 1rem;